Inspiring UI styles and trends through the years
- Mayya Geo
- March 28, 2022
- Time to read: 11 min.
Beautiful and flexible UI is just so important for a usable and clear user experience. Great UI is often described as invisible and smooth. It contains visual factors that are not distracting—that are just enough to support the digital product functions.
There are many possibilities around the visual design of digital products. The difference between a well-defined and a sloppy design is that the first one is usually well planned and the usage of all styles has been made intentionally.
There is a bag full of options and styles! Let’s review the most inspiring UI directions and provide context of usage.
Human interface guidelines 1987
In 1987 the Macintosh II was first released—Apple’s first computer with a color display (supporting a spectrum of 256 colors). That was the year when the human interface guidelines (HIG) were first published.
The first guidelines, even so early in the development of interface design, suggest some valuable design principles. The guidelines talk about the consistency of the visual design in order to construct an understandable environment for beginning users. In these guidelines, the user is in control of the system, therefore the controls and system feedback are designed with this functionality in mind.
The UI of human interface design was not seen as only aesthetic or cosmetic. The success of the visual design was measured by user satisfaction and how well they managed to accomplish their initial task. Visual design should help the user accomplish their task more easily. The guidelines suggested the usage of visual effects, such as animation, as people tend to appreciate it. Visual effects were also used to entertain and provide a feeling of excitement.
Today, after many updates due to technology changes and standards (yet keeping the main principles), the HIG are one of the most often used tools by designers and developers when designing digital products.
Skeuomorphism is at the heart of the human interface guidelines, and even in 2022, after the latest updates in Bug Sur and Monterey, the guidelines use a new-skeuomorphism that allows the usage of flat, modern surfaces while still keeping to the main principles with their own long year established style. If you are curious to learn more about the style progress look at this video, comparing the visual styles of the latest – Bug Sur, and the previous operating system – Catalina.
Human interface UI visual characteristics:
• UI objects mimic real-world objects
• Aesthetic visual design and interaction follow function
• Consistent visual standards—text styles, icons, and colors
• UI lets the user be in control of the system
Skeuomorphism
Skeuomorphism is a term well known in the graphical UI design world. It describes interface objects that mimic their counterparts in the real world in how they are styled, how they appear, and how a user will interact with them. One example is the iPhone calculator app—it looks and functions just like the old-school calculator your parents used.
example of the Apple Notes App in its early design versions
Skeuomorphism suggests that products are much easier to understand by users if they use a visual approach that doesn’t need additional explanation. Designers invented skeuomorphism to answer this exact need and to make interfaces intuitive for the users. In visual design, designers create skeuomorphic objects using shadows, gradients, and reflections. The combination of those visual factors helps create the feel of depth and, therefore, the users can better understand the purpose of each individual object.
Skeuomorphism:
- UI objects mimic real-world counterparts
- Shadows
- Prominent Gradients
- 3D created graphics and illustrations
- Outer glow and reflections of the UI objects
90s UI styles - The early days of internet
Modern UI design has changed a lot since the early days of the internet. Anybody who used old computers, monitors, and websites in the 90s is familiar with the style of the flashy, 8bit colors and animations. Indeed, a lot of the styles used in the 90s are not appropriate anymore or even usable.
However, some 90s interface styles would be a perfect fit if you are looking for a nostalgic, retro feeling for your next project.
90s UI visual characteristics:
- Images in the background
- 8bit graphics
- No rules in the layout design
- Both vertical and horizontal scroll
- Typeface—usage of Times New Roman as well as Comic Sans
- Clear flashy colors, no usage of color harmony
- Text documents brought together by links
- No usage of color contrast
- Flash animations
The 2000s smartphones and multimedia players
The popularity of smart phones increased over time, and in 2007, Apple was the first company to offer any kind of usable UI design for touchable screens. The launch of “the App store” in 2008—and later Google’s launch of “the Play store”—marked the upcoming years of the apps revolution period. Both companies launched the most innovative user interface styles up to this point with their digital design. Apple’s first iPhone was popular, with its use of skeuomorphism and the mimicking of real-world objects with its graphic interface.
In 2009 Microsoft started selling the first model of the Zune handheld multimedia player. The simple and clean design of the control features were considered to be the first that used flat design in user interface design.
After 2014, and with a redesign in 2015, Google became known for its flat design system. Yet it still mimicked a real-world environment with the Material Design system, products, logo, and branding.
The 2000s UI visual characteristics:
- Flat design
- First usable touch screen design
- Mobile apps
- Accessible design
- UX design term is widely spread
source https://material.io/
Material Design system 2014
In 2014 Google launched their first version of the Material Design system. According to material.io Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.
source https://material.io/
The system style is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink. The visual language synthesizes the classic principles of good design with the innovations and possibilities of technology and science. Material Design is guided by print design methods—typography, grids, space, scale, color, and imagery—to create hierarchy, meaning, and focus that immerse viewers in the experience.
Since its launch and revamp in 2018, the system is not only an inspiration for many designers but the main tool in their practice. The Material system was created to help design teams construct superior digital experiences for Android, iOS, Flutter, and the web.
Material Design system UI visual characteristics:
- Colors—bold, graphic
- Typeface—Google fonts
- Animations provide meaning
- UI objects as a metaphor for a real-world environment
- Subtle gradients
- Shadows and light
- Subtle textures
- Surface-like that of paper and ink
Flat design
One of the major visual trends in design throughout 2010 up until today, flat design was born out of the need to make apps more accessible with a clean interface design. Flat design emphasizes cleanness and readability. Each design element has a single purpose and straightforward design. However, the style doesn’t aim to mimic a real-world function.
Nowadays, flat design is the style which is broadly used in digital design, and it is known for minimal and concise usage of visual factors. It’s exactly the opposite of reach visual UI, as its basic principles are based on a minimalistic design approach. Flat design is known for the usage of color harmony and color contrasts. The name “flat design” came about due to the wide usage of 2D graphics, animation, and illustration. Due to the style’s characteristics, flat design seems to be the perfect approach for better usability and is, therefore, preferred by many for their products.
Flat design UI visual characteristics:
- Flat colors
- Minimal color harmony
- 2D graphics, animation, illustration
- Mobile apps
- Accessible design
Minimalism
Minimalism in UI goes even further than flat design in terms of simplicity. This style is about using the fewest elements possible. White space is a central part of the design, and no extraneous elements are needed. This design approach focuses on color and scale, the volume of the surrounding space, and few functionalities.
The aim of minimalism in UI is to create a simple yet powerful design by using only a few needed styles, objects, functionalities, and content.
Minimalism UI visual characteristics:
- Few colors—usually white, black, gray
- Lots of white space
- UI objects occupy a large space
- Fewer functionalities
Neomorphism
Neumorphism is a modern take on the skeuomorphism design. The focus is not on the contrast or the mimicking of real-world objects, but rather on the color palette. That’s why the main difference from skeuomorphism is that neumorphism mimics the physical world for purely aesthetic purposes.
Neumorphism is a visual style that combines background colors, shapes, gradients, and shadows to ensure the UI elements’ graphic intensity. The result is a soft, extruded-plastic look and almost 3D styling.
Many professionals are still questioning the neumorphism style as one that could be usable in interface design. The reason is that while the style is sleek, trendy, and aesthetic, this style doesn’t have much of an impact on the usability of the product. It might even have a negative impact due to poor accessibility caused by the visual factors.
If you are looking for a fresh and trendy visual design of your UI, this style could be a perfect fit!
It’s perfect for projects where only a few screens are designed in this manner. You should keep in mind that neumorphism is quite difficult to design and to scale across multiple platforms.
Neumorphism UI visual characteristics:
- Colors with low chroma and observable close to whites
- Shapes that allow for the creation of repetitive forms
- Subtle, delicate effects
Modern UI design add-ons
With the excessive development of new technologies, user interface design in the 21st century is rapidly evolving. But even through the visual changes and new styles, the basic design principles remain.
Many interfaces are now using a combination of multiple styles and add-ons to create a more unique, modern, and fresh visual design. Quite often in recent years, we can see some of the following additions to UI designs:
design by Prakhar Neel Sharma
Light/dark mode
This addition to any digital product is mostly in a user’s favor, and its main purpose is to establish better accessibility. The difference between a light and dark interface mode showcases changes in readability and the user’s cognitive load. Through changing the contrast ratio by switching between a dark and white background and objects, the contrast between text and background is dramatically altered.
Depending on the digital product, user needs, and environment of usage, a lot of modern software offers both options—light and dark.
design by Varun Kumar
Smooth gradients
One of the latest trends in 2022 UI, used by both Google and Apple in their latest product updates, is the usage of subtle gradients in UI objects. The purpose is to create the feeling of a real object and, due to the comprehensive gradient, to make the interface look almost like real-world objects that one can touch. The usage of smooth gradients might be mostly for aesthetic purposes, but it also creates a more understandable digital environment for the users.
The trend toward smooth gradients comes as a contrast to the main usage of flat design in the last ten years. It tries to solve the “too flat” interfaces. It also goes well together with the stylistic principles of skeuomorphism.
design by Mako Tsereteli
3D objects and animation
With the need of graphics which are more recognizable and reminiscent of the real world, in recent years the usage of 3D graphics has boomed! Modern digital products are not only using static images but beautiful 3D animations that could provide even more context to the user.
Illustrations for providing feedback
Providing feedback to the user is one of the most important functionalities in design, but unfortunately, also often neglected by designers and development teams. In recent years this has changed, and 404 pages, errors, and heads-up messages are coming with funny and interactive illustrations to please the users.
Voice UI design, touchless interactions
With the development of new technologies and the need for accessibility, voice-controlled interfaces are getting more and more popular. With this addition to a user interface, the whole user experience becomes much more comprehensive and holistic.
AR and VR
Augmented and virtual reality are more than mainstream in 2022 and loved by many users. These range from face filters in many social apps to virtual reality games to scientific and cultural experiences. Augmented and virtual reality interfaces, controls, and experience are still being tested and defined with the use of new technology.
Conclusion
Here we are in the year 2022 and with so many stylistic user interface possibilities! We hope you got yourself inspired and learned how to intentionally use UI styles in your next digital product.
Thank you for reading! 💜
We are GEOBO, a design studio specialising in branding for fashion and creative tech companies.
