Wireframes

They provide a clear overview of the page's structure, layout, information architecture, user flows, and intended behaviors. This is done during the early stages of the product life cycle.

Wireframes are a basic outline of a digital experience, which represents the big picture of an idea.

Value of Wireframing

1. Getting input and feedback

2. Allows for self-reflection

3. Cost-effective and fast

Categories of UI Elements

After wireframing, it is time to indulge in UI design.

• Input controls

These allow the users to input information into the system e.g. forms, dropdowns, menus, etc.

• Navigational components

These allow users to navigate an app or website, e.g., a hamburger menu or tapbar.

• Informational components

These are used for sharing information with the user, e.g., pop-up boxes and progress bars.

• Containers

These are used to hold content together.

Tools for Wireframing

1. Adobe XD

2. Miro

3. Mockplus

4. Balsamiq

5. Wireframe. cc

6. Figma

7. Pencil Project

8. Ninja Mock

9. Fluid UI

10. Mockflow

11. Cacoo

Key takeaways

I have to do away with "lorem ipsum" in my copies for wireframes. I also need to know what my solution needs to accomplish. And lastly, to build a desktop design simultaneously with a mobile format.

References

• "Figma UX Tutorial for Beginners: Wireframe, YouTube." 4 Jul. 2022, https://www.youtube.com/watch?v=D4NyQ5iOMF0.

• https://www.youtube.com/watch?v=aqdn7vVKygA&list=TLPQMDEwNjIwMjPoEj7Gx0pNAA&index=2

• https://www.youtube.com/watch?v=m-Ybu3z1YMc&list=TLPQMDEwNjIwMjPoEj7Gx0pNAA&index=3

• "11 Best Free Wireframe Tools for UX Designers in 2023." 28 Apr. 2023, https://careerfoundry.com/en/blog/ux-design/free-wireframing-tools/

Thank you for reading my article 👋🏽