• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Balmoral Bakery Web Guidelines
 

Balmoral Bakery Web Guidelines

on

  • 157 views

 

Statistics

Views

Total Views
157
Views on SlideShare
87
Embed Views
70

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 70

https://www.behance.net 65
http://www.behance.net 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Balmoral Bakery Web Guidelines Balmoral Bakery Web Guidelines Presentation Transcript

    • 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