Page 1

NES ePortfolio Full Style Guide v0.1.docx

Page 1


NHS Education for Scotland

ePortfolio: Style Guide Version 0.1

Author: Tim Brown, 16/09/2011

NES ePortfolio Full Style Guide v0.1.docx

Page 2


ePortfolio Style Guide Contents Introduction .............................................................................................................................................. 4 Layout ....................................................................................................................................................... 6 Paragraphs ................................................................................................................................................................................................................... 6 Headings ...................................................................................................................................................................................................................... 7

Fonts......................................................................................................................................................... 8 Colours ..................................................................................................................................................... 9 Graphics and icons .................................................................................................................................. 10 Logos ...................................................................................................................................................... 11 ePortfolio ...................................................................................................................................................................... Error! Bookmark not defined. NES............................................................................................................................................................................................................................. 11 External logos ............................................................................................................................................................................................................ 11

Language ................................................................................................................................................ 12 Navigation .............................................................................................................................................. 14 Pro-forma content .................................................................................................................................. 15 Accessibility ............................................................................................................................................ 16 Common style sheet elements........................................................................ Error! Bookmark not defined. Coding .................................................................................................................................................... 17 References and useful links ..................................................................................................................... 18 Contacts .................................................................................................................................................. 19

NES ePortfolio Full Style Guide v0.1.docx

Page 3


Introduction The purpose of the NHS ePortfolio Style Guide is to provide a reference guide to anyone producing content that involves the ePortfolio product or brand. Primarily this will be designers and developers of the ePortfolio site so emphasis is placed on web-based styles and content. By adhering wherever possible to these guidelines the ePortfolio site (and associated printed media) will have a consistent appearance, style, functional approach, and tone of voice that reflects the ePortfolio’s ethos of solidity, probity, reliability and trust. Further values to project are those of a formal and educationally robust environment. The ePortfolio has seen up an update to the design for a selected number of sites, referred to as “Design 2011”. The styles described here are derived from, and pertain to Design 2011, to which all sites will ultimately tend towards.

NOTE This is a work in progress with section to be added, and should be updated regularly.

NES ePortfolio Full Style Guide v0.1.docx

Page 4


Name ePortfolio does not have a hyphen in it. Only use “e-portfolio” (not lower case ‘p’) when referring to the generic concept of an eletronic portfolio. “NHS” or “NES” ePortfolio?

NES ePortfolio Full Style Guide v0.1.docx

Page 5


Layout Paragraphs Although not universally implemented across all sites at the time of writing this, the ePortfolio web page layout is a wide layout, based on the width of the browser window. Consequently, blocks of text may display on wide screens with lines that are difficult to read and so should be avoided. Paragraph widths should be limited using <p> classes to aid readability. Table 1 indicates currently available classes that can be used. Table 1. <p> classes defined in default2011.css Class Pixel width Tabloid 250px Standard 550px Wide 850px Style definition: <p> p.readable { max-width:550px; padding-bottom:20px; } p.newsprint { max-width:250px; padding-bottom:20px; } p.wide { max-width:850px; padding-bottom:20px;

NES ePortfolio Full Style Guide v0.1.docx

Page 6


Headings <h1> should only be used at the top of a page as the page title. <h2>, <h3> and so on should be used in a descending heirarchy, as defined in the Style definitions below. <h1> by default has a 2px grey (#dddddd) underline, but the class â&#x20AC;&#x153;simpleâ&#x20AC;? removes this h1 { font-size: 140%; font-weight: 600; line-height: 11.5px; margin-top: 4px; margin-bottom: 9px; padding-bottom: 6px; border-bottom: 2px solid #dddddd; } h1.normal { font-size: 140%; font-weight: 600; border: 0px; } h2 { font-size: 120%; } h3 { font-size: 90%; }

NES ePortfolio Full Style Guide v0.1.docx

Page 7


Fonts The default font family for text blocks is Gill Sans MT at 0.95em, and titles using Arial, as according to the style definition below. html, body { font-family: "Gill Sans","Gill Sans MT",Helvetica,Arial,sans-serif; font-size: 0.95em; } The use of bold or underlined text should be avoided as <h> should provide adequate titling facilities, and in-text emphasis should use italics.

NES ePortfolio Full Style Guide v0.1.docx

Page 8


Colours Text color should be black and background should be white. If “red” warning text is required it should only be placed a white background and should be #cc0000 (rather than pure red #ff0000). Warning/alert text boxes .errorPanel, .validation-summary-errors { background-color: #FFE3E0; font-weight: bold; margin: 15px 0; min-height: 60px; padding: 10px 10px 10px 70px; }

Information text boxes .infoPanel { min-height: 50px; padding: 10px 10px 10px 70px; margin: 15px 0px 15px 0px; background-color: #ffffdb; }

NES ePortfolio Full Style Guide v0.1.docx

Page 9


Graphics and icons New Icon set is needed that are consistant in color scheme and style

NES ePortfolio Full Style Guide v0.1.docx

Page 10


Logos The font and text format of the logo is as follows:

The ePortfolio logo has a small number of variations:

Standard colour:

Half column (to be used on the right of a page only):

Standard grey:

Full column:

NES Please refer to NHS Education for Scotland brand guidlines

External logos Do not interfere with external organisationâ&#x20AC;&#x2122;s logos and where possible refer to their brand guidlines. Permission should be sort if reproducing an external logo in promotional material

NES ePortfolio Full Style Guide v0.1.docx

Page 11


Language Tone The tone of text should be formal and concise, and should address the user. Avoid using first person references, for example forms belonging to a user should be titled “Your Forms” and not “My Forms”. When text is supplied by a customer that does not conform these guidelines please ask them to consider re-writing. The plural of “Curriculum” is “Curricula”

Actions Form submission: button text: “Save” Cancel a process: button text “Cancel”

NES ePortfolio Full Style Guide v0.1.docx

Page 12


Standard controls

NES ePortfolio Full Style Guide v0.1.docx

Page 13


Navigation

NES ePortfolio Full Style Guide v0.1.docx

Page 14


Pro-forma content

NES ePortfolio Full Style Guide v0.1.docx

Page 15


Accessibility

NES ePortfolio Full Style Guide v0.1.docx

Page 16


Coding

NES ePortfolio Full Style Guide v0.1.docx

Page 17


References and useful links

NES ePortfolio Full Style Guide v0.1.docx

Page 18


Contacts

NES ePortfolio Full Style Guide v0.1.docx

Page 19

NHS ePortfolio Style Guide v0.1  

Draft version

Read more
Read more
Similar to
Popular now
Just for you