UX and UI design is a newer love of mine. Combining the importance of visuals, color theory and interactivity, UX/UI design pulls the importance of all interactive media knowledge to create something remarkably beautiful. Using the techniques I’ve used for years in photography and videography, and the balance of simplicity I’ve learnt from graphic design, I believe my UX/UI work brings an extra punch.
When approaching a UX/UI based project, its imperative to remember the 3 click rule I’ve limited myself to. The user must be able to navigate the web site to get to what they are looking for in 3 clicks or under. There must be easy clear navigation, usually with the title or logo being a home link. If there is a parallax or scrolling content, it must be clearly marked in a way that anyone can comprehend it.
References for my work on request!
Anyway, enough of that, let’s take a look at some of my creations!
Links to some proto-sites:
Originalitea – The Tea/Coffee shop website and content
Brief: Create a tea/coffee shop brand that features fun new flavours. The website must have a homepage, menu and contact page, including a map and social links. Each page must contain different content and appropriate images. The website must reflect the ambiance of your imaginary coffee shop.
My own critic on this site: The images would be great If I made them a bit more responsive for the smaller screen viewing. The responsivity could be better on the mobile screen, especially with the footer. I keep to the 3 click rule when trying to search for specific things. If I were to redesign the website I would keep the background all white and have a fixed header that features the Blue as the links and give the title a blue background with white text to emphasise the brand.
Brief: Green Energy is the future. In this example use a flat natural palette to reflect the nature of the topic. Use a central column alignment of 400px with 5px border. Have three clickable changeable contents on wind, rain and sun based energies. Each section must look the same with a different image and different original content text. Only one page, however have a potential links menu, and a footer that contains your name and links to potential social media.
My own critic on this site: I feel like I made this website to the outline given. I used four main colours (excluding the header image): cream (#EDE808) for the central column, green (#6A9D8B) for the background, blue (#61787F) for the primary accent and red (#8A565A) for the secondary accent. These colours were selected using Adobe Colour wheel. The only thing that really bugs me is the header image at the top corners does not follow the 0.3 rem border radius that is throughout this page.
Prototype Workflow Examples:
Made in Illustrator for a news based blog/site. Decided to go for a monochromatic scheme with just one colour to pop the title name and <h1>. using a lighter grey for links as well as less important stories. The idea is when the user hovers over a link it matches either the red of the logo or darkens.
Prototypes for photography websites:
Jack Gallagher Photography
This prototype is very blocky and bold to try and work out a lay out. Think of it as a stage between wireframe and interactive prototype.
Alternative design for this website: