Damon Hayward

Graphic design blog -- A stream of my daily workings, inspirations and ideas. Visit my links below for past projects and social media accounts. Current projects: Creating a snow sports brand - ALTITUDE and developing a music album campaign. Also working at 2000 Trees festival, XPO Logistics and Multistory as a graphic designer and web content manager.

[damonhaywardbcu]

[damonhaywardbcu]

[damonhaywardbcu]

Making the vinyl jacket and packaging

My first attempt involved folding up giant A1 matte printouts. It looked great apart from some dodgy scoring across the edges.

Unfortunately the paper wasn’t thick enough and the packaging felt very flimsy. Plan B was to find somewhere to professionally print it but nowhere was interested in printing less than 300 copies.

So... plan C was to spray paint an old vinyl jacket, print new versions of the artwork off and stick the designs to the card packaging. This worked wonders and with the lyric booklets being delivered it was time to take things to the photography studio for my final shots of the project.

[damonhaywardbcu]

Martin Garrix - Lyric Booklet

https://issuu.com/damonhayward/docs/vinyl_booklet_v1_no_bleed

[damonhaywardbcu]

http://issuu.com/damonhayward/docs/app_showcase_presentation

[damonhaywardbcu]

FINISHED APP SHOWCASE BOOKLET

http://issuu.com/damonhayward/docs/app_showcase_presentation

I could continue blogging about the different pages and 12pt to 13pt type changes, but the above upload covers all of the important design features and UI features already. This presentation was converted to an A5 booklet and printed. Shots to follow in the next blog post...

[damonhaywardbcu]

App pages (part 2) - Session

Above are some screens from the Session section of the app. I’ve highlighted these ones in particular because of scaling problems I had with the menus.

Originally I had used the same size 12pt, regular Mosk typeface but felt this needed to change, hence the larger and heavier type.

[damonhaywardbcu]

App pages (part 2) - Altitude.fm

The thought process behind this section of the map was to provide a built in media centre for users to import their own music, build playlists and download exclusive altitude playlists from the ‘Altitude Records’ section of the brand.

