Monday, 25 November 2013

TO SCALE MOCK UPS AND ILLUSTRATIONS

Homepage:




 In preparation for the web crit, I wanted to visualise each page of the website, to gain feedback primarily on aesthetics and tone. 

The mock ups have been designed to scale, using the dimensions shown on the previous wire frames, in order to see how the format and layout would work when coded for a website.

All the elements have been designed separately so they can all be saved at the correct dimensions for use on the web.

Below shows the title of the website. This was placed in line with the wire frame, as are all the other design elements shown.







1024px x 768px


To size text placement. Use of placement text until designs and dimensions are finalised. 





I applied both leading and kerning to the title as the spaces were not in proportion visually.


Geometric shapes used for headers. I drew outlines before considering placing the titles, to ensure spacing, dimensions and alignment was right for each separate shape.



I placed titles in a readable an legible point size for online viewing, around 16pt.


I placed the series of headers into the mockup. I would like to make the shapes rollovers which change colour.

For the remaining pages, the header and title were changed appropriately, and saved as different files as the headers move around depending on the focus of the page/link clicked on. 

I chose a neutral, pastel colour scheme to relate to a young audience without any gender specifications.





The remaining pages were filled in using the same method on indesign. Each item is a different file to enable easier coding in the future, and allows me at this moment in time to make final changes to the aesthetics and layout, before the coding process begins using Dreamweaver.



No comments:

Post a Comment