Tuesday 5 June 2012

Rationale


The final web design was made to have minimal focus on the layout and typography, and maximum focus on the images and content of the website. By using three colours - black, white and the Imaginefx Gold colour, I kept the website simple, consistent, and recognisable as belonging to the Imaginefx magazine image. By using two desaturated and one saturated colours, attention is focused more towards images without these colours - once again making images the stand out of the website.

The navigation is cleanly and simply stated at the top - there is a colour change on hover but other than that, it is extremely minimal but has plenty of space around the type. It stands out at the top of the page (unlike the original). The search bar is also on the top right. The Imaginefx logo has more space around it as well.

There is two main columns of content - used throughout the website design. The main body of content has any content relevant to the page category the user is on. The bar on the right holds the login information, basic magazine buying links and ads. The gold bar's contents rarely change. The main content always has a large picture featured at the top.  This means no matter where you are in the website, it is obvious what the website's primary function is - displaying fantastic digital artwork. On the homepage there is a small, simple slideshow that moves between the most important (and recent) areas of content. When javascript is disabled, a person is still able to view and click on these, however they are simply stacked one below the other. Below is other articles that have as much importance, but without the "new" factor, or the reverse - they are "new" but don't look impressive (such as reviews of hardware). These also have a simple hover effect over them. As this is a website about viewing images, I wanted it to be as instinctual as possible. By clicking on the image in a list (say from an interview or on someone's portfolio) the image appears using a javascript, and becomes the central focus of the page - without leaving the original webpage. You can then click on either side to go to the next/previous image or click anywhere off it to go back to the normal page layout.

Social media icons are included on most pages (excepting the portfolio pages, where these would get confused with the persons own social media links). The search bar and login are customised to fit in with the website's visual style, and don't stand out like sore thumbs. It is clear what their function is but they blend with the website's hierarchy.

By removing the added navigations, the text boxes of daily updates and forums and creating a simple and cleaner hierarchy of viewing, I have improved the websites legibility and functionality. In the original design of the website I was able to incorporate all the sponsored ads on the original website, however for the purpose of the assignment I removed a few of these.

Design Process

The design changes between the original website, my first layout design and the final look.

Homepage







Portfolio


Workshop


Gallery



Interview


Belated findings on user testing

I had two users test my website several weeks ago.

HomePage


Interview



Workshop (Or general list layout)


Portfolio



Gallery


Their main problems were with a lack of breadcrumbs, an unclear search area in the galleries section, and the use of a different link within the front page articles, that led to the general category, and not to the article itself. Their general feedback was that the website was clean and easy to navigate. One person commented that the website could be even more minimal, but understood that it was a website for a magazine that also and a substantial community, and therefore needed lots of up-to-date information being constantly processed.

1) NO Breadcrumbs



2) NO Portfolio Search area



3) Unnescessary links