1. 1

2. 2

3. 3

4. 4

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

6. SITE MAP
Home
About Us
Menu
Pasteries
Selection
6
Catering
Cake
Selection
Outlet

7. SCREENSHOTS
- HOMEPAGE
7

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

9. SCREENSHOTS
- ABOUT US PAGE
9

10. SCREENSHOTS
- MENU PASTERIES
SELECTION PAGE
10

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

12. SCREENSHOTS
- MENU CAKE
SELECTION PAGE
12

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

14. SCREENSHOTS
- CATERING FORM
14

15. SCREENSHOTS
- CATERING FORM
Form for events/catering
purposes. Message box is
for addtional information
15

16. SCREENSHOTS
- CATERING FORM
16

17. SCREENSHOTS
- CATERING FORM
Googlemap plugin
to locate our outlets
17

18. 18

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

24. 24

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.

27. 27

28. 28

29. DIMENSIONS
HOME PAGE
Width: 275px
Height: 80px
Height: 60px
Width: 100%
Height: 200px
Width: 100%
Height: 40px
Height: 60px
Height: 40px
Width: 100%
Height: 620px
Height: 30px
Height: 40px
Line Weight For
Footer Line: 1px
Padding Top &
Bottom: 30px
Font: Helvetica
Regular
Font Size: 15px
29

30. DIMENSIONS
HOME PAGE
Width: 710 px
Width: 238px
Height: 60px
Font: Androgyne Regular
Font Size: 29
Width: 50px
Height: 50px
Font: Helvetica Regular
Font Size: 25px
Width: 307px
Height:430px
Width: 960px
Height: 430px
Width: 307px
Height: 430px
Width: 634px
Height: 160px
Width: 20px
Height: 20px
Width: 20px
30

31. DIMENSIONS
ABOUT US PAGE
Height: 30px
Height: 20px
Width: 324px
Height: 762px
31

32. DIMENSIONS
ABOUT US PAGE
Width: 618px
Height: 947px
Height: 40px
Height: 30px
32
Width 30px

33. DIMENSIONS
MENU PASTERIES
SELECTION PAGE
Height: 40px
Height: 40px
Width: 960px
Height: 430px
33

34. DIMENSIONS
MENU PASTERIES
SELECTION PAGE
Width: 218px
Height: 38px
Padding: 10px
Width: 202px
Height: 360px
Padding: 10px
Width: 307px
Height:430px
Height: 586px
Max Height:
195px
1/3 Of
Slideshow
Height
Clearance Of
20px Around
The Box
34

35. DIMENSIONS
MENU CAKES
SELECTION PAGE
Width: 960px
Height: 430px
Max Height:
195px
1/3 Of
Slideshow
Height
Clearance Of
20px Around
The Box
35

36. DIMENSIONS
CATERING PAGE
Width:40px
Height: 30px
Height:80px
Height: 10px
Height:30px
Width: 286px
Height: 274px
Width: 20px
36
Width: 20px

37. DIMENSIONS
CATERING PAGE
Width: 328px
Height: 900px
Width: 900px
Height: 618px
Width: 30px
Width: 30px
37

38. DIMENSIONS
CATERING PAGE
Width: 163px
Height: 520px
Height: 80px
Height: 40px
Width: 172px
Height: 45px
Padding: 10px
Font: Androgyne Regular
Font Size: 20 pt
38

39. DIMENSIONS
OUTLET PAGE
Width:40px
Height: 30px
Height: 80px
Height: 10px
Width: 550px
Height: 300px
Height: 40px
Height: 40px
39

40. DIMENSIONS
OUTLET PAGE
Height: 10px
Height: 20px
Height: 40px
Width: 286px
Height: 274px
Height: 40px
40
Height: 40px

41. DIMENSIONS
OUTLET PAGE
Width: 618px
Height: 580px
Width: 328px
Height: 900px
Height: 358px
Height: 40px
41

42. 42

43. CONTACT INFORMATION
Balmoral Bakery
Blk 105 Clementi Street 12
Sunset Way #01-06,
Singapore 120105
balmoralbakery.com
43

44. 44

45. 45

46. 46