12 min read
The Process Behind Building a Website
Following a structured and well-planned web design and process is the secret to producing a brilliant website. You can have the most innovative web design and the flashiest code around but if you miss one small error in your XML sitemap, the whole project will suffer.
Following a structured and well-planned web design and web development process is the secret to producing a brilliant website. You can have the most innovative web design and the flashiest code around but if you miss one small error in your XML sitemap, the whole project will suffer.
A solid website building process doesn’t just allow your website build to go smoothly either. By demonstrating control and attentiveness at each stage, a web design agency shows its client that it is indeed an expert in its craft, always keeping an eye on the process and capable of anticipating and handling any bumps that come along the way.
Building a website from the ground up follows the same general steps.
The team work with the client at all stages to ensure work is on track and aligned with the agreed goals. This follows a pattern of presentation to the client > feedback and discussion > amendments so that both the designer and client have opportunities to touch base and discuss progress. By working in this way, they avoid having to backtrack and make changes that will be more time-consuming later down the line.
Find out more about what goes on behind the scenes in our article How Do Web Design Agencies Work?
Before the website creation process begins, the agency will need to gather information. A discussion will need to take place between the client and the team to understand the client's objectives and goals. What do they want to achieve with the website? Is this a totally new website or a refresh of a current website? Is the new design for a rebrand launch, or does the business simply want to keep its website up to date?
It’s vital to get these ramifications clear at this stage because they will play into every aspect of the project. It’s helpful if the client can provide a project brief, or the agency may work with the client to produce one. This document usually includes details of the customer profile, business history, identity, and mission or goals.
The client and agency will also discuss the budget and timeframe to understand the project's scale. The more information that can be provided at this stage, the better the agency can meet the brief. Some important things the agency will consider are:
This may be part of the project pitch and occur before the client chooses to hire the agency, or it could happen once the contract is signed. At this stage, the agency will undergo a research phase where data is gathered on the client's position in the market and how to approach the identified goals and objectives.
Brainstorming and research tools used at this stage:
The client may provide their own brand guidelines, which help the design team understand their options and limitations in terms of colours, typography, shapes, movement, and visual feel. The wider team can also benefit from the identity conveyed in the brand guidelines.
Researching persona types in the target demographic and what competitors are successful in doing enables the agency to identify ways to differentiate and stand out. If the client has an SEO strategy for their website, preliminary SEO research is conducted to understand how the website should be structured.
The agency will present its ideas to the client and show some visual examples to convey its intended direction. They might also offer website inspiration and mood boards to demonstrate the look and feel they want to use.
Once the goals and direction have been agreed upon, the agency will draw up a scope of work. This usually comes in the form of a Gantt chart which displays a timeline. Key start and end dates of each stage are identified on the Gantt chart.
Image source: teamgantt.com
A common issue that affects website build projects is scope creep, meaning the uncontrolled extension of deadlines and complications of project deliverables. It’s not uncommon for new features to be identified and added to the project scope along the way, and while it’s not a problem, it can extend a project's timeline and resources. Maintaining a Gantt chart means that extra work can be added to the project in a controlled way that does not over-extend resources for either the client or the agency.
A Gantt chart isn’t just for the agency to work by. Any content, information, feedback, or testing required of the client will also be added to ensure timely progress through the project.
During the kick-off meeting, the agency and client will discuss the scope of work and agree on the dates on the Gantt chart. The agency gathers additional information so the team can crack on with the design work.
At this stage, the website begins to take shape. The sitemap represents the website's structure, so it’s essential to get this right before moving on.
Building a website without a sitemap would be like constructing a train station without a blueprint. It would take much longer, involve many more errors, and the result would not flow intuitively at all.
A sitemap clarifies a website's hierarchy and creates a clear and logical architecture on which the design can be built. This is important for both UX and SEO.
Image source: Apple.com
Your sitemap has a powerful effect on the SEO of your website. Find out how to make a sitemap and submit it to Google in detail. Other tools used to create a sitemap are Screaming Frog, XML Sitemaps, and Flowmapp. You can even use Excel to sketch out the structure of your site.
Most of the web designer's role in the project happens at this stage. A wireframe is a visual representation of a web page without interactive elements. The buttons are there, but they aren’t clickable yet. Wireframes are essential to the following stages of the project.
The web designer might not only create one set of wireframes. Different types of wireframes include hand sketches, low-fidelity, high-fidelity, and even interactive wireframes. The web designer might use sketched wireframes early on to convey ideas to the internal team and even produce low-fidelity wireframes at the sitemap stage.
An interactive wireframe might be produced to get approval on a particularly expensive or complex piece of development work to avoid wasting time and resources.
Adobe XD, Sketch, Craft CMS and Figma (see above) are some of the most reliable web design tools used to create wireframes.
Once the wireframes are completed, and the agency has a clear visual representation of how each page will look, two things can happen at once: content creation and website development. Here, we’ll look at content creation first. The content consists of:
They say ‘content is king’ for a reason. With so much of a business’s customer base spending time online, good content has the power to push your brand to success. Semrush found that in companies where 10–70% of the marketing budget was spent on content marketing, 73% of businesses were very successful in their objectives.
Content is the vessel for good on-page SEO. Content helps a website target keywords, build internal and external links that increase visibility in search engine page results (SERPs), increase click-through-rate, and reduce bounce rate (leaving a website without taking any other action). On top of this, the more and higher quality content a brand offers about its industry or subject matter, the more expertise they demonstrate. This helps increase website domain authority as search engines interpret the business as an expert.
Content isn’t only crucial to SEO. Conveying message, tone of voice, and principles increase awareness of the brand's reputation and identity and encourage customers to build relationships with the brand.
Content can be created using the brand guidelines or provided directly by the client. The agency may use tools like Ahrefs, Semrush, and Google Keyword Planner to search for keyword opportunities to optimise content. Images and video may be provided by the client, generated by the agency, or sources via stock image archives of outsourcing.
The role of the web development team is to take the wireframes and set to work coding the website to look exactly the same, but with all the added functionality. Depending on the nature of the website, the development will vary.
Build using HTML and CSS
The development team may directly write code for some, most, or all of a website meaning the website is built from scratch rather than a template. Developers may use this method to write code for websites that are very bespoke and require very particular functions, or just to add small features to existing websites.
This method generally requires a code editor and file transfer protocol (FTP) and is more time-consuming than a CMS but produces a very tailored result.
Configuration With a Content Management System
A content management system (CMS) is a platform used to create and publish websites. CMS today are highly efficient and flexible, offering a wide range of plugins or extra features to give websites the necessary capabilities. They also allow easy editing of a website.
The most popular CMS are WordPress, and Craft, with other favourites like Magento, Squarespace, and Drupal. A CMS will present the content of your website in ‘admin’ mode not as code but as easy-to-understand content blocks and features. However, developers are still able to alter the code of the website.
Many simple websites can be built solely using CMS. Page builder plugins like Divi and Elementor make this process much easier by providing you with premade page templates you can edit in the website admin.
Once the website is fully built and the CMS configured, it’s ready to be filled with content. The agency will go through page by page, adding copy, images, and other pieces of content, ensuring everything fits and looks spot on.
Image source: MadeByShape
Having a CMS makes this stage easy because it doesn’t need to be done by a developer. Like Craft CMS in the image above, all content management systems are designed to be easy and intuitive even for untrained people to use and often include functionality that responsively rescales images and repositions content slightly to keep everything balanced in the layout.
This is the final frontier before putting the website live. At this point, the website should be ready to present to the client, but it’s easy for little discrepancies to creep into the design and build along the way. Multiple team members will go through the website, page by page, with a fine-toothed comb checking that everything looks and works correctly. Errors can result from something minor wrong in the code or a mishap putting in the content, but this is the time they need to be found. The agency will look at:
Once the agency is happy with the work, it’s time to present the website to the client for them to carry out their own checks. The website will be on a staging site, meaning it is not accessible by the public yet and won’t be indexed by search engines. The staging site will still exist when the website is pushed live and used as a backup to make changes securely in the future.
At this stage, some clients also receive training on how to use and make edits to their new website in the CMS.
The agency and client may agree on a suitable day to push the website live. This should be a time of quieter business for the client, but a time when both the client and the development team are on hand in case anything goes wrong.
Pushing a website live isn’t always without its mishaps, so the agency will closely monitor the website following the go-live and keep an eye out for any errors or snags.
The agency often also takes care of the server hosting set-up, which can significantly impact traffic handling, features the website can use, security, and performance of the website. They may also be able to assist with buying and maintaining your domain and guide you away from any undesirable domain providers. Read these articles for more information.
If you’re ready to hire a web design agency and take this journey together to a stunning new website, take a look at our guides on how to choose a web design agency and how much a website costs to help you make the right decisions.
Hello, I'm Natasia, and I'm a content writer for Shape.
