Designing for-web-workflow

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

Matt TonakBio: www.nerdery.com/people#Mt

E-mail: mtonak@nerdery.com

Karsten LundquistBio: www.nerdery.com/people#Kl

E-mail: klundqui@nerdery.com

• 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?