Cardiff University User Experience Style Guide

Transcription

1 Page 1 Cardiff University User Experience Style Guide cardiff.ac.uk/ux V2 : 04/06/2013

2 Page 2

3 Contents Page 3 Page 4 Page 17 Page 35 Page 52 About Type Sizes Iconography Welsh Page 5 Page 18 Page 41 Page 53 Logo Links Using Icons User Experience Style Guide Roadmap Page 6 Page 19 Page 44 Digital Icon Type & Links Examples Buttons & Other Elements Page 8 Page 20 Page 45 Primary Colour Palette Global Header Images Page 10 Page 26 Page 47 Secondary Colour Palette Site Header Photo / Media Gallery Page 11 Page 29 Page 49 Grid Structure Navigation Quick Link Module Examples Page 15 Page 34 Page 50 Typography Footer Slideshow Tile

4 About Page 4 The UX Style Guide has been produced as a quick reference to Cardiff University s online visual language. The guide profiles typography, our global header, common design patterns and what the University requires from all web productions created in the house style.most site producers will experience the new house style in the Squiz Matrix CMS or the University s approved Wordpress theme. For projects approved to carry the house style outside of those systems, the UX Style Guide provides an at-a-glance reference for how things should look and feel. This document is available to download from the University s Web & UX Guidelines website, along with our UI kit, which provides code, sample pages, CSS and more for application and site producers to refer to. Web Producers from the University are also invited to contribute and collaborate over the Web & UX Guidelines website. The Web & UX Guidelines website will be available in July/August 2013.

5 Logo Page 5 Cardiff University logo 100 x 100px The electronic version of the Cardiff University logo is a square as this reproduces more precisely on screen and will align with the grid used for the website. The print version of the logo is available in CMYK, spot and monochrome versions to suit the print processes. To download the version of the logo for use in printed material and view guidelines for use visit:

6 Digital Icon Page 6 The Digital Icon is an abstraction of the full Cardiff University logo, created for use in small digital spaces where the full logo Cardiff University Digital Icon 50 x 50px - standard header size may become illegible or cumbersome. It is categorically not for use in print, and should only be used digitally in 4 contexts: Cardiff University Favicon 16 x 16px - favicon size Across the website global headers as per house style. As a favicon showing in browser tabs and bookmarks. On social media avatars and mobile app icons in a fixed position (see diagram) On mobile app icons in a fixed position (see diagram) The print version of the logo is available in CMYK, spot and monochrome versions to suit the print processes. Cardiff University Avatar A digital logo placed onto a background image of your choosing The digital logo is 1/3 of the total avatar width Placement of the digital logo is always aligned to the top and 1/12th of total avatar width from the left hand edge of the avatar 180 x 180px minimum dimensions Services will resize the avatar on upload A Photoshop template file will be made available at cardiff.ac.uk/ux

7 Digital Icon Page 7 For web use, the full logo University should always feature on the same page as the digital icon. In the case of most web pages, this will be Cardiff University Digital Icon 50 x 50px - standard header size in the house style footer. For non-house style websites, the designer may use their discretion if they use the digital icon and full logo or just the full logo. Cardiff University Favicon 16 x 16px - favicon size For social media avatar and mobile app icon use, the digital logo should be placed according to the divisions noted in the diagram. Cardiff University Avatar A digital logo placed onto a background image of your choosing The digital logo is 1/3 of the total avatar width Placement of the digital logo is always aligned to the top and 1/12th of total avatar width from the left hand edge of the avatar 180 x 180px minimum dimensions Services will resize the avatar on upload A Photoshop template file will be made available at cardiff.ac.uk/ux

8 Primary Colour Palette 1/2 Page 8 The primary Cardiff University Primary colour palette should be used consistently throughout it s application of the User Experience Style Guidelines. Whilst the University transitions to the palette and guidelines noted in this document, you may still see use of #990033, a web-safe darker Cardiff University Red. This is now deprecated. Swap it for the one noted on this page wherever possible. Hex: #d3374a R:211 G:55 B:74 Hex: #d3d3d2 R:211 G:211 B:210 Hex: #22211f R:34 G:33 B:31 Hex: #ffffff R:255 G:255 B:255

