A1 Website Blueprint

B. Sketchbook - DESIGN EXPERIMENTS & DEVELOPMENT (1 of 5)

Homepage Layout 1)

Good top-left -> bottom-right flow

Homepage Layout 2)

I'm unsure about this left menu bar...

Homepage Layout 3)

Nice symmetry, but is it a bit boring...?

Homepage Layout 4)

Better top-left -> bottom-right flow

B. Sketchbook - DESIGN EXPERIMENTS & DEVELOPMENT (2 of 5)

Background Image 1)

Background Image 2)

Background Image 3)

Background Image 4)

B. Sketchbook - DESIGN EXPERIMENTS & DEVELOPMENT (3 of 5)

1) DYNAMIC WEBPAGE TRANSITION

1) Button / Icon changes under mouse hover

2) Click causes auto-scroll down to new page section

3) Thin vertical line is shown upper center to signify breadcrumb trail

(Eg. discovery.wisc.edu/)

2) BUTTON CLICK FOR MORE INFO

(Eg. ifly50.com/)

3) VISUAL PAGE CHANGE

(Eg. moxhe.com.au/)

4) BUTTON HOVER BEHAVIOUR

When a button or icon is under mouse hover, it changes to a brighter colour with a glowing border, showing the user that it may be clicked.

B. Sketchbook - DESIGN EXPERIMENTS & DEVELOPMENT (4 of 5)

COLOURFUL:

COLOUR SCHEMES

Using the online ‘Adobe Color CC’ tool (https://color.adobe.com/create/image/) I based the colour scheme on my BurgerEarth logo.

Of the various colour-sets, I prefer the original ‘colourful’ selection on white (or near-white) background, but will reserve judgement until having experimented with actual photographs for background images, as they will take up most of the visual space of the webpage.

ANALOGOUS:

COMPLEMENTARY:

MONOCHROMATIC:

TRIADIC:

B. Sketchbook - DESIGN EXPERIMENTS & DEVELOPMENT (5 of 5)