Design Concepts by 8gm92dO

VIEWS: 8 PAGES: 47

									Design Concepts
Using Text & Graphics Effectively




          CIS 1310 – HTML & CSS
Three Levels of Emotional Design
    Behavioral

        Usability

    Visceral

        Appearance

             “Hardwired”

    Reflective

        Branding




               CIS 1310 – HTML & CSS
Underlying Principles of Design
    Subjective

        Communication

        Visual Appeal


    Objective

        Utility

        Engagement




               CIS 1310 – HTML & CSS
Underlying Principles of Design
    Communication

        User Interaction

             First Seconds

                   Site Must Clearly Communicate Why it is Useful

             10 Seconds

                   Convince User Site can be Navigated Easily

             1 Minute

                   Content is of Real Interest & Value




               CIS 1310 – HTML & CSS
Underlying Principles of Design
    Communication
        Clarity
             Logical Organization
                   Opening Content that can be Scanned v. Read
                         Concisely Stated, Without Extraneous Material

             Benefit to User
                   Clear v. Obscure
             Error Free
                   Spelling & Grammar
                   Accurate & Current
                   Link Rot, Link Quality, & Link Descriptions




               CIS 1310 – HTML & CSS
Underlying Principles of Design
    Communication
        Legibility
             High Contrast
                   Color
             Text Size
                   Typeface
                   Density
                         Use Headings & Lists

             Images
                   Meaningful Relationship to Content
                   White Space




               CIS 1310 – HTML & CSS
Underlying Principles of Design
    Communication

        Readability

             Understanding

                   Familiar Terms & Phrases

             Language

                   Vivid

                   Active

                   Personable




               CIS 1310 – HTML & CSS
Underlying Principles of Design
    Visual Appeal
        Richness

             Uncluttered

             White Space

                   Balance

                         Images Complement Content & Each Other

             Images

                   High Quality




               CIS 1310 – HTML & CSS
Underlying Principles of Design
    Visual Appeal
        Style
             Suitable for Purpose
                    Convey Mood or Tone
                          Formal/Informal, Youthful/Mature, Playful/Serious

             Stylistic Elements Fit Together
                    Color Combinations
                          http://colorschemedesigner.com/

                    Typefaces

                    Images




                 CIS 1310 – HTML & CSS
Underlying Principles of Design
    Visual Appeal

        Unity

             Organization

                    Consistency & Repetition

                          Color, Navigational Elements, Logo

                    Makes Each Page Appear to be Part of the Whole

                    Creates a Sense of Order

                          Immediately Obvious Which Elements Relate to Each Other




               CIS 1310 – HTML & CSS
Underlying Principles of Design
    Utility

         Intuitive Interface

              Easy to Use

              Clear as to How to Perform Tasks

                    Predictable

                    Lack of Frustration

                    Successful Accomplishment of Tasks




                CIS 1310 – HTML & CSS
Underlying Principles of Design
    Utility

         Navigability

              Clearly Identified Links

                    Describes Link Destination

              Should NOT Have to Backtrack to Home

              Where You Are, Where You Can Go, Where You’ve Been

              Logical Organization of Content




                CIS 1310 – HTML & CSS
Underlying Principles of Design
    Utility


         Value


              What is Benefit for User?


              Remember Site


              Return Visitors




                CIS 1310 – HTML & CSS
Underlying Principles of Design
    Engagement


        User Awareness


             Types of Visitors Site Hopes to Engage


             Anticipate What Users Want & Expect


             Clearly Recognize Benefits




               CIS 1310 – HTML & CSS
Underlying Principles of Design
    Engagement
        User-Centered Purpose

             Does the Site Have a Purpose?

                   Knowledge

                   Decision Support

                   Accomplishing Tasks

                   Interconnectedness

                   Enjoyment

             Is Purpose Immediately Apparent?




               CIS 1310 – HTML & CSS
Underlying Principles of Design
    Engagement

        Interpersonal Rapport

             Visitors Feel

                   Comfort

                   Trust

                   Understanding

             Duration

             Return to Site?




               CIS 1310 – HTML & CSS
Typography (Sans Serif v. Serif)
 Lorem Ipsum
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
 placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed
 facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at
 ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo.
 Donec ullamcorper mattis pede. Donec lectus pede, aliquet et,
 nonummy eu, sagittis sit amet, est.


 Lorem Ipsum
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in
 libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio.
 Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In
 hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede,
 aliquet et, nonummy eu, sagittis sit amet, est.




                CIS 1310 – HTML & CSS
