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

Putting it all together:Putting it all together:Screen DesignScreen Design

K.I.S.S.K.I.S.S.C.R.A.P.C.R.A.P.

Creating Strong Design Creating Strong Design

Your placement of elements on the Your placement of elements on the screen should: screen should:

Direct the eyes around the screen Direct the eyes around the screen Be consistent in look and feel Be consistent in look and feel Be easy to read and understand Be easy to read and understand Follow basic design principlesFollow basic design principles

Screen Design TipsScreen Design Tips

Information PlacementInformation Placement

Take advantage of the natural scanning Take advantage of the natural scanning pattern of upper left to lower right by pattern of upper left to lower right by putting important information in the putting important information in the upper left "hot spot." upper left "hot spot."

Lower right can be used for continuing Lower right can be used for continuing information such as "next page" or information such as "next page" or navigation buttons.navigation buttons.

Keep It Simple Keep It Simple

Limit graphical elements to 2 to 5 per Limit graphical elements to 2 to 5 per page. page.

One of the strengths of computer-based One of the strengths of computer-based tutorials is the ability to focus the tutorials is the ability to focus the learner's attention. learner's attention.

Too many buttons, text fields or Too many buttons, text fields or graphics on a page distract the reader.graphics on a page distract the reader.

Create a Visual GridCreate a Visual Grid

Divide the screen into horizontal and Divide the screen into horizontal and vertical zones and place certain types vertical zones and place certain types of information in the same portion of of information in the same portion of the grid on successive screens. the grid on successive screens.

Consistency helps users locate Consistency helps users locate information. information.

Grids help balance a screen.Grids help balance a screen.

Use Graphics ThoughtfullyUse Graphics Thoughtfully

Add relevant graphics to grab and hold Add relevant graphics to grab and hold attentionattention

Types of graphics to use: Types of graphics to use: – RealisticRealistic (photo or rendering of concept) (photo or rendering of concept) – AnaloAnalog (relates a concept to a more familiar, g (relates a concept to a more familiar,

simple idea) simple idea) – LogicalLogical (map or graph) (map or graph)

Use cueing techniques such as color, lines, Use cueing techniques such as color, lines, arrows, shading to draw attention to what arrows, shading to draw attention to what is most important.is most important.

Legibility or Readability Legibility or Readability

Try not to use more than 2 fonts per Try not to use more than 2 fonts per screen. (Use different sizes and screen. (Use different sizes and weights within a font family for weights within a font family for variety). variety).

Use at least 18-point type. Use at least 18-point type.

Use lower case text for readability. Use lower case text for readability.

Use no more than 8 to 10 words per Use no more than 8 to 10 words per line of text less for larger text.line of text less for larger text.

Tips to Improve your Tips to Improve your ResourcesResources

Observe:Observe: Keep a file of design you Keep a file of design you like from magazines, ads, brochures, like from magazines, ads, brochures, computer screens. computer screens.

AnalyzeAnalyze: Try to determine what : Try to determine what makes a design work.makes a design work.

PracticePractice: Visualize by sketching : Visualize by sketching ideas. (Should be quick and dirty to ideas. (Should be quick and dirty to get the creative juices flowing.)get the creative juices flowing.)

Keeping It Simple Using the Keeping It Simple Using the RulesRules

Consistency

Consistent design is the key in Consistent design is the key in formatting any multimedia project or formatting any multimedia project or Web page Web page

Be consistent with headings, screen Be consistent with headings, screen density, white space, color, placement, density, white space, color, placement, buttons, etc.buttons, etc.

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)



Clarity

Leave plenty of white space as Leave plenty of white space as computer screens are cheapcomputer screens are cheap

Use big fonts, so it's easy to see text Use big fonts, so it's easy to see text

Use big pictures Use big pictures

Use bullets Use bullets


Clarity (continued) (continued)

Use short simple sentences or phrases, do not Use short simple sentences or phrases, do not use compound construction sentences use compound construction sentences

