Skip to main content

This is How to Design and Develop a Web Project

EW patterns by Brad Frost

For years, the first tool I reached for in the early stages of a site’s development was Omnigraffle.

Over the last couple of years – with the introduction of powerful frameworks like Twitter Bootstrap and Zurb’s Foundation – I’ve turned to Omnigraffle less and less. It is just too easy to get an idea across with these frameworks.

Turns out, I’ve only scratched the surface.

Entertainment Weekly recently launched a new responsive site. A few of the team members behind this project have generously shared their approach and process for this project. This is the roadmap for future projects, as far as I’m concerned.

Brad Frost produced the HTML and CSS for the project. He shared how the team went from “HTML Wireframes” to increased fidelity to “real” development.

Dan Mall, who oversaw the design direction, shared the process that happened before the wireframes, using “the design studio methodology, the KJ technique, and … some one-on-one interviews, among other things.”

Jonathan Stark (the self described “token codemonkey on the team”) gets into some CSS and Javascipt specifics, as well as their Git workflow.

For me, the most significant piece of this entire process is Pattern Lab, a tool Brad Frost made to create atomic design. Just brilliant.

If you’re looking for more on the subject of wireframes, here’s some great additional reading:

Time to get to work.