9 Primary Colour Palette 2/2 Page 9 The primary Cardiff University Tints colour palette contains a spectrum of tints from light to dark grey. These can be used mainly as graphical backgrounds, button #e9e9e9 R:233 G:233 B:233 #d0d0cf R:208 G:208 B:207 #bcbbbb R:188 G:187 B:187 overstates etc. #91908f R:145 G:144 B:143 #7a7978 R:122 G:121 B:120 # R:102 G:101 B:100 # R:55 G:55 B:54 #22211f R:34 G:33 B:31

10 Secondary Colour Palette Examples 1/2 Page 10 The secondary Cardiff University Example 1 colour palette will be used when deviating from the main site into different subsites and areas. The rule is open on colour choice but the chosen palette needs to contain 3 tints of the same colour, Example 2 to allow for backgrounds, button overstates etc. For most websites, the Web & User Experience team will work with you to come up with a colour scheme that is both appealing and Example 3 functional. Colour is used on the University site for wayfinding as well as to improve contrast and visibility of content.

11 Grid Structure 1/4 Page 11 The grid structure is made up of different layers to help us align content and make the transition between different devices easier. 10px Vertical Grid 10px The first layer is a 10px vertical grid that helps define the detail.

12 Grid Structure 2/4 Page 12 The 60px vertical columns help align content areas, creating a visual hierarchy on the page. 60px Vertical Columns 60px 20px

13 Grid Structure Page 13 The 320px vertical columns help align content that will flow nicely between devices. 320px Vertical Columns 320px 20px Mobile Widescreen

14 Grid Structure Page 14 The 10px baseline helps align content horizontally. 10px 10px Horizontal Baseline

15 Typography 1/2 Page 15 The only three typefaces to be used in the application of the User Experience guidelines are: Franklin Gothic Medium Georgia Italic Arial (Regular and Bold) For Unicode and international Franklin Gothic Medium a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ! % &? ~ " # $ % & ' ( ) * + / \ ^ _ { } ¼ ½ ¾,. script requirements, including display of Chinese and other script systems, authors are free to use their own fonts. However, the 3 main typefaces should always be the primary typefaces. Georgia Italic a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ! % &? ~ " # $ % & ' ( ) * + / \ ^ _ { } ¼ ½ ¾,.

16 Typography 2/2 Page 16 Arial and Georgia are system fonts on many computers, while Franklin Gothic has been purchased as a web font. Details on the use of the Franklin Gothic web font are contained in the UI Kit. Arial Regular a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z % &? ~ " # $ % & ' ( ) * + / \ ^ _ { } ¼ ½ ¾,. Arial Bold a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ! % &? ~ " # $ % & ' ( ) * + / \ ^ _ { } ¼ ½ ¾,.

17 Type Sizes Page 17 H1 Franklin Gothic Medium 44px 50px leading / 10px tracking H2 Franklin Gothic Medium 34px 40px leading / 10px tracking H3 Georgia Italic 24px 30px leading / 10px tracking H4 Franklin Gothic Medium 24px 30px leading / 10px tracking H5 Georgia Italic 20px 30px leading / 10px tracking Introduction Body Copy Arial 16px 30px leading / 10px tracking Body Copy Arial 14px 20px leading / 10px tracking Article Links Georgia Italic 16px 30px leading / 10px tracking Caption Text Georgia Italic 14px 20px leading / 10px tracking Caption Text Links Georgia Italic 14px 20px leading / 10px tracking H6 Franklin Gothic Medium 20px 30px leading / 10px tracking H7 Georgia Italic 16px 30px leading / 10px tracking

18 Links Page 18 Consistency of colour and application of the link styling is paramount to the user experience. To provide inline navigation where expected by users, page titles (when listed on a page), images closely connected to page titles or headings, and calls to action (e.g. Read more, Book tickets, Contact us) should all be rendered as links and use the standard link styling. See the Iconography section for optional icons. Link colour should only deviate from the standard colours when mounted on a tinted background, photo or video. In these cases, high contrast and complimentary colour choice should influence the choice of link colour. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis est vel massa hendrerit sed suscipit magna interdum. Proin leo mauris, facilisis eu... Inline link style (inherits all paragraph typographic styles but applies link colour and hover state underlining) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inline link style (bold) Proin leo mauris Link with icon Arial 14px, 20px leading / 10px tracking (alternative icons for external links and document types etc. will be specified separately) Lorem ipsum dolor sit Amet consectetur Related links /sidebar style (Georgia Italic, 16px, unstyled list with icons) H4 heading with a link Heading with a link e.g. H4. Inherit all heading styles, apply standard link colour and hover underlining Links can also be enhanced by link icons. For link icon information, see the Iconography section. Cardiff University Standard link colour: #045bc6 (rgb 4, 91, 198) Hover state (including visited hover): #022d62 (rgb 2, 45, 98) underlined

