5 Steps to a New Website - the Sergeant Way
Whether building a website from scratch or revamping an existing one, a structured process is essential. For us, it all boils down to five steps. Spoiler alert: it ends with a toast.
Creative projects don't always follow a strict structure: you look for inspiration in unusual places, test new tools, sometimes take three steps back to make the one step forward that counts. But if there's one type of project in our field that rewards a systematic and structured approach, it's websites. Here's a look at how we do it at Sergeant.
1. Concept & UX: Answering the W-Questions
We start projects with a kick-off meeting. This is where we discuss goals and target audiences, clarify needs and expectations, and define two important numbers: the deadline and the budget. Our experience shows that it's worth investing time in this initial meeting and preparation. It ensures that everyone involved is happy with the final product - the website.
We then move on to the design. Using tools such as Miro or Figma, we create wireframes, i.e. sketches of the information architecture, navigation structure and prototype pages. Design elements such as colours, fonts or images don't play a role at this stage - we focus on the structure. We work with our clients to determine the layout of key page types, such as the homepage or product pages. The focus is on the users and their needs. Things can get a bit creative at this stage: mood boards and collages help to generate initial visual ideas and approaches for developing the user interface design in the next step.
Our UX designer Natascha explains her UX process in her latest blog post.
2. User Interface Design: Adding Colour
Once the page structure, navigation and layout have been defined, colour comes into play. Our UI experts create page mock-ups using real content. At this stage we like to use the concept of 'atomic design', which means starting with the smallest elements, such as buttons or headings, and working from small to large. In other words, we build a toolkit that allows us to easily and flexibly expand the design in the future. When developing the user interface design, we ensure that the site works on all screen sizes.
3. Content Creation: Filling the Blank Page
Without meaningful content, the most beautiful design is an empty shell. It's the words, images and videos that bring the site to life and make the brand tangible. Content creation should begin early in the project, ideally after the concept phase and in parallel with design development. Content and design should be coordinated to create a coherent overall result and experience. A content plan - outlining what content will appear in what form and where on the site - helps to maintain structure at this stage. It is important to keep the website's objectives and target audience in mind.
Creating high-quality content such as text, images, video, graphics and animation takes time - often more time than expected. Another thing that is often underestimated: The extra time it takes to translate content into different languages and upload it to the site.
SEO: A Brief Aside
When we talk about content, SEO isn't far behind. Search engine optimisation aims to make websites appear as high up in search results as possible in order to attract more users. There are many ways to optimise websites for search engines, but space doesn't allow for an in-depth discussion here 😉. In short, it's important that the website is well structured, both technically and in terms of content, and that the content is relevant to the target audience.
4. Development: Bringing the Site to Life
Now it's time to implement the design and content work. Once the UI design has been approved, we program the website to your exact specifications. We like working with Drupal.
In website development you will often come across the terms frontend and backend. Frontend development covers everything that visitors see on a website - images, videos, text and the design itself. In frontend development, we pay attention to responsive design, which ensures that the website displays optimally on any screen size. The backend is everything that happens behind the scenes, invisible to the user. This includes processes (e.g. what happens when you click a button) and integrations with other applications, such as CRM systems.
5. Testing & Go Live: Raise a Glass
The website is programmed, the excitement is high and everyone is eager to go live. But wait! First, the new website has to be tested. The project manager, designer and developer put the site through rigorous quality checks. This is a crucial step to ensure the site meets all requirements. Then our clients review the site one last time and give their approval.
And then it's time! We recommend going live at the beginning of the week so that any issues can be addressed quickly. We test the site again in live mode to make sure everything works perfectly.
After Launch is Before Launch
The website is live and the champagne has been popped. But that doesn't mean the job is done. An important task after launch is regular updates. This ensures that the site stays up to date and protected from threats.
The beauty of websites is that they're not static, they're dynamic and adaptable. Regularly updated content keeps the site relevant to both the target audience and search engines.
As structured as our approach to websites has become, the process remains creative.
