Visual Design and Efficient Workflow Training (June 2, 2021)

Elearning Techniques: Visual Design by Sally Cox

On LinkedIn (formerly Lynda)

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

On LinkedIn

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.