Before building a website, it’s important to plan and organize the content before moving into the actual design and development phase. For these early stages, web designers work with clients to create sitemaps and wireframes to give a general overview of what to expect before actually building the website itself. Think of it as a blueprint.
To start the process, a site map is created to get an idea of what pages will be included on the website. This can start out as simple as a bulleted list, showing which items are in the main navigation, items that are tucked in dropdown menu, and other internal pages. Once the list of pages is established, a diagram is created to show the workflow of how pages are linked together and how a user is expected to move through them. Depending on how big or small your website is, this can begin to look a bit overwhelming. Still, it is important for developers to understand the architecture of your website before the development phase. To continue our analogy of building a house, a sitemap would be similar to a list of rooms to be included in a floor plan. Let’s say you want two bathrooms, four bedrooms, and an open kitchen/dining area. Just simply knowing that information gives you a better idea of where the rooms will go when creating a more detailed blueprint. Below is an example of a site map we created for a client website.
Once a sitemap is established for a website, designers will then put together wireframes for each page. This can be compared to the layout of an individual room in a house that shows where important elements like windows, doors, large appliances, and furniture will be placed. For a website wireframe, designers must take all of the content that will be included and make decisions on how it will be structured on each page. This helps establish hierarchy of what is most important and the order in which elements should be viewed. Keep in mind that this phase of creating websites does not focus on any actual design elements like color, images, or typefaces. By stripping away all of the visual design components, there is more emphasis on how the UI/UX are handled and if the page makes sense structurally.
See below for some examples of wireframes that were recently created for a client website. You’ll notice that while there is some actual content put on to the wireframe, there are a lot of placeholders for images, icons, and buttons. Still, it gives you an idea of where the gallery of images will go, how the information is structured, and insight into the website’s functionality.
Creating a sitemap and wireframes for a website are crucial steps in the web design process. It is during this phase that feedback is extremely important because it is much more manageable to make changes to wireframes than it would be after the development phase. They give both clients and web developers insight into what the structure and layout of a website before any design elements are incorporated. More than anything, a good plan at the start will give a strong foundation to your website and likely reduce the headache of making changes down the line in the design and development phase.
