A question we get asked a lot by our customers when describing our web design process is, “What is a Wireframe?” A wireframe is where we decide where the elements will go on a website.
These are some standard elements that are included on almost every website you will see:
- Header, usually includes a logo, call to action, and navigation links.
- Navigation, links to the subpages in your website.
- Photos and/or graphics.
- Text headers and paragraphs of copy.
- Footer, usually will include blog posts, links to other pages in your website, copyright information and social media icons.
There are several important points that help explain why wireframes are so important.
Wireframes are devoid of any color (besides different shades of greys), font choices, and usually copy. At this stage of the process it’s important to focus on placement of elements like images and copy, navigational links, calls to action and what will go in the footer. Keeping it simple forces us to focus on layout and not get stuck on details that will only serve as distractions and slow down the entire process.
A wireframe is the foundation to the design and development of a website, just like a blueprint is the foundation to the design of a house. Wireframes often start with hand drawn sketches and are later digitized to present to the client. Many times, we will sketch ideas on a whiteboard or paper together with a client to really understand what we want to present to the end user. This type of collaboration is extremely valuable to the process. This is where we can discuss things such as conversion paths, naming convention for navigation links, ease of use and navigation style. If you skip this stage, you are ignoring important considerations that will become problematic for the overall user experience once the site is developed.
Another real benefit of including wireframes in your website design and development process is client communication. At the end of the day, we can build the most beautiful website known to man, but if it isn’t what the client is expecting, the project will be unsuccessful from the beginning. During the wireframe stage, we can discuss what is important to users and what isn’t. This gives our clients the opportunity to provide feedback and have a voice before we start building the website. If changes to features or elements are needed, now is the time to make those changes. Before we ever get to the design stage, we have a shared understanding in black and white of exactly what the site layout will be. All parties are on the same page regarding all expectations.
Not Just Wireframes, Good Wireframes
A good wireframe is well thought out through industry and competitor research and client collaboration. A good wireframe saves time up front and ensures the project starts everyone off on the same page. Good wireframes help avoid expensive design or development changes later on and avoid hacks. You can find some additional examples of wireframes at I ♥ wirefames or see any website on the web as a wireframe at Wirify.
There are many wireframe tools available on the web today. Some can be used for simple wireframes, while others will allow you to create a working prototype. Our favorite wireframe tool here at TheeDigital is Balsamiq Mockups.