Produce a style guide that outlines the specific characteristics of your website
considerations;
- font families: header and body
- colours: rgb/hex codes
background/foreground/palettes
how do these colours relate to the fonts?
- button styles: colour/image
default/hover/active
- logo and variations
- grids/layout/variations/sub pages
The main colour scheme of my website will be greyscale so the attention isn't drawn away from the photographs which is the main piece of content on the site. I researched into web safe shades of grey to ensure that the colour scheme was consistent on every computer screen.
I've decided to choose 4 shades from the table above that will be used to highlight and separate different sections or controls on the webpage. I chose the second darkest shade after black as the main headline colour and various smaller areas of text across the site. Silver is the lightest shade I've chosen (other than white for the background) because it's dark enough to be contrast with the white background but still has the lightest qualities compared with the other greys used.
Shades (from lightest to darkest):
#c0c0c0 192 192 192
#666666 102 102 102
#808080 128 128 128
#333333 51 51 51
White will also be one of the main colours, used for the background primarily.
#ffffff 255 255 255
How many different pieces of text will be on the whole website?
- names of cites appearing next to squares
- links on homepage
- heading
- information on split screen page
- names of cities on split screen page
- contact/about info
I wanted an appropriate font for the heading 'architecture in europe', one that reflected the tall structures. Voltaire seems like an appropriate typeface if it was used in all uppercase.
The body copy will be Georgia because it's a larger serif font that is easily readable when combined with a large line height on the web. I also decided against using Voltaire and opted for web safe, sans serif font Helvetica.
Font size and line height are proportionally related through ratio, and are important to inform how the user views the website and content.
No comments:
Post a Comment