Balmoral Bakery Web Guidelines

50 %
50 %
Information about Balmoral Bakery Web Guidelines
Books

Published on February 28, 2014

Author: elainechngtseling

Source: slideshare.net

1

2

3

4

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

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

SCREENSHOTS - HOMEPAGE 7

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

SCREENSHOTS - ABOUT US PAGE 9

SCREENSHOTS - MENU PASTERIES SELECTION PAGE 10

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

SCREENSHOTS - MENU CAKE SELECTION PAGE 12

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

SCREENSHOTS - CATERING FORM 14

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

SCREENSHOTS - CATERING FORM 16

SCREENSHOTS - CATERING FORM Googlemap plugin to locate our outlets 17

18

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

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

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

SCREENSHOTS - MENU PASTERIES SELECTION PAGE Pasteries Selection Button Background: #000000 Opacity 70% Menu Information Hover Background: # D2D1D1 Opacity: 90% 22

SCREENSHOTS - CATERING FORM PAGE Catering Form Font Colour: #929090 Submit Here Button Background: #000000 Opacity: 70% 23

24

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

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

28

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

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

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

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

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

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

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

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

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

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

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

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

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

42

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

44

45

46

Add a comment

Related presentations

Related pages

Rebranding For Balmoral Bakery on SVA Portfolios

Introducing the Rebranding Of Balmoral Bakery Project, we ... We have included a Brand Identity And Web Guidelines For Balmoral Bakery as well to ...
Read more

The Balmoral | LinkedIn

View 7801 The Balmoral posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn.
Read more

The Persian Man, Thunder Bay - 400 Balmoral St ...

The Persian Man, Thunder Bay: See 22 ... 400 Balmoral St, Thunder Bay, ... TripAdvisor LLC is not responsible for content on external web sites.
Read more

Balmoral on York (Launceston): See 410 Hotel Reviews and ...

Book Balmoral on York, Launceston on TripAdvisor: See 410 traveller reviews, 94 photos, and cheap rates for Balmoral on York, ranked #3 of 30 hotels in ...
Read more

The Web Guidelines | LinkedIn

View 24 The Web Guidelines posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn.
Read more

Chalmers Bakery Ltd, Ballater - Restaurant Reviews, Phone ...

Chalmers Bakery Ltd, Ballater: See 26 unbiased reviews of Chalmers Bakery Ltd, rated 4 of 5 on TripAdvisor and ranked #16 of 28 restaurants in Ballater.
Read more

Google

Web History : Advanced search Language tools: Advertising Programmes Business Solutions +Google About Google Google.com © 2016 - Privacy - Terms ...
Read more