Today, I watched an hour-long video about creating a wireframe and why it is important. In my career, I have always overlooked this important stage and jumped straight into UI design.

First, I would like to share my findings on wireframes before I share the tips and tricks I learned from the video. Then, I would round up the article as usual with my key takeaways or learnings, references, and what I implemented or worked on.

Wireframes give a logical arrangement of information on how the solution will look. These are where we draw overviews of interactive products to establish the structure and flow of possible design solutions. I make use of wireframes to spot constraints and opportunities.

Wireframing is the art of efficiency.

They are used early in the development process to establish the basic structure of a page or solution before visual design and content are added.

Pros of Wireframing

1. They provide an early visual review for the client.

2. They provide early feedback mechanisms for prototype usability tests.

3. They are used as a good forum for dialogue between members of the team to agree on the project vision and scope.

Cons of Wireframing

1. It is difficult for the client to grasp the concept of the preferred solution.

2. Prioritizes form over content.

3. Restricts creative freedom

Here are the steps I learned, implemented, and improved upon after watching the video:

Step 1: Name the project (Figma file).

Step 2: Name the pages.

Step 3: Select a frame, preferably the iPhone 11 Pro Max.

Step 4: Use elements such as rectangles, circles, and the pen tool to draw lines.

Step 5: Adding a Layout Grid Using columns of 12, 8, or 4 depending on what you want to achieve with a standard "gutter" of 16.

N/B: Check Material Design for the updated standard

Step 6: With the aid of the layout grid, create a button with a height of 60, preferably around the edges.

Step 7: Add text to your button, center, and align.

Step 8: Create magic!

Key takeaways/learnings

I will, from this day forward, not skip this part of the design process. Wireframe first, then proceed with UI design. I also created this wireframe for a church website I am working on :)

References

1. Don't Design Mobile Apps Without Wireframes... YouTube." 10 Feb. 2021, https://www.youtube.com/watch?v=_jmFuGs5cPo.

2. "What is wireframing? | IxDF (Interaction Design Foundation) https://www.interaction-design.org/literature/topics/wireframing

3. "What is wireframing?" Experience UX." https://www.experienceux.co.uk/faqs/what-is-wireframing/.

4. "How To Speed Up The Wireframing Process With Photoshop And... 19 Jun. 2018, https://www.smashingmagazine.com/2018/06/wireframing-process-photoshop-xd/.

5. "The Pros and Cons of Wireframing a Web Design" 19 Jan. 2022, https://www.webdesign-inspiration.com/blog/the-pros-and-cons-of-wireframing-a-web-design

Thank you for reading my article👋🏽