Creating Strong Design Putting it all together: Screen Design K.I.S.S. C.R.A.P.

Screen Design Tips Your placement of elements on the screen should: Direct the eyes around the screen Be consistent in look and feel Be easy to read and understand Follow basic design principles

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.

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.

Create a Visual Grid Divide 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.

Use Graphics Thoughtfully Add relevant graphics to grab and hold attention Types 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.

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.

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.)

Keeping It Simple Using the Rules Consistency Consistent design is the key in formatting any multimedia project or Web page Be consistent with headings, screen density, white space, color, placement, buttons, etc.

Keeping It Simple Using the Rules Simplicity Keep your message simple and to the point (KISS)—Keep It Simple Use no more than 3 different fonts and 3 different colors Don't add unnecessary graphics, animation, sound, etc. (distracts from the message)

Keeping It Simple Using the Rules Clarity Leave plenty of white space as computer screens are cheap Use big fonts, so it's easy to see text Use big pictures Use bullets

Keeping It Simple Using the Rules Clarity (continued) Use short simple sentences or phrases, do not use compound construction sentences Don't try and put too much info on one screen, spread info out onto the next slide Use 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.

Keeping It Simple Using the Rules Aesthetically Pleasing Keep the objects on your screens balanced, consider harmony and unity Use blue for large areas, use red or green or other bright colors for the center of visual field Do not use adjacent colors that differ only in the amount of blue in them.

Principles of Strong, Unified Visual Design C.R.A.P. Principles of Strong, Unified Visual Design

Contrast Contrast 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 purpose To create interest on the page To aid in the organization of information To encourage readability How to get it Add contrast through your typeface choices, line thickness, colors, shapes, sizes, space, etc. What to avoid Avoid combining any two elements that are similar If the items aren't exactly the same, make them very different. Don't be a wimp!

Repetition Be consistent! A repetition of visual elements throughout the design unifies and strengthens a piece by tying together otherwise separate parts. The basic purpose To unify To add visual interest To increase readability How to get it Find 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 avoid Avoid repeating the element so much that it becomes annoying or overwhelming. Be conscious of the value of contrast.

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 purpose To unify and organize the page To create a 'look' (fun, serious, sophisticated, formal, etc.) How to get it Be conscious of where you place elements Find something else on the page to align with What to avoid Avoid 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).

Proximity When several items are in close proximity to each other, they become one visual unit. The basic purpose To automatically organize by grouping related elements together To encourage reading and remembering To create more appealing white space How to get it Squint your eyes. Count the number of times your eye stops. No more than 3 to 5 elements, please. What to avoid Avoid 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!

Visual Tension The objective is to create visual tension; to hold the eye of the viewer  BORING!!! Two examples:  not interesting  holds the eye, interesting

The Six Guidelines of Composition Avoiding Mergers Simplicity Lines The Rule of Thirds Balance Framing Kodak’s Tutorial

Composition Avoid Mergers Watch for objects that line up in undesirable ways (ex. tree “growing” out of someone’s head)

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.

Composition Lines Use line to create eye movement, shape, emphasis…

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.

Composition Balance Every composition should have some form of balance. Three types of balance: Symmetrical has an axis of symmetry Asymmetrical 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 symmetry Asymmetrical = counterbalance (ex. Move large object toward center to counter balance smaller object further out) Radial = patterned in nature, like flowers, shells, etc.

Composition Framing Pretend you are looking at your creation through the lens of a camera. Create an interesting composition by excluding and including the right objects.

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.

Composition “L” Shape Things that “pop” outside of the shape get noticed

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, 1.6190476 closely approximates Phi, 1.6180339. 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, 1.6190476 closely approximates Phi, 1.6180339.

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.