The Cost of Poor UI Design: Why It Matters

The BKK Web: How to F*ck Up Your Project as a UI Designer event held at the Seven Peaks Software office brought together a panel of experienced UI designers, Rudy Baer - CEO/CTO at BearStudio, and  Dorian Delorme - A UX/UI designer at BearStudio, who shared their insights on the common poor UI design that can lead to project failure. 

In this meetup summary, our speakers highlighted key areas where designers often go wrong so that you can apply them to your design project to disappoint your client or even ruin your whole project. 

Let’s see how terrible you can be!

How to (not) choose the wrong design software

Choosing the right design software can be a crucial decision for a designer or design team. The most basic creative tool every designer must have been through is "Photoshop." However, the speakers revealed a number of reasons why this software is not suitable for UI design projects and can lead to poor UI design as an end result.

• No components

• No colors or text styles

• No easy tool for positioning

• Heavy local files

• Nice file naming.v8.final.updated.psd

While Photoshop can be used for UI design projects, there are more suitable tools available that are specifically designed for this purpose, such as Adobe XD, Sketch, or Figma. These tools have features specifically tailored for UI design, making the design process faster, more efficient, and more collaborative.

Best software for UI design (2022)

1. Adobe XD: Adobe XD is a comprehensive design software that offers a wide range of features for UI design. Some of the advantages of Adobe XD include:

• Seamless integration with other Adobe Creative Cloud software such as Photoshop and Illustrator

• Powerful prototyping and animation tools that allow designers to create interactive UI designs and test them with users

• Built-in collaboration features that allow multiple designers to work on the same project simultaneously

• Auto-animate feature that can help designers to create advanced animations and transitions with ease.

2. Sketch: Sketch is a popular design software that is specifically designed for UI design. Some of the advantages of Sketch include:

• Easy-to-use interface that is intuitive for new users

• Robust vector editing capabilities that make it easy to create high-quality UI designs

• A large library of third-party plugins that extend its capabilities and integrate with other design tools and services

• Export and version control features that make it easy to collaborate with team members and manage design iterations.

3. Figma: Figma is a cloud-based design software that is known for its collaborative features. Some of the advantages of Figma include:

• Real-time collaboration features that allow multiple designers to work on the same project simultaneously from different locations

• Web-based interface that makes it easy to access and work on designs from any device with an internet connection

• Powerful vector editing capabilities that make it easy to create complex UI designs

• Built-in prototyping and animation tools that allow designers to create interactive UI designs and test them with users.

How to (not) add inconsistencies (quickly)

Maintaining consistency in a design project is important to ensure that the design is cohesive and user-friendly. However, this is a problem that arises far more frequently than we realize, and there are three areas that UI designers are most likely to overlook when it comes to consistency: components, color styles, and text styles. 

Components

Components are the building blocks of a UI design. They include buttons, forms, menus, and other UI elements that make up the design. One of the most significant challenges designers face when it comes to components is ensuring consistency across all components. Designers often create several versions of the same component, which can lead to inconsistency.

To avoid this problem, designers should create a library of components that can be reused throughout the project. The components in the library should be well-organized and follow a consistent design language. This way, designers can quickly access and reuse components, ensuring that they remain consistent throughout the project.

Beyond that, it will facilitate communication between developers and designers. Even if the project was completed a long time ago and there are some adjustments needed, they can still refer back to it to make sure they are using the same criteria. In this case, we recommend you execute "Design Tokens: Design-to-Code Tools to Improve Designer-Developer Collaboration."

Color Styles

Color is another critical element of UI design. It can convey emotions, create contrast, and make certain elements stand out. However, using too many colors or not following a consistent color scheme can make a design appear disjointed.

To maintain consistency in color, designers should establish a set of color styles that can be reused throughout the project. Color styles can include primary, secondary, and accent colors, along with shades and tints of each. By using a consistent set of colors, designers can ensure that the design remains cohesive and easy to navigate

Text Styles

Text is another crucial element of UI design. It conveys information, guides the user, and sets the tone of the design. However, inconsistent text styles can make a design appear disorganized.

To maintain consistency in text styles, designers should establish a set of text styles that can be reused throughout the project. Text styles can include font size, weight, line height, and color. By using a consistent set of text styles, designers can ensure that the design remains cohesive and easy to read.

How to (not) deliver poor UI design on mobile

80% of users on mobile? 6.8 billion people use smartphones worldwide at the moment (Statista, 2022). With the worldwide population of 8 billion, this translates to a smartphone penetration rate of more than 80%.

By starting with a mobile-first approach, UI designers can ensure that the core functionality and content are prioritized and streamlined for a mobile experience, and then expand on that foundation to create a desktop version that is optimized for larger screens and more complex interactions.

