How I design a new site

19 comments | Posted: 15 September 06 in Tutorials, by Tim Bednar

User-experience design

I used to think I was a jack-of-all-trades kind of web designer. In the last year, I have found that is neither true nor desirable. I am basically a front-end, user experience designer. That means I craft the look and feel of web sites.

In this article, I am going to share how I create design concepts (using my latest design for Emergent Village as a case study).

I will be as specific as possible, since that seems to generate the best conversations around the topic. I am not saying my process is best, so if you have a different process please post a comment.

Before you push any pixels

This step is absolutely critical in order to be and feel successful. Your client needs to provide you with ALL the assets and requirements you will need to design. If you skip this step, you will waste lots of time (and earn less money per hour). Here are the most critical items for the client approval before you start:

Site width

Is the site 750px or 950px wide? Make sure your client views a sample site in both widths, on their monitor. When you pitch for the “finished” site, you do not want to hear, “Why does it look so small?”

Color scheme

It is really important that your client signs off on the actual hex colors as they see them on their screen. After several problems, I now have clients sign off on all colors: brand colors but also include the tints of grey and yellow you use for backgrounds, etc.

For your own sanity, do not assume that you can find the right hex value based on a Pantone color.

Assets

Make sure your client provides you with the most recent version of their logo, taglines and other collateral that will impact your concepts.

Objective and audience

The most critical element to get from a client—and oddly enough the most rare—is a clear objective and audience. This helps me decide the visual style, what is most important visually and how to craft the navigation.

Three-two-one iteration process

With a new site design, I usually set the expectation that I will provide three “parent” concepts of the site’s look and feel. From there, the client is expected to select two to refine finally working down to one.

Emergent Village Concept Emergent Village Concept

Emergent Village Concept Emergent Village Concept Fresh

From the four examples above, the client selected one which I iterated through until we arrived at the final design.

Emergent Village Concept Emergent Village Concept

Emergent Village Concept Emergent Village Concept Fresh

I put final in “quotes” because my designs often change as I code XHTML/CSS. These changes come about for a couple reasons:

The client finally settled on the bottom right.

Quote

If you are counting, this is at a minimum six screens to design in the concepting stage. When I do a quote, I itemize this time. If the client is a pain, I stick to six but if they are creative and its a fun process, I iterate until we are happy.

Parent pages

I do not design the home page first because that opens up all kinds of issues I do not want to address first. Instead, I design a “parent” page; one that I reference when designing all the other screens.

Tools I use

I use Fireworks for all creatives. I think it handles working in vectors better (I also think Freehand is more intuitive than Illustrator) and the slice/exporting tools are superior. I also never use real copy; I always use lorem ipsum filler text. I found that using real copy results in clients getting distracted by their own words.

Inspiration

This is the hardest part. Recently, I have felt creative enough to just find visually exciting stuff on the bus ride or in my house for inspiration. I feel the best when my designs flow out of the world around me, rather than from design books or trolling CSS inspirational sites.

Trolling

However, if I’m stuck with a white screen and nothing to put on it, I am not above trolling CSS galleries. If I find something I like I take a screen shot and put it into a folder.

After I get about 3 dozen, I start viewing them in a slide show over and over. (Often while rocking my baby boy to sleep.)

“Stealing”

I will pick out design elements from several to incorporate into my own design. For example, I will take a headline design from here, a navigational style from there, an background pattern from there, etc.

Sometimes, I will load an entire screen shot and start designing over the top of it. But I like that method least and have had mixed results using it.

The Pitch

I know you have the project, but it is not time to stop “selling”. Here are a few observations on making that all important pitch to the client,

And finally, do not be afraid to tell them which one you like best. I used to be afraid to push “my opinion” onto the client. But then I got tired of showing my next client “weak” work because previous client made poor decisions.

I even have started to send them one concept even if I have more to fall back on. Bottom line, here is one of your few chances to impact the outcome of the project in significant way. You are the designer—it’s time to act like one.

Stay tuned

In the near future, I plan to also publish separate articles on: How I code markup, How I code CSS and How I manage a project.

