Design Guidelines

These guidelines are a collection of dos and don'ts that have been collated through numerous iterative development cycles on a wide range of modules. They are meant to serve as a general set of best practices, and may not be universally applicable in all scenarios.

Aesthetics

You Should

  • Focus on content, not styling
  • Use the theme packages
  • Use bullet points sparingly
  • Use light colours (very close to white) for background colours if text will be on top
  • Limit your use of coloured text to titles
  • Reduce your use of font styles
  • Design for phones first. Use high resolution images if possible (>1024px)
  • Convert images with background colours to transparent if possible
  • Avoid watermarked images
  • Use exact RGB or HEX values for colours, not approximations
  • Avoid using images of native elements (tables, text, equations, etc.)
  • Be subtle
  • Be consistent

You Could

  • Add a relevant image to the first page
  • Use an organizational logo in the footer, with a main theme colour
  • Limit your use of case study blocks
  • Remove a background colour from case studies if they are long enough to require their own page

Organization

You Should

  • Focus on content, not layout
  • Limit page and module content length
  • Include a list of topics or table of contents on the first page
  • Organize similar concepts into a table or stack
  • Keep images and their relevant paragraphs together using a horizontal stack or table
  • Keep instructions concise and contained in a small space
  • Use bullet points sparingly
  • Design for phones first.

You Could

  • If a page contains several images, keep them small. Users can inspect them to see a larger version
  • Organize photo concepts, or method steps, into image slideshow using a slider or buttons

Communicating Concepts

You Should

  • Make sure that all content is necessary to convey the core concept
  • Avoid redundancy
  • Include Q&A blocks to check user understanding and retention, especially after pages with a lot of information
  • Spellcheck

You Could

  • Scale the content shown depending on student's responses to certain questions