Last week, we reviewed the key steps used to create a message that resonates with your website visitors and encourages them to act. Here, we’ll review the initial steps needed to design your website.
1. Identify Goals
In this initial stage, a designer needs to identify the end goal of the website design. Questions to explore and answer in this stage of the design and website development process include:
- Who is the target audience for the website?
- What is the primary goal of the website? Inform? Sell? Entertain?
- What are the competitor sites, if any? And, how should this site be inspired by or be different from those?
These are important questions to answer to ensure the most success out of your design project. Make sure you understand the website’s target audience and develop a working knowledge of the competition. Tools for website goal identification include buyer personas, a creative brief and a competitor analysis. All of this information helps to create a clear picture of what should be the focus of your website.
2. Sitemap
The sitemap provides the blueprint for any well-designed site. It helps define the website’s architecture and explains how the site will function and link from page to page. Create a sitemap to help visualize how the site will flow and navigate. Here’s a simple example of a sitemap:
3. Wireframing
The next step is to find some design inspiration through looking at; current trends, popular websites, portfolio websites, personal or colleague portfolios, or even just a Google search.
Once you have an inspired idea and direction, start creating! A great place to start is with a wireframe. They provide the means to lay down the visual organization and content elements. This process can also help identify any holes in your sitemap and strategy. By getting ideas organized, missing elements or oversights are easier to spot.
Although I would consider this step optional to a strong designer, anyone can benefit from building a wireframe before designing. A simple wireframe can help alleviate layout and design roadblocks by giving you a blueprint to work off of.
Some designers use a variety of online tools to create their wireframes. My personal choice is to stick with Adobe XD or Illustrator, as these formats integrate well into our main design process. If you don’t use Adobe products, feel free to experiment and use your favorite software!
4. Design
Now is the time to put those artistic skills to use. As you begin to create the visual style of your site, it’s important to keep UX in mind. You want your website to be user-friendly AND beautiful. A simple UX test you can conduct on your site is the grunt test.
Design at this stage is often steered in a certain direction by brand standards and guidelines. As you design for your client, remember to keep their guidelines in mind as you take their brand to the next level. If your client doesn’t have brand standards, and you’re responsible for creating them, start with a style guide or style tile. This will help you create a consistent brand style for colors, headlines, buttons, and anything else you want. Check out the example below to see what I mean!
Design your website with the user in mind. Create easy-to-read and navigate sections, clear calls to action, and stylish graphics and layouts to support the message of the page. We could go on and on about design practices, do’s and don'ts, and so on, but let’s save that for another post.
Along with color and graphic styles, images are a key part of a website design. Visual design helps tell the story of your brand without making anyone read. High-quality images give your website a professional look that builds trust and conveys your message in an easy-to-digest way.
Use a professional photographer to capture images for your website! Stock photography from resources like Adobe Stock is often an acceptable solution for imagery. However, the personal touch of custom-shot photography, showing real-life places and people that pertain to your brand, will take your site to the next level of style and professionalism.
Quality images and other visual content are known to increase engagement and revenue. Are you more likely to engage with a cell phone image or a professional photo of a product you’re interested in?
5. Feedback
When designing a website, it’s important to keep the client in the loop to ensure they are happy with the design. This can be a frustrating process, however. Keep the client engagements to a minimum when it comes to design feedback. Present an initial homepage design so the client has an idea of what the new site will look and feel like. If they are happy with what you’ve come up with, move into the rest of the site.
If you ask for approval of every page or section, an excited client might pick at every little detail of the design. This is counterproductive and frustrating. Design your site and allow the client to give feedback at the end. If your client requests something that you don’t feel is in their best interest, do your best to respectfully explain why you think you should do it your way.
Website design is really a conversation that could never end, so boiling it down to 5 steps only scratches the surface. If you’d like to learn more about web design, check out our blog where you can find all sorts of helpful tips!
