If you’re just starting out in web design, the terms wireframe, sitemap, XD and user flow can be overwhelming. But being able to understand these basics is an essential part of creating a successful website. When I started my career in web design, I didn’t even know what these words meant, let alone how to incorporate them into my design process. In this article, I’ll explain why these are important for a successful design.
Understand the audience
My first step in web design is understanding the audience and target market with user research. A helpful thing to get into the practice of doing is developing user personas. A user persona is a depiction of the perfect candidate for your site. It would represent the ideal target audience as a whole by sharing their general characteristics, attitudes, patterns, etc., in one spot. Collecting this information will help you understand the basic needs of your new site. This lets users quickly find what they are looking for when searching on your site.
Sitemaps and user flows
Once you have a basic understanding of who will be interacting with this website, you can start creating a sitemap. A sitemap is a diagram or list of all the pages on a website. It outlines everything going on your site and shows how they work together. Having those pages established will allow you to move onto the user flow. This is a representation of the journey users take when interacting with an app or website from start to finish. This helps establish what buttons need to be added to your wireframes. So, a sitemap is the outline or map of a site while user flow is the route you take to get to each page. Sitemaps and user flows can look scary at first glance but are worth it in the long run.
Create a wireframe
It’s time to start wireframing your ideas. A wireframe is an early prototype that shows the general structure of a website. Similar to something like a blueprint, it helps you visualize your website’s look and feel before a developer begins their coding process. Wireframes are usually made up of simple shapes with placeholder content representing each site page or element. This will help in understanding the flow and user experience.
There are two ways to create a wireframe. You can go the good old-fashioned way by sketching it out on paper or take a more digital approach. I personally like to do both. Nothing about a wireframe requires it to be neat and clean at first. This is the step to get your ideas out and see if they work or not. Once I have it all out on paper, it’s time to go digital. This step is where you can clean up your sketches a bit. Sticking with a grayscale palette at this stage is essential. Having a lack of colors keeps you from looking at the design and allows you to focus on the functionality of your site.
Part of a successful website or app is understanding how modules work together. Modules are the building blocks of any site and allow you to add, reuse and manage each page section. With modules, you can think about the site from a future perspective. You will have the basic building blocks of a website, then you can reuse them for future webpages if needed. Something that could be useful would be a Multipurpose page. This page houses all of the modules in one place but is not visible on the site. From here, you can grab what you need.
Review your work
Once you have all the artboards created with gray boxes, it is time to review them. For me it’s hard not to think of the design while doing wireframes, so once everything is seemingly how I like it. I like to go back and make sure everything is still functioning correctly. Making sure things like buttons make sense or the modules make sense on both mobile and web.
Now it’s finally time to start designing! Here is where you will focus on whether the website hierarchy makes sense. In this stage, you should be focused on the process of creating something visually pleasing and start to use colors, typography, images, illustrations, icons or videos while ensuring that everything looks consistent across all devices (desktop/mobile/tablet). Good design should be intuitive and easy to use while still being aesthetically pleasing at the same time.
Understanding these basic concepts will help beginner and experienced designers get started on building successful websites or applications. With time and practice, you’ll be able to master these fundamentals, so don’t be discouraged if things seem overwhelming at first! Take your time learning each step until you feel comfortable conquering the rest.