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.
Top comments (0)