Don't try and put too much info on one screen, Don't try and put too much info on one screen, spread info out onto the next slide spread info out onto the next slide

Use caps and lower case (not all one or the Use caps and lower case (not all one or the other) other)

Don't use fully justified text as it slows reading, Don't use fully justified text as it slows reading, use centered or left justified text.use centered or left justified text.


Aesthetically Pleasing

Keep the objects on your screens Keep the objects on your screens balanced, consider harmony and unity balanced, consider harmony and unity

Use blue for large areas, use red or green Use blue for large areas, use red or green or other bright colors for the center of or other bright colors for the center of visual field visual field

Do not use adjacent colors that differ only Do not use adjacent colors that differ only in the amount of blue in them.in the amount of blue in them.

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

Visual DesignVisual Design

ContrastContrast Contrast on a page draws our eyes to it; our eyes Contrast on a page draws our eyes to it; our eyes like contrast. Two items on a page cannot be similar like contrast. Two items on a page cannot be similar - for contrast to be effective, the two elements must - for contrast to be effective, the two elements must be very different. be very different.

The basic purpose The basic purpose To create interest on the page To create interest on the page To aid in the organization of information To aid in the organization of information To encourage readabilityTo encourage readability

How to get it How to get it Add contrast through your typeface choices, line thickness, colors, Add contrast through your typeface choices, line thickness, colors,

shapes, sizes, space, etcshapes, sizes, space, etc. . What to avoid What to avoid

Avoid combining any two elements that are similar Avoid combining any two elements that are similar If the items aren't exactly the same, make them very different. If the items aren't exactly the same, make them very different. Don't be a wimp!Don't be a wimp!

RepetitionRepetition Be consistent! A repetition of visual elements Be consistent! A repetition of visual elements throughout the design unifies and strengthens a throughout the design unifies and strengthens a piece by tying together otherwise separate parts. piece by tying together otherwise separate parts.

The basic purpose The basic purpose To unify To unify To add visual interest To add visual interest To increase readability To increase readability

How to get it How to get it Find existing repetitions and strengthen them. Find existing repetitions and strengthen them. Create repetitions to enhance the design and the clarity of Create repetitions to enhance the design and the clarity of

information. information. Accent with contrasting colors, sizes, typefaces, etc. Accent with contrasting colors, sizes, typefaces, etc.

What to avoid What to avoid Avoid repeating the element so much that it becomes annoying or Avoid repeating the element so much that it becomes annoying or

overwhelming. overwhelming. Be conscious of the value of contrast.Be conscious of the value of contrast.

AlignmentAlignment

A visual tie is required to make all elements on the A visual tie is required to make all elements on the page appear to be unified. page appear to be unified.

The basic purpose The basic purpose To unify and organize the page To unify and organize the page To create a 'look' (fun, serious, sophisticated, formal, etc.)To create a 'look' (fun, serious, sophisticated, formal, etc.)

How to get it How to get it Be conscious of where you place elements Be conscious of where you place elements Find something else on the page to align withFind something else on the page to align with

What to avoid What to avoid Avoid using more than one text alignment on the page (i.e., Avoid using more than one text alignment on the page (i.e.,

centered vs. right or left) centered vs. right or left) Try to break away from a centered alignment (unless you are Try to break away from a centered alignment (unless you are

actually trying to create a more formal, sedate, effect).actually trying to create a more formal, sedate, effect).

ProximityProximityWhen several items are in close proximity to each other, they When several items are in close proximity to each other, they become one visual unit. become one visual unit.

The basic purpose The basic purpose To automatically organize by grouping related elements together To automatically organize by grouping related elements together To encourage reading and remembering To encourage reading and remembering To create more appealing white spaceTo create more appealing white space

How to get it How to get it Squint your eyes. Squint your eyes. Count the number of times your eye stops. Count the number of times your eye stops. No more than 3 to 5 elements, please.No more than 3 to 5 elements, please.