Discuss This Topic

  1. 1 Robert Spangler

    Tim, thank you for sharing your tips, designing ‘parent’ pages first was especially helpful.

    One thing I like to do is close my eyes (cheesy, i know) and think of how the design should look, and when I mentally get to right look I try to sketch it down in a sketchbook the same way I envisioned it and then move on to the computer.

    But I think sometimes it can be easier to start on the computer especially if you already have an idea of what you want.

     
  2. 2 Matt (mithrill)

    Nice article Tim. You offered some very good tips about the initial design process and getting the client’s approval. Thanks for Sharing.

     
  3. 3 Tank

    Tim, in desiging “parent” pages how often to you get negative fedback from the client. I know that generally most of our clients allude to wanting to see the homepage first. It may be a bit more intensive but we find it better to hash through the homepage becuase in most cases that is the first page users land on and it sets the expierence. Don’t guess I’ve really thought about doing it any other way.

    Also a good alternative to Lorem Ipsum is Shakespeare. I generally use a few large passages from Hamlet. I find that we’ve had a few questions of.. “Is this site in another language?” when we are beta testing or showing the comps. They can read the words of Hamlet but they know it’s not their own content.

     
  4. 4 ericatkins

    Thanks for the tips! Great stuff and really helps the rest of us out.

     
  5. 5 Les Reynolds

    Wow, great article Tim. This is very helpful. Just started doing web work full time, and am actually just finishing up the 3 intitial comps for my first official client. Thanks for taking the time to write this.

     
  6. 6 Damian

    Good article, Tim.

    Have you ever had one of those “duh!” moments? I had two while reading this article and the comments. The first one happened when you mentioned saving screenshots of sites that you like. How come I never thought of that? :)

    Second—Tank mentioned using Shakespeare rather than Lorem Ipsum. I’ve had more than a couple clients ask me what that was all about. Informing them doesn’t bother, but I think some Shakespeare would add a nice ambiance to the design. Great idea!

    D

     
  7. 7 Tim Bednar

    As for the “parent” pages vs. home page—I totally get what Tank is saying about the home page. It is nice to have that under your belt as you build out the rest of the site; however, for me, I often feel the demands of the home page interfere with my creativity.

    In the case of Emergent Village, I designed a home page and then the day before we launched re-designed it formally based on all the things I learned from the process (namely what was important to that community).

    The other reason for not desiging the home page first is simple; most of the traffic to sites DOES NOT come through the home page first. If they are coming via organic search—they may never see the home page.

    This usually “shocks” clients. But I’ve wasted more time working and re-working the home page knowing that it will be the 3rd or 4th most trafficked page in the site.

    I just like to try to get clients thinking horizontally and non-linearly about their site from the start.

    That said…I still understand the point.

    I also have had clients say exactly the same thing “Is this site in another language?” How odd? But it just shows that whether Hamlet or Latin; the point is to keep the clients away from thinking about what it says.

    Rather, I want them to think about how it feels, how it emotionally communicates. What does your site say without words? Does it fit your objectives? Your audience?

     
  8. 8 Tim Bednar

    Oh another thing about stealing; if you get into the habit of designing three or more concepts for a project—remember that whatever I client does not choose—you can repurpose for another client.

    I know that I stole 2 of the designs I did for Emergent Village and used them in other projects.

    http://www.earlcreps.com/

    and

    http://bobsadviceforstocks.textdriven.com/

     
  9. 9 Dr J

    Excellent article.

    I like how you mentioned to not feel like you should tell the client what your favorite design is. I was in that group for a while too and didn’t want to “influence” my clients in any way. As a result, I was a little hesitant to show some of my past work to potential clients because I didn’t want those new clients to think the past work was a representation of my full capabilities.

     
  10. 10 Seth

    Great article. For a web designer like myself, who’s still “starting out”, this type of write up is encouraging. It’s cool to hear how you go through the development of the design and working with the client in a professional, no-nonsense way. It seems easy to forget the “selling” side of the design process, making sure the people you’re working for are happy and the design reflects their desires for a site. Thanks a lot!

     
  11. 11 matthew

    Great great article. Thanks Tim. I added this to my resources list. Well done.

     
  12. 12 Antoine

    Great article, I most definitely fall into this class as well. Because of this (and a just a need to have other folks walking in Christ and tech), this site a frequent visit for me. Thanks.

     
  13. 13 Art Jomp

    Thank you very much, Tim! Eagerly looking forward to the sequels!

     
  14. 14 Jake

    Wow I can’t believe you have time to come up with 3 mockups!

    I would enjoy doing that – but my timelines always seem so short that I struggle just to get one decent comp done!

    Do you have relatively lengthy timelines, or do you just work day and night? Or are you just really efficient and creative!? :)

    I agree with starting your design somewhere else besides the main page.

     
  15. 15 Tim Bednar

    I almost always do 3 comps, but remember I often steal my own comps that other clients “rejected”. I also am constantly trolling for ideas—and often get into a certain style over 2-3 clients. Like now, I’m useing lots of bitmaped background patterns with gradient fills.

    And to be honest, I just work hard at it.

     
  16. 16 Oliver

    Thanks for your interesting information.

    For me I prefere working with Photoshop and Illustrator. Since Macromedia is bought by Adobe, don’t you think they will give up Fireworks soon?

     
  17. 17 Tim Bednar

    I have tried to use PS/AI combo, but gave it up for what I think is a quicker development environment in Fireworks. I got tired of using one huge app for vectors and another huge app for images—I also used Freehand way back in the day.

    As to what Adobe has planned for FW, I hope they replace ImageReady with FireWorks. But who knows.

     
  18. 18 Nathan Smith

    Oliver: Fireworks will continued to be developed. It is, quite simply, a better way to work with graphics for the web. Photoshop and Illustrator are each great for what they were intended to be used as – photo editing and vector art for print. That being said, they don’t really belong in the web graphics category, unless someone needed to edit photos for a website, that is.

     
  19. 19 Candice Harris

    Thank you for your great article. It was interesting to read about designer work.:) So it’s useful both for professionals and for potential clients :) I lked also your baby photos. It was cool to find some nice photos so suddenly while reading the article about web design. Great idea. And I think that you also show your creative worh working with your clients as well:)

     

Comments closed after 2 weeks.