Key parts of this app mode are the direct link to listen to an altitude radio show (or connect to a local resort radio if one isn’t available’. As this was so important, I felt it needed to take centre stage and be the first thing you see in this section.

The ‘media’ bar across the bottom would remain there through all of the other modes so that music could be changed on the fly, similar to spotify and other music playing apps. The only exception for this would be ‘Map’ as that feature needs the full screen to display the ski resort map.

The above shots show on the left, ‘original’ versions with final versions on the right hand side. This section of the app was the hardest section to scale because of the amount of content needed to fit into one space. This took a good 7 or 8 revisions and I still think it could do with some tweaking but alas... time restraints. First versions had the play buttons way too small and way too close to skip buttons. Anyone over the age of 3 using the app would end up pressing the wrong thing, so that considered the final revision is a vast improvement.

[damonhaywardbcu]

App pages (part 1) - Menu, Profile Page and font consistencies

As previously mentioned, the menu had a few changes before it’s final version came to be.

The menu had originally used size 11pt font, but through the rest of the app I’d tried to use 12pt or larger when possible. So this was changed to keep things consistent and readable.

As i got deeper into the app and thought about how I was creating a social platform alongside a skiing aid I realised an inbox feature would be needed, this appears just above the profile photo with the selected appearance showing whether or not you have unread messages.

A pastel gradient ‘view profile’ button was also added as I felt not all users would know to click the picture to go to their profile page. They might not have even been aware a snow sports app would have a profile page.

Speaking of profile pages....

A continuously scrolling page leads from your own profile information, through to your gallery and onto the Friends section giving users a way of seeing what other people are up to.

[damonhaywardbcu]

WHO KNEW THERE WOULD BE SO MANY ICONS IN AN APP!

Bit of a jump here but this is where the blogging of development took a back seat as I found myself too engrossed in the designing to keep jumping in and out.

As i went through the app designing the pages, I found I needed more and more icons that I hadn’t considered before. I looked to Spotify and their app icon suite and realised there are nearly 200 icons in that app!

The bulk of the icons came from my thought process towards the UI and UX of the app. I wanted to reduce the amount of typing users would have to do as much as I could, hence everything became button based when possible.

Filters and search sections of the app for things like the map, all needed icons, the media centre needed icons for play, pause, skip, shuffle etc...

The above spread isn’t all of the icons I produced but it’s not far off.

Below is the app icon development spread I’ve included on my A2 grad show board that shows off the key icons and their ‘selected’ versions.

[damonhaywardbcu]

A huge UI/UX decision - colour scheming

The app was being developed alongside the magazine and so a lot of design choices such as typefaces were carried over. I also chose to carry over the gradients i had been using in some of the spreads but to give them a more solid purpose within the app.

I decided to assign a gradient to a type of action or element within the app to make things easily recognisable and help user experience and navigation. 

The light blue/dark blue gradient became the base gradient used for key icons such as the mode icons, start, stop, etc... Essentially the main functions of the app.

The orange gradient was reserved for media and to signify something that could be played or was playing.

The pink/blue pastel gradient was used to signify an icon that would cause an action such as close, open, clear search, etc...

The dark pink/blue gradient was going to be reserved for other features if needed but ultimately wasn’t used.

This feature I feel is one of the strongest parts of the app and helps everything flow as best as possible.

[damonhaywardbcu]

Icon development part 3 - A full suite of mode icons & the Menu page

These are the final designs for each mode, along with ‘selected appearance’ variants. This was a major UI design that I included throughout the app to clearly indicate to users what mode they were in, what filters were selected etc... etc...

I feel these icons work well as a set, all have similar scaling and complexity but all have a unique look to differentiate them. To test them I placed the icons into the menu I had been designing at the time...

The menu, a drag down control hub for the app features the 6 key areas along with a direct link to your profile, a nearby rider’s feature (aimed at bringing solo riders together - something that reflects the brand well), a status feature and ‘welcome message’

This menu underwent a fair few changes before the final version, but that’ll be blogged about in a bit.

[damonhaywardbcu]

Icon development part 2 - Other Modes

I took a similar approach to the remaining modes: FM, News, Map, Settings and Stream.

The back and forth with these designs was finding a way to keep things looking consistent. I didn’t want one design to be intricate and one to be very basic. I also decided to try and incorporate the X shape into as many of the icons as possible as a consistent theme.

Other considerations were again the size and scale. For news (the last 3 icons), I looked into having the number of new articles displayed in the icon but this would have been around 2.5pt size text on a phone and that would barely be visible for people with 20/20 vision, let alone people wearing goggles or squinting from the sunlight on the slopes.

[damonhaywardbcu]

Icon development part 1 - Early ideas and Session

My first attempts at icons for the modes featured the large blue X from the app icon experiments. My thinking was to keep things consistent and uniform but I quickly realised that each mode was so unique and helpful to the user in different ways, that I needed to give them all their own spark and represent them properly (also the scale and weight of the type on those first attempts was awful when scaled to mobile).

I first tackled session as my research had given me a good basis of how other apps represent the stat track portions of their apps. The middle and right ideas were my first attempts before I realised the symbol needed to be a lot thicker to work on mobile devices, hence the design on the left.

I began to design within a circle with the thought of showing these icons as large buttons, easy to see and click on when mid ski session.

I combined the circle visual with the bold and multi gradient ‘S’ idea above and got to my final icon for Session.

[damonhaywardbcu]

Altitude App

As previously mentioned, the Altitude App ultimately became the biggest and most important part of the Altitude project. I will have to blog the app retrospectively as work load and the flow of designing with the app didn’t really allow me to keep stopping and screen shotting every little change.

With that said, I plan on blogging the key development points and to discuss the main UI features I kept in mind throughout the project.

Above are several sketches and thoughts related to the features and layout of the app. Middle left shows the thought process I went through when trying to decide on how the app would be navigated in terms of flicking between modes.

Some ideas involved pop out modals activated by touching the logo, other’s being a more standard menu icon at the top left that would open up tabs for different sections. This menu was a major decision as I knew the rest of the app would revolve around it. I didn’t want it to be hidden, tucked away with 20 swipes to find it. People on the mountain with gloves on or cold wet hands aren’t going to be bothered with fiddly interfaces.

I ultimately decided on a swipe down logo that would always be present, no matter which mode you were in, that would give large button links to each mode.

These sketches also show my early thinking of page layouts and what needed to be included in each mode.

[damonhaywardbcu]

The finished magazine

Various versions and edits later, the magazine is complete and is currently being sent off and printed ready for the graduation show. In the mean time, here are a few mock ups of some of the main article spreads.

The full magazine can be viewed here: http://issuu.com/damonhayward/docs/final_altitude_magazine_a5

[damonhaywardbcu]

Continued magazine spreads - Community quotes

To act as page breaks between articles and to avoid lots of advertisements, I thought of including funny quotes from the community alongside a selfie. This fits with the brand values and keeps the magazine light hearted in between articles.

With the articles themselves I’ve tried to make them short and sweet, they’re all lorem ipsum as i’m not a snow sports journalist but i’ve formatted and designed the text to suit the page and show how an article could appear within the magazine.