Over the past 13 years, I’ve designed numerous websites. I’ve read many books, attended tons of web conferences and have consulted with many web designers along the way. One of the many things I’ve learned was that there isn’t just one way to design a website. In fact, there are many different processes that work for various reasons.
In this article, I’ll explain my process and what works for me. I call it the 5-step web design process. Let’s get right to it:
Step 1: The Kick-Off (1 Day)
Whether you’re working one-on-one with a client, or working for a large company – the start of every web design project involves a kick-off meeting with the project manager. This should be a straight forward meeting where the main purpose is for you to listen.
As the web designer, it’s not our job to propose anything at this point, but to listen and gain perspective on the business requirements and goals of the project. In this kick-off meeting, your focus should be on two areas: One, the business goals for the project and Two, the design direction that the project manager wishes to follow.
When starting a web design project, you’ll work with one of two people – someone that doesn’t have a clue what they want or someone that has a slight idea on what they would like to see in a design. This portion of the kick-off meeting is huge. I like to ask the project manager or client to provide me with a list of websites they like or websites that inspire them. The more information I can gather from the project manager the better. In fact, the more you can capture in this kick-off meeting, the less work you’ll have to do providing several mock-ups and playing guess work.
Objectives:
- Discuss the project and business goals
- Discuss design direction
- Gather all business requirements
Step 2: Research (1-2 Weeks)
After the kick-off meeting, the next step is to research and gather data. Take this time (no more than a week) to review the business goals, research and gather competitive data. During this stage, I like to review websites that inspire me, websites that inspire the project manager/client and competitor websites.
The goal here is to research and review the market in which you’re about to engage. You want to research the specific market or niche in which you’re designing for. For example, if you’re designing a website to promote a movie, you might want to visit the Apple Trailer site and visit the websites of several top movies. This will give you an idea of how others are designing and developing for that market. If you’re designing an e-commerce site, you might want to visit top sites such as MyWeddingFavors.com to get an idea of how to be successful in the e-commerce space.
Research is really the key to the success of your project. Studying your competitors, studying what’s being done, studying the latest technology will equip you with the tools and resources needed to produce a website that is on the cutting edge of technology and possible a step above the competition. With this data you gather, you’ll be in a good position to start the design process.
Objectives:
- Design Inspiration
- Market Research
- Competitive Analysis
Step 3: Design (1-3 Weeks)
Assuming you are following this process – you would have gone through a successful kick-off meeting by now and have spent a week or so on research and gathering data. Now you should be ready to start designing an initial mock-up.
The design process varies from designer to designer. Some web designers prefer sketching out ideas on paper first before producing a low fidelity wire-frame. Personally, I normally don’t sketch on paper, but rather I jump right into the graphics application and begin to piece my ideas together. With over 13 years of experience, you tend to cut corners along the way.
One of the things I’ve learned over the years that makes this design process more efficient, is to propose just a single mock-up rather than several. Its standard for designers to produce a several mock-ups to choose from, but this can be very time consuming. I’ve found that if you are thorough in your research and have asked the right questions up front – you’ll have enough information and data to produce a solid mock-up.
Generally, I produce one solid mock-up (home page and sub page) and work from there. More often than not, I’m in the right ballpark from the goals initially discussed. From this point, you might go through a few changes before you get sign-off. Keyword – “Sign-off”. Before moving on to the development phase, make sure you get sign-off from the project manager. This will cover your butt when changes do come up and the schedule needs to be pushed back.
Objectives:
- Create wire-frames
- Produce a full-color mock-up
4: Development (1-2 Weeks)
This phase of the web design process is where web designers earn their money. Its one thing to be skilled in design, branding and user interface design- but being able to take a design and produce full working XHTML/CSS comps is a huge plus for any organization.
With the finalized approved mock-ups, I begin to develop HTML comps that are compatible across several of the major browsers. In addition, developing with SEO concepts in mind is a huge factor in the internet marketing success of the site, long term.
Objectives:
- Produce full-working XHTML/CSS prototypes
- Develop and code using SEO concepts
- Cross-check across all popular browsers
5: Test, Launch and Monitor (3 Weeks)
Once the development process is done, you should be ready to test. Upon completing a thorough test of the website, you’re ready to launch. But you’re not done. It’s normal to celebrate after launch but problems do occur quite often which is why you must monitor the site for a few days. After a few days of monitoring, it’s safe to relax and celebrate – great job. Now on to the next project!
Objectives:
- Complete full testing and QA
- Cross-check across all popular browsers
- Monitor website for several days after launch
