Web design at a glance


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web design at a glance

  1. 1. Agenda Web Design? Position and Process of Web Design Concepts Hierarchy Color Using Fonts Using Images
  2. 2. Web Design?
  3. 3. Old School WebDesign? Visual
  4. 4. Old School WebDesign? Process of planning and creating a website by shaping text, images, digital media and interactive elements.
  5. 5. Modern Web Design?Information
  6. 6. Modern Web Design?Understand that a visitor’s reasons for clicking abutton are more important to that button’sappearance.
  7. 7. Modern Web Design?Designing and organizing information to beincluded on a website that will answer visitorsquestions.
  8. 8. Modern WebDesign?Setting goals for the sites we design andknowing how to gain an increased customermind-share for the client.
  9. 9. Web Design vs GraphicDesign Web Design Graphic DesignProduct Web, Mobile Visual productsTechnology Art Technology Art Technology IDEs, Online ToolsVisual Aspects Font, color, typographyConcept Usability, Semantic, Visual, Culture, Cross-browser Communications, Brand
  10. 10. Position and Process of Web Design?
  11. 11. Position of Web Design Web DesignGraphic Design Web Development Visual Design Front End Server Side Development Scripting Back End Database Development Design Client Side Publishing Scripting Coding Template
  12. 12. Process of Web Design(Define Visual Elements)
  13. 13. Process of Web Design(Sketch + Navigation)
  14. 14. Process of Web Design(Mock-Up Development)
  15. 15. Process of Web Design(Slicing / Theme Development)
  16. 16. Concept Visual Design User Semantic Experience Web Design Cross Usability Browser Information Structure
  17. 17. Hierarchy Visual Design
  18. 18. Hierarchy Visual Design Visual Element Ranking Designed to emphasize elements Designed to fulfill main goal
  19. 19. Hierarchy Visual Design (Howto)
  20. 20. Hierarchy Visual Design(Sample)
  21. 21. Hierarchy Visual Design(Sample)
  22. 22. Color Visual Design
  23. 23. Color Visual Design (CMYK &RGB)
  24. 24. Color Visual Design (RGB)
  25. 25. Color Visual Design (RGB) RED = #FF0000 GREEN = #00FF00 BLUE = #0000FF YELLOW = #FFFF00 PURPLE = #FF00FF CYAN = #00FFFF
  26. 26. Fonts Visual Design Serif Sans Serif
  27. 27. Fonts Visual Design Tahoma Verdana Georgia Palatino Century Gothic Opifico Wild Ride
  28. 28. Web Safe Fonts
  29. 29. Image Visual Design
  30. 30. Vector vs Bitmap
  31. 31. GIF (Graphic InterchangeFormat) Animated 256 Color Transparent with Matte Suitable for logo and vectors
  32. 32. JPG (Joint Photographic Group) Millions of colors Adjustable Compression Suitable for photo
  33. 33. PNG (Portable NetworkGraphic) Transparent Alternative for GIF Lack of support by IE Below 7th version
  34. 34. Additional Topics
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.