Web Design Principles


Published on

Examples of sites that apply the Web Design Princples

Published in: Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Notice that the white space in both the images is created by blurring the image. Blurring is a simple effect that add to the illusion of movement.
  • Web Design Principles

    1. 1. Image courtesy of http://www.betterbydesign.org.nz Design Overview Quick Review on the basics of Design
    2. 2. Taghavi-Burris 2009 Graphic Communication What is it?
    3. 3. Taghavi-Burris 2009 Graphic Communication  Graphic Communication is communication through the use of multiple forms of graphic media; such as images, video, animation and typography; combining art and technology in order to communicate a meaningful message to the audience.  effective graphic communication projects have a clear message or call-to-action.  A call-to-action (CTA) is a prompt to the audience to do something
    4. 4. Taghavi-Burris 2009 Graphic Design  The term graphic communication and graphic design are sometimes used synonymously.  However, graphic design is best defined as the number of artistic and professional disciplines, which focus on graphic communication.  Graphic design refers to both the process (designing) by which the communication is created and the products (designs) which are generated.
    5. 5. Taghavi-Burris 2009 Design Process The 6 D’s
    6. 6. Taghavi-Burris 2009 Design Process  There are 6 stages known as the 6D’s: Definition, Discovery, Drafting, Design, Development, and Deployment  Each of stage of design process typically has it’s own set of deliverables.  Deliverables is a term used in project management to describe a product of a design process, to be delivered to the client.
    7. 7. Taghavi-Burris 2009 Stage 1: Definition  During this phase designers will meet with the client or project manager to answer variety questions, such as:  What is the message or call to action?  Who is it for?  What are any constraints?  What is the best format/output for the project?  What is the creative direction of the project?  What is our timeline and budget?  What is the project goals or outcome?
    8. 8. Taghavi-Burris 2009 The Creative Brief  During the Definition stage a document known as the creative brief is complied.  The creative brief is usually made up of the following information:
    9. 9. Taghavi-Burris 2009 Stage 2: Discovery  The discovery stage has two parts research and conceptualizing  Research can can ensure a more effective design and provide justification for design choices.  Conceptualizing involves generating many ideas
    10. 10. Taghavi-Burris 2009 Stage 3: Drafting  Drafting is the stage of the process in which designers translates their ideas into an understandable format.  These formats can include:  Thumbnails  Sketching  Storyboards  Flowcharts  Mockups and Comps
    11. 11. Taghavi-Burris 2009 Stage 4: Design  The design stage takes the research, ideas and rough drafts from stage 2 and 3, and combines them into a meaningful product.  Assets are first collected/constructed to be used in the design.  Assets are all the elements that are apart of the completed design.
    12. 12. Taghavi-Burris 2009 Stage 5: Development  Development is the stage after After all the assets and design changes have been once again been approved by the client, and actual production can begin.  Depending on the type of project different versions or prototypes of the product must be developed in order to ensure quality assurance.
    13. 13. Taghavi-Burris 2009 Stage 6: Deployment  The deployment stage is the output of the project. Deployment can be anything from sending a project to the printers, to uploading a web site to a server.  Feedback is two-way communication between the client and the designer, and takes place throughout the design process.
    14. 14. Taghavi-Burris 2009 Design Basics Elements, Principles and Grids
    15. 15. Taghavi-Burris 2009 Design Basics  Design – to arrange design elements into an artistic whole.  Composition is the product or outcome of design.  Good composition is achieved when the elements of design are arranged in accordance to the principles of design
    16. 16. Taghavi-Burris 2009 Design Elements Point Line Shape & Form The Design Elements are the basic components used as part of any composition.
    17. 17. Taghavi-Burris 2009 Design Elements Texture Value Color Type is also considered an element when a composition requires text.
    18. 18. Taghavi-Burris 2009 Design Principles Unity & Variety Balance Scale & Proportion The Design Principles define the structural formation of a design and determine how the various design elements are organized within the compositional space.
    19. 19. Taghavi-Burris 2009 Design Principles Heading Rhythm Emphasis Appling these principles ensure a pleasing composition.
    20. 20. Taghavi-Burris 2009 Good Composition  Tips for good composition include:  One focus point  Good flow (guide the viewer through the the composition)  Subject of the composition should NEVER face out of the image.  Moving subject should have space in front  The horizon line should not divide the composition in two equal parts.
    21. 21. Taghavi-Burris 2009 Design Grids Golden Ratio Rule of Thirds Rule of Odds Design Grids (Composition Grids) are patterns that which ensure good flow for a composition.
    22. 22. Taghavi-Burris 2009 Design Grids Rule of Space Typographic Grid A Grid is created through a series of intersecting lines.