Web Design Style Guide
Visual Design
By visual design, we also mean ‘brand’ or ‘graphic design’, which is the process of adding aesthetics to your design.
Styles
Colours
We advise to use the School of Medicine brand colours where possible to maintain a consistent and coherent look and feel:
Imperial blue PMS 541 |
Magenta Pink PMS RUBINE RED |
Cool grey PMS COOL GREY 7 |
Light grey PMS COOL GREY 2
|
Icons
Icons are a great way to highlight key messages and content. A main goal of using icons should be to help users absorb and process information more effectively. Icons should highlight the content on a page, not overshadow or replace it.
MedLearn icons should be simple and neutral.
- Neutrality: Avoid concepts such as gestures, animals, religion, humor, ethnicity, and gender.
- Use icons to distinguish actions.
- Monochromatic: Solid color icons (School of Medicine – Imperial blue, Magenta Pink or Cool grey).
MedLearn uses Font Awesome as our approved icons.
Links
Links use the School of Medicine Imperial blue (HEX #003E74) with no underline as standard.
Lists
Lists should be used to make it blocks of text easier to read and to break information down into manageable chunks.
List Item with Bullet
For use when the order of the list items is not relevant.
- This is a list item
Numbered List
For use when the order of the list items is relevant.
- This is a list item
List Item with Icon
For use on unordered lists when it is appropriate to show a symbol rather than a simple bullet (for example we use video icons to show which items are videos).
- List Item #1
Typography
Typography describes what you use for writing text: body text, headlines, etc. This includes things such as font, text sizes, and colours.
Font
The font-family used within MedLearn identity is Roboto.
Roboto is an open source, sans-serif font originally developed by Google for Android. Roboto includes over 3,000 glyphs for representing languages around the world with a Latin writing system.
Headings
Headings are used for titles of each major section of a page, and to help present written content as clearly and efficiently as possible.
Headings should be aligned left unless there is a strong case for them being aligned right or centre.
Headings should be assigned with a specific HTML element (from h2 to h5) that relates to the heading’s importance in the hierarchy of information on the page.
Heading 2
Heading 3
Heading 4
Heading 5
Components
Blockquotes
The Blockquote component is used to clearly highlight a larger piece of text and give it prominence. Just add the text between the <blockquote></blockquote> tags on the text editor.
This is important
Buttons
Buttons indicate that an action can be performed.
Further Resources
For further advice and assistance in regard to MedLearn web design and usability standards, please contact elearnm@ic.ac.uk.
