What is the main distinction between a wireframe and a mockup?

• A. Wireframes focus on structure and layout; mockups add visual design
• B. Wireframes are final code; mockups are unused
• C. Wireframes include high-fidelity visuals; mockups are decorative
• D. There's no difference; they are the same

Answer: (A)

The main idea is fidelity and purpose. A wireframe is a structural blueprint that shows where elements will live on the page and how they relate to each other, without focusing on visual style—no color, typography, or images. It’s used to plan layout, hierarchy, and the flow of information or interactions.

A mockup takes that same structure and applies visual design details—colors, fonts, images, branding—so you can see what the final look will resemble. It’s more polished and realistic but not usually interactive.

So the best answer captures that distinction: wireframes concentrate on structure and layout, while mockups add visual design to that structure. The other statements don’t fit because wireframes aren’t final code, mockups aren’t merely decorative, and there is a real difference between the two.