Your internet is a little slow. You open YouTube and the page is loading. What you see is some grey rectangles and circles for a few seconds (depends on your internet speed)

This is what a wireframe looks like, a low-key structure or layout of a UI (also known as wire or mocks). It shows what UI elements would exist on the page to understand the structure of the possible UI and solve design problems.

The Word “Wireframe”

A sculptor builds a frame or structure of wire before building the sculpture. This structure works like the skeleton and after that, the actual sculpture with clear details is made. Once a structure of a bird is made, you cannot build a human sculpture with it!  So we get the name and concept from this sculpture. Wire-frame! First we build the skeleton, then add the flesh. Like HTML and CSS. Like buildings, first the columns, beams and iron rods are placed and then gradually take their shapes with other materials.

‌When and Why?

‌Wireframes have three key purposes: They are user-focused, they clarify and define system features, and they are quick to create.

Early in a project, when we are working on the features and need a rough visual representation of the features taking shapes. First comes sketching, with pen and paper. It levels up onto wireframes, in Figma or Adobe XD or other wireframing tools available. Sometimes with just pen and paper.

‌

Wireframes give a visual understanding of a page or a UI without any real content or style. This helps the designers, stakeholders and project members get approval to begin the UI design.

‌Designs are always going through changes as the product requirements change and evolve. UI designing is a time consuming process, where styling needs special attention. Once a UI is formed, minor changes could be done easily, but it becomes quite difficult to change it all over again. But it is easier, quicker and cheaper to review and make changes in wireframes than in fully designed UIs. So an ideal case is using wireframes to finalise structural design and then going to the UI design.

Wireframes could be Low-fidelity or High-fidelity. Lets see some images.

‌

Quite understandable, isn’t it? Here is another one.

This is how it works! It is a little tricky to get the whole vision of the UI through a basic wireframe at first, because wireframes focus mostly on the features and usability. But it gradually grows into the