Initially, using quick sketches, I scamped out a generation of ideas from which I picked ones with either the highest potential or the ones that seemed interesting or  different.

This allowed me to think outside the box and get ideas flowing smoothly before settling down on one direction. Also noted were ideas for UX considerations and how the website should flow and feel.

I then went on to design the first prototypes on InDesign where I had easy access to a grid and could see whether the ideas could translate well on a screen display.

At first I was thinking outside the box of how a website could function.

Seeing how most websites today have sections which are scrollable rather than clickable, I ran with this idea but from a different angle, this time using inspiration from Josef Müller-Brockmann.

Though I liked the idea and knew it had potential for memorability, I knew this would be difficult to implement and all in all wasn’t as ’tidy’ as I’d ultimately like.

This idea was the one I continued to develop to fruition. Some thing notably changed, such as the placement of the title and menu on the home/about page and the centring of the single project pages and blog pages, however, static elements very much remained the same and the grid of blogs stayed until finalisation.

Here restricting the site to only typography, we have an about section on the home page which incorporated the project page with red highlightion.

The clarity and simplicity of this idea worked beautifully but in action would prove difficult to write the perfect amount of copy and implement effective menus for whole site navigation.

Style Guide

Leaving the colours to a minimum and evoking certainty, we primarily used black and white with the occasional red for indication. The black in the footer is ‘off black’ at #21212, making the site less ‘flat’ when the footer is revealed, thus, a touch more dynamic.

Understanding the sites extensive writing section in the blog and portfolio, we sought to find the optimum reading size for paragraph/body text and then work up to the display/title sizes.

Working on the single blog pages, we arranged the text in a centre column, for focus for longer periods of reading. Again, all for ease of use.

The images move outside this centre column at different rates; creating rhythms and dynamism as the user scrolls downward. Additionally, the use of sliders is present so we can have the user interact differently with content.

For desktop, the columns work in a way where there are four columns and extensively wide margins. The text is spread across the two centre columns, images are laid out in a combination of the four columns as well as breaking into the margins for full width images and image slider.

The initial research became invaluable and as the site map changed (as I thought it would), the vision and mission outlined upon starting this project proved a guiding light to any design decisions and UX considerations during the development.

Throughout this project, constantly thinking of functionality and clean integration of a CMS, proved both negative and positive. Negative, because it may have limited the creative direction – opting for styles that we knew would integrate better into WordPress but not developing potentially exciting options which may have been beneficial to the site’s expression. However, positive in the sense that it could be seamlessly implemented and easily maintained for the future to come.

Find This Website’s Javascript Frontpage Work Here