FMP – New Software Skills: Sketchapp

The reason I originally chose to design an app for my final major piece, was to explore a new discipline that’s boomed in recent years. Apps are a great way to target audiences with the revolution of smart phones. Everyone has access to app that all provide a service to the consumer.

With starting a new job in web-design, the company have also been looking to venture into the apps market, designing bespoke apps that can be easily changed to represent a brand. I’ve talked for weeks in preparation with my mentors at both work and college, and decided to use Sketchapp to design screens for my app. I’ve watch loads of tutorials online to understand the advantages of using Sketchapp Vs Photoshop.

One thing that bugs me about photoshop is the inability to make changes to a style globally. For example, if I had a purple button style but wanted to change the colour, I’d have to make the change on every single layer. Sketch encourages the use of symbols, that give the user the ability to quickly change button styles globally, thus speeding up workflow, which is paramount for this project as I’ve taken on quite a lot of work.

Although my initial sketches show a rough user journey, this journey changed dramatically whilst designing in sketch. Once I could see the refined design in front of me, I could see where I could change it to make it more dynamic and engaging for the end user.

I’m not going to say Sketch has been easy to learn, but I’ve been persistent and fallen asleep watching the tutorials every night to get the best out of it. The other feature that’s come in hand is the ability to export individual elements as well as artboards, at whatever size and file type I want. by choosing “1x” or “2x” I can choose the resolution, whether Im designing for a retina display or not, that has two times the pixels.

FMP Interim Crit

As like most other projects we’ve had in the past, crits are an important part of our design process. It gives us the opportunity to test our designs and gauge our audiences emotional response. Traditionally, these interim crits consist of 20 slides at 20 seconds, however, I wanted to break the convention and present slightly differently to what I’m used to.

I’ve worked hard to develop my presentation skills. I used to just write everything I wanted to say word for word in my notebook. However, now I have more confidence in my work and understand why I’ve made specific design choices, so I’m able to talk about my ideas with more conviction and authority, controlling my clients reaction.

This was by no means the finished piece, but there were certain things I wasn’t happy about, for example, the button styles. I’ve used a gradient throughout my design, but I think it clashes with the colours from the background overlay. I asked the opinions of the class, and they had some really good suggestions which I will try in the next phase of my design process.

This project isn’t a branding project, but I did however want to give my product identity, in keeping with the values and ethos that I wish to create. This lead me to consider my target audience. Taking inspiration from a former student, Jacob Smith, who was in the year above me. He created a custom motorcycle book, with really strong brand identity through hand rendered typography. To best show off my work, I carefully selected some layered psd’s from mockup world. This allows me to show the logo in real life context, showing the client how it could look on stationary etc.

I wanted the client to know that I’ve thought about the audiences i’d be targeting, and also what inspired me to design the screens the way I have.

Consistency and spacing is something that I’ve struggled with in previous projects, but I’m aware of these issues, and trying hard to be consistent across every screen. This increases the strength of the brand, whilst also making sure all the information is clear and easy to understand.

 

Lightmaker Bomb Project: Creative Rational

I wanted to make sure my client fully understood every point I made during the presentation. So with this in mind, I wrote a short creative rational that the client can take away with them. This also help distill my design choices in my mind, understanding why i’d chosen to design the way I did.

Lightmaker Bomb Project: Final Design

I created the site with fullpage.js in mind, something that i’d been shown at work and have identified in other sites. I think it could be a good way to compartmentalise each section and create a hierarchy of information. I wanted the user to have the flexibility of scrolling, or choosing the specific section from the sticky navigation at the top of the page.

The user is first met by an aspirational image of a driver, with a small amount of text introducing the brand and what they are all about. There is a small call to action below the text inviting the user to read more about the story. They’re also able to click the logo to reveal the about drop down.

I felt it was important to tell the stories of each driver, but I wanted the user to be able to choose which driver they want to scrutinise and find out more information. Invictus has two teams, so I wanted to distinguish them by adding a slider to toggle between the two teams drivers. As you can see, the number of the team has a distorted effect added to it. This was a design choice to encourage the notion of speed, inspired from the Nike Logo story, and the British GT program I found.

The car has been heavily modified to suit the needs of the rehabilitated drivers, which creates a USP for the brand. This is another thing that separates the Invictus brand from the rest of the teams in the GT Championships. I want the user to be fully immersed in the car, giving them up close and personal experience of the car, highlighting key aspects using buttons that reveal overlays that gives specific detail and more information. The user is again able to toggle between the interior and exterior of the car. Inside the car i’m proposing having a a VR experience, where the user is able to tour the inside of the car with their VR headset, again fully immersing them in the car.

Invictus Racing will be competing all over the country, and be in the public eye a lot. The brand has quite a big social presence, and this could be a good way of generating new content to the site. I designed some overlays to anchor the brand further, again using the “cut” design feature that runs consistently throughout the design.

I wanted to give the fans of the team and sport exclusive access to content that regular users don’t have. The user is asked to signup or register for full access to exclusive content, which is a great data capture tool for the brand, where they could use this information to target users with promotional material.

