How to Build a Website

What is it like to build a website? This is a question with probably as many answers as there are people. I do think there are some phases that are fairly consistent. Watch this entertaining video of the creation of Warby Parker’s 2011 Annual Report and then I’ll explain why I thought it was worth sharing.

This short video demonstrates a pretty realistic process for creating a beautiful website. It also serves to demonstrate the two loosely definable phases of building a website; design and development.

Design

The designer in the video designs in the same software I do, Adobe Illustrator. Whenever I hear that people design in Photoshop I just can’t understand how they do it. The ability to constantly and quickly move things, resizing them on a fly is essential, not to mention Photoshop has atrocious type control. Illustrator’s output is not pixel perfect so I will do some graphic asset prosecution in an image editor. Sometimes that is Photoshop, but recently Pixelmator is taking over. I do as much layout as is necessary to satisfy myself or the client and then move to markup as quickly as possible.

Development

One thing that I think Warby Parker’s video points out is that the person who designed the site also does the development, at least on the front end. More evidence that designers should code. Here’s where things get interesting, the designer is constantly hopping back and forth between design files and their text editor, Coda in their case. For me the design is still taking shape and evolving as I go. In fact I prefer to leave a lot of granular design until well after the basic markup is underway.

Conclusion

It is clear that Design and Development are intertwined. It is most effective for me to not view these two tasks as separate. The disciplines may seem distinct, and in many organizations they are completely segregated, but they are, in fact, actually two necessary tools to accomplish a common goal. Building a beautiful website.