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 10 - Japan Rugby World Cup // Iconography Development 01

To accompany the logotype, which Ewan is working on. I've begun to develop an icon/symbol which will embody Japan and it's culture, the ultra-modern developing world and the Rugby world cup. I've attempted to intertwine the two together, quite literally. 

Using the levitating maglev train, and elements of the Tokyo skyline – both urban and natural, to take the form of the Web Ellis Rugby World Cup trophy. Using Mount Fuji to create the dome of the cup, and the maglev train spiralling up the trophy. 

An additional annotated screenshot of the illustration, with additional element such as the the Tokyo skyline and the smoke from the volcano. Which mimic aspects of the trophy. I will transfer this into illustrator to create a vectorised, improved and more precise version of the illustration. 

OUGD603: Brief 04 - The Last Drop // Pattern Research

Mid way through the logo design, I've come across a lot of empty space which I need to fill. Based on the research from the Treboom brand, a pattern may be beneficial to, a welcome addition to the design which helps flesh it out.

Hopefully making the design much more intricate and sought after. Often my logos are very simple and minimal, designed using rules and ratios to get that 'smart' look. Whereas I would like this logo to be something which is looked at, stared at, up close. Taking in all it's detail.

Using two different sets of patterns triangulated together to create a detailed and tricked pattern which spreads across the background of the image. The detail of the pattern really draws you in to appreciate the design around the main content on the page. However, it doesn't distract from the main content, and that's important to bear in mind. 

The pattern on the aces of spaces, pictured above. Has an extremely detailed pattern printed within the shape. So detailed in fact, that I'm positive that if you stand back from the design, it all just blends into one colour, of sorts. Which is what I'd like to achieve with design and the pattern of The Last Drop logo. 

Pictured above is a GIF looping a series of ribbon based patterns, a very retro style. As nice as they look, I'm not sure the ribbon pattern would work with this project. They come across as a very fun and light hearted pattern, which is almost the opposite of what I would like to achieve. 

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. 

OUGD603: Brief 03 - SAC Ampleforth II // Tablet Screen Wireframes

As this website is being designed to work responsively, I'm designing how the home page will look on an tablet screen. How the content will adjust to fit, responding to the dimensions of the page. The design of the tablet will be used to bridge the up-scaling gap between the mobile and desktop versions of the website. 

Similar to the mobile version, the portrait view of the web page will adjust so the content fits the page in the best possible manner. 

Horizontal content areas, taking the full width of the screen will be used which will allow for the best area of 'click ability'. Rather than a quarter of the page vertically, you may tap the wrong area. This will also reduce the length of the page, so there's no endless, thin and long scrolling parallax pages

Similar to the desktop version, the landscape tablet uses vertical columns more predominantly, in comparison to the portrait version of the tablet screen. Taking advantage of the width of the screen. Displaying the content more sporadically, rather than being stacked. 

OUGD603: Brief 04 - The Last Drop // Route Map Animation Completion

I have been finally able to complete the route map for the pub crawl, using adobe after effects. Which has been created using a layer mask, which hides the content which it masks. By animating the anchor points of the layer mask, I've been able to reveal the route in stages, point by point.

Doing it this way, using a mask, allows for no destructive animation. Being able to show and hide elements of the animation at any point.

The image above shows the paths used to reveal the map, on the very last frame of the animation. Each anchor point was revealed individually, so the mask follows the route around the map, revealing it point by point – difficult to explain, but I'm sure the video below will show you what I mean. 

OUGD603: Brief 10 - Japan Rugby World Cup // Japan Culture Research 01

I thought I would look more into the Japanese culture as part of this brief, to get a better idea of what aspects modern Japan could be applied to the development of the brief.

Obviously, I'm unable to travel to Japan, due to finances and such. However, I'm able to do plenty of primary research on the matter.

Future of Transport

I stumbled upon a post on the BBC website. An article talking about a new world record set my Japan's Maglev train. Which reached a top speed of 603 kph (374 mph).
Unlike traditional trains, maglev trains work by using magnets to push the train away from the tracks and drive the train forward. 
Japan's maglevs don't use metal tracks — instead, they float nearly 10 cm (4 inches) above special guideways, allowing for frictionless movement.
Stuff of science fiction films! Trains which levitate above the ground, allowing for high speed travel.

OUGD603: Brief 04 - The Last Drop // Primary Research

Accidental primary research, whilst out for lunch with United by Design. We went to Brigantes in York, which is often on the pub crawl. When handed a menu, I noticed this icon on the top right of the sheet. 

Using a bold red stamp style, and rounded typography which fits within it, the icon beautifully conveys the associations name, and all the relevant information. Using different sizes and weights to display a hierarchy of information. 

The association represent 'good pubs', put briefly. the stamp reflects a physical 'seal of approval'. A stamp added to approve something.

OUGD603: Brief 04 - The Last Drop // Logo Development 02