Heading / Body Size Contrast
 Lorem Ipsum                         Lorem Ipsum
 Lorem ipsum dolor sit amet,         Lorem ipsum dolor sit amet,
 consectetuer adipiscing elit.       consectetuer adipiscing elit.
 Nunc placerat ante in libero.       Nunc placerat ante in libero.
 Vivamus sed enim. Nunc              Vivamus sed enim. Nunc
 malesuada. Sed facilisis.           malesuada. Sed facilisis.
 Pellentesque et odio. Cras          Pellentesque et odio. Cras
 tortor. Etiam consequat diam at     tortor. Etiam consequat diam at
 ligula. Sed vestibulum diam sed     ligula. Sed vestibulum diam sed
 pede. In hendrerit nulla et         pede. In hendrerit nulla et
 justo. Donec ullamcorper mattis     justo. Donec ullamcorper mattis
 pede. Donec lectus pede,            pede. Donec lectus pede,
 aliquet et, nonummy eu,             aliquet et, nonummy eu,
 sagittis sit amet, est. Nam         sagittis sit amet, est. Nam
 faucibus nulla nec nulla.           faucibus nulla nec nulla.




             CIS 1310 – HTML & CSS
Headings (Fewer & Larger)
 Lorem Ipsum Dolor
 Sit Amet
                                      Lorem Ipsum
                                      Lorem ipsum dolor sit amet,
 Lorem ipsum dolor sit amet,          consectetuer adipiscing elit. Nunc
 consectetuer adipiscing elit. Nunc   placerat ante in libero. Vivamus
 placerat ante in libero. Vivamus     sed enim. Nunc malesuada. Sed
 sed enim. Nunc malesuada. Sed        facilisis. Pellentesque et odio.
 facilisis. Pellentesque et odio.     Cras tortor. Etiam consequat
 Cras tortor. Etiam consequat         diam at ligula. Sed vestibulum
 diam at ligula. Sed vestibulum       diam sed pede. In hendrerit nulla
 diam sed pede. In hendrerit nulla    et justo. Donec ullamcorper
 et justo. Donec ullamcorper          mattis pede. Donec lectus pede,
 mattis pede. Donec lectus pede,      aliquet et, nonummy eu, sagittis
 aliquet et, nonummy eu, sagittis     sit amet, est.
 sit amet, est.




             CIS 1310 – HTML & CSS
Subheads As Named Anchors
 Lorem Ipsum
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc
 placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed
 facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at
 ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo.
 Donec ullamcorper mattis pede.

 Dolor Sit Amet
 Nam faucibus nulla nec nulla. Praesent porttitor ultricies eros. Nam
 mauris. Proin augue libero, convallis non, hendrerit sed,
 condimentum at, magna. In convallis, ligula ac interdum
 adipiscing, lorem leo ultrices dolor, id tincidunt odio dolor at nibh.
 Aliquam nisl ante, vestibulum sed, ultricies a, ullamcorper id,
 turpis. Pellentesque quam lacus, dapibus vitae, interdum at,
 viverra non, orci.




              CIS 1310 – HTML & CSS
Leading

 Lorem ipsum                         Lorem ipsum
 Lorem ipsum dolor sit amet,         Lorem ipsum dolor sit amet,
 consectetuer adipiscing elit.       consectetuer adipiscing elit.
 Nunc placerat ante in libero.
 Vivamus sed enim. Nunc              Nunc placerat ante in libero.
 malesuada. Sed facilisis.           Vivamus sed enim. Nunc
 Pellentesque et odio. Cras          malesuada. Sed facilisis.
 tortor. Etiam consequat diam        Pellentesque et odio. Cras
 at ligula. Sed vestibulum diam
 sed pede. In hendrerit nulla et     tortor. Etiam consequat diam
 justo. Donec ullamcorper            at ligula. Sed vestibulum diam
 mattis pede.                        sed pede. In hendrerit nulla et
                                     justo. Donec ullamcorper
  http://www.typetester.org/         mattis pede.




             CIS 1310 – HTML & CSS
White Space
   Space Between Visual Elements
   The Part of the Design that “Isn't" There
       Just as Important as the Elements that are There




            CIS 1310 – HTML & CSS
White Space Testing




       CIS 1310 – HTML & CSS
White Space Testing




                               Wichita State University   2006




       CIS 1310 – HTML & CSS
Typographic Contrast - Typeface


 Chicago Power
 Chicago Power


       CIS 1310 – HTML & CSS
Typographic Contrast - Size


 Chicago Power
 Chicago
 Power

       CIS 1310 – HTML & CSS
Typographic Contrast - Style


 Chicago Power
 Chicago Power


        CIS 1310 – HTML & CSS
Typographic Contrast - Weight


 Chicago Power
 Chicago Power


       CIS 1310 – HTML & CSS
Typographic Contrast - Background


 Chicago Power

 Chicago Power
 Chicago <span style="background-color:white; color:green">Power</span>




            CIS 1310 – HTML & CSS
Typographic Contrast - Color

 Code Red
 Blue Moon
 Code Red
 Blue Moon

       CIS 1310 – HTML & CSS