19 Typography & Links Example Page 19 H2 Franklin Gothic Medium 34px 40px leading / 10px tracking H3 Georgia Italic 24px 30px leading / 10px tracking Introduction Body Copy Arial 16px 30px leading / 10px tracking Body Copy Arial 14px 20px leading / 10px tracking H4 heading with link Arial 24px 30px leading / 10px tracking H7 Georgia Italic 16px 30px leading / 10px tracking

20 Global Header (Public Website) 1/4 Page 20 The digital logo also acts as a link to the home page. Users can switch between the main public site and the Intranet using this link. The Global Header is the keystone of the Cardiff University web experience. Along with the Global Footer, it should appear on all core and standard Cardiff University websites. The Global header is supplied as part of the templates used in Squiz CMS or Wordpress corporate theme. If you are producing a website which uses a local or dead copy action header update notifications from the Web & User Experience team. This also applies to the footer. The design and content of the header must not be modified in either style or functionality. The Search box must always use the main website search and should never be modified with extra controls. of the header you must have the ability to update the header rapidly to ensure that it is consistent with the links available on the central website. You must also ensure you

21 Global Header (Public Website) 2/4 Page 21

22 Global Header (Public Website) 3/4 Page 22 Drop down menu will become visible on hover. The drop down menus should be flexible allowing content to grow. This menu content will be defined and managed centrally. If sites feature a local or dead copy of the global header, the site owner must undertake to update the header within 2 working weeks when requests are made centrally to do so.

23 Global Header (Public Website) 4/4 Page 23 On click of the Search box, an option will appear allowing the user to choose between Website and Course search. The Course search results page will allow the user to toggle between Undergraduate and Postgraduate courses.

24 Global Header (Intranet) Page 24 Link to the homepage of the public website The header for the Intranet uses the same layout and grid as the external site, but will use a near inverse colour scheme to the public website. Lighter colour tints will allow staff and students to instantly recognise an internal page or Intranet serivce. As with the public website header, the Intranet header should not be edited or changed by site owners and must remain consistent throughout the Intranet user experience. If there is no Welsh equivalent available for the current page or section in the Intranet the Cymraeg link will be disabled and displayed as a lower contrast link The header is labelled Cardiff University Intranet (which is also a link to the Intranet homepage) and the toggle at the far right allows the user to switch to the public website. In Intranet mode, Search will search documents, blogs, and other Intranet services.

25 Global Header (Applications) Page 25 Link to the homepage of the application follow the intranet homepage name and link, the > separator indicates that this is a service within the intranet. This indicator should not be more than one level deep. It is not to be used as a breadcrumb. A number of Intranet services run on third party applications. Examples are Learning Central (Blackboard) and Office 365 ( and calendar system). Third party services can be difficult or costly to make look and feel exactly like our Intranet, often for little user experience gain. For services that offer little customisation, a single strip version of the Intranet header it is not appropriate to use the full Intranet header. The user will still see a clear label of where they are, how to get back to the Intranet homepage and how to switch to the public website. The single strip header should only be built into your service after consultation, as a review of your service may be required to ensure no usability problems may be encountered. may be applied. This should only be used when

