0
Designing for Web Workflow
THE NERDERY



                    We help our agency
              partners get big ideas out
                of their he...
Matt Tonak
Bio: www.nerdery.com/people#Mt
E-mail: mtonak@nerdery.com
Karsten Lundquist
Bio: www.nerdery.com/people#Kl
E-mail: klundqui@nerdery.com
10 KEY POINTS
• Document Color Profile   • Flexible Content
• Content Width            • Form States
• Typefaces          ...
Document Color Profile
sRGB is the universally accepted RGB format
COLOR PROFILE SETUP

Under the Edit Menu
Go to Color Settings
select your RGB profile
as sRGB IEC61966-2.1
COLOR PROFILE SETUP

Under the View Menu
Go to Proof Setup
select Monitor RGB

Under the View Menu
Select Proof Colors
Content Width
Consider your audience's browser viewport
               dimensions
SCREEN RESOLUTION
      W3COUNTER.COM - MARCH 2010

• 4% still have a screen 800px wide
• 30% have a screen 1024px or less...
Typefaces
What are our options?
Arial
                 Comic Sans
                 Courier
                 Geneva
Web-safe Fonts   Georgia
              ...
VIABLE FONT OPTIONS
• Typekit Subscription
• Use Cufon if your EULA allows it
• Use sIFR - warning ... get professional he...
Backgrounds
Your design is wider than your content
BACKGROUND IMAGES
THE FADE SOLUTION
THE TILE SOLUTION
Customized HTML Form Fields
  Customizing form fields can be difficult
WARNING
EXTREMELY POOR CSS SUPPORT
USE BROWSER STYLES
• Use browser / OS defined styles
  for quick & easy coding - especially
  with dropdowns, radios, and ...
Flexible Content
Drop-down menus, text link and
     button hover states.
IDEAL CONTENT                      REAL CONTENT
NEWS                               NEWS
       Lorem ipsum dolor          ...
KEEP DESIGNS FLEXIBLE
• All constants become variable

• Ensure adaptable sizes, shapes, & colors

• Sections must accommo...
QUESTIONS TO ASK YOURSELF
Recent News

Distinctively foster leveraged convergence rather
than sticky data. Holistically pr...
Form States
Design alternate states of web forms
Hover States
If you want ‘em, include ‘em
Menus, text link and button hover states.
Flash Alternate Content
 If you use Flash, iPad and mobile
       users will be unhappy.
Frustrated, but
Layer Comps
Bitmap layer comps or individual layers?
LAYER COMPS
•   Easy to quickly switch views
•   Great for showing interactions
•   No duplicate layers necessary
•   Fit ...
HOW TO USE LAYER COMPS
Hide & Show layers to
create the desired view

Under the Window menu
select Layer Comps

Create a n...
“This Goes to Eleven.”
Pixels are exact, is your design?
The Half-pixel
At actual size, these look the same.




   GOOD                  BAD?
The Half-pixel
At actual size, these look the same.




   GOOD                  BAD
QUESTIONS?
Designing for-web-workflow
Designing for-web-workflow
Designing for-web-workflow
Designing for-web-workflow
Designing for-web-workflow
Designing for-web-workflow
Upcoming SlideShare
Loading in...5
×

Designing for-web-workflow

2,949

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,949
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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: www.nerdery.com Twitter: @the_nerdery
  3. 3. Matt Tonak Bio: www.nerdery.com/people#Mt E-mail: mtonak@nerdery.com
  4. 4. Karsten Lundquist Bio: www.nerdery.com/people#Kl E-mail: klundqui@nerdery.com
  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
  15. 15. BACKGROUND IMAGES
  16. 16. THE FADE SOLUTION
  17. 17. THE TILE SOLUTION
  18. 18. Customized HTML Form Fields Customizing form fields can be difficult
  19. 19. WARNING EXTREMELY POOR CSS SUPPORT
  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?
  1. A particular slide catching your eye?

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

×