Furthermore, designing for mobile first can also help ensure a better user experience across all devices, as it forces the designer to focus on the essentials and avoid bloated or complex design elements that can negatively impact performance and usability on mobile devices.

However, in some cases, it may still make sense for UI designers to start with desktop design, such as for applications that have a more complex workflow or primarily target users who are using a desktop or laptop computer. In these cases, designers should still consider the mobile experience and ensure that the design is responsive and optimized for different screen sizes

In the case of doing desktop design first, shrinking a desktop design to fit a mobile interface can result in a subpar mobile user experience. This is because desktop designs tend to be more complex and include more information, functionality, and interactions than what can be accommodated on a smaller mobile screen.

Accordingly, UI designers should design for mobile interfaces first and then expand the design to desktop screens. This mobile-first approach ensures that the core functionality and content are prioritized and streamlined for a mobile experience, which can lead to a more effective and engaging user experience across all devices.

How to (not) make the life of front-end developers a pain

As a UI/UX designer, it is essential to work closely with front-end developers to ensure that the designs you create can be implemented efficiently and effectively. Designers sometimes tend to think in creative and imaginative ways, which can lead to designs that are challenging to implement on the developer's side.

Keep in mind the limitations of web technologies and consider the impact of each design element on the page's performance. Keep your designs simple and straightforward to avoid overwhelming developers.

Before handing over your designs to front-end developers, make sure to test them on different devices and platforms. This will help you identify any issues that may arise during development and make the necessary adjustments to ensure the design is easy to implement.

How to (not) choose the wrong font & colors

Fonts

• Free license for commercial use: When selecting a font for your UI design project, it's essential to make sure that you choose a font with a free license for commercial use. This means that you are legally allowed to use the font in your design project without any legal ramifications. There are many free font resources available online, but it's important to ensure that you check the license terms and conditions before using them in your project.

• Web font: When designing for the web, it's important to choose a font that is optimized for digital use. Web fonts are specifically designed to look great on screens of various sizes and resolutions. Choosing a web font ensures that your design looks consistent across all devices and platforms.

• Multiple styles (weight): Choosing a font with multiple styles, such as bold, regular, and light, can add depth and visual interest to your UI design project. Different font styles can be used to distinguish between headings, subheadings, and body text, making it easier for users to navigate the interface and find the information they need.

• Many glyphs: Glyphs are the individual characters that make up a font. Choosing a font with many glyphs gives you greater flexibility and creativity in your design. It allows you to use special characters, symbols, and even multiple languages in your design without having to switch fonts.

Colors

• Don't Use Too Many Colors

When designing a UI, it's crucial to keep the color palette simple and avoid using too many colors. Using too many colors can overwhelm the user, and the design can become chaotic and confusing. Typically, it's best to limit the color palette to three to five colors, depending on the project's requirements. Choosing a dominant color and a few complementary colors can help to create a cohesive and visually appealing design.

• Multiple Shades of Color

Using multiple shades of a color can add depth and dimension to a UI design. Using shades of the same color can help to create a harmonious and balanced color scheme. However, it's essential to ensure that the shades are different enough from each other to be distinguishable. Using subtle variations in hue, saturation, or brightness can help to achieve this.

• Shades That are Different from Each Other

While using multiple shades of the same color can be effective, it's also important to include colors that are different from each other. Choosing complementary colors or colors that are opposite on the color wheel can help create a contrast that makes the design more visually interesting. Using contrasting colors can also help to draw attention to specific elements in the UI, such as buttons or calls-to-action.

• Take Care of Contrast Values

When choosing colors, it's important to consider their contrast values. Contrast refers to the difference in brightness between two colors. A high contrast ratio between the foreground and background colors can improve the readability and accessibility of the UI design, particularly for users with visual impairments. Several online tools are available to help designers check the contrast ratio of their chosen colors to ensure they meet accessibility guidelines.

 

Don’t test!

One last thing to leave a big mistake in your UI design project is not to test it. While normally other designers may go through these boring processes to check their work over and over again:

• Mockup with true data

• Do a prototype

• Test during development

• Use the final product

Testing your design can help you identify any usability or functionality issues before the product is launched, reducing the risk of user frustration and negative feedback. But if they are what you expect them to be, just simply leave your project untested and see what’s going to surprise you!

Conclusion

There are certain key areas where designers often go wrong with their design projects, including choosing the wrong design software, adding inconsistencies, and delivering poor UI design on mobile.

For the design software, while Photoshop can be used for UI design projects, there are more suitable tools available that are specifically designed for this purpose, such as Adobe XD, Sketch, or Figma.

To deliver a successful design project that meets the needs of clients and users, designers should know well the importance of maintaining consistency in components, color styles, and text styles to ensure that the design is cohesive and user-friendly.