OUGD603: Brief 09 - Coffee Culture (Website) // UI Kit & Final Sections

In a research post earlier on in this project, I looked into UI kits and how they can be useful when designing a website to create consistency within all the interactive elements of the website. 

Following the research I'd undertaken on buttons and other UI elements, I created this kit in illustrator, developing all the different states for the UI elements which would be used on the website. Similar to an identity guidelines, but more of an active guide which can be sampled from – for quicker, more efficient web design. 

You can see the button which has been applied, in line with the grid, on the about section of the website. When rolled over by the users cursor, the button highlights with the CC-Orange colour, stated in the brand guidelines. Which you can see below – doing so shows the user that the button is clickable. 

The menu section, as pictured above, used a half and half layout, taking inspiration from the Engage Prague website layout. One half being dominated by an image, to break up the content, and the other allowing space for the menu's and the relevant surrounding information. All of which has been aligned to a grid system. 

The grid system uses 22px gutters throughout, and for larger spaces, double gutters are added to break up the content, using 44px, as seen here, separating the title from the contact form. 

Adding a map section to the website, often sourced from google maps. I replicated the copyright notices from google map onto the map section to make it seem more real. Also simulating the restrictions. So I know not to put any content in that area. As you can see in the bottom right of the map below.

The contact form has been added, as it's a monetary asset of any business website. It allows the customer to contact the owner easily. Unlike the wireframe, the section has been split in two, condensing the contact form to half a page, rather than the full page. Allowing room for the social media links and other contact information, in the form of copy. 

To assure accurate spacing through all the elements of the contact form and other elements of the UI. Place holder shapes have been used. These particular ones are to assure all the type in the form are consistent in terms of spacing – 11px width, which has half the width of the gutter, to add a sense of geometric proportion to the form.

OUGD603: Design Publication & Brief 09 - Coffee Culture (Website) UX in Navigation

The navigation for websites is important, how a user will engage and experience with a website is fundamental consideration when you embark upon designing a website. 

As my website is to be a single page format, a scrolling method would work best, particularly power scrolling. Which jumps the user to points in the page, automatically, without need for scrolling manually. 

The image above uses a mouse icon to show that the website is scrollable, using a slightly heavier weighted stroke to bring the scrolling wheel to the centre of focus, within the icon. 

Another way of navigating down through the website is using the arrow keys, to jump to each section of the website, efficiently with a tap of a button.

To accompany the scrolling, a side bar outlining the different sections is also useful. It allows for quick navigation being able to jump several sections quickly and efficiently. 

http://www.gogoro.com/smartscooter/faster

OUGD603: Brief 09 - Coffee Culture (Website) // Button Design Development

The design of the button must be consistent throughout the design of the website. Designing the buttons externally in a UI kit document allows for constant designs throughout the website, as they can be easily duplicated and copied into the website. 

Before my research, the buttons looked like this – based off designs I've created in the past. However, I find the changing solid colour is very in your face, the opposite of what I would want. My research lead be to create something more subtle, as seen below. 

A more subtle button design, where the block colour of the button remains the same. Only the text changes colour upon roll over. Using the tan colour from the brand guidelines. 

You can see the buttons implemented on the website. Using the tan for the roll over feature, to show the user their selection. 

The animation of how the roll over will look, which will be implemented into the website animation.

OUGD603: Brief 09 - Coffee Culture (Website) // UI Button Research

OUGD603: Brief 09 - Coffee Culture (Website) // Splash Section

Adding a quote to the main splash section of the website has been something requested by the client. Asking for something in a textured font, which would add an aged quality to the website, overlaying the video.

I tried using a font called 'trend', which had grudge elements added to it, such as textures and a pattern added to create a 3D effect. However, I don't think this really worked. It looked quite boring, not really fitting the theme.

Swapping out the typeface for a more handwritten font, which looks very handy crafted.Which goes with the theme we're after, a rustic, home made, 'crafted with care' look.

Visually, the typeface looked much better. However, on a single line, it didn't really sit right. I struggled to make the original quote sit well on the page, so I swapped out that for a different quote. Which I was able to alter, adding an increased size to the second line and also using title case, as opposed to upper case to create a more hand rendered look and feel. 

Adjusting the copy so it fits within a grid system. The vertical elements are all taken from the wireframes, whilst the horizontal lines are all created using round numbers to assure accurate spacing – it will also make this easier to develop and animate! 

Adding an additional power scroll bottom which will take you to the next section of the website automatically. 

Following my research into the side bar navigation, to show where you are on the page and also allowing a quick click to where you need to be – or a scroll. I created this, using the mouse icon to show you than you can scroll down the page, the line at the top of the mouse creates the scroller and using the negative space around it, it creates the look of the left and right click. 

OUGD603: Brief 09 - Coffee Culture (Website) // UX/UI Research

Looking at additional examples of single page microsites, focusing in particular on their navigation elements and how the users can interact with them to pass through the website. 

The vertical side menu, which displays where you are on the website and allows you to jump to a different point on the page using a power scroll. Using the circles stacked and joined vertically. Using fills to show the current page and the selection, via rollover. 

Another example of an interactive navigation is the floating static hamburger menu, keeping it static assures it's visible throughout the entire website, for easier navigation. 

OUGD603: SAC Ampleforth (Identity) // Stationery Research

Before creating the stationary element of the collateral, which should be fairly straight forward. I decided to look at some other stationary elements which work together as a set, and how they're designed. 

The range above uses patterns throughout, the same pattern at the same scale to tie all the individual elements together, nicely. 

Similarly, you can see the 45˙ angled pattern stripe running across the top left of all collateral to tie the two together.