I Analyzed 4 Successful Products to Find These Powerful UI Design and Implementation Principles

Our Design Learning Journey

In our team, we have multiple projects being developed in parallel, with ongoing launches. We are constantly looking into how we can improve the user interface, user experience, and frontend coding practices on all our apps.

We went through resources such as the Magic Ink by Bret Victor [1], which explains software designs and information software designing. In Magic Ink, Victor argues that most of the time people use software to read, observe, explore, and ultimately come to an understanding. Software design should focus on presenting information in a way that leads to quick decision-making for the user.

Our Current Design Principle

We completed the DESIGN RULES: Principles + Practices for Great UI Design course on Udemy and subsequently developed our own set of guidelines, which we call the PNDCC Rules for designing UI pages and components.

PNDCC stands for:

• Prioritize: Identify and rank actions or information based on priority. Higher-priority actions should appear at the top of the list (A > B > C).

• Negative Space: Higher-priority actions should have more negative space, as it naturally draws the eye.

• Dimension: Higher-priority actions or information should have larger dimensions compared to others, drawing more attention.

• Contrast: Apply varying contrast levels to components so that the primary action stands out.

• Color: Limit the use of color to two or three main colors and their various shades, giving color a lower priority in the design.

PNDCC is mainly focused on guiding the human eye predictably from the most important items to the least important.

Here is an example of a UI we built based on the PNDCC rules:

How to Find and Adapt the Best UI Design and Implementation Principles

we are constantly striving to identify and implement more successful design principles from various sources to enhance our team's work.

As part of this effort, I decided to select a few products that offer superior user interfaces and experiences, along with some other projects that have acceptable frontend design architecture.
My goal is to understand the principles driving these products to build and maintain better UIs.
I also want to learn about the coding principles that contribute to their success.

1. Notion: Notion's UI can be used for building a project management tool, a wiki, a CRM, or even databases. Its versatility and user-friendly design make it an excellent case study.

2. VSCode: This open-source project follows strict design and coding principles. Let's check how VSCode maintains and enforces design standards across multiple pull requests from around the world.

3. Supabase Studio: A platform that provides visualization for Supabase, an open-source Firebase alternative. Supabase is developed using NextJS and Tailwind. Analyzing its code will help us understand good practices for frontend system design.

4. Papermark: Another open source web app Going through this will give an idea of how to build responsive web UIs using modern tools like React ,Tailwind or Shadcn UI and ship faster.

What Leads Notion into a Multitasking App

I’m a day-to-day user of Notion, and the user experience it provides is highly appreciated. People use Notion as a project management tool, ERP system, blog platform, or to manage team wikis and internal documents.

The customization and modularity of Notion allow it to transform into multiple productivity tools. Andrew Lee, Product Designer at Notion, once mentioned in his speech [2] that they built Notion to replace multiple tabs opened in the browser. This means there's no need to manage separate tools or open tabs for tasks, project management, wikis, ERP, etc.

Here are some principles I identified from Notion's UI:

• Reduce constraints: Notion is free from any constraint or containers. Everything, such as images, text, and lists, is considered a block, so users can move these blocks freely.

• Promote fewer clicks: Notion keyboard shortcuts reduce the need to switch between the keyboard and mouse, allowing users to accomplish tasks more quickly without frequent context switching.

• Make it simple: There's no need to build and include every feature within the app. Users have the option to pick and integrate what they need, such as templates, notification plugins, etc.

• Group related details together: Notion does not clutter all menus together. Instead, it groups tools and places them appropriately. For example, app settings are in the left navigation panel, page settings are in the upper-right corner of the page, and slash commands and block settings are by the block. This thoughtful arrangement reduces the cognitive load on users.
  Simplicity Derived from Strict Coding Standards

  VSCode is another remarkable open-source software that many of us use daily. It adheres to specific design principles and maintains a checklist to ensure these principles are followed for new features.

  

  VS Code Design Principles and Checklist

  VS Code's design principles include the following points:

  • Think Universal: Ensure that the design is accessible and usable by a global audience.

    • Eg: accessibility features, command palette

  • Make It Personal: Allow users to personalize their experience to suit their individual needs.

    • Eg : extension support

  • Keep It Simple: Strive for simplicity in design to enhance usability.

    • Eg: integrated terminal.

  • Create Delight: Aim to create a delightful user experience.

    • Eg: reduced clicks, shortcut support.

More details about these design principles can be found here.

VS Code also ensures that these design principles and guidelines are provided to extension developers so that even external components look and feel like a part of VS Code.

Following and adhering to these principles is as crucial as creating them. VS Code developers maintain a checklist [3] to verify whether the design principles are followed when implementing new features.

Does your team have a design checklist before pushing a feature to production?

I Have Enough Design Principles—What's Next?

• Continue reading the full article here: https://journal.hexmos.com/i-analyzed-four-successful-products-to-discover-powerful-ui-design-principles/