Monday, 5 May 2014

Brief 16 // Typocircle // Website

After doing some research into various website layouts and looking at the idea of building a website around the idea of structured grid, but using different sided containers within this - much like the showcase pages within the designer publications. I have taken inspiration from the research and from the products already designed to bring together all the elements and build a website which is in keeping of the branding of the project. I have tried to translate the printed design style / aesthetic through the web element.

Firstly I drew out the idea / plan of the design which I wanted to create. Hand drawing this first gets the ideas down onto the page, this is a very rough drawing to illustrate to myself how things could fit together and create the digital design.

Design of the home page and linked pages. You can see from the two designs that the header and footer of the website stay the same throughout the full website. The middle section of the website changes for each of the pages. On the home page this displays the links to the pages as images, on the linked pages this is the main content area of the page. 

Home Page scamp

Linked page scamp

Digital Scamps
From creating the rough drawings, I could now use these as a guide to create the digital version of the scamp, which will be a much closer version of how the website will look. This enables me to tweak the design and get everything in correct place so it works as a user friendly website, before adding in the content of each of the page. 

Home page

Linked pages

The design of the website is quite simple, but takes inspiration from the products within the promotional material, so everything will link together across the print and web products. Creating the scamps enables me to design the website in the most user friendly way and make sure that all the content fits within the pages and everything is included within the pages. The scamp is also based on the 6 column grid, so the website works within the same grid and format as the printed products, again creating a link between all the products. 

Website Design 
From the digital scamp, I can now start to add the content into the website to create the website design. Sticking to the scamp and within the grid structure, the website has a structured layout, through the use of  different sized and format containers, this again creates a hierarchy within the website as the bigger images are seen first which are the most important pages. 

The home screen takes on the same design element as the showcase pages within the designer publications. This works around using a grid and applying different sized containers within the grid to create an interesting build up of shapes and images within the web page. The images work as links to the sub pages, which are then linked out to further sub pages. 

Linked pages from the homepage, take on the same design with the header and footer, the middle section of the website changes on these pages. Here the images/links are replaced for the main content area. Splitting the page by the use of the grid, the left hand side shows the links of the sub pages of each section. The right hand side displays the content for that page, this section of the webpage can be scrollable if there is too much content to fit into the container. 

The header image of each page changes to one which is relevant to that section and the top and bottom links all stay the same, to make the website consistent across every page. This should create a user friendly website and one which the user can easily navigate around and find the information they need easily. 

Sub Pages
From each of the 4 main sections of the website above, each page splits down in further sub pages. There are three further pages to each of the sections, these provide all the needed information for the event and informs the user on everything they need to know about the event and designers. 

These pages are again designed in the same way as the pages above, its just the content in the middle section of the page which changes to display the relevant information for each page.

About sub pages. 

Exhibition sub pages

Shop sub page

Talks sub pages. 

No comments:

Post a Comment