UNSW Global Website Branding Guidelines. Website Brand Guidelines

Size: px

Start display at page:

Download "UNSW Global Website Branding Guidelines. Website Brand Guidelines"

Ophelia Lloyd
5 years ago
Views:

1 Website Brand Guidelines I

2 Contents 1 Introduction Website Structure Page structure overview Home page structure Secondary page structure Page elements Header (UNSW Logo and Faculty/Business Name) Horizontal Navigation bar Banner Images Left Side Navigation Main Content Section Footer Content (text and multimedia) Text Multimedia (Images, flash animation, videos, PDF files) II

3 1 Introduction This guide aims to provide an overview of website standards followed at UNSW Global. It will help a non-technical audience understand the basic layout for primary and secondary web pages, design of navigation bars, website elements and flexibility and limitations for designing a web page. Although consistency is important, this guide takes into consideration the different colour and design requirements for individual business groups. 2 Website Structure 2.1 Page structure overview To ensure consistency across UNSW Global s public facing websites, the following requirements for each website are essential: 1. Aligned in the centre of web browser 2. Fixed style layout 3. Minimum width of page is 950 pixels/ 60em of the body 4. Body of the webpage must have a suitable background colour with a proper contrast to the foreground colour of the webpage. 2.2 Home page structure The home page consists of the following elements: 1. Header (UNSW Global Logo, Business Group Name, Navigation) 2. Horizontal Navigation Bar 3. Banner Images 4. Left Side Navigation 5. Main Content Section 6. Footer Each of these element are illustrated in the wire frame below: 1

4 Primary Page Wireframe 2

5 Primary Page Example 3

6 2.3 Secondary page structure The secondary page consists of the following elements: 1. Header (UNSW Global Logo, Business Group Name, Navigation) 2. Horizontal Navigation Bar 3. Left Side Navigation 4. Main Content Section 5. Breadcrumb Navigation (Optional) 6. Images within Main Content Section (Optional) 7. Footer Each of these element are illustrated in the wire frame below: Secondary Page Wireframe 4

7 Secondary Page Example 5

8 3 Page elements 3.1 Header (UNSW Global Logo and Business Group Name) Logo: Width: 178 pixels Height: 38 pixels Padding-top and bottom: 20px Padding Left: 15px Padding Right: 35px Business Name: Font: Arial Font Size: 24px Colour: #103d95 Horizontal Nav1 Font: Arial Font Size: 12px Colour: # Logo design, colour, width and height must not be changed in any circumstances. 2. Business Group Name must be in hexadecimal colour #103d95 with a font size of 24 pixels. 3. Horizontal Nav1 is optional. It can be used for the important links such as contact us, Feedback or Enquire now. 6

3.2 Horizontal Navigation bar 1. Navigation colours can vary according to the requirements of different business groups. 2. Navigation must have a button to go back to home page. 3.

9 3.2 Horizontal Navigation bar 1. Navigation colours can vary according to the requirements of different business groups. 2. Navigation must have a button to go back to home page. 3. A navigation item must not be more than 18 letters. 4. A font size of 13px bold must be used in the navigation bar. 5. Business Groups may select suitable foreground and background colours for navigation bar to meet the accessibility requirements of the target audience. 3.3 Banner Images One or more than one banner images can be used in a banner section to show the services or products offered by the website. 3.4 Left Side Navigation 1. Left Side Column must not be more than 30% of total width of the web page. 2. There must be a clear division between the Left side navigation and Main Content Section. 3. Images used in left column must not be greater than the size of left side column. 4. Equal height columns must be used to keep the consistency across pages. 5. Left Side navigation must have a white background colour. 6. Left Side Navigation can contain secondary/sub links related to each page, image buttons, scrolling news, links to forms and search fields etc. 7

10 Secondary / Sub links Link to Enquire now form Link to a PDF Program Guide Image button Example of Left Side Navigation 8

11 3.5 Main Content Section 1. Main section must have a white background colour with a black text in foreground. 2. Hyperlinks in active state must be in blue colour. 3. Main Content Section must not be more than 70% of the total width of a page. 4. As this section would hold the most information, it must be divided into headings, sub headings and paragraphs. 5. Each section must have relevant, objective, clear and concise information about it. 6. Use bullet points where appropriate. People tend to scan the information on the internet instead of reading thoroughly. 7. Web page should not have long scrolls. If a page is too long, it should be divided into sub sections. Secondary/sub-links can be given inside the text or left side column of a page which would redirect the user to a sub section. 8. Use the images where appropriate. Images must be aligned to the right side of the web page. 9. Emphasise key words or phrases by bolding them. Main Heading Sub Heading Image Sub-links Bullet Points 9

Policies, Sitemap, FAQs, Jobs, Feedback, Contact Us, Contact Web Master,

12 3.6 Footer A website footer can have links to sub pages/secondary pages, Privacy Policy, Copyright and Disclaimer, Terms and Conditions, Policies, Sitemap, FAQs, Jobs, Feedback, Contact Us, Contact Web Master, social networking websites and company personal overview. Example of Footers 10

13 4 Content (text and multimedia) 4.1 Text Text must contain headings, sub headings, paragraphs, hyperlinks and bullet points. The following standard must be followed for putting text inside a website: 1. Sans-serif fonts must be used for the website. They are supported across a wide range of browsers, operating systems and handheld devices. 2. Hyperlinks must have blue colour in active state. Colours must change on mouse hover. 3. Headings and sub-headings must have different colours and font size. 4. Bullet points must be right indented as compared to the other text on the webpage. 4.2 Multimedia (Images, flash animation, videos, PDF files) 1. Multimedia features must be used to convey a message or to display more complex information. 2. Don t over crowd the pages with a lot of images. It will slow down the page download. 3. Use PDF, Excel, Word and Power point icons with download links. 4. Avoid the use of PDF files. They may take longer time to download. 5. Avoid uploading Microsoft Word, Power Point, Excel documents. They require a user to have Microsoft office on their computer. Some users may not have this proprietary software installed on their computer. 6. Use common formats and applications for multimedia which should be readable by an earlier version. Version 1 Approved 28 September 2010 Peter Coady Senior Manager, Marketing Communications UNSW Global Pty Limited 11

McMaster Brand Standard for Websites

McMaster Brand Standard for Websites McMaster University s policy calls for all university websites to follow its brand standard. McMaster websites share common elements, presentation and behavior and a consistent design, enabling visitors