November 11, 2020 Training

Improving Library Tutorials: The Multimedia Design Principles by Darlene Aguilar on

Memory Process

Environment > Sensory Register > Working Memory <> Long Term Memory

Design effects are stronger for low-knowledge learners than high-knowledge (people who are novices benefit from the design more than experts)

  • Maybe the design aids in keeping new learners engaged while they are going through the difficult first phase of the learning curve, while experts are already familiar enough with the info to not “need their hand held.

Coherence – students learn better when extraneous words, pictures, and sounds are excluded

People learn better with words and pictures better than words allow (show, not tell!), retention

  • Consider how images can aid learners whose first language isn’t english, people who have difficulty reading, and visual learners

Meaningful graphics often need to be created, but do more to increase retention than more generic clipart, or “joke-y” images

Spatial Contiguity – students learn better when corresponding words and pictures are presented closer to each other than far

  • Consider diagrams where arrows point to direct locations, but are marked with letters/numbers instead of the name of what the arrow is pointing to

Temporal Contiguity – students learn better when corresponding words and pictures are presented simultaneously, rather than successively

Signaling – students learn better when cues (like underlining) are added to highlight the main ideas and organization of the words

Pacing – students learn better when they control the pacing of segmented narration/animation than having a continuous pace

  • Strength of non-synchronous learning

Modality – students learn better from animation and narration, than from animation and on screen text

  • Having two focal points on the screen at a time, like text and graphs, or text and a talking head, attention to either thing declines

Redundancy – students learn better from animation and narration (concurrent), than from animation, narration, and on-screen text

  • Keep text spartan

Concepts first – students learn better when new terms are introduced before complex processes, principles, or procedures

Personalization – students learn better when narration is conversational, and uses personal pronouns such as you and yours

Reading: e-Learning and the Science of Instruction by Ruth Colvin Clark and Richard E Mayer

Illustrator for Web Design by Emily Kay on

Remember how many devices that your site could be accessed with

Document Set Up

Always work in RGB, 72ppi, with Pixel Preview Mode when designing site assets

Always try to work with whole numbers instead of decimal values (helps rendering), use Make Pixel Perfect or Snap to Pixel in order to keep everything square

Switch to Web Based Workspace (vs Essentials)

Illustrator > Preferences > General > Keyboard Increment to 1px

Units > General, Pixels > Stroke, Pixels

Guides and Grids > Gridline every 1px >Subdivision, 1

Temporary Hand Tool, press spacebar

To keep a consistent look across multiple layouts, build your own grids. Split into Grids function

Use sRGB (standard RBG) to keep colors consistent across browsers, RGB has wider range

Edit > Color Settings > Settings, North America Web/Internet


Remember mobile first! Use breakpoints

Design the smallest view first, and once you expand the design and it “breaks” add a breakpoint

Keep line lengths short

Keep organized, use the resources available to you; create and save you resources for later

Create text styles to easily apply it to multiple items, also works with visuals styles, so similar process can be applied to create buttons, graphics

Font Awesome Text Family gives you icons that you can insert into lines of text

If you want to make elements you transform keep the properties that would be changed by transformation, then turn off Scale Corners and Scale Stroke and Effects

9 Slice Scaling – Create items (like button backgrounds) as a dynamic symbol, with guides enabled for 9 slide scaling (this will let you specify what parts of the image are okay to scale)

Global Colors – changing a color in swatch panel will change color wherever it appears in the doc

Seamless backgrounds – Use scale tool in order to rescale pattern, instead of object (adjust settings to do this)

    Use pattern options to create and edit new pattern. Edit pattern by double clicking swatch

Don’t use colors, graphics, or typography in wireframes. If you’re going to use text, do not use lorem ipsum, use the real text.

Use symbols in wireframes means that you can easily swap the symbols out for images later

Using guides, you can use pathfinder tool to cut shapes into other shapes

Style guides can both help workflow in illustrator and in website development

  • Include colors, symbols, typography, button designs, backgrounds, layouts, hover/active styles, images, dos and don’ts so developers can extrapolate later