Responsive Workflow

Viljami Salminen, a UI/Web Designer and Developer from Finland explains his responsive workflow. He offers some great thoughtful descriptions on each individual step. His responsive workflow is broken down into the following steps:

Discover, Plan, Text Design, Sketch, Prototype, Visual Design, Test, Discuss and Iterate.

Some highlights included the free ‘Device Breakpoint Diagram’, the Text Design step (which was a new concept to me) and the Visual Design step which included some great typography tips.

‘Text design’ here means that we write (design) all the contents of the website down in textual form. This is one of the most important stages in the whole process, and yet it’s probably also the most underrated step.

Visual design. This step happens in iterations before and after prototyping. I still use Photoshop to do most of the design, but I’m moving more and more towards design in a browser. Especially typography seems to be something which is really hard to get working anywhere else than inside the browser (Although at the same time I have noticed that if I do the jump too early, everything will end up looking flat, uninspiring and somehow cluttered).