What to avoid What to avoid Avoid too many separate elements on a page. Avoid too many separate elements on a page. Don't stick things in the corners and in the middle. Don't stick things in the corners and in the middle. Avoid leaving equal amounts of white space between elements Avoid leaving equal amounts of white space between elements

unless each group is part of a subset. unless each group is part of a subset. Avoid confusion by creating a relationship among elements with Avoid confusion by creating a relationship among elements with

close proximity. Don't create relationships with elements that don't close proximity. Don't create relationships with elements that don't belong together!belong together!

Visual TensionVisual Tension

The objective is to The objective is to create visual tensioncreate visual tension; to hold the ; to hold the eye of the viewereye of the viewer

BORING!!!BORING!!!

Two examples: Two examples:

not interestingnot interesting

holds the eye, interestingholds the eye, interesting

The Six Guidelines of The Six Guidelines of Composition Composition

1.1. Avoiding MergersAvoiding Mergers2.2. SimplicitySimplicity3.3. LinesLines4.4. The Rule of ThirdsThe Rule of Thirds5.5. BalanceBalance6.6. Framing Framing

Kodak’s TutorialKodak’s Tutorial

CompositionComposition

Avoid MergersAvoid Mergers

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


SimplicitySimplicity

A composition can be made simple in many A composition can be made simple in many ways – by limiting the number of objects, the ways – by limiting the number of objects, the number of colors used, the complexity of lines, number of colors used, the complexity of lines, etc.etc.


LinesLines

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


Rule of Thirds: Rule of Thirds: Put objects of interest in Put objects of interest in

centers of interest. Other centers of interest. Other objects cluster objects cluster aroundaround hot hot spots, but aren’t on them.spots, but aren’t on them.


BalanceBalance

Every composition should have some form of balance. Every composition should have some form of balance. Three types of balance: Three types of balance:

– Symmetrical Symmetrical has an axis of symmetry has an axis of symmetry

– AsymmetricalAsymmetrical counterbalance (ex. Move large object counterbalance (ex. Move large object toward center to counter balance smaller object further out)toward center to counter balance smaller object further out)

– RadialRadial patterned in nature, like flowers, shells, etc. patterned in nature, like flowers, shells, etc.


FramingFraming

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

Composition Composition PyramidalPyramidal

ex. portraits, ex. portraits, renaissancerenaissance

Utilize a method of composition to match your strategy of Utilize a method of composition to match your strategy of visual tension. Composition controls emphasis areas.visual tension. Composition controls emphasis areas.

Composition Composition

““LL” ” ShapeShape Things that “pop” Things that “pop”

outside of the outside of the shape get noticedshape get noticed


Golden MeanGolden Mean Specific Ratio = 1.6 x Specific Ratio = 1.6 x

11

Principles of ReadabilityPrinciples of Readability

Factors to Consider When Displaying Text:Factors to Consider When Displaying Text:

Words have shape. (TURTLE vs. turtle)Words have shape. (TURTLE vs. turtle) Lowercase is easier to read than uppercase because all uppercase Lowercase is easier to read than uppercase because all uppercase

words have the same shape.words have the same shape. The eye reads from left to right.The eye reads from left to right. Left alignment/justification is easier to read than any other (e.g. Left alignment/justification is easier to read than any other (e.g.

centered).centered). Short lines are easier to read than long lines.Short lines are easier to read than long lines. The smaller the text, the shorter the line (e.g. newspapers use The smaller the text, the shorter the line (e.g. newspapers use

columns).columns). Repetition simplifies the page and enhances readability.Repetition simplifies the page and enhances readability. Serif type fonts work better for text because the little “foot” helps 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.guide the eye along. Use sans serif fonts for headings and sub-heads. Typed fonts should contrast with background to increase readability.Typed fonts should contrast with background to increase readability.

Readability strengthens design and speeds up the communication process. Readability strengthens design and speeds up the communication process. Enhance the readability of your design projects by applying these principles.Enhance the readability of your design projects by applying these principles.

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

Documents

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