OUGD504 - Design for Screen - Initial Designs + Creative Review

'

Navigation Menu

Had trouble distinguishing the titles for the different links in order to simplify the current menu but also make it easy for the user to return back navigate to any page from any page in the smallest amount of interactions. I found sketching and scribbling ideas helped to mould an appropriate sections of the site whilst considering why the user is visiting the site:

• Research
• Discover
• Inspire
• Excite
• Submit

Taking inspiration from the the numerous sites and site map I previously created, I produced some sketches that use similar techniques in order to fulfil the same objective. The main priority for my menu is for small and concise in order for the content to be the primary focus yet still be available for the user at any time.

1:

This concept was inspired by Mynameis because there menu at the top of the page was large but could be hidden discretely once the user scrolls down. I specifically took the ability to highlight specific projects once the user hovers over the category they relate to:

Displaying the menu vertically as a list provides a lot of white space for specific links. If the user highlights the categories list it will display Graphic Design, Illustration, Fashion, etc making it easier for the user to specify the content they're looking for. This method can then be used for Community: Events, news, submit. This technique allows the sites navigation menu to be detailed yet simple to use, however the user will keep having to scroll to the top in order to navigate the site which can disorientate the user. 

Once the user scrolls down, the menu then dissapears leaving space for high impact images:

Another potential solution that would engage the audience would be to scroll through the categories horizontally which gives opportunity for more high impact images and an immersive interface:

Already I can see potential problems with this solution because it makes finding a specific category time consuming as only one section of the site is visible at one time.

Hamburger Icon:

Noticed Creative Review use the Hamburger icon instead of a traditional navigation menu bar:

This creates more room for visual content and allows the menu to contain an extensive range of links that make navigating to specific areas of the site easier:

The icon is fixed to the top of the page making it available whenever the user requires it. Creative Review aim to achieve a similar objective to People of Print and their websites user interface achieves this well due to the emphasis on content rather than promotion.

In order to engage with its audience, this split panel is used so the user can find the most popular or recent articles. This is useful for new and existing users.

Creative Review's site is one of the best I have researched because of its formal and simple structure.

Header will disappear once the user scrolls down, this is one of the primary concerns that needs solving from the original site. The addition of the hamburger icon condenses all of the navigation links providing more room for the high impact images. Hamburger icons are typically used on Apps because they take advantage of the narrow and condensed phone screens, however due to their success they are appropriate for widescreen compositions especially for visual content. Using the hamburger icon would make transferring the website from widescreen to narrow phone screens easier.

Hovering over the image will provide further information so the user is able to be decisive in the content they're looking at. This can include the project title, designers name and a short and concise overview of the project. To further engage the audience, the image can be focused in on a section and slowly zoom out revealing more of the image and engaging the audience through high impact, ambiguous imagery. Adding in print smudges and marks that are reminiscient of the natural process can be used to engage the audience but also guide the audiences eye around the page.

In order to encourage users to create an account and take advantage of all the site has to offer, I can potentially ask the user at the top of the menu bar which creates a hierarchy so they'll see it every time they open the site. 

The tone of voice for creating an account differs between sites:

• Sigh In
• Register
• Create an account?
• Sign Up
• Follow

The user can click on one of the headings and the site will smoothly drop down in order for the user to expand on the content from that section. The user can simply close the section and the menu will condense back together:

Crop mark is reminiscent of a plus sign which will inform the audience that they can add projects to their own library from their account.

Concept:

Having the entire menu at the top of the page which can then be removed once the user scrolls past:

 Experimented using InDesign:

Considering my sitemap and layout sketches, it has become apparent that the menu is going to play a key role in the composition of the rest of the website. Erik Spiekermann believes that the typeface for screen based interfaces is in fact the branding and should be kept as consistent as possible, during a talk in Berlin. This highlights the importance of creating a consistent and cohesive interface that is transferrable over different page layouts. 

Created this justified left menu with the intention that it would disappear off screen once the user scrolls down, revealing more room for the high impact images. Placing 'My Library' between two lines of text emphasises the importance of it, subtly encouraging users to interact with the new feature and encompass all the site has to offer. 

Included the current People of Print social media logo because the current website logo is pixelated and illegible. Again, there is potential to add colour to the logo to create contrast and make it more engaging. The circle is reminiscent of the iconic CMYK 'venn diagram'.

1:

Simplistic and minimalist layout inspired by Mynameis' modernist style. Creating a hierarchy of information provides the user immediate sources of information. To distinguish the titles even more I could potentially add a colour scheme.

2:

Removed the circular branding because the circular logo needs to be large in order for it to be legible however I can not afford to waste space on the menu, therefor simply writing the name out and enlarging it won't take up as much area. Introducing the CMYK adds minimal colour and is familiar with print.

3:

The large menu can be removed once the user scrolls down. This method would provide the user with all areas of the website in one place making the users more aware of everything People of Print provides. This method can be limiting however as the user has to scroll all the way up to the top in order to access the menu which can be frustrating as the user will need to menu in order to immerse themselves in the site. 

4:

'When your navigation has too many links, less authority and trust passed down to the interior pages. The link juice is diluted. The more concise your navigation, the more home page authority will flow to interior pages, making them more likely to rank.' - SEO

This quote has informed my design by simplifying the current navigation menu and keeping the most relevant. A menu with too much information can be overwhelming and I want people to use the home page a lot in order to take advantage of the high impact images.

Dropping 'of Print' provides more space for the double layered categories to breath, giving each an equal amount of white space to give them all equal authority. Keeping the type size at 21pt also creates consistency and organisation. Placing 'Categories', 'Techniques' and 'Processes' and 'Sign In' along the second line makes them more accessible when the user is exploring the articles and submissions. This was also influenced by my experience using Studio Laucke Siebien's website as the condensed and layered categories provided room to organise the categories into convienient groups. 

Introducing modern and minimal icons for Facebook, Twitter and Instagram is an aesthetic improvement to the original site. I placed them at the top of the page so it wouldn't obtrude the menu and subtly promotes a following. This is appropriate for People of Print as they have a growing social media presence. 

Ordered the categories in order to highlight key information using a hierarchal layout:

• Shop
• Community
• Posterzine
• About/Contact
• Categories
• Techniques and Processes
• Sign In

I don't want to create a user interface that intrudes on the content and distracts the audience from engaging with it. I need to make sure I consider that the purpose of the brief is to create an interface that is emotive and takes advantage of screen capabilities.

Settled for this condensed and structured menu which introduces the social media. The large title and white space between content emphasises its importance 

Using images currently used on People of Print's site allows me to accurately replicate the content through a new interface:

High impact images layered over the top of each other, reminiscent of a collage, communicating print:

Scrolling down gets rid of the social media icons, focusing the attention on the menu and condensing it:

Unsure whether the menu bar should be consistently white or should be layered over the top of the content. This is something I will bring up during my next crit because I don't want the menu to obtrude the high impact images.

Hovering mouse interacts with the image, providing the designers name. This can be extended to provide a small summary of the project so the audience has more control in what they choose to look further into.

In order to see if this idea is transferrable for consistent updates, I changed the projects/images to create a new composition:

This system can become problematic when the cover image uses a white background as they are hard to perceive as separate projects due to the white space. However to overcome this, once the user scrolls down the images can disperse into separate projects making it easier for the user to identify and choose a project. 

It is important that I consider the layout of the homepage in order for it to host ever changing projects and submissions that are constantly being uploaded. If images aren't big enough they can be cropped - This will make the layout transferrable over the plethora of articles and submissions and also screen sizes in order to avoid pixelation.