Day 50: Wireframes.

A wireframe is an outline or sketch of a product or a screen.

Steps to draw paper wireframes

1. List the information that needs to go on the page you're wireframing

2. Draw at least five different versions of how to structure information on the page

3. Add a star next to the pieces you like the most

Tips for building digital wireframes

1. Identify key features and details from your paper wireframes that you can carry over into a digital version.

2. Use actual content for important pieces of text

3. Wait to add expressive content, like color and images

Benefits of paper wireframes

1. They are fast

2. They are inexpensive

3. They explore lots of ideas

4. They help to narrow the focus

Benefits of digital wireframes

1. Easier to share

2. Shows how a product will function and how a user will move through the flow without having to design every detail

Importance of information architecture

1. Organizes and defines the structure for the solution

2. Provides a high-level view of a product

3. Helps stakeholders review your designs

References

• We are building Low-Fidelity Wireframes and Prototypes https://www.youtube.com/watch?v=I5u2QOH18W8.