OUGD603: Extended Practice Overview

So you're able to see what's what, I've made this post to quick link you to the work, easily.

All briefs attempted with links to post:

• SAC Ampleforth (Identity)
• OAC Photography (Web)
• SAC Ampleforth (Web)*
• The Last Drop (Logo)
• No. 7 Antiques (Logo & Application)
• Green Spot (Packaging)
• Coffee Culture (Identity)
• Japan Rugby World Cup w/Ewan North (Identity)
• Coffee Culture (Web)
• Malton & Norton RUFC (Web)
• Dr Me (Visiting Professionals Day Brief)
• Small Brands (Logofolio)
• Intern Magiazine (Visiting Professionals Day Brief – Publication)
• Something More (Visiting Professionals Brief – Identity)
• YCN: Yorkshire Tea w/ Adam Garbutt (Packaging & Competition)
• DBA: Northern Powerhouse – Capital North (Visiting Professionals – Identity)

*(Projects stricken out have been cancelled for various reasons)

Design Publication

OUGD603: Briefs & Evaluations (Project File)

OUGD603: Extended Practice Submission Boards

OUGD603: Brief 09 - Coffee Culture (Website) // Website Showcase Animation

Below you can see the website for coffee culture, which has been animated to show the functionality and usability of the user interface, in terms of it's user experience. Displaying it's function, bringing life to the flat design – which you often wouldn't see with web projects.

 

 Animated in after effects using the UI kit and the design to create the roll overs and expanding windows to show content which may otherwise be hidden from viewer on a flat design.

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

The final website design for coffee culture, before I have a critique with other members of the course, to get their feedback and see what can be improved – before I animate it. 

A larger version can be found here.

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: Brief 09 - Coffee Culture (Website) // HTML5 Video & Splash Section

t

OUGD603: Brief 09 - Coffee Culture (Website) // Desktop Wireframe

Following the tablet and mobile wireframes, I've expanded to the larger of the screens; the desktop screen. Not the largest of screens used, based on UX research – as the television, due to the introduction of Smart TV's, is gradually becoming one of the frequently used platforms for browsing.

An overview of the design for the microsite. Showing all the content sections, which all resize to fit the page, using a power scroll function to transition from page to page. In a similar style to some of the websites featured in my research. 

Splash screen, the upper-most part of the website and the first point of contact. Captivating with a full screen HMTL5 video, in the background. The logo taking a back seat, to point focus onto a handwritten message overlaying the video. Which is synonymous with hand crafted, artisans – that home made cosy quality, which we want to associate with the brand. 

The about section, which is very similar to that of the landscape tablet menu. Nothing really too different as the screen widths are similar. 

Similarly with the menus section. 

Finally, there has been a contact form added to the base of the page, which will also house any additional contact information such as the address and the opening times. Customers will use the website to find the opening times and address, so these are vital for any website. 

OUGD603: Brief 09 - Coffee Culture (Website) // Tablet Wireframes

After designing the wireframes for coffee culture on the smallest device – mobile, I'm scaling up to the tablet version of the wireframes. 

As previously mentioned, I'm designing from the smallest to the largest screen. Doing so allows for easier manipulation of the content on the page. It would be more of a hassle from try and cram a full desktop website's content onto a tiny mobile screen, it would result in a ridiculous scrolling page, with endless content stacked on top of each other. Designing upwards helps relieve this. 

The about section of the website, see below to see the splash/home section, has been upscaled to include an image, in comparison to the mobile version. Which originally had the image stacked below it to break up the content. It also shows the condensed version of the body copy in a single column. 

When you turn the tablet on it's side, increasing the width of the page, the page readjusts it's content. Taking advantage of the space, and conforming to the width. The page transforms into a twelve (3 main areas) column grid from an eight (2 main areas) column grid. Two sections of type and an image. The copy has expanded from it's condensed mode, displaying it's entirety on the page. 

The menu section of the website adjusts itself to fit to the larger screen width, similarly to the other sections of the website. The buttons for the menus expand into buttons with images to indicate what they content, and sell the products. Also sitting side by side, rather than stacked to fit the page. 

The slash/landing section of the website will adjust it's width and height to fit the size of the screen. On this version of the page, the power scroll navigation menu has been condensed into the form of a hamburger menu. The background will be a HMTL5 video – where the connection allows. 

Rotating the tablet into the landscape mode, the website's content will readdress. So the main HTML5 video fills the screen. With the logo, in white, overlaying the video. With most tablets being an almost 16:9 ratio, landscape screens will complement the video much better.

At the larger width, the hamburger menu will also disappear, the menu, as it has the space to house all the options, rather than them being crammed together. 

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

Which conducting some research for Coffee Culture's web brief, I found this lovely UI and UX demonstration for Engage Prague on Dribble from Jaromír Kavan. You can see the live version here.

I'm treating this project as a small case study, into how this website has been designed and presented, as it is only a mocked up version – which is exactly what I'm doing for this project. Below is a GIF animation, which shows the UX journey and the entirety of the micosite. 

Using a circle, to show the mount pointer, the clickable items, the roll overs and how the website scrolls down the page. How the mouse circle pulses to show a click, disappears briefly to display the content, when the mount would be still. It's a lovely bit of design in itself. 

The homepage has a compressed hidden menu, disguised behind a hamburger. Which opens up to show the menu.

You can see the roll over for the hamburger menu, which uses the neon green/blue which can be seen all over the website, little details like this really tie in the website as one consistent piece of design. 

You can see how the menu which exposed appears on the page, overlaying the content. The main items have been dulled out, with a reduced contrast of tone. Which helps make the cross and the current page stand out more on the menu in comparison. Which both have a greater tonal contrast to the background. 

The navigation of the website when the menu has been collapsed is very interesting. As the website is a vertically scrolling microsite, a vertical button navigation has been added, to show the sections of the website. Not only showing you how far down the page you are, but also a quick navigation to the individual sections. 

Each section of the website is responsive, which makes it fill the full size of the screen – edge to edge, both vertically and horizontally. A quick scroll with the mouse acts as a full power scroll, transitioning you to the next section automatically. It's wonderful, and so easy to use.