Graphic Placement
                  Lorem ipsum dolor sit
                  amet, consectetuer
                  adipiscing elit. Nunc
                  placerat ante in libero.
                  Vivamus sed enim.
                  Nunc malesuada. Sed
                  facilisis. Pellentesque
                  et odio. Cras tortor.
                  Etiam consequat diam
                  at ligula. Sed
                  vestibulum diam sed
                  pede. In hendrerit
                  nulla et justo. Donec
                  ullamcorper mattis
                  pede. Donec lectus
                  pede, aliquet et.




       CIS 1310 – HTML & CSS
Graphic Cropping (Visual Impact)




       CIS 1310 – HTML & CSS
Layout (Conservative / Dynamic)




 Well-defined, rectangular areas on the page   Overlapping panels

 Warm greens accompanied by cool blues         Imagery evokes customer service & technology

 Balance intimacy with professionalism         Entertain the eye & communicate innovation




                   CIS 1310 – HTML & CSS
Balance (Symmetrical / Asymmetrical )
    Provide Sense of / Lack of Equilibrium
          Create Tension & Visual Weight


     Use of Approximate Horizontal Symmetry

     Imagery Incorporates Good Amount of White

     Graphic Text is Thin & Unobtrusive

        Elements Blend into Background

        Not Dominant in Any One Place

     Subtle Greens Used Sparingly




                    CIS 1310 – HTML & CSS
Diagonal Balance
    Upper Left to Lower Right
          POA (Primary Optical Area) to TA (Terminal Anchor)


     Natural Eye Movement                   LOGO
                                           LOGO

     Use Color to Draw Attention

        Guides the Eye

     Creates Focal Area                                     Button




                   CIS 1310 – HTML & CSS
Dominance
   Emphasis & Visual Weight in a Composition
        Where the Eye is First Led to When Looking at a Design


    Right-most Column is Dominant

       Largest Area of Color

       Uses Big, Reversed Text for Major Headings

    Center Column is Subdominant

       Uses Less Color & Smaller Text in Less Space

       Left-most Column is Subordinate




                  CIS 1310 – HTML & CSS
Color
    Eye’s Response to Wavelengths of Radiation
          Hue, Value, Saturation

     All Hues Brought Down to a Mid-range Value


     Surrounded by Red & Orange


        Plays Off of Natural Complements


     Very Warm, Very Rich Set of Tones


        Feel Full & Vibrant

     http://colorschemedesigner.com/




                    CIS 1310 – HTML & CSS
Color
   Psychological Response
       Red
            Power, Energy, Warmth, Passion, Aggression, Danger

       Green
            Nature, Health, Renewal, Good Luck, Jealousy
                  Problems in Global Market

       Blue
            Trust, Conservative, Security, Order




                   CIS 1310 – HTML & CSS
Color
   Psychological Response
       Yellow
            Optimism, Hope, Cowardice, Betrayal
                  Sacred Color to Hindus

       Purple
            Spiritual, Mystery, Royalty, Arrogance

       Orange
            Energy, Balance, Warmth
                  Signifies a Product is Inexpensive in the US




                   CIS 1310 – HTML & CSS
Color
   Psychological Response

       Brown

            Earth, Reliability, Comfort, Endurance

                  Successful Food Packaging in US

                  Poor Sales in Columbia

       Gray

            Intellect, Future, Modest, Sadness, Decay




                   CIS 1310 – HTML & CSS
Color
   Psychological Response
       White
            Purity, Cleanliness, Precision, Innocence, Death
                   Signifies Marriage in the US

                   Signifies Death in India, Other Eastern Cultures

       Black
            Death, Mystery, Fear, Unhappiness

            Packaging
                   Power, Sexuality, Sophistication, Elegance




                    CIS 1310 – HTML & CSS
Shape
   Psychological Response
       Rectangle
            Order, Logic, Containment
       Circle
            Connection, Community, Wholeness
            Female
                  Warmth, Comfort, Sensuality, Love
       Triangle
            Energy, Power, Law, Science, Religion
            Male
                  Strength, Aggression, Dynamic




                   CIS 1310 – HTML & CSS
Branding
   Signifies Goods/Services

       Name


       Slogan


       Logo


   Something That Won’t Come Off in the Wash




               CIS 1310 – HTML & CSS
Branding
   Functional — Objective, Logical, Practical
       Communicate

       Recognition & Recall

       Differentiate

   Emotional — Subjective, Emotive, Creative
       Personality

       Add Value

       Attractive




               CIS 1310 – HTML & CSS
Branding
   General

       Leo Burnett

       Nike v. Adidas

       Logitech

       Michelin v. Firestone

       FedEx



                CIS 1310 – HTML & CSS
Branding
   Web Principles

       Consistency

            Logo


            Tagline


            Navigation


            Color Scheme




                CIS 1310 – HTML & CSS
Branding
   Web Principles

       Characters

            Simple Stylistic Trend

            Permeates Site to Thematically Unite It

                  Element of Logo

                         Used Next to Header Text


                         Used as Bullet Marker




                   CIS 1310 – HTML & CSS

								
To top