Wireframes are a huge part of the website or mobile app design process. In layman’s terms, wireframes are essentially the blueprints that communicate the structure of the site or software being built.

They are created before front-end design or coding begin, and oftentimes are very bare bones in look and feel.

Wireframes focus more on the elements and less on the design. These elements include the following:

• Information displayed
• How different modules, buttons, etc. are placed
• Rules for showing different information
• How different scenarios affect the display

These examples show that wireframes connect the underlying structure of the product or feature to the surface level – which the user sees and interacts with.

Wireframes typically have the low-fidelity look to intentionally show that the design is not final and is open to discussion among the team. Good interface design comes before the finalized design and coding, and getting this right during the wireframing stage is essential to a good user experience.

Creative/graphic designers own the next phase – the actual visual design, graphics, and brand identity. Great wireframes effectively organize the many details in a product and inspire the Creative designer with the final design.

In past projects, I’ve worked with UX designers to communicate requirements, which they translate into wireframes. After discussing with the designers and also receiving feedback from the software engineers, the team makes any agreed-upon changes before Creative (graphic) designers transpose the wireframes into finalized front-end designs.

Based on the agile methodology this process can be much less formalized and free-flowing. PMs work with both UX and Creative designers to make changes to the design based on incoming user feedback or data, and everyone may sit in the same area to have a working session with real-time discussion and updates.

There are a lot of software applications out there to create wireframes, such as Balsamiq (more bare-bones design) and InVision (more of a prototyping app). There’s also more traditional software such as Microsoft Visio and Adobe Illustrator that work for wireframe designs.

The bottom line is that wireframes should communicate how the site should function. The other details will come later in the design process, but getting the structure right is an important first step to a solid end product. Check out this site for some great examples of wireframes.

Interested in learning more about wireframing? You might want to check out our popular course: One Week PM. You’ll learn the fundamentals of product management, how to launch your own side project, and how to dominate product manager interviews.