Date post: | 01-Apr-2015 |
Category: |
Documents |
Upload: | bryan-cosey |
View: | 217 times |
Download: | 4 times |
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)
Keeping It Simple Using the Keeping It Simple Using the RulesRules
Keeping It Simple Using the Keeping It Simple Using the RulesRules
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
Keeping It Simple Using the Keeping It Simple Using the RulesRules
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.
Keeping It Simple Using the Keeping It Simple Using the RulesRules
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)
CompositionComposition
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.
CompositionComposition
LinesLines
Use line to create eye Use line to create eye movement, shape, movement, shape, emphasis…emphasis…
CompositionComposition
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.
CompositionComposition
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.
CompositionComposition
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
CompositionComposition
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.