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, using these stages of web design + development for your project helps keep everything on track + on schedule.
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 is figured out during the estimate + proposal phase, there’s more 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! Instead, it’s 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. For example, designing 5 of the most important + different layouts can keep a design team from working on 25 pages. Based on the designed 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. That means we look at every single page in the latest version of popular browsers {Chrome, Safari, Firefox + Edge}. Sites with 25 pages require 30-35 page views per browser because we look at the 404/error page, search result pages, category/tag view pages, form submission alerts, etc. It is a very intensive process! And it helps ensure that when your visitors land on your site, they have a great experience. The alternative is that they find your 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 overlooked one of the stages of web 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.