Happy New Year! Yeah, I know it’s 22 days late, but it’s the first thing I’ve written for 2008. New years are great because they offer new starts and new beginnings. To the benefit of those looking at a fresh start, I’d like to write something for those new to the field of web design. I get a lot of email about it, especially from aspiring designers, so I’d like to talk about the process of building a website from start to finish.
- This is how I build a website. It may not be the industry standard, best practice, or the holy grail, but it’s what I’ve grown comfortable with inside of my skill set.
- This is a high-level overview, so some details may be omitted for the sake of brevity.
- The process changes with different factors, such as personal/professional project, clients’ goals, timeframe, etc.. My overview is designed to serve as a base that can be altered as your project varies; however, because of my personal experience, many of my examples are client-focused.
Step 1: Plan/Research
For me, this is the most important part of the process. I firmly believe that the more informed you can become, the better equipped you are to make productive decisions. Use this time to learn about competitors, site goals (more traffic, more sales), brand characteristics, and tone.
Depending on the nature of the project, this phase may be more of a learning exercise or more deliverable-based. If you’re working for a client, you may take this time to share your findings with them and confirm that your goals and their goals are the same.
Step 2: Develop and Finalize Content
You’ve established how to get your message across in the first phase; now focus on what to say.
I rarely see companies or individuals employ this phase. This is just as important as the first phase. If this phase isn’t done carefully, it will quickly bleed through to the rest of the project and be extremely difficult to retroactively correct. Doing this early on can help you to avoid a cookie-cutter, template-looking site that just feels off.
This may be the trickiest part of the process. Clients mostly think they’re paying big bucks for great design work or great coding work, but this is the real service offering. If you’re wondering how you can really be of value and stand out over your competitors as a service provider, practice your content development skills. There are millions of great looking sites, but the ones with strong messaging always prevail. Take The Onion, for instance. It stands on its own because of its confident and unique tone.
How do you develop content? Content comes in many forms, from imagery to colors to typeface choice, but the quickest way and a great place to start is simply to write copy. Say you’re creating a site for a new soft drink. A suitable headline for a manly, watching-the-game-every-night soda could be “Bite back.” However, an environmentally-friendly beverage might be softer and comforting, like “The simple way to refresh your mind.”
Step 3: Information Architecture
Now you have everything you want to say. When and where do you say it?
This is where the information architecture, or IA, phase comes in. Admittedly, I’m not an information architect, but, to me, IA is the process of organizing information so that it’s easy to understand. It’s also all about context. As the creator of a site, what do you feel is important to present to the user? And in what order?
Maybe your site would benefit from a linear progression, like a shopping cart. Maybe it’s largely informational, so you present passive options like “About the Company” and “Products.” Or maybe you’re aggressively seeking participation, so you proactively engage the user with choices like “Live”, “Act”, or “Join.”
There are an innumerable amount of ways to organize your information. It’s important that you use the knowledge you’ve gained about the project in the last two phases to inform your choices.
Step 4: Design
For most clients, this is where you start to get down to work. It’s ok to let them keep thinking that. You know the truth; all the hard work has been done, so it’s time to have some fun. Using the collective information you’ve gained thus far, it’s now time to put a face to the personality you’ve created.
When I start designing a site, I prefer to think of it as finding a look for the site as opposed to creating one. As a designer, I’m a sponge to the things around me. I allow myself to take in the world as an observer. When I finally site down to design, whether on sketching on paper or pushing pixels in Photoshop, the things I’ve absorbed resurface to shape something unique to me. Experience molds my design work. By drawing on past inspiration, I find the design as an amalgam of my interactions, not an original creation.
I’ve quickly realized that striving to create something uniqe for the sake of it is overrated. I’d much rather be appropriate.
Originality is spectacle; relevance is artful.
Step 5: Build
I talk about this a lot, so I won’t say much about it now. Medium comes into key. Maintainability, immersion, audience, and a myriad of other factors determine whether you’ll be building a Flash site, an XHTML/CSS, some sort of hybrid, a web app, or something completely different. Like in design, choose an appropriate vehicle for your content.
I consciously left out some steps that a lot of notable agencies and designers use. One such item is testing. For me, testing should be happening along a process. Whether it’s user testing or browser debugging, I’ve always felt that a testing "phase" is like a bandage when done poorly and waste of time when overdone. As you’re working, test. Can’t decide between two colors? Do two versions (one of each), and test it with your friends. Font sizing screwed up in IE? Don’t wait until you’re done coding to fix it. Always be accountable for your work at all times.
Now it’s your turn. How different is all of this from your process? How similar?