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
CMYK 100.61.0.45
RBG 0.62.116
HEX #003E74

Magenta Pink

PMS RUBINE RED
CMYK 0.100.9.4
RBG 200.30.120
HEX #C81E78

Cool grey

PMS COOL GREY 7
CMYK 10.10.10.40
RGB 157.157.157
HEX #9D9D9D

Light grey

PMS COOL GREY 2
CMYK 0.0.0.15
RBG 235.238.238
HEX #EBEEEE

 

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.

This is an example

 

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.

  1. 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).

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.

For further advice and assistance in regard to MedLearn web design and usability standards, please contact elearnm@ic.ac.uk.