Web Design Norms

546 views

Published on

Web Design and Development, HTML5, CSS3, Responsive Design, PSD Norms.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
546
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Design Norms

  1. 1. What isHTML & CSS?
  2. 2. HTML5 is the latest revision of theHTML standard. It is a language forstructuring and presenting content for the World Wide Web, a core technology of the Internet.
  3. 3. In particular, HTML5 adds many new syntactical features. New elements, such as <section>, <article>, <header>, and <nav>, are the basic parts of semanticcontent of documents. These alsoinclude the <video>, <audio>, and <canvas> elements
  4. 4. Its looks like this
  5. 5. Type of Layout• Fixed Width Layouts http://www.apple.com/ These are layouts where the width of the entire page is set with a specific numerical value.• Liquid Layouts http://www.uchicago.edu/ These are layouts where the width of the entire page is flexible depending upon how wide the viewers browser is.• Responsive Layouts http://www.microsoft.com/en-in/default.aspx These are layouts where the width of the entire page is depending upon devices
  6. 6. Effective tips to designing layouts:• Ensure Fast Loading• Balance Text and Graphic Equally• User Friendly Navigation, Use Breadcrumbs• Use 960 Grid PSD• Fonts and Typography• Keep your pages short, but not too short• Keep images small and use sprites whenever possible• use graphics that fit the content• Use External Fonts for heading only
  7. 7. Web 2.0 Specifications• Simplicity• Central layout• Fewer columns• Backgrounds• Separate top section• Solid areas of screen• Simple navigation• Bold logos• Bigger text• Bold text introductions• Strong Colour• Gradients• Reflections• Use icons
  8. 8. PSD Norms• Name Layers & Be Accurate• Spell Check• Maintained Versions• Use Folders / Use Folders Structured• Delete Unnecessary Layers• Globalize Common Elements• Use Layer Comps/Smart Objects• Don’t Stretch or Flatten Buttons• Make Licensed Fonts Available• Consider Device Width• Consider Device Width
  9. 9. Useful links• http://www.findmebyip.com/litmus/• http://www.html5doctor.com/• http://html5demos.com/• http://www.html5rocks.com/en/• http://www.webdesignfromscratch.com/web- design/web-2-0-design-style-guide/
  10. 10. Thanks!

×