A8: Wireframes
Hunter McCormick
March 19, 2025
Get Hunter McCormick’s stories in your inbox
Join Medium for free to get updates from this writer.
This week I designed nine medium fidelity wireframes for three task flows in my proposed BadgerWorks app. I used the same screens as the paper prototype and incorporated new user feedback from the experiment. This task resembled the sketching exercise from weeks past, but this time I included new findings from my paper prototype and utilized new auto layout techniques to for framing. Since this was my first time intentionally using auto layout, I focused on building some new components or adjusting the gutter or margins of existing components pulled from Figma community files. I also used a five column grid and 10x10 pixel grid to practice component alignment. This was a great tool to constrain my design as I struggled with this in past iterations.
Using my paper prototypes as a foundation, I gradually added more depth like final headers or navigation elements to the wireframes. I researched applications with similar functions and adjusted my list screens to look similar to those apps as a best practice. A main goal of mine for this exercise was to incorporate gestalt principles into my wireframes. I practiced using closure to signify swimlanes of elements and I prioritized incorporation of gestalt principle, proximity with my skill roadmap cards, and used color to signal similarity.
After reviewing and tweaking my wireframes I used annotations to provide context for design decisions. Instead of writing my comments by each elements, I took notes from class and used a legend for readers to use. I also used the color blue to make the legend icons pop from the screen. This was the toughest challenge yet, and some new designs departed from ones’ I have used all semester. I still want to improve upon these wireframes as we approach the final interactive mockups, and plan to spend the coming weeks thinking about further tweaks.
