Designers and Code and Workflows and Stuff

Designers and Code
and workﬂows and stuﬀ

Jennifer Robbins
@jenville

Friday, October 26, 2012

me, 1993


The Web in 1993
In June 1993 there was a total of 130 websites.


Global Network Navigator (GNN)
1993


Head-DESK
HEAD-DESK


• What does the web design process look like now?

• What deliverables make sense?

• How is HTML/CSS being used by designers?

• What tools are available?


Product Development
Timeline

idea launch


Product Development
Timeline

research maintenance

idea launch


User Experience (UX)
user interviews
personas
design strategies

idea launch
scenarios

usability tests


Information Architecture & Content Strategy
card sorts
content audit

idea launch
site maps

taxonomies


Interaction/UI

wireframes
user journeys

idea ﬂow diagrams launch
prototypes


Visual/Graphic Design

typography
layout

idea mood/atmosphere launch
comps/mockups


Frontend Development

HTML
CSS
JavaScript

idea launch


Backend & Server

“black magic”

idea launch


Where I work...
typography
wireframes HTML
design strategies user journeys layout
CSS

mood/atmosphere
idea ﬂow diagrams launch
comps/mockups
site maps


idea launch


Traditionally, the need for coding skills
increases as you get closer to launch

idea launch


I’m seeing code moving its way back the chain

idea launch


So, what’s changed?


AgILE!
AGILE!


plan design develop deploy


wireframes



wireframes PSD comps



wireframes PSD comps code



design

develop


MOBILE!!!


[courtesy of Brad Frost (bradfrostweb.com)]


disruptive
Disruptive


20% | 35%
Don’t have Internet access | Don’t have broadband at home

Statistics: http://www.slideshare.net/KMcGrane/uncle-sam-wants-you-to-optimize-your-content-for-mobile


BUT!
88% of Americans have a mobile device
55% use them to access the Web


31%
Americans only or mostly use Internet on mobile

39% 43% 51%
No-college Low-income Black
Americans Americans Americans


Your site on mobile MUST:
• Have complete content

• Be fully-functional

• Be easy to use


Responsive Design


http://mediaqueri.es


Android screen size survey


MADNESS!!!


Static comps don’t cut it anymore.


“Like bringing a knife to a gunﬁght.”
—Andy Clarke

https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunﬁght


Static mockup drawbacks

• Don’t display web fonts accurately

• Can’t show ﬂexible/responsive layouts

• Don’t show interactions and transitions

• Set wrong expectations

• Design changes are time-consuming


Toward a new process
PRocess
(responsive workﬂow)


Responsive Summit
London • February 2012

www.responsivesummit.com


Plan Sketch Prototype Increase Fidelity Iterate/Talk
(in HTML) (visual design
applied to prototype)

(from Mark Boulton’s notes of the Responsive Design Summit)
http://www.markboulton.co.uk/journal/responsive-summit-workﬂow


“Responsive Workﬂow,” by Viljami Salminen
http://viljamis.com/blog/2012/responsive-workﬂow/


plan

HTML prototyping

increase fidelity

client deliverables

developer deliverable

“Responsive Design Workflow,” by Stephen Hay
https://speakerdeck.com/u/stephenhay/p/responsive-design-workflow-webshaped-2012


Plan



“Websites are systems rather than pages.”
—Anna Debenham



Plan (Content First)

• A module-based approach

• Identify content types/components

• Consider the goals and context of each component

• Assign priority to every content type


Sketch



Sketch

http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets


Normally, you’d whip up some wireframes
right about now, but...



HTML Prototypes wireframes

• Structured (preferably actual) content

• Unstyled (maybe a set of generic CSS rules)

• Addresses layout, navigation, basic interactivity

• Start with single-column layout ﬁrst

• NOT necessarily production quality



Advantages over wireframes

• Can begin testing on various devices

• You can see how the page behaves at diﬀerent widths

