Now I have decided on my layouts for the site I have started to organise the content to drop into Dreamweaver. I have made the art boards the width of the container with the content centred so I can slot them straight into the container without having to add any padding etc.
Homepage
This will be the logo to feature top, centred on the homepage. I am going to have a scaled down copy of the logo in the top left corner onto of the navigation bar to make the homepage accessible from every page.
Allow it was suggested to leave out the link on the homepage I like the use of typography as a feature so I am still going to include the four roll-over buttons that link to each page. The fixed navigation bar at the top solves the issues of accessing every page.
The roll-over buttons will turn grey when hovered over.
About Page
I am going to create all the headings out of images for continuity across all pages. All the headings will be black on a white background.
This image will sit along side the text in the two column layout.
Gestalt Principles page
RGB colour values
This is the colour scheme for the backgrounds. I had to make the height 800px for the backgrounds for it to fill the whole screen.
I tested the colours of the headings to make sure they suited the background colours.
Headings height dimensions:
-Gestalt Principles:155px
-Proximity:72px
-Closure:85px
-Continuation:60px
-Similarity:73px
-Figure-Ground:55px
I realised I needed to know the height dimensions to get them to sit in the right position in dreamweaver so I adjusted the art board size in illustrator to find out the dimensions.
Now I have the headings in place, I need to make the images for the ages.
The first page for each principle will have an image and the second will have a two column grid.
The dimensions for the images are:
image1:
512width x 530height
image2:
256width x 530 height
These dimensions will work for all the images for the Gestalt principles page.
These are the images for all the sub pages.
Figure-Ground Page
Background colour scheme
Headings height dimensions:
-Figure-Ground:55px
-Simple figure-ground:155px
-Figure-ground reversal:120px
-Figure-ground ambiguity:120px
Next I chose the colours for the headings in the same way as before.
As discussed in my crit, I needed to create a visual indicator to make the viewer aware that they need to scroll down on certain pages so I have made a simple arrow shape which will be displayed at the bottom of each page that has multiple pages in one.
Gallery Page
Heading height dimension:
-Gallery:80px
I sourced a small collection of images to display on the gallery page. If the website was live the collection would be a lot larger to work as an inspiration page as well. This would make the site updatable and give it another purpose.
The width is 270px and the height is 203px and 320px height for the taller images.
No comments:
Post a Comment