4 Screen Design Tips Your placement of elements on the screen should: Direct the eyes around the screenBe consistent in look and feelBe easy to read and understandFollow basic design principles
5 Information Placement Take advantage of the natural scanning pattern of upper left to lower right by putting important information in the upper left "hot spot." Lower right can be used for continuing information such as "next page" or navigation buttons.
6 Keep It Simple Limit graphical elements to 2 to 5 per page. One of the strengths of computer-based tutorials is the ability to focus the learner's attention. Too many buttons, text fields or graphics on a page distract the reader.
7 Create a Visual GridDivide the screen into horizontal and vertical zones and place certain types of information in the same portion of the grid on successive screens.Consistency helps users locate information.Grids help balance a screen.
8 Use Graphics Thoughtfully Add relevant graphics to grab and hold attentionTypes of graphics to use:Realistic (photo or rendering of concept)Analog (relates a concept to a more familiar, simple idea)Logical (map or graph)Use cueing techniques such as color, lines, arrows, shading to draw attention to what is most important.
9 Legibility or Readability Try not to use more than 2 fonts per screen. (Use different sizes and weights within a font family for variety).Use at least 18-point type.Use lower case text for readability.Use no more than 8 to 10 words per line of text less for larger text.
10 Tips to Improve your Resources Observe: Keep a file of design you like from magazines, ads, brochures, computer screens.Analyze: Try to determine what makes a design work.Practice: Visualize by sketching ideas. (Should be quick and dirty to get the creative juices flowing.)
11 Keeping It Simple Using the Rules ConsistencyConsistent design is the key in formatting any multimedia project or Web pageBe consistent with headings, screen density, white space, color, placement, buttons, etc.
12 Keeping It Simple Using the Rules SimplicityKeep your message simple and to the point (KISS)—Keep It SimpleUse no more than 3 different fonts and 3 different colorsDon't add unnecessary graphics, animation, sound, etc. (distracts from the message)
13 Keeping It Simple Using the Rules ClarityLeave plenty of white space as computer screens are cheapUse big fonts, so it's easy to see textUse big picturesUse bullets
14 Keeping It Simple Using the Rules Clarity (continued)Use short simple sentences or phrases, do not use compound construction sentencesDon't try and put too much info on one screen, spread info out onto the next slideUse caps and lower case (not all one or the other)Don't use fully justified text as it slows reading, use centered or left justified text.
15 Keeping It Simple Using the Rules Aesthetically PleasingKeep the objects on your screens balanced, consider harmony and unityUse blue for large areas, use red or green or other bright colors for the center of visual fieldDo not use adjacent colors that differ only in the amount of blue in them.
16 Principles of Strong, Unified Visual Design C.R.A.P.Principles of Strong, Unified Visual Design
17 ContrastContrast on a page draws our eyes to it; our eyes like contrast. Two items on a page cannot be similar - for contrast to be effective, the two elements must be very different.The basic purposeTo create interest on the pageTo aid in the organization of informationTo encourage readabilityHow to get itAdd contrast through your typeface choices, line thickness, colors, shapes, sizes, space, etc.What to avoidAvoid combining any two elements that are similarIf the items aren't exactly the same, make them very different.Don't be a wimp!
18 RepetitionBe consistent! A repetition of visual elements throughout the design unifies and strengthens a piece by tying together otherwise separate parts.The basic purposeTo unifyTo add visual interestTo increase readabilityHow to get itFind existing repetitions and strengthen them.Create repetitions to enhance the design and the clarity of information.Accent with contrasting colors, sizes, typefaces, etc.What to avoidAvoid repeating the element so much that it becomes annoying or overwhelming.Be conscious of the value of contrast.
19 Alignment The basic purpose How to get it What to avoid A visual tie is required to make all elements on the page appear to be unified.The basic purposeTo unify and organize the pageTo create a 'look' (fun, serious, sophisticated, formal, etc.)How to get itBe conscious of where you place elementsFind something else on the page to align withWhat to avoidAvoid using more than one text alignment on the page (i.e., centered vs. right or left)Try to break away from a centered alignment (unless you are actually trying to create a more formal, sedate, effect).
20 ProximityWhen several items are in close proximity to each other, they become one visual unit.The basic purposeTo automatically organize by grouping related elements togetherTo encourage reading and rememberingTo create more appealing white spaceHow to get itSquint your eyes.Count the number of times your eye stops.No more than 3 to 5 elements, please.What to avoidAvoid too many separate elements on a page.Don't stick things in the corners and in the middle.Avoid leaving equal amounts of white space between elements unless each group is part of a subset.Avoid confusion by creating a relationship among elements with close proximity. Don't create relationships with elements that don't belong together!
21 Visual TensionThe objective is to create visual tension; to hold the eye of the viewer BORING!!!Two examples: not interesting holds the eye, interesting
22 The Six Guidelines of Composition Avoiding MergersSimplicityLinesThe Rule of ThirdsBalanceFramingKodak’s Tutorial
23 Composition Avoid Mergers Watch for objects that line up in undesirable ways (ex. tree “growing” out of someone’s head)
24 Composition Simplicity A composition can be made simple in many ways – by limiting the number of objects, the number of colors used, the complexity of lines, etc.
25 CompositionLinesUse line to create eye movement, shape, emphasis…
26 Composition Rule of Thirds: Put objects of interest in centers of interest. Other objects cluster around hot spots, but aren’t on them.• When composing your shots, use the “Rule of Thirds”• The “Golden Mean”• Odds Look Better Than Even• Put focal point of interest in one of the four special spots (circled) or on the dotted lines.• When composing your shots, use the “Rule of Thirds”• The “Golden Mean”• Odds Look Better Than Even• Put focal point of interest in one of the four special spots (circled) or on the dotted lines.
27 CompositionBalanceEvery composition should have some form of balance. Three types of balance:Symmetrical has an axis of symmetryAsymmetrical counterbalance (ex. Move large object toward center to counter balance smaller object further out)Radial patterned in nature, like flowers, shells, etc.Symmetrical = has an axis of symmetryAsymmetrical = counterbalance (ex. Move large object toward center to counter balance smaller object further out)Radial = patterned in nature, like flowers, shells, etc.
28 CompositionFramingPretend you are looking at your creation through the lens of a camera. Create an interesting composition by excluding and including the right objects.
29 Composition Pyramidal ex. portraits, renaissance Utilize a method of composition to match your strategy of visual tension. Composition controls emphasis areas.Utilize a method of composition to match your strategy of visual tension. Composition controls emphasis areas.
30 Composition“L” ShapeThings that “pop” outside of the shape get noticed
31 Composition Golden Mean Specific Ratio = 1.6 x 1 There are many examples of the Golden Section or Divine Proportion in Nature. For example, the eye, fins and tail all fall at Golden Sections of the length of a dolphin's body. Phi is frequently expressed in many of Nature`s creations, and by varying the angle between adjacent radii, a number of Natural spirals and leaf shapes can be created. The Fibonacci numbers form the best whole number approximations to the Golden number. Plants illustrate the Fibonacci series in the numbers and arrangements of petals, leaves, sections and seeds. Plants that are formed in spirals, such as pinecones, pineapples and sunflowers, illustrate Fibonacci numbers. Many plants produce new branches in quantities that are based on Fibonacci numbers.The DNA molecule, the program for all life, is based on the Golden section. It measures 34 angstroms long by 21 angstroms wide for each full cycle of its double helix spiral.34 and 21, of course, are numbers in the Fibonacci series and their ratio, closely approximates Phi,There are many examples of the Golden Section or Divine Proportion in Nature. For example, the eye, fins and tail all fall at Golden Sections of the length of a dolphin's body. Phi is frequently expressed in many of Nature's creations, and by varying the angle between adjacent radii, a number of Natural spirals and leaf shapes can be created. The Fibonacci numbers form the best whole number approximations to the Golden number. Plants illustrate the Fibonacci series in the numbers and arrangements of petals, leaves, sections and seeds. Plants that are formed in spirals, such as pinecones, pineapples and sunflowers, illustrate Fibonacci numbers. Many plants produce new branches in quantities that are based on Fibonacci numbers.The DNA molecule, the program for all life, is based on the Golden section. It measures 34 angstroms long by 21 angstroms wide for each full cycle of its double helix spiral.34 and 21, of course, are numbers in the Fibonacci series and their ratio, closely approximates Phi,
32 Principles of Readability Readability strengthens design and speeds up the communication process. Enhance the readability of your design projects by applying these principles.Factors to Consider When Displaying Text:Words have shape. (TURTLE vs. turtle)Lowercase is easier to read than uppercase because all uppercase words have the same shape.The eye reads from left to right.Left alignment/justification is easier to read than any other (e.g. centered).Short lines are easier to read than long lines.The smaller the text, the shorter the line (e.g. newspapers use columns).Repetition simplifies the page and enhances readability.Serif type fonts work better for text because the little “foot” helps guide the eye along. Use sans serif fonts for headings and sub-heads.Typed fonts should contrast with background to increase readability.