26 Site Header Page 26 The site header The Site Header is a persistent area that is the masthead of each University website. Tailored and unique for each site, but to a design pattern, the Site Header appears between the global header and the site s horizontal navigation bar. Background Site owners should choose a colour and/or image to fill this space. We recommend solid colours, textures and abstract imagery, as photographs of buildings or people may be obscured by the site s title. Remember that this block of imagery helps users identify that they are on your website. Do not put any text in your background image and try and keep detail to a minimum. If you use colours or there is a colour theme to your backround image, you may wish to use a palette selection from our styles to accent the rest of your site and content colour to match it. The University s Web & User Experience team are able to help you with site header background designs and may contact you if there is room for improvement with one you have produced. Depth of header The depth of the header is defined for the entire site with the exception being the central homepage. The height for all pages (excluding navigation below) is 250px. Wayfinding It is important that your site is recognisably distinctive to help users with wayfinding. Wayfinding gives our users visual clues that they are on a particular part of our website. Their expectations on available options, navigation and content are informed by these clues. Make your banner distinct to other sites of a similar topic where possible. Flexible slot The far right of the site header contains a space you may wish to use for a persistent piece of site content or functionality. If you have social media or service profiles that compliment your website, we d recommend using the flexible slot to promote these. You may also wish to promote an event or a news story. If your site is single purpose, such as to promote a survey, this is the perfect area to promote it. Remember that this piece of content will be shown to all users on all of your pages; keep the content fairly muted and remember to review it if it is date specific.

27 Site Header Examples 1/2 Page 27 Home page carousel banner

28 Site Header Examples 2/2 Page 28

29 Navigation 1/5 Page 29 Horizontal navigation The site navigation will follow the chosen colour palette for that section. The dropdown navigation must show only one level of navigation depth. Selected category (Drop Down Menu)

30 Navigation 2/5 Page 30 Breadcrumb An example of another extension to the site navigation are breadcrumbs. Breadcrumbs are not part of our core navigation structure, but may be suitable for some types of website. If you do require breadcrumbs, you should make sure your website does not have a left menu, as both together will clutter and reduce the quality of the user experience.

31 Navigation 3/5 Page 31 The horizontal navigation can be extended on sites that have a specific navigation need that is not met by the vailable options. This may be of particular value to a single-task website such as Search or to support logged in member services links. Extensions to the Site Navigation are rarely required, and all instances of their use should be agreed with the Web & User Experience Team prior to development.

32 Navigation 4/5 Page 32 Left menu The left menu should never be used as a substitute for well produced Left menu at three navigation items deep First Level Second Level content with inline or task related links. The left menu should also never be directly referenced in your content, as it will not always appear to the user (e.g. if they Second Level Selected Third Level are using a mobile phone or if the content is reused on a website that does not feature a left menu). Third Level Selected

33 Navigation 5/5 Page 33 Left menu Left menu at three navigation items deep Left menu sample demonstrating, from left to right, a users progression through the structure of the site.

34 Footer Page 34 The Cardiff University footer will contain social media links, the large version of the brand mark and any other secondary information. The social media links featured in the footer must link to the Cardiff University accounts and not school or section specific accounts. The footer must not be altered or styled differently to the footer used on the main website. As with the global navigation, if the footer is a local copy you must be able to enact changes requested by the Web Teams in a timely manner.

35 Iconography Page x 100px #22211f mount 20px Padding Final icon Icon sizes have been adopted from the Cardiff University logos. These icons work well with the chosen grid and are shown in two sizes. 100px square icons are used for page title icons, e.g. news item 50px square icons are used to indicate content type items within a page, e.g. quote panel or channel content. 20px inline icons are used for 50 x 50px #22211f mount 10px Padding Final icon titling - further details in their use will be in the UI kit. 20px square with 10px padding 16px inline icons for use when linking to documents e.g..pdf or for indicating external links are also available, refer to the UI kit for details.

36 Iconography (Content Icons) 1/3 Page 36 A selection of icons have been Large Icons 100 x 100px created to work throughout the site at various points. The code for their use will be made available in the UI Kit. Icon background colour is #22211f (R:34 G:33 B:31) and the icon is #ffffff (R:255 G:255 B:255). This rule should run throughout the sites creating global consistency. Icons are referred to by a name specific to its use e.g icon-map and they should not be used to refer to indicate any other use. For example icon-camera should not be used for video content Icons are supplied as a set of typefaces and css - refer to the UI kit for details Icons will be used on the standard #22211f mount but can be mounted on dark tints for school use by prioir agreement with SRWEB

37 Iconography (Content Icons) 2/3 Page 37 Small icons should be 50 x Sample Small Icons 50 x 50px 50px in size with 10px inner padding to allow the icon image to sit comfortably in the centre of the square with enough breathing space.

38 Iconography (Content Icons) 3/3 Page 38 These should only be used in Small Content Icons 20px Height (No Background) exceptional cases. Note that these icons should not be used to accompany text links as they will affect the line height of the link. They can be used as part of buttons and controls (such as slideshow controls).

