News & How to's

Or how:

the BEST designers team at Meta gets it wrong

Ironically WhatsApp team has the BEST designers at Meta. It's tough to get into that team as well. But this is more about Eng quality.

---

I stumbled upod this reddit thread with the headline:

"They forgot some space above the search bar right?"

Let me tell you this, The Figma design file was perfect. The developer did not implement it correctly. This is a classic example of a UI bug that could have been caught.

Users comments to thread was with more and more examples of UI bugs in the Whatsapp app.

Another user commented:

Go to thread linked above to read more and more issues in whatsapp.

Why product teams lose the pixel-perfect battle?

• Time Pressure: Tight deadlines and project timelines often force teams to prioritize speed over perfection. In a rush to release updates or new features, meticulous attention to detail can be sacrificed.
• Communication Gaps: Miscommunication between designers and developers can lead to discrepancies between the intended design and the final implementation. Without clear communication channels and effective collaboration tools, errors and inconsistencies are more likely to occur.

How dinter could help

This is where dinter comes in!

• Time Pressure: dinter helps developers quickly identify and resolve UI discrepancies, reducing the time spent on manual QA and debugging.
• Communication Gaps: By highlighting differences and inconsistencies, dinter helps to bridge the gap between designers and developers.

Say goodbye to endless back-and-forth with designers. With dinter, you can ensure your app's UI aligns with the designer's vision, saving time and frustration. No more guesswork or misinterpretations – dinter provides a clear and objective comparison, streamlining the development process.

Download dinter now for free! click here

The Japanese define quality in two ways:

• atarimae hinshitsu (当たり前品質)
• miryokuteki hinshitsu (魅力的品質)

Understanding the difference between them is the key to building products that users love.

---

The two types of quality - is an amazing article by the incredible Zeno Rocha.

We thought it meant so much to the mission of dinter that we had to share it here.

Read the full article here.

Spacing is a crucial aspect of design that often gets overlooked or treated as an afterthought. However, proper spacing is essential for creating a balanced and visually appealing design that enhances the overall user experience. In this blog post, we'll delve into the secret science of perfect spacing and explore three laws that can help you achieve harmonious designs.

1. Every Element is Related

The first law of spacing states that every element is related to every other element, even if the relationship is weak. Some elements have a stronger relationship than others, and this hierarchy determines how close or far apart they should be positioned. For example, a heading and a subheading within the same section have a strong relationship and should be positioned closer together, while a heading and a sidebar navigation item have a weaker relationship and can be spaced farther apart.

2. Relationship Strength Dictates Spacing

Building on the first law, the second law emphasizes that the strength of the relationship between elements determines the amount of spacing between them. Strongly related elements should be placed closer together, while weakly related elements can have more space between them. This principle helps create visual hierarchy and establishes a clear information flow.

Enjoy the below cheatsheet from this amazing article:

3. Use Preset Spacing Values

The third law suggests using preset spacing values from a scaling system rather than eyeballing the spacing. By relying on a predefined set of spacing values, you can maintain consistency throughout your design and avoid making arbitrary spacing decisions.

---

Further Reading

Highly recommend this article for further information.

or this article as well.

In today's highly competitive market, the user interface of your product can make or break its success. As we worked in a few product startups, we saw the problem of balancing UI and development velocity. A perfect UI matters, as markets become increasingly saturated and your users will have only a few minutes to evaluate your product. They WILL make their decision based on the UI.

The Importance of a Well-Designed UI

A well-designed UI not only looks visually appealing but also enhances the overall user experience. Intuitive navigation, clear visual hierarchy, and responsive design are crucial for keeping users engaged and satisfied. A poor UI can lead to confusion, frustration, and ultimately, abandonment of your product.

So, we've established that we need a good UI. But how do we achieve it? Designers meticulously craft Figma frames to bring their vision to life, but the QA cycle can be painful!

Developers often struggle to mimic precisely what the designer prepared, leading to endless back-and-forth and wasted time.

For developers it can sometimes feel like an annoying "find the differences" game.

Enter dinter: The Solution to Streamline UI Development

This is where dinter comes in! dinter gives developers the ability to self-QA, even if they don't immediately see the differences themselves.

Say goodbye to endless back-and-forth with designers. With dinter, you can ensure your app's UI aligns with the designer's vision, saving time and frustration. No more guesswork or misinterpretations – dinter provides a clear and objective comparison, streamlining the development process.

Moreover, dinter supports everything you run in a browser, including localhost websites. This means you can catch UI issues early in the development process, before they escalate into bigger problems that are more difficult and costly to fix.

Download dinter now for free! click here