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 101

17,986 views

Published on

Basic stuff on designing for the web.

Go to http://www.clipsoflogic.com/2011/09/06/web-design-101/ ‎for full list of links

Published in: Design, Technology
  • best web design company in trivandrum | web site design http://bytelabz.com/ Bytelabz Solutions is a custom web design and development company in the Trivandrum. With a strong local client base and clients from around the world, our team is dedicated to push the boundaries of internet technologies.We pride ourselves on the ability to bring you the best technical website developers available. We develop websites and custom web applications using a wide variety of web technologies including, but not limited to We are the Website Design trivandrum , best web design company in trivandrum, Website Design trivandrum , web development company in Trivandrum, best web development company trivandrum, custom website developmen trivandrum, web development trivandrum, best Graphic design company trivandrum, Graphic design company trivandrum, e-commerce website developer Trivandrum,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Web Design 101

  1. 1. WEB DESIGN 101 basic stuff on designing for the web
  2. 2. ABOUT T.S. LimME Flexnode Solutions Web Developer Used <blink> Decent Designer? www.clipsoflogic.com
  3. 3. WHAT YOU NEED TO KNOW ABOUT WEB DESIGN HOW YOU CAN IMPROVE YOUR WEB DESIGN
  4. 4. 8 THINGSYOU NEED TO KNOWABOUT WEB DESIGN
  5. 5. 1. WEB TECHNOLOGIES
  6. 6. HTML hypertext markup language<html> <head> <title>Webcamp KK</title> </head> <body> <h1>This is awesome</h1> </body></html>
  7. 7. CSS cascading style sheetsbody { background-color: black;}h1 { font-size: 40px; text-decoration: underline;}
  8. 8. JAVASCRIPT scripting language for web pages<script type=”text/javascript”> // comment document.write(‘Webcamp KK’); alert(‘This is awesome!’);</script>
  9. 9. 2. LAYOUTS
  10. 10. FIXED LAYOUT &F L U I D L AYO U T
  11. 11. FIXED LAYOUTBetter control on looks and contentEasier to read and styleMight cause horizontal scroll on small screensChanging font size might break layout
  12. 12. FLUID LAYOUTAdapts to any screen sizeHandles font size change wellLess control on the placement of contentContent might be stretched or squashed
  13. 13. SOME TIPSStart with Fixed Layout. 960px / 1140pxUse base CSS (Bootstrap, Blueprint, GGS)Mix Fluid layout for certain content (e.g. pics)Learn how to float and position elements
  14. 14. 3. TYPOGRAPHY
  15. 15. TYPOGRAPHYSIZE serif sans serif cursive{ line-height: 1.5em }l e t t e r s p a c i n g text decorationleft all about the arrangement right
  16. 16. CUSTOM FONTSGoogle Web Fonts - @font-faceTypekit - @font-faceCufon - VML & CanvassIFR - Scalable Inman Flash Replacement
  17. 17. USEFUL STUFFLettering.js - jQuery plugin for font controlFontsInUse.com - Discover fonts being usedFitText - jQuery plugin for fluid headlinesHTML ipsum - placeholder text in HTML
  18. 18. SOME TIPSBody font size 12-14pxLine height at 1.5emLeft align body of textUse preset in CSS base frameworksTest with different content
  19. 19. 4. WHITESPACE
  20. 20. WHITESPACEGoes together with typographyAll the negative spaces between contentKey to aesthetic compositionThere are active and passive whitespace
  21. 21. WITHOUT WHITE SPACES Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. •Lorem ipsum dolor sit amet, consectetuer adipiscing elit. •Aliquam tincidunt mauris eu risus. •Vestibulum auctor dapibus neque.
  22. 22. WITH WHITE SPACESPellentesque habitant morbi tristique senectus etnetus et malesuada fames ac turpis egestas.Vestibulum tortor quam, feugiat vitae, ultricieseget, tempor sit amet, ante. Donec eu libero sitamet quam egestas semper. Aenean ultricies mivitae est. Mauris placerat eleifend leo. • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. • Aliquam tincidunt mauris eu risus. • Vestibulum auctor dapibus neque.
  23. 23. SOME TIPSPractice and test with your contentBase CSS Frameworks provide good defaultsUse it to structure and emphasize contentAdd padding to your text container
  24. 24. 5. COLORS
  25. 25. COLOR WHEEL
  26. 26. SOME THEORIESPrimary, secondary, tertiary colorsAnalogous and complementary color schemesColor contrast and context mattersUse nature as a guide
  27. 27. Primary colorsSecondary colorsTertiary colorsAnalogous colorsComplementary colorsColors from NatureColors Context
  28. 28. SOME TIPSColourLovers.com - Awesome color resourcePick a color scheme and stick with itDifferent color for link and visited linkUse colors for call to action
  29. 29. 6. GRAPHICS
  30. 30. GRAPHICSVisual impact & communication - brandingEasier to consume information - graphsComplement or replace textual info - iconsCreate emotional connection
  31. 31. SOME TIPSFamfamfam.com icon packsiStockPhoto.comPNGs for text, logos - Lossless compressionJPEGs for photos - Lossy compressionAvoid animation if possible
  32. 32. 7. INFORMATIONSOFTWARE DESIGN
  33. 33. INFO SOFTWARE DESIGNMost software is information softwareDesign of context-sensitive info graphicsWhat and how the information is presentedApproach as graphic design first
  34. 34. MORE INFORead Magic Ink Article by Bret VictorFinish it. It’s a MUST READShowtimes.my was inspired by it
  35. 35. 8. USER EXPERIENCE
  36. 36. USER EXPERIENCEHow a user feel when using your siteDesign a site that’s fun to useMatch the conceptual model of the userUsed to shape the user behavior
  37. 37. UX IS NOT...Just the user interface or usabilityAbout the technology or even the webFocused just on the user but the entire productExpensive but not easy either
  38. 38. USER EXPERIENCE IS PART OF YOUR PRODUCT UX IS NOT A STEP IN THEPROCESS BUT THE PROCESS
  39. 39. Facets of UX by Peter Morville
  40. 40. UX TOOLSWireframe & Prototyping - Balsamiq MockupsA/B Test your design - OptimizelyAnalyze user behavior - KISSmetricsSurvey and ask for feedbacks - Usabilla
  41. 41. 6 WAYSYOU CAN IMPROVEYOUR WEB DESIGN
  42. 42. 1. LOOK AT PRETTY SITES
  43. 43. LOOK AT PRETTY SITESBrowse sites like Smashing MagazineLearn how and why a design is goodSharpen your design sense with exposureStart noticing good design in products
  44. 44. 2. COPY, PASTE, MODIFY
  45. 45. COPY, PASTE, MODIFYStart with a design you likeUse it as a base and modify to your needsNothing beats hands-on experienceNever plagiarize and give credit where it’s due
  46. 46. 3. DESIGN AROUND YOUR CONTENT
  47. 47. DESIGN AROUND CONTENTMost websites exist mainly to deliver contentDesign should complement your contentUnderstand the nature of your contentContent should be first-class citizen
  48. 48. 4. THINK LIKE A USER
  49. 49. THINK LIKE A USERTry to actually use the site you designedImagine yourself as a new visitorMake sure user gets what they are here forBring in fresh eyes for feedbacks
  50. 50. 5. PAY ATTENTION TO THE DETAILS
  51. 51. ATTENTION TO DETAILSDon’t include unnecessary detailsDo care about every little detailsSeparates good design from the greatE.g. iCloud logo infused with golden ratio
  52. 52. 6. ASK FOR HELP
  53. 53. ASK FOR HELPDon’t be shy and get input from othersA lot of design is trial and errorFamiliarity trumps cool design any dayAdopt good ideas, ignore the bad ones
  54. 54. Most people make the mistake of thinkingdesign is what it looks like. People think it’sthis veneer — that the designers are handedthis box and told, ‘Make it look good!’ That’snot what we think design is. It’s not just whatit looks like and feels like. Design is how itworks.” - Steve Jobs
  55. 55. CREDITSColors by MMMiguel @ ColourLoversSmashing Magazine for awesome infoMagic Ink Article by Bret VictorHelp from Marissa - real designerGet the complete list of links at my blog
  56. 56. THANK YOU! for listening :)

×