This is actually an old version of danielmall.com. For the latest and greatest, check out the new site.
 

Sum

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.

Disclaimers
  1. 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.
  2. This is a high-level overview, so some details may be omitted for the sake of brevity.
  3. 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.

Ready? Okay!

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.

Leftovers

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?

Comments

Sean S said:

Pssh. Research is a waste of time. And "information architecture"? Useless.

For me, the process goes like this:

1. Ask for a Word doc with all the content the client wants online.

2. Find an appropriate template -- Flash, and DHTML is a must.

3. Photoshop their logo into the header.

4. Plug the content in.

5. Deliver.

Couldn't be simpler. Meanwhile, you're probably still trying to decide on colors.~

Posted on January 23, 2008 01:20 AM

Rob Goodlatte said:

I totally agree that design is more about finding a look than creating one. Before I start working on a design, I like to very specifically pick a theme, genre, or individual inspiration pieces (usually old design books from the 40's) that suits the needs of the site. That lets me start from somewhere.

Posted on January 23, 2008 06:19 AM

Shawn B. said:

The most frequent issue I encounter is the client wanting to see mock-ups before they have their content.

And that whole finding vs. creating and originality vs. relevance thing is quotable.

Posted on January 23, 2008 11:59 AM

Dan Mall said:

Sean: Thanks for the great tips! ~

Rob: Great point. I’ll usually do the same; I love drawing influence from other work within the same genre.

Shawn: That’s the sole reason sites that sell design templates do so well. Designing without content is a disservice. Design is about communication; if there’s no message, the design is gratuitous.

Posted on January 25, 2008 07:52 AM

A.Fruit said:

I have to assume Shawn S. Is kidding. "Flash and DHTML is a must.." ha ha. Do people even use the term DHTML anymore?

Now, Shawn B. he's hit it on the head. Often times my clients don't even understand that they will have to be accountable for some work in the process. And when I'm building a site for a company that builds pre-fabricated steel framing for construction (something I know nothing about), I find my self in a position where I can't really just write the content for them.

Then there's always the danger, that if they don't start to see progress, whether they are getting me the content I need to move forward or not, they start to become agitated.

My Solution is this: When I deliver my proposal, the cost & time I estimate is a stipulation based on the terms of the proposal. One of those terms is that they give me all content before a certain phase of development. If/when they don't, they are basically off the plan-grid. If the Design is pushed ahead of the creation/delivery of content, the site will almost always require more resources to implement the content types, make changes, etc... So Atleast I can make more money, and show the client that 'I told them so' so to speak.

Posted on January 25, 2008 09:58 AM

Brian Warshaw said:

Dan,

While I'm no designer, and while I find my career taking me further and further away from websites, I am still interested to read your comments on building a site from the ground up. It's hard to disagree with anything that you've said, even as an outsider to the designer's trade with an admittedly more "glitz-and-glam" idea about crafting aesthetics (like I said, I'm not a designer).

Small note: your Javascript post preview is serving up a big fat "undefined" for the poster's name (at least it is in IE6 here at work).

Posted on January 28, 2008 03:43 PM

Brian Warshaw said:

At home on Firefox now. It was definitely IE6. Are you using getAttribute('class') or something like that?

Posted on January 28, 2008 09:00 PM

Jason Armstrong said:

Thanks Dan for continuing to speak to the "newbies" (of which I am one ~ 6 months old in the web design world). It's nice to know that some people still remember starting out and just how clueless one can be.

It's nice to know (or at least think) that the giants of design started out learning about Photoshop layers and understanding floats in CSS, etc.

I've written both Ethan Marcotte (the Unstoppable Robot Ninja) as well as Jason Santa Maria asking them to have a look at my work and while letting me know I have room to improve (of course) they were also very cool and kind enough to find something in my work to compliment me on which is great for motivation and lets me know there is hope for me yet :)

This shows they are not only great designers, but more importantly great people.

So, thank you too! Keep up the great work.

Posted on January 28, 2008 11:59 PM

Dan Mall said:

A Fruit: Those are certainly valid concerns. Although impossible to completely avoid, I do my best to try and steer clear of clients that don't respect my process. Clients that just want things done their way aren’t typically looking for solutions; they’re looking for people who know Photoshop, XHTML and CSS.

I like your approach to proposals. Stipulating content delivery before certain phases is difficult for some clients, but you've found a winner in one who can abide by those terms.

Brian: Thanks for the heads up about IE. I’ve been meaning to fix that forever. Alas: I am too lazy, especially as I’m in the midst of redesigning this site.

Jason:

Thanks Dan for continuing to speak to the "newbies" (of which I am one ~ 6 months old in the web design world). It's nice to know that some people still remember starting out and just how clueless one can be.

My pleasure, and my duty. I have no idea where I’d be if people hadn’t done the same for me when I was a newbie.

I've written both Ethan Marcotte (the Unstoppable Robot Ninja) as well as Jason Santa Maria asking them to have a look at my work and while letting me know I have room to improve (of course) they were also very cool and kind enough to find something in my work to compliment me on which is great for motivation and lets me know there is hope for me yet :)

Those hacks? You’re lucky you salvaged something useful from what they had to say :)

Posted on January 29, 2008 08:09 PM

Sorry: comments are closed.