What does the process of website design look like? What to look out for and how do you even approach the subject? In today’s article I want to share with you what my briefing, mock-up, design and uploading files to the developer looks like.
Like any design process, creating a website starts with getting to know the requirements and details of the project we are undertaking. This can be done by talking to the client in person, over the phone or online, or by emailing and creating a document that puts the requirements in writing. Regardless of which way we choose, it is worth preparing a briefing, i.e. a document with a list of questions we want to ask the client. This is also particularly important in live meetings, because we can’t afford to wing it and just rely on what the client wants to tell us – they don’t always need to know what to say for us to create the right project. If you have been in the industry for many years and have had hundreds of these conversations, you can skip the list of questions. In my professional work – as most of my clients live quite far away – I usually limit myself to email contacts and chats via video message, which have become particularly popular recently. When it comes to meetings, these usually only supplement the e-mail communication. This way I can keep my correspondence transparent and avoid misunderstandings. There is nothing worse than a situation where we have to prove who is right and who remembers the results better. Even if you base your cooperation on live contacts or telephone calls, I strongly recommend putting the most important agreements in writing and additionally recording this correspondence with the client.
The first phase of website design is about establishing the style and atmosphere of the planned implementation. Words can be used here, but the image works best. For this reason, I have included the phase of creating mood boards in my design process. As part of this process, I send the client several (usually three) suggestions for the look and style of the pages I recommend. In this way, we come to a common vision much faster than if we only design based on an interview. How do you create such mood boards? Do it in the programme that is most convenient for you. I currently use Keynote because it’s easy to add graphics and it’s very quick.
Sketching and building the page structure
While I am creating mood boards, I am also dealing with the structure of the website. In this phase, it is necessary to write down all the results, distinguish sections and organise the thoughts. All this is done on a sheet of paper. Then I create a preliminary site plan. In it, I list all the sub-pages to be included in the menu and give a brief description of the content. I send such a document to the client for approval and we work out the final form together.
In the next phase, I focus on the functions and architecture of the information and its usefulness. For this purpose I use mockups, sometimes called wireframes. These are simply a skeleton of the page that already contains the intended content (if we already have it at this stage). Their main aim is to define the exact structure of the page, its layout. This way, together with the client, we can focus on what tasks the website should perform, where to find which buttons and how to navigate. Of course, there are also sites where the mock-up process is not necessary. This is the case when I know exactly what style suits the client, when we are creating a very atypical website and when we are designing other projects for the same person – when we rely on graphics that already exist. Otherwise, omitting mock-ups, which seem to save time, very often leads to the entire implementation dragging on. However, it is very important that we explain to the client what mock-ups are, why we create them, what purpose they are meant to serve and what they bring to both parties. It often happens that clients who are not familiar with internet technologies and the process of website design do not understand their ideas. It has happened to me that the lack of proper explanation of what I am sending has scared the client because they thought the landing page would be as simple as the uploaded image.