Finally, sponsors inject a lot of money into the team, and they want to make sure they have a presence of the site, as they are partnered with the brand. I wanted this section to appear tasteful, sophisticated, but continuing with the brands ethos.

Conclusion

I feel like i’ve learnt a lot this week. Even though in theory we had a week to complete the project, I have other work commitments during the week, so really I only had 3 days to complete the project in its entirety. I was aware of this tight deadline and tried to work efficiently in photoshop from the start, structuring the PSD in a professional manner. I did this so if it was a live project, and another designer needed to work on my PSD, they may be confused if they layers aren’t structured in folders. It also makes my workflow much faster. When you compare this project to the piece I created last year, World of Tanks, the difference is staggering. My eye has been trained to see finer details such a spacing, line height, and the impact of the imagery i’m using. I have made mistakes throughout the design process, but i’ve been able to take a step back and identify them quickly and rectify them. Overall, i’m happy with my final outcome, but i’m most proud of the way I presented. I’ve worked hard with colleagues at work about being confident in my own ability and what I design. If I don’t buy into what i’ve created, then how is the client? I was able to talk with conviction and confidence about my design, not putting myself down, and presenting my ideas in an enthusiastic and energetic way.

 

Lightmaker Bomb Project: User Flow

I’m new to this process, having only done user flow diagrams once previously. However, I can see how it helps not only myself as the designer, but the client the users journey through the site. It shows that I have thought about each target demographics needs, considering what they might want to see from the site.

I identified three key users of the site:

• Service men & women
• Disabled people
• Sponsors

Conclusion

This has certainly been time well spent. Identifying the 3 key user groups enabled me to plan the site to meet their specific requirements. I’m now able to demonstrate to the client how each user could navigate through the site in a quick and efficient manner.

 

Lightmaker Bomb Project – Inspiration

As i’ve learnt from work, it’s not always about having a really amazing idea, it’s about how to sell the idea, presenting not only the final outcome, but how I got there. What inspired me to design the site the way I did? Who is the target user or users? The client should be fully immersed in the site and be able to experience it from the different target users perspective. This demonstrates to the client that i’ve thought about the site in real life context, and prototyping the site to give a realistic visual representation of how the site could work.

I started by looking at the obvious automotive and racing sites, such as the British GT Championships, Mclaren, F1 teams, Lamborghini, to get an idea of what other racing teams are doing, and get an idea about colour pallets, layout and specific signifiers that could encourage the idea of speed, competition, and racing.

Pinterest was another good source of inspiration. I started to move away from the standard racing sites and began looking at magazine style, personality sites, and sports brands to dissect why they had chosen to use the signs and signifiers they did.

This stage is a key part of my creative process, and will be vital to recap on why i’m presenting to the client. It will enable me to pick out specific features that I can use as a reference when showing my design.

Please see the link to the mood board created below in Invision:

https://projects.invisionapp.com/boards/8D3KNWJUVQ2/

 

 

Lightmaker Bomb Project – Brief

We were given the brief today to create an aspirational website to promote a motor racing team, but not just any racing team. As the client stated, they are ex-servicemen that have been injured in action and rehabilitated. They’ll be competing in the British GT Championships against pro drivers that won’t hold back. This is what distinguishes the brand from its competitors, the fact they have a modified car and a story behind them. Even the pit team is made up of ex-servicemen, and its important that this story is told on the website in an interesting and dynamic way.

Initial Thoughts

I think this is a good brief for us all, especially me with my personal interests in sport. I myself have been to the British GT Championships and had VIP access to the pits, looking at some really beautiful racing cars, whilst also looking at visual features of the racing genre and asking myself why? I remember my Dad keeping the program for me, which I kept and thought may come in handy one day. I need to dig this out and use this as part of my research and inspiration process.

I’m obviously under a little more pressure than everyone else as I work for the company, but I don’t want to panic, just rely on the structured creative process that has served me so well in previous projects.

SEK Bomb Project – Final Design PDF

Below is a link to the final PDF I created for the SEK exhibition banner.

SEK_PDF

Conclusion

On the whole, I’ve found this project quite interesting. It’s allowed me to apply my print design skills in a corporate context, something that I’m familiar with from previous industry experience. Although there are very few text elements, this was a conscious design decision to not try and crowd the display too much. Less is certainly more in this project. I simply extracted the key information and presented it in an aesthetically pleasing, corporate manner.

SEK Bomb Project – Design Process

The first thing I did after creating the document in illustrator was to drop in the specifications on to a separate layer for the banner. This allowed me to see where information could be hidden by the curvature of the display. The important information naturally gravitates towards the centre, creating a focal point to design with in. 

Putting this guide on a separate layer allowed me to tweak the transparency and hide it if necessary, to make sure everything was aligned correctly and visible to the audience.

After a few tweaks to layout and alignment, I arrived at my final outcome as seen below.

Micro Projects

A few nights a week, I’ve been trying to find time to look at youtube to teach me something new, whether it be photoshop, illustrator, or after effects. Since starting a new design job, I feel I’m lacking in technical ability and need to strengthen my understanding of tools in all programs to move my work on to the next level, with more attention to detail.

Below are a few examples of my work: