What is a Wireframe?

Idea theorem what are wireframes

What is a Wireframe?

What is a Wireframe?


Wireframing is one of the most important processes of UX Design. A wireframe is a basic, low fidelity layout of the product before moving to final designs. It is a visual representation using simple shapes in grayscales. Wireframes do not include styles, branding or any graphics (as it usually clashes with the stakeholders when making a decision). Wireframes in UX design focuses on the following:


  1. Functionalities: Determine the product’s functionality in the early stage.
  2. Content Prioritization: Determines how much content needs to be there. It also defines space allocation and what kind of content needs to be provided there.
  3. Basic user interactions: Determines user’s interaction with the product
  4. Information Architecture: Determines the product’s structure and navigation.


Purpose of Wireframing and How They Should Look


The main purpose of wireframes is to get everyone on board during the product designing phase and get UX concepts cleared before the UI phase. It is an opportunity for designers, developers, and stakeholders to input any structural or functional changes. It helps in making the right decision without being distracted by colors or styles.


Wireframes should look like:

  1. It should be devoid of colors: Just simple black, whites and grays.
  2. Use generic fonts: Don’t spend time in choosing a perfect font for wireframes. You will get enough time to do that during the high-fidelity mockup phase.
  3. No graphics: Just indicate that there will be an image in this place to display how big the image should be. Graphics tend to distract from the main purpose of the website.
  4. Indicate content: Don’t spend time in writing the content, just add placeholder text (like Lorem Lipsum) and indicate how long the text should be.



Wireframe app example



Website wireframe example


Wireframes vs Mockups


Wireframes and mockups are very different from each other. Wireframes are more about functionality whereas mockups are more about the looks, typography, and the branding. Mockups are the realistic representation of the website or app. Mockups are layered over the wireframes.


Benefits of Wireframing


Quick Feedback

Feedback can be given spontaneously. Working on the changes is easy at this stage as you are not creating an interface with branding and colors or even at a developing phase.



Wireframes can help you get a clear picture of what will be shown on specific page/screen and the navigation system of the product.



It lets you focus on the main aspects of the product which are content, layout, functionality, and usability.



Helps you understand what truly the stakeholders are looking for.


Time and Money

Definitely saves time and money by making most of the major decisions (for functionality, content, etc) during this phase, by avoiding any rework of design and development.


Proper Documentation

Wireframe can be shared with stakeholders and team members to make sure everyone is on the same page. Also can be referred back later, in case questions arise at a later stage of the product development.


Final Thoughts


When creating website wireframe or wireframe app, ALWAYS keep users in mind. First, create personas through user research and then start working on wireframes. UX plays an important factor and it defines how a product will look and feel.



What Next


Idea Theorem is Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centered design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.