Responsive websites are here to stay, and for good reason. There is currently no better method for molding content to the growing plethora of devices and device sizes on the market. However, while the technology has changed, the design/development process has remained fairly stagnant.

The reason for this is fairly straight forward: Most agencies are stuck in outdated staffing models where a division between designers and front-end developers still exists. For new responsive design paradigms to work, this has to change.

One method of addressing this issue is to bridge the gap between design and developer. We have found this strategy is less than ideal. Developer on developer pairing may have its merits, but designers and developers have such inherently different processes that it quickly becomes problematic and ultimately hinders the project.

Alternatively, we here at dojo4 have decided that it's in our best interest to have multi-faceted employees. Not only do we seek these employees, we strongly encourage skill expansion. As a result, we have designers who can code and coders who can design. This allows us to start and finish our responsive design process nearly entirely in browser.

Our design process starts with a quick organization of content by way of a site map or user flowchart. This allows us to identify pages and templates that need wireframing love as we move into the next phase of our process.

I hope you enjoyed the first phase for its quaintness as it is the only phase spent outside of our beloved browser.

Prior to getting started with wireframes, we set-up our environments and sort out any dependencies (i.e. Bootstrap, jquery, fontawesome and Middleman). It's also at the point the we get any deployment needs addressed (namely setting up rake tasks and S3 buckets). Once we are all set to build and deploy, we start to rock and/or roll.

Working from the aforementioned deliverables (site map), we begin to build out grayscale wires. While the wires are responsive, they are very much no-frill. All content and javascript components (tabs/dropdowns/tootips/&c.) have base styling and base functionality. Images and icons are either stock or grayed/boxed with a description. The goal here is to cement page architecture and responsive breakpoint decisions without thinking about or lingering on design decisions those come next.

After the wires are locked into place, we are able to move into the design phase of the project. We typically generate a pattern portfolio. In fairness, our pattern portfolios are somewhere between a living style tile and a pattern portfolio. They show color and typography choices in addition to element and component design: headers, footers, forms, buttons, tabs, lists, paragraphs, titles, subtitles, and any other substantial piece as learned from the wires. We consider these to be the materials of our little web house.

With the pattern portfolio approved, we start integrating the designed elements into our html wires. We also begin flowing content, inputting data, doing any data modeling and hooking up CMS components if one is used. While much of the work has been done at this point, this is generally the phase that feels like the actual building of the site.

At this point, we have a draft site on staging and ready for review. There is typically a round or two of revisions small changes and tweaks. And then comes the fun part, pushing the little red button that sends the site into the world where it finally gets to start doing work and prove itself to be the best and baddest on the interwebs... until the next launch, that is.

Tweet