Embed Size (px)
DESCRIPTION
Citation preview
Designing for Web Workflow
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
• Document Color Profile • Content Width• Typefaces• Backgrounds• Customized Form Fields
10 KEY POINTS
• Flexible Content• Form States • Hover States• Flash Alternate Content• Layer Comps
Document Color ProfilesRGB is the universally accepted RGB format
COLOR PROFILE SETUP
Under the Edit MenuGo to Color Settingsselect your RGB profileas sRGB IEC61966-2.1
COLOR PROFILE SETUP
Under the View MenuGo to Proof Setupselect Monitor RGB
Under the View MenuSelect Proof Colors
Content WidthConsider your audience's browser viewport
dimensions
SCREEN RESOLUTIONW3COUNTER.COM - MARCH 2010
• 4% still have a screen 800px wide• 30% have a screen 1024px or less wide
Static width designs should be 960pxor less to accommodate these users.
TypefacesWhat are our options?
ArialComic SansCourierGenevaGeorgiaHelveticaLucidaTahomaTimesTrebuchetVerdana
Web-safe Fonts
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
BackgroundsYour design is wider than your content
BACKGROUND IMAGES
THE FADE SOLUTION
THE TILE SOLUTION
Customized HTML Form FieldsCustomizing form fields can be difficult
WARNINGEXTREMELY POOR CSS SUPPORT
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
Flexible ContentDrop-down menus, text link and
button hover states.
IDEAL CONTENT REAL CONTENT
Lorem ipsum dolor
Sit amet, consecteturadipisicing elit, sed doeiusmod tempor incididuntut labore et dolore magnaliqua. Ut enim ad minimveniam, quis nostrud.
Read More »
NEWS
Tony tells a greatstory about monkeysto everyone!
I like monkeys. The petstore was selling them forfive cents a piece. I thoughtthat odd since they werenormally a couplethousand each. I decidednot to look a gift horse inthe mouth. I bought 200.
Read More »
NEWS
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
HOW DOES THIS GROW TOACCOMMODATE CONTENT?
DOES THE GRADIENT SHIFT?
DOES THE DROP SHADOWSTAY CONSISTENT?
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 for ethical benefits.
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.
Energetically leverage other's extensive communities without resource-leveling opportunities. Energetically supply orthogonal mindshare after technically sound methods of empowerment. Seamlessly communicate bleeding-edge materials with efficient e-services.
Read More »
QUESTIONS TO ASK YOURSELF
Form StatesDesign alternate states of web forms
Hover StatesIf you want ‘em, include ‘em
Menus, text link and button hover states.
Flash Alternate ContentIf you use Flash, iPad and mobile
users will be unhappy.
Frustrated, but
Layer CompsBitmap layer comps or individual layers?
LAYER COMPS
• Easy to quickly switch views• Great for showing interactions• No duplicate layers necessary• Fit your entire site design in one file
HOW TO USE LAYER COMPS
Hide & Show layers tocreate the desired view
Under the Window menuselect Layer Comps
Create a new Layer Comp& Name it.
After saving several viewsreturn to the palette andselect comps to view them
“This Goes to Eleven.”Pixels are exact, is your design?
The Half-pixelAt actual size, these look the same.
GOOD BAD?
The Half-pixelAt actual size, these look the same.
GOOD BAD
QUESTIONS?
