The Design Phase
“Wireframes are the skeleton. Prototypes demonstrate the behavior. Mockups are the skin.”
– UXPin
Wireframes
A wireframe is a very basic outline of the layout of web pages. It shows where elements will exist on key pages.
The wireframe is basically just a blueprint for the website.It provides a skeleton to apply styling to in the design phase of the project. It’s faster and easier to review and amend the page structure before these styles are added. The important thing to remember is wireframes are very rough blueprints. They exist to ensure all necessary content is present and positioned correctly.
Mockups
Mockups display the design choices for a website.
This includes color schemes, layouts, fonts, navigation, and the overall feel. It’s easier to make revisions in a mockup than in the later coding stages. A design will be mocked up and sent as a PDF for approval before proceeding to the development stage of the project. Small tweaks to minor details, such as spacing and font sizes may occur during the development stages.
Examples
