As a Product Design Mentor, here are the 3 things I teach my mentees the most about product design.
About 6 months ago, I was working in Operations at a clothing brand called Seek Discomfort. I was super grateful that I learned all of these incredible operations skills, but I missed designing. I felt like I was missing out on the trends that make someone a great, up-to-date designer. So in an effort to “get myself back out there”, I applied to be a Product Design Mentor at an online UX UI Design BootCamp called Designlab. Since then, I’ve had 4 students of my own, and have 2 new students starting as we speak. All of them were mostly brand-new to product design, so it was my job to teach them the fundamentals. The basics that make you stand out.
Within this process of mentoring these incredibly hungry, soon-to-be designers, mostly the same things kept coming up. In this blog, we’re simply going to break down those 3 things and how I get my students to understand the level of importance in them.
1 — Spacing, spacing, spacing.
Spacing is actually a very difficult idea, however, it comes up 9.5 times out of 10. Understanding the spacing between elements is hard to access. One of the go-to lessons that I teach my mentees is, on mobile, shooting for 20–25 pixels at a minimum between elements. Be careful though, because too much spacing can have the opposite effect and make something look uncorrelated to the thing next to it.
For example, see this freelance design project I threw together of a mobile navigation bar, aka the little pictures you tap on to change pages in an app.
Above you’ll see a design from an actual freelance project I did. As you can see, I moved the icons on the bottom a lot closer together. Not only is the spacing in between the elements too close together, but the spacing on the left and right sides of the outside icons is way too much. The reason this is a problem is that you have to think about the “tapability” of these icons. Since people are tapping icons, they need to have enough distance in between each other, so that someone doesn’t accidentally tap one icon over another. This isn’t actually super common, but one thing I will see people do a lot is below.
As you can see, the same icons are now very spread apart. You don’t have the same “tapability” issue here. However, you now have a problem with white space. Aside from the awkwardness that too much white space gives off, it also makes it significantly more difficult to understand how similar items are correlated to one another. The best move forward is to just bring in those outside icons slightly closer to the middle, to create a seamless balance between all of the elements. See below.
Don’t worry, this is the actual design I delivered. As you can see, there is a significantly better balance between those navigation items now.
This is just one small example of how too much, or too little spacing can cause the wrong interactions with your product.
2 — Sizing.
The sizing of elements is another one of those things that is hard to pinpoint. One of my students asked me “what is the standard rule for sizing certain elements, like a heading?” My answer was simply, “there isn’t a standard rule. If you can make 150 pixels look good, or 25 pixels look good, run with it.” The reality is though, I have an opinion that you can go too small. I would say on either desktop or mobile, anything under 8 pixels is too small. Other than that, do you.
In the same design as last time, here is a super common example of what I see a lot of.
One of my favorite words in design comes from the idea of sizing. And that is “breathability”. This design doesn’t have any “breathability”. The problem is that spacing in between everything too condensed due to the sizing of the elements. On the other side you have the opposite issue. See below.
The icons are way too small. Now there is too much white space, too much space in general. The same “tapability” issue that I mentioned in the first rule is also present here, not because you accidentally tap one icon over another, but because you physically cannot tap the icon because it’s too small. Lastly, another thing to consider in sizing is the age range of your audience. If your audience has worse eyesight than most audiences, they would have a harder time with the tiny icons.
Just a refresher, again, here is the final deliverable.
The icons are not too big, and not too small.
3 — Alignment.
The last and final of the top 3 things I teach my mentees the most is alignment. When I mention alignment, it usually refers to the alignment of similar items between each other. For example, bringing back the same design, having a distorted alignment, vertically or horizontally, creates an issue where your user may not know where to look. See below.
This is a fantastic example of not knowing where to look. If you look at the rest of the app screen, mostly everything is centered, except for the few random elements. So to have a whole set of navigation items, that look like they should be centered vertically with the rest of the page, then not be centered definitely throws everything off. It makes it feel as if the design is off balance.
On the other side of things, you have elements not aligned horizontally between each other. This looks extremely awkward, and also feels off balance. A general rule of thumb is, if elements are correlated to one another, horizontally center them. If most other elements on the page are centered vertically, vertically center the group of elements with the rest of the page. Just like below.
Recap.
Now, I say all of this with a grain of salt. These ideas are just how you fix this design. However, as I mentioned to my student, if you can make something look good, run with it. Don’t hold back. We are designers, problem solvers, and innovators for a reason. Our job is to tell a story through our designs. Rules can hold us back sometimes, and as a mentor to my mentees, the last thing I ever want to do is hold them back. I encourage them to experiment. Act like an artist that is just exploring.
Ways to connect with me directly.
If you loved this, give me “clap” and follow me for more content like this.
Check out my TikTok for similar content.
I’m always open to taking on freelance work, so if you need a project done, email me at: jonnierozin@gmail.com.
And as always, thank you so much for reading and supporting. I truly take so much pride in my design work, so supporting this deeper level of my work means the world to me. ❤
So much love,
Jonnie.
