UI Design 101: The Power of Prominence

UI design is a crucial aspect of creating a user-friendly and engaging digital product. By making sure that the most important elements in your design stand out, you can guide users and improve their overall experience. Think about it, have you ever used a website or app where you couldn’t figure out what you were supposed to do next? That’s likely because the key elements weren’t emphasized enough.

To help you take your UI designs from good to great, Senior Product Designer Jesse Showalter shares his #1 tip for emphasizing key elements in your design.

Designing a clear path for your users

uitip-prominence.mp4

Jesse Showalter: Make sure that you give prominence to the most important elements inside of your design. You can see the UI card example that’s designed has an icon, an image, title, description, and price, but there’s no prominence given, and the user is going to have a harder time figuring out what to do.

By adding a little bit of color, some variation in the weight and size of the typography, and rearranging things, we’ve now told the user that you should be buying this product, and that’s the key thing to do. That’s a good user experience.

More ways to add prominence

Here are a few simple techniques you can use to add emphasis to key elements of your design and create a better experience for your users.

1. Use color: Adding color to key elements can make them stand out and grab the user’s attention. You can use contrasting colors to make elements pop or use color to highlight certain actions or information.
2. Adjust typography: Changing the weight, size, and style of typography can be an effective way to emphasize key elements. You can use bold or larger text to make important headings stand out, or adjust the spacing between elements to create a visual hierarchy.
3. Play with contrast: By using contrast effectively, you can draw the user’s eye to specific elements and make them stand out. You can use contrast in color, size, shape, or other visual elements to achieve this.
4. Use white space: Adding negative space around key elements can help them stand out and provide a sense of focus. This can help create a cleaner, more organized design and improve the user experience.
5. Rearrange elements: The arrangement of elements on a page can have a big impact on the user experience. By rearranging elements, you can create a visual hierarchy and guide the user’s eye to the most important information.
6. Add icons or images: Using icons or images can help convey information quickly and effectively.

As a new or advanced designer, it’s essential to continually improve your skills and stay up-to-date with the latest trends and techniques. If you want to build your product design skills and grow your career, check out Dribbble’s Certified Product Design Course. Taught by Jesse Showalter, this comprehensive online course covers industry-relevant design practices and will help you become a better designer and create products that users will love!