Dropdown Menu

After choosing to go with a horizontal menu structure (from previous user testing) I now had to figure out how to get it working...

Having limited experience in coding something so complicated I looked at several different websites for tutorials on how to make a dropdown horizontal menu.

The ,most useful website I found by far was from the following, and they ultimatley taught me how to create my menu.

http://ago.tanfa.co.uk/css/examples/menu/
http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html#menref

User Testing

User testing for me involved getting peoples opinions about the overall look and functionality of the site.
I ultimatley wanted to find out

• Which navigation system (horizonal or vertical) was more appealing to users
• Which navigation system (horizonal or vertical) was easier to use and allowed greater functionality.
• If people could find what they were looking for easily.
• If people found the visuals engaging/appealing.
• Any areas where there was confusion about navigation.

Pdf's of the website layout were shown to a group of people of varying ages and computer literacy.

Findings

• People generally preferred the horizontal menu as it didn't impose a heirachy on various catagories and allowed the different headings to be viewed in a clear logical manner.
• Twitter and Facebook logos needed to be used not hidden in the "follow us" section and the blog changed to a heading/link.
• Users related well to the visual language and felt the colour scheme and graphics were clean while still maintaining a feminine feel.

From the findings i have decided to use a horizontal drop down menu as it was the design layout favoured by the user study group. All other changes and suggestions will be implemented in the website formatting.

It begins...Building the Website

In beginning to build my website I revised over many of the class exercises... and realised how little I understood about actually building a website- after much trepidation I began to slice elements of the wireframes and lay them out in html...

Web Assignment 2

This Assignment worked on developing the look and feel of the website.
Using the wireframes I devised I took the next step of seeing how the grid would work with the imagery and text.

Layout 1/horizontal navigation layout

 Layout 1.1/horizontal navigation layout

 Layout 2/vertical navigation layout

 Layout 2/contact page

 Layout 2.1/aligned left

 Layout 3/right vertical navigation

Bramble Magazine

Instead of redesigning one of the magazine websites that I reviewed I have decided to use my own magazine and branding (developed in 2nd and 3rd year), with which to develop the website. There are several reasons that I have chosen to use my own magazine and particularly as a 4th year student I think that it will be particularly helpful for me to use my own work for this project, which I could then potentially at some later date modify into a professional portfolio.

The magazine is called “bramble” and it focuses on the areas of photography, illustration, fashion and design. It has a feminine and whimsical aesthetic and I want to use this visual language develop a website that is both refined and stylish yet playful and beautiful.

As the magazine is not in production I will draw images from others as well as my own visual archive to illustrate the look and feel I am trying to achieve.

I find minimalistic websites and layouts appeal to me the most and I want the website to be as easy to navigate as possible, relying on good typography and design rather than complicated interactive elements to engage the viewer- (however if I manage to master any it would be nice to include)

I hope to create something that I will be able to extend on next semester for
my major work.

Wireframes

After selecting my layout grid I started to design simple layouts for the website.

Sitemap

 Refined Wireframes

These were gradually refined to three possible layouts, with imagery and branding added to give a sense of the look and feel of the site.
Wireframe Option 1

Grids

Templates + Minimalism

Before setting up my wireframes I investigated different grid structures commonly used in web design.
The grid i chose to use was a 960 x12 column grid
Template avalible for download from http://960.gs/


My main inspiration for my website came from http://www.minimalsites.com/
I love clean layouts and this site features beautiful examples of what can be achieved through thoughtful considered use of grids, images and typograpy.


Some examples