Wireframes are a huge part of the website or mobile app design process. In layman’s terms, wireframes are essentially the blue prints that communicate the structure of the site or software being built.“Wireframes are blueprints that communicate the structure of the feature 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.