In his talk at An Event Apart in Boston MA 2014 Dan Mall walked through how his Web design process is changing in a multi-device Web. Here's my notes from his talk Responsive Web Design is Easy/Hard:
- Henry Ford set out to make a motor car for the great multitude. He pioneered the first moving assembly to reduce prices and used low skilled workers, paid well, to get things done.
- Many agencies and corporations are built on this moving assembly line model. A typical waterfall process consists of a few isolated parts: you finish one and move on to the next. Today the design process is more iterative because we have to support multiple devices/screens.
- Instead we should use frameworks not processes: what are the constraints that exist across projects? What can we do within these constraints to excel?
- To move from waterfall to agile, you can take it one step at a time.
- Stay on projects later and join earlier so you can create areas of overlap between disciplines. Keep extending this on subsequent projects to maximize your involvement until it is no longer possible. At theta point, you can taper off as appropriate.
- Create focal points: start and end in the same place on projects. Kick-offs are great starting focal points. Repeat these phases, compress them into smaller and smaller tasks/objectives. This is how you get to a more agile workflow.
Modern Web Design Process
- Plan: do some upfront research with your intended audience to understand the big picture.
- Hypothesize: have a vision for what the product will be. Balance that vision with what research tells you.
- Content inventory: collect and organize the parts of a Web site. Create a list of the elements in a site and who owns it. Determine if every page should be removed, edited, or improved.
- Performance inventory: test competitors to determine how fast their experiences are. You need to be 20% faster to be noticeably quicker. Set a budget for rendering o achieve these goals.
- Pattern inventory: list out all the elements you'll need in a site and their composite elements.
- Use the right tools for the right team. Sometimes that means just a simple spreadsheet otherwise, it can be more complex.
- Visual inventory: allows you to really understand what a site could feel like. Take some screenshots of other sites and write up a quick overview of the technique being used. Ask if it could apply to the site you are working on.
- A typical approach to Web design involves showing people what their site will look like on different devices. Rather than showing what your site will look like, rephrase it to here's what your site will "feel like". This is more flexible.
- Sketch: explore ideas roughly and quickly. This does not have to be on paper.
- It's really easy to make a bunch of boxes responsive. It's hard to make a site responsive, there's a lot of nuance. So start simply.
- Turn powerful phrases in visual hooks through collages, style tiles, or other visual ways to kick off discussions about what a site should feel like. Should it be bold, bright, saturated, etc.? These are the right conversations to have at this point. Get ideas out into pixels.
- Clients need to imagine how these style explorations could be a Website. This is what we want them doing.
- Start with Type: always start with the typography. On small screens, many of your other visual elements will go away so type is a critical part of the design.
- If an element collage feels too much like a Web site, try laying things out horizontally so clients can make the distinction. Multiple versions of the same elements in a collage make them look less like a Website.
- Create deliverables that allow you to reveal parts of the design process to clients.
- Having a conversation up front means your first design won't be a surprise.
- Prototype: scale up your prototypes incrementally. Start with a simple build, then extend and gradually get more complicated. This allows others to come up to speed on what's been done very quickly.
- Assemble: this should be the fastest part of the project. Spend all your time in prototyping, sketching, and planning.
- Templates and pages are terms with a lot of baggage. Instead consider using a term like "presets".
- Responsive design is not hard but it brings up a lot of challenges that have always been there: performance, workflow, accessibility, business benefits. These are reminders of the things worth working through.
- We have all the tools we need already. Just focus on frameworks instead of processes.