• Gives the client a more realistic experience

• May provide a head-start on production



Protyping Tools: Responsive Frameworks

• Bootstrap from Twitter (twitter.github.com/bootstrap/)

• Foundation (foundation.zurb.com)

• Skeleton (getskeleton.com)

• 1140 CSS Grid (cssgrid.net)

• 320 and Up (stuﬀandnonsense.co.uk/projects/320andup/)



Protyping Tools: Online grid generators

Gridset, by Mark Boulton & team Gridpak (gridpak.com)
(gridsetapp.com)


Increase Fidelity
Visual Design



Visual Design

• Typographic treatments
• White space
• Color and texture
• “Atmosphere”



Visual Design approaches

• “Design in Browser” w/ CSS


“I can’t design in the browser.”
...my designs end up suﬀering, looking boxy, bland and uninspiring.

—Sarah Parmenter

www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/




• Photoshop/Fireworks then move to browser asap


“I design in Photoshop, but decide in the browser.”
—Chris Coyier, css-tricks.com

css-tricks.com/conferences/BDConf2012-Workﬂow.pdf


“Work in Photoshop and Fireworks, by all
means (I do). Make static visuals as rich and
as detailed as you want them to be.

Just don’t set the wrong expectations by
showing them to your clients.”
—Andy Clarke

www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects/



Get design ideas into the browser as soon as possible.

(style every content component)



CSS shortcut tools
• CSS Hat (csshat.com/) — turns Photoshop layer styles to CSS

• CSS Professionalizr— cleans up CSS generated by Fireworks CS6
(mattstow.com/css-professionalzr.html)

• Adobe Edge Reflow — first WYSIWYG responsive design tool (unreleased)
(html.adobe.com/edge/reflow/)


Adobe Edge Reﬂow

(html.adobe.com/edge/reﬂow)




• Photoshop/Fireworks then “move to browser” early
• Treat “look and feel” separately (Style Tiles)


Style Tiles (styletil.es)
Style Tiles are a design deliverable consisting of fonts, colors and interface elements that
communicate the essence of a visual brand for the web.
—Samantha Warren


Style Prototypes
(built in HTML/CSS, not Photoshop)

sparkbox.github.com/style-prototype/


Client deliverables in a
responsive workflow
• Content type inventory (prioritized)
• Low-fidelity HTML prototype (layout, interaction)
• Style tiles (visual vocabulary)
• High-fidelity prototype (working design)


But what do you give the developers?!


Style Guides


Style Guides
• Documents every content component on the site
• HTML markup, CSS styles, scripts
• Description of how it is used (context, limitations)
• Instructions for what happens when it resizes


“Style guides are the new Photoshop.”
—Stephen Hay

speakerdeck.com/u/stephenhay/p/style-guides-are-the-new-photoshop-smashing-conference-2012


BBC Global Experience Language (GEL)
www.bbc.co.uk/gel/mobile/device-considerations/philosophy


Starbucks style guide
www.starbucks.com/static/reference/styleguide/


South Tees Hospital

www.southtees.nhs.uk/style-guide/


gim.ie/fZyK
Compiled by Anna Debenham


Developer deliverables

• High-ﬁdelity prototype
• Style guide that describes the system

ACTUALLY... it’s likely that the developers have been working in
tandem with design all along, so no big HANDOFF.


Iterate and Talk



www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsive-design-projects/



www.alistapart.com/articles/responsive-comping-obtaining-signoﬀ-with-mockups/


So...


Key characteristics of new workﬂow

• Design systems, not pages
You’ll need to know

•
HTML & CSS for this part
Treat content as mix-n-match modules

• Get into HTML/CSS as early in the process as possible

• Leave static comps in the dust


what are you trying?

and, thanks for listening! xo, Jen


Designers and Code and Workflows and Stuff

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

Recently uploaded

Recently uploaded (20)

Designers and Code and Workflows and Stuff