10.4.3. Focus

Try these first

1. 1.

   What is a wireframe?

   Hint

   Think of it as a blueprint.

2. 2.

   List two characteristics of mockups.

   Hint

   Consider what details distinguish mockups from wireframes.

3. 3.

   What distinguishes a wireframe from a mockup?

   • Wireframes are high-fidelity representations.
   • Mockups are low-fidelity designs.
   • Wireframes focus on structure
   • and mockups on aesthetics.

   Hint

   Recall the definitions of both.

4. 4.

   True or False: A mockup includes basic placeholders and is used for initial stakeholder discussions.

   • True
   • False

   Hint

   Think about the level of detail in mockups.

5. 5.

   Design a wireframe for a welcome page of a fitness app. Explain your design choices.

   Hint

   Focus on the layout and logical flow.

6. 6.

   Create a mockup for an e-commerce product page. Describe how you'd represent the user experience through your design.

   Hint

   Think about user actions and visibility.