Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web design


Published on

Content Source: W3schools,, tutsplus.
Made this presentation for "Colloquium" - A Seminar Contest, held in my college on 9th October 2012.

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

  • Be the first to like this

Web design

  1. 1. What is web design Web design is a broad term covering many different skills and disciplines that are used in the production and maintenance of websites Design area  Web Graphic design  Interface design  User experience design  Search engine optimization
  2. 2. What is a website A website is a collection of electronic documents and applications that reside on a webserver Web page  Images  Text  Video/audio  Other interactive content  Should be adaptive and user friendly
  3. 3. Basic syntax of HTML based Web page <html> <head> <title>page title</title> (external style sheet) <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> <body> . . . . </body> </html> HTML based webpages are coded in a text editor and saved with extension “.html”
  4. 4. c Design theory for Web Pages Color Theory Visual Direction F - Layout  Complementation  Contrast  Vibrancy  Leading the Eye  Forms  Design Direction  web surfers read the screen in an “F” patter
  5. 5. Color Theory Complementation  Compound color scheme By using an Equilateral Triangle, you can ensure the colors have equal vibrancy and compliment each other properly Using a variety of contrasting colors can help focus the viewer’s attention on specific page elements.
  6. 6. Vibrancy More Energetic More Relaxing
  7. 7. F - Layout most important elements of your site (branding, navigation, call to action) on the left side of the design.
  8. 8. Visual Direction - 1 Leading the Eye looking away from the center of the page
  9. 9. Visual direction - 2 More easy to fill
  10. 10. Design Direction Stillness, Stability, Calmness Movement and Action
  11. 11. Structure of a Webpage
  12. 12. Let us see an example
  13. 13. New Standards in Web design The W3C has released new standards of HTML (HTML5) and CSS (CSS3), as well as new Java script API’S
  14. 14. Rounded Borders in CSS3
  15. 15. Basic CSS Syntax CSS Class P.class1 {background-color:red;}
  16. 16. Adopted in 2007 by W3C
  17. 17. Some Html5 new Tags Many other tags were also added for structure and form element Few Removed Elements <font>, <frame>, <frameset> ,<noframes>
  18. 18. Sample Webpage
  19. 19. Modern Browsers
  20. 20. Webpage I designed in 10th grade