How to Start a Web Design Project [Infographic]

There’s a first time for everything — and it’s finally time for your very first web design project! While landing your first gig is a huge accomplishment in itself, keeping your first client happy requires a whole different set of skills. You’re not just a designer — you’re a project manager, and offering a great customer service experience is essential for winning over your clients’ repeat business, so you’ll need to be on target from day one.

But where should you begin? You may not have learned so much project management in school, so we’d like to offer up a few tips. The infographic below outlines every stage of the web design process from start to finish. The first step of a web design project is learning what your client wants: her overall objectives, the purpose of the website, her audience, the features she requires. Remember, this is her project, not yours. You’re here to bring her vision to life — and hopefully, to offer some creative insights that will make the website even better than she imagined.

You’ll need to know your client’s goals up front, because that’s how you’ll determine budget. Next, outline budget and timeline in a written agreement. This agreement holds your client to her side of the contract, but holds you accountable, too.

So you’ve set expectations up front — great! Now you need to do a little research. Part of your job is determining the best possible user experience for the site, and that usually means creating user personas to determine how to meet the needs of target users. Every great website serves a purpose and facilitates that purpose to the greatest degree possible, so that’s what you’ll want to deliver! At least, we think you do.

The wireframe that results from all this research and planning helps to make your plans clear to your client. Managing your client’s wireframe feedback can be challenging, but here’s a rule of thumb: if she makes a suggestion that you think will hurt the aesthetic or functionality of the site, push back in a polite and professional manner — after all, the client isn’t just paying for your skills, she’s paying for your training and expertise. But in the end, this is her website, not yours. Balance your professional opinions with the demands of your client and you’ll make it through this stage unscathed.

Now it’s time for the coding — your favorite part! But once all the coding is done, don’t forget to run diagnostics and check for browser compatibility. Turning in an untested site is one sure way to look unprofessional in your client’s eyes.

When you were in school, you probably thought the coding would be the hardest part of your future profession, but managing a project can be just as challenging. Luckily, keeping your clients happy can also be the greatest reward of a site well-built.

Web Design Project Guide

Start a Web Design Project

Share this Image On Your Website

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Newsletter

16 Comments
  1. Luke Wakula Jun 26, 11:48 am

    Great work guys!

    Reply
    +2
  2. Peter Jun 26, 12:07 pm

    Good visual representation, I will follow these steps in my next project. It’s looks more professional and I think the clients love professional approach.

    Reply
    +8
  3. Ian Jun 26, 3:36 pm

    Great post…
    Do you have something similar for graphic design?

    Reply
    +3
    • Jayron Greene Jul 1, 9:47 am

      Check out Work for Money, Design for Love by David Airey. Great tips for working as a freelance graphic designer. Really in depth, real life experiences. I highly recommend it!

      Reply
      +1
  4. Mathias Jun 26, 6:10 pm

    Really appreciate posts like these. Great work!

    Reply
    +1
  5. Neil Jun 26, 6:31 pm

    Very good infographic that is timeless, as far as IT and Web projects are concerned. Thanks for the good work.

    Just one addition to the content; there definitely needs to be more testing, generally by the designer. On bigger projects, there needs to be more co-operation and liaison between the designer and the development team to ensure the client’s wishes are incorporated in the design and functionality, as this is where minor error omissions can frustrate some clients when they get to test it, stating that the site isn’t ready to be tested.

    Reply
    +2
  6. Daniella Jun 26, 6:46 pm

    I’d love to read more about how dark color schemes get 35% more traffic but I couldn’t find that info in any of the sources listed. Google also didn’t turn up any results. Where did you find that info? Thanks!

    Reply
    +12
    • Ty Cahill Jul 1, 6:17 pm

      I’m skeptical of that stat and would also like to know where it comes from. In the end, I think a light/dark color scheme really depends on the individual site instead of grabbing some stat and making all sites dark.

      Reply
      +1
  7. Mark Wienands Jun 26, 10:52 pm

    I’m kinda skeptical about the darker themed websites gets more traffic than lighter themes.

    Reply
    +3
  8. Steve Jun 28, 8:01 am

    Good infographic for starting a business online. As planning and implementing the website design / coding and then approval from clients are important part. So following the above instruction given in the infographic should help to complete a full project successfully.

    Reply
    0
  9. DesignFacet Jun 28, 1:31 pm

    I would never present my wire-frame to the client. However I do like everything else you mentioned, nice information.

    Reply
    0
    • COshiro Jul 1, 1:44 am

      @DesignFacet: curious as to why you wouldn’t present your wire frame to client. Thx for your opinion—

      Reply
      0
      • Sean Jul 1, 3:12 pm

        The reason is that clients want to see the end product and what their potential customers sees on screen.

        Reply
        0
        • Ty Cahill Jul 1, 6:15 pm

          I always show clients a wireframe or sketch or the website as early as possible. If the wireframe is heading in the wrong direction, I’d like to know that before any time is spent on a misguided visual design.

          Reply
          +2
  10. Ty Cahill Jul 1, 6:19 pm

    I completely, 100% disagree on leaving browser testing until the end. I’m sure it fits into the infographic better at the bottom, but I’ve worked with many people who do that and then waste days tracking down and adjusting for browser issues. Better to do that early on, and throughout the design/coding process instead of leaving it to the end.

    Reply
    +4
  11. Rob Broley Jul 7, 1:28 am

    That is a brilliant infographic. I tend to show clients a wireframe as they are quick and take less time than a photoshop mock up so that way you can at least give the client an initial idea of how the website should look and where every element will be on the page.

    I also like the main part about getting everything in writing. Such a crucial step.

    Reply
    -1

Leave a Reply

*
* Minimum length: 20 characters