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