Web Design 101

6,416 views
6,213 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
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,416
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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 :)

    ×