Designing for-web-workflow


Published on

Published in: Technology, Design
  • Be the first to comment

Designing for-web-workflow

  1. 1. Designing for Web Workflow
  2. 2. THE NERDERY We help our agency partners get big ideas out of their heads and onto their clients’ websites Website: Twitter: @the_nerdery
  3. 3. Matt Tonak Bio: E-mail:
  4. 4. Karsten Lundquist Bio: E-mail:
  5. 5. 10 KEY POINTS • Document Color Profile • Flexible Content • Content Width • Form States • Typefaces • Hover States • Backgrounds • Flash Alternate Content • Customized Form Fields • Layer Comps
  6. 6. Document Color Profile sRGB is the universally accepted RGB format
  7. 7. COLOR PROFILE SETUP Under the Edit Menu Go to Color Settings select your RGB profile as sRGB IEC61966-2.1
  8. 8. COLOR PROFILE SETUP Under the View Menu Go to Proof Setup select Monitor RGB Under the View Menu Select Proof Colors
  9. 9. Content Width Consider your audience's browser viewport dimensions
  10. 10. SCREEN RESOLUTION W3COUNTER.COM - MARCH 2010 • 4% still have a screen 800px wide • 30% have a screen 1024px or less wide Static width designs should be 960px or less to accommodate these users.
  11. 11. Typefaces What are our options?
  12. 12. Arial Comic Sans Courier Geneva Web-safe Fonts Georgia Helvetica Lucida Tahoma Times Trebuchet Verdana
  13. 13. VIABLE FONT OPTIONS • Typekit Subscription • Use Cufon if your EULA allows it • Use sIFR - warning ... get professional help • For now, use web safe fonts for body copy
  14. 14. Backgrounds Your design is wider than your content
  18. 18. Customized HTML Form Fields Customizing form fields can be difficult
  20. 20. USE BROWSER STYLES • Use browser / OS defined styles for quick & easy coding - especially with dropdowns, radios, and checkboxes • If using custom designed elements, expect to at least triple the time it will take to code and style
  21. 21. Flexible Content Drop-down menus, text link and button hover states.
  22. 22. IDEAL CONTENT REAL CONTENT NEWS NEWS Lorem ipsum dolor Tony tells a great story about monkeys Sit amet, consectetur adipisicing elit, sed do to everyone! eiusmod tempor incididunt ut labore et dolore magn I like monkeys. The pet aliqua. Ut enim ad minim store was selling them for veniam, quis nostrud. five cents a piece. I thought that odd since they were Read More » normally a couple thousand each. I decided not to look a gift horse in the mouth. I bought 200. Read More »
  23. 23. KEEP DESIGNS FLEXIBLE • All constants become variable • Ensure adaptable sizes, shapes, & colors • Sections must accommodate the content • Overusing drop shadows,gradients, rounded corners & other Photoshop may be costly or impossible to produce on the web
  24. 24. QUESTIONS TO ASK YOURSELF Recent News Distinctively foster leveraged convergence rather than sticky data. Holistically productivate just in time materials vis-a-vis economically sound e- commerce. Collaboratively enable tactical materials HOW DOES THIS GROW TO for ethical benefits. ACCOMMODATE CONTENT? Continually reinvent tactical expertise whereas strategic catalysts for change. Enthusiastically foster cost effective content without principle- centered meta-services. Authoritatively create end- to-end channels whereas adaptive services. DOES THE GRADIENT SHIFT? Energetically leverage other's extensive communities without resource-leveling opportunities. Energetically supply orthogonal DOES THE DROP SHADOW mindshare after technically sound methods of empowerment. Seamlessly communicate bleeding- edge materials with efficient e-services. STAY CONSISTENT? Read More »
  25. 25. Form States Design alternate states of web forms
  26. 26. Hover States If you want ‘em, include ‘em
  27. 27. Menus, text link and button hover states.
  28. 28. Flash Alternate Content If you use Flash, iPad and mobile users will be unhappy.
  29. 29. Frustrated, but
  30. 30. Layer Comps Bitmap layer comps or individual layers?
  31. 31. LAYER COMPS • Easy to quickly switch views • Great for showing interactions • No duplicate layers necessary • Fit your entire site design in one file
  32. 32. HOW TO USE LAYER COMPS Hide & Show layers to create the desired view Under the Window menu select Layer Comps Create a new Layer Comp & Name it. After saving several views return to the palette and select comps to view them
  33. 33. “This Goes to Eleven.” Pixels are exact, is your design?
  34. 34. The Half-pixel At actual size, these look the same. GOOD BAD?
  35. 35. The Half-pixel At actual size, these look the same. GOOD BAD
  36. 36. QUESTIONS?