This is How to Design and Develop a Web Project
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.
If you’re looking for more on the subject of wireframes, here’s some great additional reading:
- Wireframes: A Good Communication Tool, a Poor Design Tool by Dan Ritzenthaler
- Why we Prototype vs Wireframe by Eric Sharp
- Wireframes are dead. Long live wireframes by Joshua Porter
Time to get to work.