What is

Wireframing is the process by which the initial skeleton structure of the website/app is created with content layout & functionalities, as per the user journey defined in the previous step. This is an early stage in the design process where designers determine the raw structure of the website/app before visual design & content is added onto it. 


Wireframing in UX design

  • Clarifies the entire functionality of the website/app 
  • Provides clear communication to the stakeholders as to how each feature will function
  • Showcasing the core structures of page layouts enables proper understanding of the usability of the platform, early on.
  • Enables easy scaling up & updation of platform 
  • Facilitates early feedbacks from clients/stakeholders by giving them a raw snapshot of the website & user experience
  • Wireframing saves time by making design a more careful & calculated process with early error detection & iterations
  • Helps define & refine scope & effort estimation

How to do wireframing the right way?

Here are some of the best practices we apply during our wireframing process

  • Use colors sparingly but consistently & with set purpose
  • Typography, spacing & other basic visual design elements should be uniform
  • Instead of using “lorem ipsum” content, use real content 
  • Wireframes should be presented statically (for user testing, prototyping is the way to go)
  • Use simple design components that don’t look distracting or need explanation
  • Use annotations to describe solutions that cannot be visually demonstrated
  • Depending on the project, you may have to create low fidelity or high fidelity wireframes
  • Make sure the wireframes can be easily extended to prototypes 


Is wireframing
a part of UX or UI?

Wireframing is generally done by UX designers as this step in the design process is all about finalizing features, functionalities, & information that will become a part of the final product. This step enables UX designers to plan the information hierarchy by focusing on both user & business needs. 

Wireframing process explained