If you’ve never built a high-end business website before, you might think it’s a simple process: get briefed by the client, build the website, and deliver. However, it’s an intensive process that involves a multi-disciplinary team of specialized experts as well a multi-stage and iterative workflow to ensure the best possible end result that meets all the client’s expectations.
A feature-rich website should also be viewed as a living being that constantly needs to be cared for and groomed to perform at its best. With that in mind, here’s a step-by-step introduction all you need to know about the production life-cycle of a high-end website.
Stage #1: Client brief with designer
The first step in the process is for the designer to sit down with the client and determine their needs. This is a crucial step as it lays the groundwork for the entire process and will determine how successful the agency is in achieving the client’s goals.
Professional designers know exactly what questions to ask to define the project goals as clearly as possible. The designer will use this information to produce a visual representation of what the client is looking for. He/she will also establish which features and functionality must be built into the website.
This is also where the designer obtain any relevant branding or marketing material from the client. This is critical so that the end product is consistent with the client’s brand, and may include:
- Brand colors
- Marketing assets, such as banners, iconography, etc.
If this is a new brand/business or the client doesn’t have the necessary assets, the designer will design and create these assets from scratch.
Stage #2: Drafts and Wireframes
Now, the designer can do what he does best and design the look and feel of the website according to the client’s specifications. This early in the process, this usually consists of designing mockups and wireframes that function like the blueprint for a house, but for a website.
Depending on agency’s exact workflow, the designers may iteratively develop higher and higher fidelity prototypes before moving to the next stage.
Regardless, it’s crucial that the designers form a clear picture of what the end product should look like. They also need to package everything neatly so that it’s easier for the developers to work with and implement it into the functional website.
Some of the information developers will need in the mockup file are:
- Brand colors (primary, secondary, etc.).
- Fonts as well as text dimensions, heading styles, etc.
- Images, videos, logos, icons, and other visual assets.
- Wireframes with dimensions and spaying requirements for all layouts.
- The pages break down and architecture of the website
- The features that need to be implemented
- All other content, widgets, elements, and where they are supposed to go.
Stage #3: Designer briefs developer and hands-of mockups
Now, the designer and developers will set together so the designers can brief the developers to build the site to follow specifications. A number of items will usually be covered during this meeting:
- Providing the developer with a rundown of the client brief and overall project goals
- Handover and explanation of the mockup file(s)
- Explanations of any non-standard features, such as custom animations and special features or functional requirements
- Handover of the temporary domain/website (if applicable)
- Any other client-specific details, such as email form business email address, API keys to relevant services, etc.
Depending on how responsibilities are divided among designers and developers, designers may also hand-off a package with other assets like fonts and icons for the developers to include in the website.
Stage #4: The start of the development process
Before they jump into the actual coding, developers first have to do some planning to make the process go smoother and to produce a higher-quality product. This involves sitting down and planning out the site and information architecture. It also involves establishing a tech stack for the project and the technical requirements, including additional paid software or services that are needed.
It could involve decisions like building the website from scratch using a a framework or using a CMS like WordPress, among others.
This is to avoid any significant delays or budgetary issues thanks to reaching a development dead-end or facing unexpected costs.
The developers will then set up the environment for building the website with their project specifications and according to their tech stack. Depending on what best fits the current work process, the development environment will either be locally hosted or on a remote server.
Stage #5: Final stages of the development process
Developers will usually start with putting in place the backend, which includes things like the database, APIs, etc. these aspects of a site are harder to change later and lay the foundation for the rest of the application. However, whether this is needed, and to what extent, is highly dependent on the feature specifications.
Once the foundation is there, the developer will start implementing the design into code — or, building the frontend. They will start to put together the design as close to the designer’s visual representation as possible without breaking the functionality and within the realm of what’s possible. This is also where the developers implement any user interactivity as well as dynamic aspects of the website.
It’s nearly unheard of that the first version of any significant coding project is perfect. Any developer worth their salt views their job as an iterative process of implementing a feature, verifying and validating their work, going back and reworking it, and then repeating cycle as many times as is necessary.
Developers will check for bugs, visual or functional inconsistencies, etc. to ensure the work is of high quality and everything works as expected.
Developers may also do some formal documentation. This involves documenting the code so it’s easier to understand for future maintenance and development. It may also help designers and customer-facing individuals understand why certain decisions were taken.
Stage #6: Developer hands-off site back to the designer
Just like in Stage #3, it’s now the developers turn to hand the project back over to the designer. This should be a complete version of the website with the correct look and feel according to the initial client brief. Developers should also explain why something was changed if the initial idea was not feasible and why some things were implemented in a certain way.
Designers can review the design and features from an aesthetic or usability perspective and do minor adjustments if needed — or make notes and send it back to the developers. This process can go back and forth until any obvious flaws are fixed and the project meets both the design and development teams’ standards.
Stage #7: Client reviews the first version of the completed website
Once you are satisfied the client’s initial requirements have been met, it’s time for the lead designer to sign of on the first version and send it for the client review. If something couldn’t be implemented — because of technical limitations, or any other reason — this should be pointed out and explained to the client.
This is also an iterative process and may include multiple rounds of edits/reworks requested by the client. If it’s feasible, the designers and developers will retrace some of their previous steps and make the necessary adjustments. This cycle continues until all parties are satisfied and the client can sign-off on the final version of the website.
Stage #8: Website handover to client and post-development support
Most websites will be developed on internal servers or using in-house hosted environments. In this case, you will need to assist the client by transferring the website over to their domains. This also involves providing clients with access to the website as well as as any additional logins to admin panels or other services they might need.
Depending on the project scope, you will alos need to implement other post-production improvements, such as SEO or performance optimizations, social sharing cards, setting up user accounts, and permission management. Anything needed to adopt it seamlessly into their organization.
You may have also taken a contract where you will be performing the routine maintenance on the website. Other bugs might also come to light only once the site is live in the real-world that will require fixing. This usually involves regular updates to further improve the SEO and performance, keep apps and plugins up to date, keep the website secure, file cleanup and restoration, log management, etc.