Wireframes

Wireframes give you a bare-bones look at the structure and layout of the website. It allows you to get a rough idea of how different elements come together. The great thing about wireframes is that it can be done quickly and does not require extensive detail. It can be a quick draft on a piece of paper. It can also be a digitally designed layout.

Wireframes are typically done at the beginning of the web design process and are critical in saving time and resources. You can add or eliminate elements without having to go through the entire design process. You can also identify redundancies or errors early.

See some examples of wireframing from Flux Academy.

Mock-ups

Mock-ups are more detailed renderings of your website. They add colour and more detail to allow you to better visualize how the website would look when it is live. With mock-ups, you can visualize:

• Interface elements such as header, footer, buttons, call-to action, etc
• Navigation menus
• Actual sample copy to see content flow

You can use mock-ups to present the website when it is closer to the approval of the design. In addition, mock-ups can help you identify problems you may have missed in the wireframe. This could include colour combinations or size of elements.