How to design your UI like Apple

Mungai Njoroge — Tue, 17 Aug 2021 03:01:35 +0000

Let's face it. Apple are really good at their design.

Among other reasons, that's why there are many people willing to buy their tech, despite the fact it's quite expensive.

What makes the Apple design unique?

Let's look at some of the design concepts that makes the iThings so good, in terms of the user interface.

1. Rounded everything

Well - not everything, but almost everything.

Adding a border-radius to your components makes them look very attractive. Microsoft was kind of late in discovering that.

Let's start with their sites. That's where people looking to switch to MacBooks first go.Most of the components on Apple products' websites are rounded. The border-radius starts from around 30px going down.

Only catchy stuff is rounded. All the other detail is tucked into paragraphs.

The roundedness can also be seen in MacOS and iOS. In MacOS BigSur for example, the control center, the dock, icons, the windows and almost everything is rounded.

2. Bright colors and gradients

Apple uses a variety of bright colors in their design.

Some of the colors used in the Apple systems and websites are Blue, Indigo, Purple and Red. You can get a full list of their system colors in their Color Guidelines page.

Color gradients can be seen in many parts of their websites, especially the rounded cards. The gradients mostly consists of 2 colors.

3. Glassmorphism

Glassmorphism is a design based on using background blur with trasparency. Object have a light shadow which give them an effect of floating in space.

This effect has been used very much by Apple on all their operating systems. In iOS, most widgets, app folders, the dock, notification, etc, are glassy.

On the MacOS, glassmorphism is used on the dock, the control center, messages, sidebars, etc.

Glassmorphism gives your apps or components the sense of integrating with the environment (or whatever is behind them).

You can use use the glassmorphism.com css generator to create some amazing glassy effects for your site.

4. Graphics and animations

Animations play a major role in adding interaction into everything.

The iOS is one example where animations are used properly. When switching to the control panel, the components display using a very smooth scaling animation.

In their product websites, there is a lot of graphics and scroll animations between them. Although the scroll animations are not always smooth, when done with a small amount of images, it produces satisfying results.

5. Their unique fonts

The font is not something many developers consider, especially when building using/for Google tools like Chrome and Android. This is because the inherited font is quite good.

Apple are currently using the Sans-serif () Pro typeface across all their products. This font is freely available but only limited to non-commercial use.

You can download the font from cutonfonts.com.

Final remarks

Apple are really good at designing their user interfaces. That's what drives some people to move away from other operating systems like Linux and Windows, despite the expense.

You can try integrating those 5 concepts into your design and wait for the feedback. It is also worthy noting that not all of them are applicable at the same time. It will depend on the type of product you are building.

What are some other concepts that I might have left out in this article? Please let me know in the comments.

Happy coding!

Helpful Resouces

What is Glassmorphism? Create This New Design Effect Using Only HTML and CSS by Zoltán Szőgyényi.
27 Stylish CSS Background Gradient Examples by Yuvraj Chandra.
The CSS gradient generator.
The glassmorphism css generator.
SF Pro font download.

Figma Resources

How to provide the ultimate web dark mode experience

Mungai Njoroge — Tue, 03 Aug 2021 00:44:53 +0000

Adding dark mode to your web app is one way of improving the user experience.

Here are some dark mode features that you should add to your web app, to provide the ultimate dark mode experience.

1. Matching the system dark mode

The ability to follow the system dark mode makes your app integrate naturally with the user's system. This way, users don't have to switch to dark mode manually through the settings, unless they want to opt out.

2. Remembering the dark theme state on next visit

This will allow the users to feel like they are picking up from where they left off. Plus, having to click that manual switch every time is very annoying.

You will have to store the dark mode state on the client and in a database to maintain the state between sessions on different devices.

3. Watching for the system dark mode changes

This partially removes the need to remember the dark mode state on the next visit. It also provides the natural integration we talked about earlier. It ensures that your web app matches with the user's system, and transitions to the matching system mode automatically.

You should also provide the option to turn this off somewhere in the settings. Not everyone will prefer this.

🔷 You should also keep in mind that getting or watching for the system dark mode change is device or browser-dependent. Some of your users might be using unsupported devices. For example, Android devices running Android 9 and below, do not support dark mode. This necessitates the need to store the dark mode state in a database.

Here are some helpful resources: