5. CONTENTS
SiteMap
6
Screenshots
6
Home Page
About Us Page
Menu Pasteries Selection Page
Menu Cake Selection Page
Catering Form Page
Outlet Page
7
9
10
12
14
16
Styleguide
Typeface Application
Colour Palette
Art Direction
Dimension Of Home Page
Dimensions Of About Us Page
Dimensions Of Menu Pasteries
Selection Page
Dimensions Of Menu Cakes
Selection Page
Dimensions Of Catering Form Page
Dimensions Of Outlet Page
18
Contact Information
43
19
21
25
28
31
33
35
36
38
5
8. SCREENSHOTS
- HOMEPAGE
Navigation bar
Slideshow that auto
plays images of our
products/promotions
Direct link to our
subscription page
Footer
Links to our
menu page
8
Links to our
Facebook page or
other social media
11. SCREENSHOTS
- MENU PASTERIES
SELECTION PAGE
Buttons to navigate to
our cakes selection.
Words turn white
when active.
Slideshow that auto
plays images of our
products/promotions
Slideshow that auto
plays images of our
products/promotions
Gives information about
food when hovers over.
11
13. SCREENSHOTS
- MENU CAKE
SELECTION PAGE
Buttons to navigate to
our cakes selection.
Words turn white
when active.
Slideshow that auto
plays images of our
products/promotions
Slideshow that auto
plays images of our
products/promotions
Gives information about
food when hovers over.
13
19. STYLE GUIDE
TYPEFACE APPLICATION
INTRODUCTION
The 2 main typeface used in this website are Androgyne and
Helvetica Regular. As a general rule, Androgyne is used for
styling as part of the design while Helvetica Regular is used
mainly for body text.
Androgyne
Helvetica Regular
ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmno
pqrstuvwxyz
1234567890
ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmnopq
rstuvwxyz
1234567890
19
20. STYLE GUIDE
TYPEFACE APPLICATION
When using Androgyne, do keep in mind that every first
letter of the word must be capitalized. Androgyne is used for
navigation bars, headers and buttons.
Navigation Buttons, Menu Selection
Buttons & Form Buttons:
Headers:
Submit Here!
Our History
Font: Androgyne Regular
Font Size: 20pt
Font: Androgyne Regular
Font Size: 24pt
Font Colour: #BE1E2D
Navigation Button Colour:
Navigation Button Colour Active:
#FFFFFF
#000000
Menu Selection Button Colour:
#FFFFFF
Menu Selection Button Colour Active: #BE1E2D
Submit Here Button Colour:
#FFFFFF
Hyperlinks:
enquires@balmoralbakery.com
Lorem Ipsum
Font: Helvetica Regular
Font Size: 14pt
Font Colour: #BE1E2D
Font Colour After Clicking: #000000
20
Body Text:
Font: Helvetica Regular
Font Size: 14pt
Font Colour: #000000
21. COLOUR PALETTE
HOMEPAGE
#000000
#BE1E2D
Find Out More Button
Background:
#000000
Opacity 70%
Slideshow Button Background:
#000000
Opacity 70%
Slideshow Button Symbol:
#FFFFFF
Mailing List Button
Background:
#000000
Opacity 10%
Mailing List Button Font Colour:
#BE1E2D
#BE1E2D
21
22. SCREENSHOTS
- MENU PASTERIES
SELECTION PAGE
Pasteries Selection
Button Background:
#000000
Opacity 70%
Menu Information
Hover Background:
# D2D1D1
Opacity: 90%
22
23. SCREENSHOTS
- CATERING FORM PAGE
Catering Form Font
Colour:
#929090
Submit Here Button
Background:
#000000
Opacity: 70%
23
25. STYLE GUIDE
ART DIRECTION
Menu Selection Images:
1/3
1/3
1/3
Each image should have a border of 20px from each other when placed together in line. Images do not
have to follow strict guidelines as long as the subject is right in the middle or 1/3 of the entire cropped
composition.
25
26. Blurbs Usage:
Icon Usage
For rectangle, there is no need
for a clearance space as it is
supposed to be on the top right
hand corner.
For circle blurbs, a 10pt
clearance space is required.
Blurbs of any other shapes are
not allowed.
Active Icons
Inactive Icons
Active Icons will be coloured in
#BE1E2D while inactive icons
will be coloured in #000000.
Background colour of icons
should always be #FFFFFF
with an opacity of 70%.
Slideshow Cropping:
Images chosen for slideshow
should have the subject in right
in the middle or 2/3 of the
entire cropped composition.
2/3
26
The height of the information
hover box should have a height
of a maximum of 1/3 of the
entire image. It should always
remain at the bottom whereby
it will move up when the cursor
is hover over it.