14. โข
What does the web design process look like now?
โข
How is HTML/CSS being used as a design tool?
โข
What deliverables make sense?
โข
What tools are available?
โข
What do we tell our clients and bosses?
35. Agile development
โข
โข
โข
โข
2001 Agile Manifesto
Iterative & incremental
Teams are integrated, not siloโd
Working software trumps
static documents about software
(โJust start building.โ)
45. The Web is all sizes.
Itโs slow and fast.
Itโs keyboard and touch.
Itโs at my desk and on the bus and
on my couch and in my bed and...
Itโs 10 inches and 10 feet away
46. 2013 Pew Internet Survey
63%
of cell phone owners
use phone to access Internet
34%
of them mostly or only
use a phone to access Internet
bit.ly/14VCt8R
47. 2013 Peopleโs Web Report
โThe survey found that speed
(41%) and consistency with the
PC web experience (33.2%) were
clearly the most important
things to mobile web users.โ
bit.ly/12ndU11
48. 2013 Peopleโs Web Report
โ43.3% of consumers surveyed
would wait to use a PC site,
rather than use a version that
does not function well on a
mobile device.โ
bit.ly/12ndU11
49. 2013 Peopleโs Web Report
โOver 30% simply will not bother
trying to use the non-optimized
site, or will turn to a competitor
instead.โ
bit.ly/12ndU11
54. โWeb Design Process in a Responsive World,โ by Ben Callahan
speakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
55. plan
HTML prototype
visual design
increased ๏ฌdelity
โWeb Design Process in a Responsive World,โ by Ben Callahan
speakerdeck.com/bencallahan/web-design-process-in-a-responsive-world
56. plan
HTML prototyping
increase ๏ฌdelity
client deliverables
developer
deliverable
โResponsive Design Work๏ฌow,โ by Stephen Hay
speakerdeck.com/u/stephenhay/p/responsive-design-work๏ฌow-webshaped-2012
61. Plan (Content First)
โข Start with content, real or representative
โข Identify all content types and components
โข Treat content as modules
โข Assign priority to every content type
71. HTML Prototypes
โข Prioritized content
Letโs talk layout.
โข Minimally styled
โข NOT necessarily production quality
โข Shows basic layout, navigation, and
interactivity
JE N SIMMONS
72. Advantages of Prototypes
โข Can begin testing on various devices
โข Gives the client a more realistic experience
โข Saves time overall
โข May provide a head-start on production
92. โ...like bringing a knife to a gun๏ฌght.โ
โAndy Clarke
https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gun๏ฌght
93. 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
104. Style Guides/Pattern Libraries
โข Documents every content component
โข Describes how they are used
โข HTML markup, CSS styles, scripts
โข Describes what happens on resizing
105. BBC Global Experience Language (GEL)
www.bbc.co.uk/gel/mobile/device-considerations/philosophy
118. Key characteristics of new work๏ฌow
โข
From waterfall to agile process
โข
From siloโd departments to integrated teams
โข
From pages to systems (content modules)
โข
From static deliverables to working prototypes
โข
From โBig Revealโ to clients as collaborators