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