Elearning Techniques: Visual Design by Sally Cox
Respect the Brand
- Find and use the style guide as a reference
- respect font and color choices
- using a consistent layout or elements can help you make other changes to color or more and still keep the lesson looking cohesive
- transparencies can be your best friend here
Style guides usually have rules for layouts, fonts, colors, imagery and buttons, but also sometimes writing tone
Remember copyright! It’s a good idea to copyright anything you publish. Copyrights can apply to writing content, video, audio, and imagery.
Copyright protects your content, and trademarks protect your brand and products
Allow options to users on how they engage with the content
Know your audience and design for them.
Share key goals.
Identify necessary prior knowledge.
Organize related content (so users can find what they need/want most)
Highlight when you are moving on to new content, rather than just advancing (could use opportunity to provide button to return to start of section if user needs to cover content again)
You can use markers to indicate progress in the course
Remember common typo rules. Use display fonts sparingly (like fun headings)
Stock photos can help create compelling lessons
Feel free to adjust saturation, crop, coloration, and opacity of images in order to make them more functional
Use icons as more fun buttons (could be great for buttons that persist across slides, like nav buttons)
Try not to scale image down from 75% of the original in program (use source file to make further adjustments if needed)
Visuals improve stories, increase retention
You retain 10% of what you hear, 20% of what you read, and 90% of what you see
Illustrator has functionality to build grapes based on data tables
- Planning your infographic
- Choose the topic
- Brainstorm
- Find facts to build topic
- Shape narrative
- Add visuals
Don’t go overboard on colors. Use neutrals to avoid white backgrounds. Use dark (or highly contrasting) values in order to pull focus.
Use visual elements to help organize content. Don’t be afraid to split content up into different sections/slides/layers
Web Design: Efficient Workflow by Sue Jenkins
UX (User experience) is about considering how a site feels to interact with. Don’t bother about how it looks yet.
Moodboards allow you to make aesthetic goals/understand branding requirements separate from the content. Good for also including elements or functionality you want to imitate from other sites.
It can be helpful to do a rough digital sketch
Open your wireframe in a digital drawing/editing program. Create guides that align with your largest elements (breaks in background colors, headers, etc.) and convert to shapes. Add generic elements corresponding to your wireframe. Use folders to organize layers based on sections of the site. Apply your moodboard elements. Then transfer applicable content. Adjust styling/content as needed. You can set up automatic tiling in photoshop.