A proper wireframe 1) contains the main data, 2) draws the outline of layout and structure, and 3) provides the description of the user interface. A wireframe is a blueprint for the customer and designer. It is a rough draft of the future product. To keep it simple and clear, the main elements are outlined in shapes and boxes only in black/white. Before any development takes place, a wireframe serves as a backbone of the future app/website. Before creating a wireframe, it is recommended to answer the following questions:
- What kind of content should a website/app contain?
- What kind of layout do you want it to have?
- Which elements of interface are the most important?
In simple words, wireframes are sketches of the future design. They provide a general understanding of its concept and do not distract with unnecessary content.
Mockups represent the final look of the app/website. Within this stage, a blueprint gets a personal touch. A mockup answers the question how exactly everything will look. Usually, mockups have different detalization depth. However, the majority of them follow this checklist:
- a complete identity package: logo, fonts, colors
- well-detailed UI
- well-thought-out navigation
A mockup is a skin of an app/website, not necessary to consider the database and server, and no JS/CSS/HTML involved. In simple words, mockups are “dressed” yet static versions of future app/websites. On this stage, all elements in black/white are getting their shape, color, and size. The advantages of creating a mockup are the following:
- It allows fixing the smallest drawbacks
- It provides a demo of the future functionality
- It serves as a design layout
Mockups present the visual design of an app/website. Related readings on Loonar Studios