39 Iconography (Link Icons) Page 39 These icons are used to accompany Link Icons 16px Height (No Background) links to indicate the type of action related to the link. For example download a file, indicate that the user is being directed to an external website or that the target requires the user to log in.

40 Iconography (Service Icons) Page 40 Service icons link to social media Service Icons 16px Height (No Background) accounts and profiles and thirdparty services that may be connected to a University website or content page. An example use of service icons is to link to a School s Facebook and Twitter pages, link to a blog for a division website or to link through to a range of social media accounts for student recruitment. A range of social media icons are provided and will be maintained along with our user interface design. The icons include all major social networks, generic icons for services such as blogs as well as a few Cardiff University- specific icons for services such as our Intranet and Connections. A number of country or region specific social networks are also catered for, including a number of Chinese social networks. For a full list of icons, and to suggest amendments or additions to the icon set, visit the Web & UX Guidelines website (live July/ August 2013). Mono in white (16 and 20px) Mono in black (16 and 20px) Colour (16 and 20px) These are sample icons for services and do not indicate endorsement of any services featured.

41 Using Content Icons 1/3 Page 41 20px Padding When creating a list using icons, they should sit to the left and the text accompanying the icon should be vertically centred to the icon (where possible). 20px padding between icon and text is recommended.

42 Using Content Icons 2/3 Page 42 30px Padding Offset 5px The small icons (50 x 50px) work well with the quick link modules and images. The icon is offset by 5px to allow it to stand out and should be relevant to the content. The icons are referenced via CSS names that refer to their intended use e.g. icon-quote or icon-twitter to maintain consistent application throughout the website. Full instructions for the use of iconography will be available in the UI Kit.

43 Using Content Icons 3/3 Page 43 Large icons are also used in an article header. The icon sits proudly in the top right hand side giving an indication as to what the user is reading.

44 Other Icons & Elements Page 44 Home Page Feed Buttons Inactive Overstate Carousel Buttons Inactive Overstate Carousel Markers Inactive Overstate Social Buttons (Footer) Inactive Overstate View More Button Inactive Overstate

45 Images 1/2 Page 45 All imagery should follow a 16:9 Image aspect ratio ratio allowing a variety of sizes to be used, as long as the size sticks to the ratio and the grid, it is correct.

46 Images 2/2 Page 46 A large image would be contained 16:9 620 x 350px within a news article or blog post. The option is available to have a caption below the image, this should be no longer than two lines of copy. 620 x 70px

47 Photo / Media Gallery 1/2 Page x 350px The Photo / Media gallery can be used by selecting a thumbnail to view the media in a larger window above. A caption can be added to the media if needed. If there is more than 5 content items the user can scroll through the thumbnails using the right and left buttons. 620 x 70px

48 Photo / Media Gallery 2/2 Page x 350px The thumbnail shows an overstate of what the content is when the user hovers over it. Images, Video, and animation can be shown here. 620 x 70px

49 Quick Link Module Examples Page px Width 20px Gutter Quick link modules are what make up the home pages of the main Cardiff University site, school sites and Intranet. The modules should contain snippets of information linking to more on the same subject. Photographic images, illustration and plain text can all be used. The colours used in the modules should relate to the colours used in the site that the content is coming from.

50 Slideshow Tile Page px Width The Live Tile will contain up to date information, messages, breaking news, current offers etc. The tiles can be viewed using the carousel buttons.

51 Advert / Promotion Module Page px Width The adverts / promotional boxes follow the 16:9 rule. These allow adverts containing images, text and hyperlinks to appear throughout the Cardiff University website. Wherever possible these should be presented as text to allow for translations and scaling to content for different device resolutions.

52 Welsh Page 52 Welsh version of the global header. Language toggle available to the user as a directly equivalent page/resource is available Language toggle disabled as no equivalent content exists. On hover the disabled link will display a tooltip with a message for the user directing them to relevant information

53 Roadmap Page 53 The User Experience Style Guide is an evolving document to reflect the feedback from users and the development of the components of the UI Kit. v.2 Document published for internal review. v.3 Updated to reflect feedback and changes from UI Kit development. Includes updated navigation description.

54 Page 54 For help using these guidelines please contact: For Photoshop design elements please refer to the Cardiff University UI Kit. Copyright Cardiff University