Based on the progress in the last logo development phase, which was a struggle and the additional primary research which has been conducted since. I've jumped back into sketch and generated some more logo sketches – which are yet to be developed. 

The first series of sketches plays with the idea of incorporating a banner into the design of the icon. The banner is synonymous with traditional signage, which works well with the history of York. 

The second set of sketches are more free form, taking the shield from the York logo. Incorporating design elements into the shield, similar to the Treeboom labels, which you can see in the recent research posts. 

The second sketch takes reference from 'The Bridge 1859' logo, which uses an iconic landmark in the region, one of the gates from York's walls. Attempting to blend the illustration with the typography.

Selected ideas from these sketches will the taken into illustrator to be developed further. 

OUGD603: Brief 06 - Small Brands: Galactic Republic Rugby Logo Design and Development

OUGD603: Brief 3 - SAC Ampleforth II // Mobile Wireframes

For SAC Ampleforth's website, I pulled back my progress a few stages to design the mobile version of the website. As to order the content and see how it would fit on the smaller screen and then scale it up to the full version – as I was taught at Work in the Web. 

The landing screen of the home page, with the full screen image, with the SAC logo and the hamburger which takes the form of the menu, to allow quick navigation of the website. 

Scrolling down, the vertically aligned elements, the large clickable class buttons have been rearranged to fit horizontally, making best use of the space on the screen. I would imagine the layout of this element would be based on the width and height of the screen.

If the height is greater than the width – horizontally aligned buttons.

If the width is greater than the height, vertically aligned buttons. 

Moving down again to the membership section, with the text box overlaying the image, taking advantage of the vertical space. Perhaps in a parallax format to add an extra dynamic to the page. Although, this could ruin the user experience to due to the lag... 

Similarly, the swimming pool section of the web page also collapses into a vertical format, stacking the content above the image. Which makes best us of the space, rather than cramming it all horizontally. 

It'll certainly be fun to animate... 

OUGD603: Design Publication // Research: Hierarchy of UX Needs

Looking again at more phycology based UX research, I've returned to Wouter de Bres, who I also wrote about in this post. 

1. Purpose

At the base of the pyramid there is the most important thing of product design; purpose. Without purpose there isn’t a need for the whole product or feature. If your product does not fulfill a purpose it has no reason to exist at all. Before worrying about aesthetics or usability, start with finding out if there is a purpose for the product or feature.

2. Function

Once we established that there is a need for what we are about to build. The second thing on our list is that it should function. Does the product or feature work and is it even possible to fulfill the purpose. And last but not leat, is it bug free and reliable?

3. Understandable

Once we have a purpose and it functions technically we can start worrying if the user understands how to use it. Can they find it and do they know which actions they have to take to use the product?

4. Easy to use

Great we now have something a user needs, it is technically sound and the user understands how to get the job done. At this level we can start thinking of simplifying the task. Think about removing constraints, giving feedback on user actions and making elements clearly identifiable and clickable.

5. Enjoyable

This is where we reach the pinnacle of User Experience; making the experience of using your product truly enjoyable. Make no mistakes, this is one of the hardest things to achieve.

First of all you can be proud when you reach this point. Creating a product which checked the previous boxes is super hard. To make make the product enjoyable you have to think about great copy, a consistent & fun product personality and stunning aesthetics. Not many products reach this level of awesomeness.


For product designers, including myself, it is a big pitfall to start focusing on the top level needs like aesthetics and personality before the reaching the other levels. So next time when we are working on a new product or feature, stop, think about the UX hierarchy of needs and climb the pyramid, step by step.

OUGD603: Brief 04 - Small Brands: Galactic Republic Rugby // Star Wars Iconography and Sig

A part of this brief I enjoy is the Star Wars integration, and treating the Star Wars fictional franchise as if it were an existing entity. I've read and watched a great deal of media surrounding the existing six, soon to be seven films. Because of which, I'm familiar with the signage and icons uses in the Star Wars universe. 

Above is a collection of icons, which are used to represent factions in the universe, from left to right; The Rebel Alliance (4-6), The Galactic Empire (3-6), The Galactic Republic (Pre 1-3;6-), The Jedi Order (Pre 1-3;6-) and The First Order (7-). 

These icons have been manipulated by artists within the Star Wars fan base. Above is an sketch of the Rebel Alliance and the Galactic Empire logos combined into one. Using a character, Boba Fett, from the original trilogy as the fill of the illustration. 

It works particularly well, as it incorporates so many different entities into one icon. Which is the main issue I'm having with designing the logo for the rugby tournament. 

In this illustration, which has been tattooed – I know, I couldn't find any other image of it. Uses another symbol from the Star Wars universe, which they have worked in with a 3D object, a lightsaber. 

As a vast majority of the signage in the Star Wars universe all uses alpha channel signs, it would be an idea to see if I could intertwine elements into the logos, similarly to the illustrations above. 


Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.