design

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

In this article, I will explain several design principles adopted from successful products, how these products strictly adhere to these principles, and how to implement these designs efficiently.

Lince Mathew

Sep 22, 2024 — 7 min read

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..

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.
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.
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.
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?

Once you have a basic design and standards for user interface the next step is building it.
Building and maintaining a better frontend codebase also involves adhering to a set of principles, similar to UI design principles.

In the section below, I will explain a few coding principles I found in several open-source projects and the tech stack you can use to bring your design to life and ship it faster.

Frontend Architecture Lessons from Supabase Studio

Supabase Studio is an open-source dashboard for managing Supabase projects. I selected this to learn about the frontend system design choices Supabase made in building a feature-rich dashboard using React and Tailwind CSS. The code for Supabase Studio is well-structured and perfectly split to ensure modularity.

One key point I noticed in most of the best projects is a well-maintained code structure. For example, in Supabase, the authentication and types are maintained as separate packages. The benefit of this approach is that if there are minor changes in these sub-packages, we can rebuild them individually without needing to rebuild the entire frontend code.

Structure Matters

Supabase studio follows a set of rules for managing components effectively. For example:

If the component is meant for a general structure or layout, it belongs to components/layouts/<folder>.
If the component is tightly coupled to a specific interface, it belongs in components/interfaces/<folder>. An interface consists of distinct functional modules of the app. For example, all billing-related features, such as payment and billing history, should go to the billing interface.
For components that are designed for reuse across multiple pages, they belong to components/ui/<files>.

Each component follows a specific structure that groups constants, types, and utility methods together, with index.js serving as the entry point.

components/ui

- SampleComponentA

  - SampleComponentA.tsx

  - SampleComponentA.constants.ts

  - SampleComponentA.utils.ts

  - SampleComponentA.types.ts

  - index.ts

- SampleComponentB.tsx

Hooks Management

Another point I noticed is the use of custom hooks. In Supabase, database querying, handling logs, and processing time series data are managed inside analytics custom hooks. Similarly, permission checking and path management use custom hooks from the misc directory.

Supabase follows strict principles of modularity, reusability, and consistent naming conventions, which improve readability. For instance, they use a consistent prefix like "use" for hooks.

Ship Designs Faster with Modern Tools

Papermark is a another open-source document-sharing app. I selected this project to analyze how modern tech stacks such as Next.js, TypeScript, Tailwind CSS, and shadcn/ui are used to build a modern web application. Let's delve deeper into the code.

In Papermark, the UI components are grouped inside a components directory. Each folder within this directory is dedicated to separate modules such as billing, documents, etc., which provides modularity. Helper functions and logic are grouped together inside the lib directory.

Code Structure

The code structure in Papermark is designed to enhance modularity and maintainability. Here's a simplified overview:

components/
  - billing/
    - BillingComponent.tsx
    - BillingComponent.styles.ts
    - index.ts
  - documents/
    - DocumentComponent.tsx
    - DocumentComponent.styles.ts
    - index.ts
lib/
  - helpers.ts
  - utils.ts
  - constants.ts

What's Next?

This article provides a brief overview of the vast topic of design principles and their implementations.
The process of design principles is complete only when they are adapted and implemented by the team, resulting in a tangible product.
Share your thoughts and the design principles that guide your teams in the comment box.