Stages of web design + development

Building a new website — or redesigning an existing one — is a big task, no matter how many features or pages the final product has. Because there are so many moving parts + things to consider, breaking up a web design + development project into stages helps keep everything on track + on schedule.
the stages of a web design + development project // tiny blue orange
Each project is unique, but they all follow these stages pretty closely. The only difference is that some might take less time if they aren’t as feature rich or complex.

Project discovery

When a project kicks off, discovery is the term most designers like to use for getting down to the specifics. While the scope has most likely been figured out during the estimate + proposal phase, there’s still a lot of understanding that needs to happen before a single design can be conceptualized.
This stage usually features a number of calls + conversations, questionnaires + research. The goal is to have a clear plan of attack for the entire project when you can consider this stage complete. a fun feature of discovery is building a moodboard. This collection of colors, textures + images is what sets the vibe for the site. When both sides — designer + client — have a very clear visual representation of the brand + project, the end results are so much better.

Wireframes + architecture

To be honest, not every tiny blue orange project gets a shared wireframe. A lot of clients have a tough time looking at a plain grayscale wireframe + understanding what it will become. That doesn’t mean this stage is skipped, but usually it is kept internal so that whoever is involved in building the site sees it.

In addition to wireframes, site architecture is a key piece of the big picture. Site architecture most importantly refers to the layout of a site’s menu or navigation. But it also includes how every page on the site connects — i.e. how users end up viewing “page b” when it isn’t listed in the menu. This stage keeps the project clear + gives everyone an easy-to-follow list of all required pages to get started.

Design

I know, I know, we are on stage 3 + just talking about design now. But the reality is that design is about solving problems, and if those problems are not clear, the solution won’t serve the client or the end users.
Oftentimes this stage includes designing a small number of the final site architecture pages to focus efforts + save time. Instead of designing every single page of a 25 page site, 5 of the most important + different layouts will be completely laid out for the client’s approval. based on those layouts, the remaining 20 pages will follow suit without full design + multiple revision rounds.

Development

After a site has wrapped up design, meaning there is a clear direction + the client is happy with the results, development begins. This stage is all about getting nerdy. The skeleton of the site is created + all content is added in. This isn’t just about text, it’s photos, videos, links, pages from the site architecture, confirmation messages, etc.
When the skeleton is ready, the design gets applied. It’s not as simple as taking the approved jpg + “uploading it” as some may think. Instead, a custom theme is created to work as quickly + smoothly as possible in all browsers. I like to start with elements that repeat on the majority of the pages — header, footer, sidebar, main text styles, etc — and then move on to specific page layouts. It helps the site come together faster + gives me a great place to share progress with the client, since development can take a while between when the client sees what’s going on behind the scenes.

Testing

The final step before the rest of the world sees a new website is testing. This stage is one of the most vital in my opinion because it’s where you are going to catch broken links, typos, missing pieces, form errors, etc.
At tiny blue orange, testing is tackled first with cross-browser testing, which means we look at every single page on the site in the latest version of popular browsers {Chrome, Safari, Firefox + Internet Explorer.} Even sites that have 25 actual pages require about 30-35 page views per browser because they all need to account for the 404/error page, search result pages, category/tag view pages, form submission alerts, etc. It is a very intensive process, but it helps ensure that when your visitors land on your site for the first time, they have a great experience instead of finding issues + errors.
After cross-browser testing, mobile testing is done in a similar way. However, because our sites are all responsive, we need to test each page at almost every possible width. Once that happens, each page is viewed on a select number of devices to ensure that it’s user-friendly + functional.

Launch

The moment testing is complete, a website launch is officially scheduled + prepped for. That usually means a late night block of time reserved the day before so that the site can go up, be quick-tested once more to ensure things went smoothly + be ready for the launch day festivities.
Instructions, user accounts + google analytics are all finalized before the “keys” are handed over to the client. That way, after it’s up + running, the client takes over with promotion, marketing + adding new content as they want.

Maintenance

An often overlooked stage in website design + development is maintenance. Especially when using a cms like WordPress, there are updates + security pieces to consider daily. Which is exactly why most of our projects end with our support by the slice maintenance service. That way our clients don’t have to worry about keeping their site safe, secure + up-to-date.
Looking for some inspiration for your next website project? I have a whole collection of great designs right here for you to browse.

on your keyboard hit enter to search or esc to close