What is web design
Web design is a broad term covering many
different skills and disciplines that are used in the
producti...
What is a website
A website is a collection of electronic
documents and applications that reside on
a webserver
Web page
...
Basic syntax of HTML based Web page
<html>
<head>
<title>page title</title>
(external style sheet)
<link rel="stylesheet" ...
c
Design theory for Web Pages
Color Theory
Visual Direction
F - Layout
 Complementation
 Contrast
 Vibrancy
 Leading t...
Color Theory
Complementation
 Compound color scheme
By using an Equilateral Triangle, you can
ensure the colors have equa...
Vibrancy
More
Energetic
More
Relaxing
F - Layout
most important elements of your site (branding, navigation,
call to action) on the left side of the design.
Visual Direction - 1
Leading the Eye
looking away from the center of the page
Visual direction - 2
More easy to fill
Design Direction
Stillness, Stability,
Calmness
Movement and
Action
Structure of a Webpage
Let us see an example
New Standards in Web design
The W3C has released new standards of HTML (HTML5)
and CSS (CSS3), as well as new Java script ...
Rounded Borders in CSS3
Basic CSS Syntax
CSS Class
P.class1
{background-color:red;}
Adopted in 2007 by W3C
Some Html5 new Tags
Many other tags were also added for structure and form element
Few Removed Elements
<font>, <frame>, <...
Sample Webpage
Modern Browsers
Webpage I designed in 10th grade
Web design
Web design
Upcoming SlideShare
Loading in...5
×

Web design

286

Published on

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

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
286
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

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

×