Home
About Us
Our Plans
Contact Us
Services
UI Design
UX Design
Web Development
Frontend Dev
eCommerce Sites
View All
Use Cases
Web3 Design
UX for AI
Edtech Design
Fintech Design
Lawfirm Website Design
View All
Resources
Blog
Design Trends Timeline
Lets Chat
Digital Design Developments & Trends
Late 1990s - Present
SVG Graphics
Trend Overview
Thanks to their XML-based format, scalability, and performance benefits compared to traditional bitmaps, Scalable Vector Graphics (SVG) have driven the evolution of modern web design.
Tools
Adobe Illustrator
laid the groundwork for SVG creation and exportation.
Sketch
later built on this foundation, tailoring its features towards digital design needs.
Figma
and
Adobe XD
have since popularized SVG use, ultimately embedding SVGs firmly into modern web design practices.
Trend Emergence
SVGs in web workflows have been part of web standards since the late 1990s, but enhancements in web standards and increased browsers supported the expansion of SVGs in the mid-2010s. Tools like Illustrator, Sketch, Figma, and Adobe XD also helped advance web design by creating visually appealing and efficient digital spaces.
Early Example
SVG’s earliest mainstream application in web design was for website graphics and icons in the early 2000s. They became a web standard, mainly for visual aids on informational websites. This adoption demonstrated SVG's capacity to maintain crispness and clarity at any scale before mainstream media could, later paving the way for high-profile uses like the Google logo redesign.
Late 2000s - Mid 2010s
Skeuomorphism: A Design Evolution
Trend Overview
This design philosophy imitates real-world textures, materials, and objects within digital interfaces to make technology less daunting and more navigable. By utilizing realistic details like leather textures in digital calendars or analog controls in music apps, skeuomorphism bridged the gap between the physical and digital for new users.
Tools
Adobe Photoshop
provided the advanced tools skeuomorphic designers needed to create detailed textures, shadows, and lighting effects that mimic real-life materials. This software and similar platforms helped incorporate realistic tactile clues, enhancing the usability and aesthetic appeal of digital products.
Trend Emergence
Skeuomorphism's influence peaked in the late 2000s and early 2010s, but its roots can be traced back to the advent of graphical user interfaces (GUIs). Its emergence can also be credited to companies like Apple, which, under the leadership of Steve Jobs and Scott Forstall, strived to make digital devices feel more accessible and engaging.
Early Example
Apple's iOS prior to the release of iOS 7 is a prime example of skeuomorphism. From the Notes app mimicking a yellow legal pad to the Calendar app’s leather-bound planner to the Game Center’s green-felt gaming table texture, the skeuomorphic design helped users navigate the new digital landscape through familiar visual cues.
As digital literacy grew, skeuomorphism's prominence waned. The launch of iOS 7 in 2013 marked a significant shift away from skeuomorphism, reflecting an industry-wide priority shift toward simplicity over realistic mimicry.
Early 2010s - Present
Color Psychology in UI/UX
Trend Overview
This approach harnesses our historical understanding of how color influences human emotion and behavior to intentionally drive decision-making processes. By selecting color schemes that both enhance aesthetic appeal and underscore a brand’s ethos, color psychology strives to optimize user engagement.
Tools
Coolors
and the
Adobe Color Wheel
are essential tools for exploring color palettes that go beyond aesthetics and tap into human psychology. They enable nuanced color applications that profoundly impact user interaction and perception.
Trend Emergence
The rich tradition of color psychology predates the digital revolution, but its focused application within UI/UX design increased during the 2010s. This era’s rapid expansion of digital landscapes emphasized user-centered design principles more than ever before, making color psychology a powerful tool for fostering meaningful connections between brands and their audiences.
Early Example
Spotify’s 2015 rebrand is a standout example of color psychology in digital design. The new color palette didn’t just help the company stand out in a crowded market; its distinctive shade of green was chosen for its vibrancy and energy to reflect the user’s emotional experience listening to music.
Responsive and Adaptive Design
Trend Overview
Responsive and Adaptive Design emphasizes the importance of optimal viewing across a myriad of devices. This trend reflects a broader commitment to inclusivity in the digital experience and acknowledges the varied ways users interact with technology. It is marked by fluid, scalable solutions that adjust to the screen size and orientation instead of fixed-width layouts.
Tools
Bootstrap
,
Webflow
, and
Figma
enabled designers and developers to create responsive websites more efficiently. Bootstrap offered a ready-made framework for responsive design, while Webflow and Figma’s intuitive interfaces offered visual design through adaptive layouts. By making responsive and adaptive design accessible to a wider range of creators, these tools solidified the trend’s longevity.
Trend Emergence
Ethan Marcotte first outlined the ‘Responsive Web Design’ concept in a 2010 A List Apart article. The piece not only coined the term, but also laid down foundational principles such as fluid grids, flexible images, and media queries. His advocacy for designs that can adapt to any screen size would guide web design for the next decade and beyond.
Early Example
The
Boston Globe’s website redesign in September 2011
was an early example of successful Responsive and Adaptive Design. As one of the first major sites to implement responsive design on a large scale, the redesign showcased how different web page elements could be rearranged and scaled to provide an optimal user experience across all devices. The project was led by Ethan Marcotte and his team, making The Boston Globe a landmark case study in responsive design.
Responsive Typography
Trend Overview
At a time when the proliferation of new devices was diversifying the digital landscape, Responsive Typography ensured readability and aesthetic harmony across all screen sizes. By focusing on adaptability, this trend helped digital typography contribute positively to a design's usability and visual appeal.
Tools
CSS advancements provided a foundation for flexible, scalable text with seamless implementation, while website builder tools like
WordPress
and
Webflow
enabled designers to adjust typography settings that respond to various breakpoints. Together, these tools powered accessible, cohesive digital experiences, making responsive typography a cornerstone of modern web design.
Trend Emergence
Responsive typography became popular in the 2010s, in tandem with the rise of responsive and adaptive design. As designers and developers strived to create more adaptable web experiences, this period saw a shift towards flexible, scalable text units (like viewport-width units) and a greater emphasis on typographic scale and legibility.
Early Example
Responsive typography was a core component of the
2011 Boston Globe website redesign
. The site's new typography is intuitively scaled across different devices, delivering an optimal reading experience from small smartphone screens to large desktop monitors.
Accessibility & Inclusive Design
Trend Overview
Accessibility Design strives to make digital experiences accessible to everyone, including individuals with disabilities. This approach ensures digital interfaces are navigable, understandable, and usable for all users, ultimately fostering a more inclusive digital environment for all.
Tools
AccessiBe
and the
ADA site compliance tool
advance accessibility in digital design. These platforms offer features like contrast checkers and screen reader compatibility tests, which help designers adhere to Web Content Accessibility Guidelines (WCAG) standards. Plugins on tools like Figma also help designers test for accessibility directly on the design software.
Trend Emergence
Incorporating accessibility in design grew in importance throughout the 2010s thanks to the refinement of web standards and guidelines, such as the Web Content Accessibility Guidelines (WCAG). This period also saw increasing awareness of inclusivity and the broader understanding that accessible design improves the user experience for everyone, not just those with disabilities.
Early Example
The 2012 launch of the UK government's digital services platform,
GOV.UK
, was an early example of accessibility design adoption. The platform's design is notable for its simplicity, clear navigation, and use of plain language, as well as technical features designed to support accessibility, such as semantic HTML and ARIA (Accessible Rich Internet Applications) landmarks. The success of GOV.UK became the standard, influencing other organizations to adopt similar approaches.
Minimalist Design in Digital Interfaces
Trend Overview
Minimalist design in digital interfaces embraces the "less is more" philosophy, prioritizing simplicity, clean lines, and the essential over the superfluous. Through uncluttered interfaces, ample white space, and minimal color schemes, this trend aims to concentrate user attention and foster quicker decision-making in a tranquil user interaction environment.
Tools
Facilitated by tools like
Adobe XD
,
Figma
, and
Sketch
, increased access to high-quality vector graphics propelled the rise of the crisp, clean lines and reusable components that define minimalism. CSS3's introduction of layout systems like Flexbox and Grid further popularized uncluttered designs, helping ensure their responsiveness across all devices.
Trend Emergence
Long before its prevalence in UI/UX, this philosophy emphasized simplicity, functionality, and the elimination of unnecessary elements across art, architecture, and product design. Minimalist design in digital interfaces gained momentum in the 2010s, largely as a counterpoint to the ornate and detailed aesthetics of skeuomorphism. This shift was also driven by the growing need for visual clarity and easy navigation across an expanding array of devices, particularly with the rise of mobile internet usage.
Early Example
The release of Apple's iOS 7 in 2013 unveiled simplified icons, streamlined typography, and a cleaner overall interface, marking a significant departure from skeuomorphism. It reduced visual clutter and prioritized user content and actions, setting a new standard for UI design.
Mid 2010s - Present
Material Design by Google
Trend Overview
This design framework harmonizes classic principles of good design with technological innovation to create dynamic and intuitive user experiences across all platforms and devices. It emphasizes grid-based layouts, responsive animations, and depth effects to foster a tactile and visually engaging digital environment.
Tools
Sketch
,
Adobe XD
, and
Figma
have all helped disseminate Material Design principles. These platform’s extensive features supported layering, motion, and interactivity, making it easier for designers to craft experiences that align with Google’s vision.
Trend Emergence
Google officially introduced Material Design in 2014 as part of its effort to unify the user experience with visual standards across its various platforms, such as Android, Google Maps, Gmail, and more. It marked a significant shift in design philosophy, moving away from flat design to introduce more depth and texture through the use of shadows, animations, and a Z-axis for UI layers.
Early Example
Google's own
Android Lollipop (5.0)
operating system in 2014 was the first user interface to implement this design language. From responsive animations and transitions to its emphasis on layered interfaces and tactile surfaces, its use of bold colors, typography, and imagery created a cohesive, engaging, and intuitive user experience. This implementation demonstrated how designers can improve usability and aesthetic appeal by applying these principles in their own projects.
Microinteractions
Trend Overview
Microinteractions have transformed the digital experience from static to dynamic. Whether it's the tactile response from a button press, a list refresh, or subtle feedback from user actions, these small yet impactful engagements lend a more human touch to digital interaction.
Tools
While
Adobe After Effects
provided the groundwork for sophisticated motion design, tools like
Adobe XD
,
Figma
,
ProtoPie
, and
Principle
have simplified designing and prototyping microinteractions. Collectively, these platforms have facilitated the creation of engaging and dynamic microinteractions, establishing them as a cornerstone of contemporary UI/UX design.
Trend Emergence
Microinteractions started to gain significant attention in UI/UX design circles around the mid-2010s. Dan Saffer's 2013 publication
"Microinteractions: Designing with Details"
especially highlighted the importance of creating memorable experiences for users, propelling the idea of microinteractions into wider recognition within the design community.
Early Example
Facebook's introduction of the
"Like" button
animation in 2016 embodied microinteractions' power to enrich user experience. This feature expanded the simple "Like" into a range of emotive reactions, each animated to convey a distinct expression. It showcased how well-considered design elements could dramatically enhance user interaction and engagement and deepen user’s emotional and intuitive connections with digital platforms.
Flat Design
Trend Overview
Flat design emerged as a minimalist counter-response to the rich and detailed skeuomorphism with clean spaces, crisp edges, and vibrant colors, all within a two-dimensional framework. By emphasizing clarity and function, flat design made content more accessible to users without relying on realistic textures, shadows, or gradients.
Tools
Adobe Illustrator
gave designers powerful vector tools perfect for creating the sharp lines and bold colors characteristic of flat design, while
Figma
allowed teams to collaborate easily on flat design principles in real-time.
Canva
made flat design accessible for non-designers to create elegant visuals, while
Google Fonts
ensured typography remained at the forefront. These tools collectively emphasized flat design's utility in creating user-friendly digital experiences.
Trend Emergence
The trend towards flat design gained momentum in the mid-2010s, both as a response to skeuomorphism and a move towards more responsive web design practices. This approach aligns well with the needs of digital environments, offering cleaner layouts and screen sizes that improve legibility and user navigation.
Early Example
Microsoft's Metro
design language is an early flat design example. First introduced with Windows Phone 7 in 2010, Metro championed flat design principles through simple tile interfaces that focused on typography and solid blocks of color. Microsoft’s adoption influenced other companies and designers to embrace this cleaner, more modern aesthetic.
Voice-User Interfaces
Trend Overview
Voice-User Interfaces (VUIs) were made to mirror human conversation in a digital interface. They enable hands-free control and emphasize natural language use, in turn making technology more accessible to everyone
Tools
Major tech companies pioneered the core technologies enabling VUIs, which became devices like
Amazon Echo
and
Google Home
. As VUIs became more common, design tools like
Adobe XD
adapted by introducing voice triggers and speech playback capabilities. Through community plugins,
Figma
also came to support voice interaction design.
Trend Emergence
The mid-2010s saw a significant leap in the development of VUIs, primarily driven by advancements in AI and language processing technologies. The commercial availability of smart speakers and voice-activated assistants—like Amazon Echo in 2014 and Google Assistant in 2016—confirmed their potential to transform user experiences.
Early Example
The success of the Amazon Echo showcased the demand for voice-driven interfaces (VUIs) and their potential to redefine digital design. By playing music, setting alarms, providing weather updates, and controlling smart home devices, it validated voice as a mode of interaction in the evolving digital landscape.
Hero Images in Web Design
Trend Overview
Hero images are prominent, strategically placed graphics that capture attention, convey core messages, and set an emotional tone. Often paired with bold text or calls to action, hero images support strong visual storytelling and help make or break the first impression of websites.
Tools
A variety of free and paid tools, such as
Unsplash
and
Adobe Stock
, unlocked high-quality images for designers. Unsplash offers a broad collection of free domain photographs from a community of photographers, while Adobe Stock provides a library of premium images, videos, and illustrations to make finding a hero image quite easy.
Trend Emergence
Hero images became trendy in the mid-2010s, mainly driven by technology and web advancements that allowed for faster loading times. This trend was also supported by the increasing importance of visual content due to shortening attention spans in a demanding digital environment.
Early Example
Around the early-to-mid 2010s,
Airbnb redesigned its website
to display large hero images of homes available through its service. These images immediately communicated the core of Airbnb's unique personal travel experience offering. Coupled with a clear call to action, the hero images on Airbnb's website caused other websites and brands to adopt this approach.
Brutalism in Digital Design
Trend Overview
Brutalism embraced a raw, unrefined approach in place of polished digital design aesthetics. This style’s rudimentary layouts, plain backgrounds, and stark appeal drew inspiration from the Brutalist architecture movement to contrast with the bright feel of modern designs.
Tools
Webflow
helped designers capture brutalism with a code-free visual editor, while
Figma
supported real-time collaboration where artists could experiment. These tools empowered designers to challenge traditional conventions like polished interfaces, bringing a fresh feel and unhindered creativity to web design.
Trend Emergence
The brutalism trend in web design emerged in the mid-2010s, partly as a reaction to how similar websites and apps began to look. Designers adopting Brutalism wanted to break free from these modern constraints and began exploring more unconventional layouts.
Early Example
The Bloomberg Businessweek redesign by
Richard Turley
from 2010-2014 featured bold typography, contrasting colors, and unconventional layouts. This Brutalist design was both praised and criticized, but the
Drudge Report
also pursued a Brutalist look with a simple, text-heavy design. They both reflect Brutalism's core concept of going against the norm and encourage people to think outside of the box.
CSS Grid Layout
Trend Overview
CSS Grid Layout revolutionized web design with responsive and concise layouts within CSS. Using a grid structure, it adjusts seamlessly across different screen sizes to provide a straightforward, flexible, and consistent design process.
Tools
The integration of CSS Grid in tools like
Figma
and
Visual Studio Code
allowed designers to visualize grid-based layouts in a collaborative environment and streamline the development process. This synergy between design tools and code editors made CSS Grid a cornerstone of modern web design, empowering creators to build dynamic, engaging websites.
Trend Emergence
CSS Grid Layout became popular in 2017. It grew in response to the need for more efficient methods to create responsive designs that could adapt to different screen sizes across the web. CSS Grid's introduction provided a level of control that was previously difficult with older layout models.
Early Example
The
Mozilla website
was one of the first to implement the technology. The "
A List Apart
" website is another notable example, which is known for its focus on web development standards and practices. These redesigns used CSS Grid to create a clean layout, effectively demonstrating how the new system could handle content-rich sites with complex layout requirements.
Late 2010s - Present
Dark Mode
Trend Overview
Dark Mode is a dark color palette user interface theme. It reduces eye strain under low-light conditions and helps extend battery life, making the trend both aesthetically pleasing and practical.
Tools
Sketch
and
Figma
gave designers the tools to implement these darker themes. Because they prioritize user accessibility, features for switching between light and dark interfaces were a natural evolution for these platforms.
Trend Emergence
Dark Mode’s popularity skyrocketed in the late 2010s. Dark themes had been used in coding environments for years, but Apple's introduction of macOS Mojave in September 2018 was one of the first major operating systems to offer a system-wide Dark Mode. This move was quickly followed by similar implementations in iOS, Android, and Windows, solidifying Dark Mode's place in contemporary design.
Early Example
Twitter introduced ‘Night Mode’ to its mobile app in 2016, becoming one of the first social media platforms to offer the feature. By giving users an alternative to the bright, light interface, they were able to both reduce eye strain and take control of their digital experiences.
3D Graphics and AR Integration
Trend Overview
The integration of 3D Augmented Reality (AR) into modern technology has revolutionized visual storytelling by making interactive designs look and feel real in a way that 2D experiences cannot.
Tools
Vectary
,
Adobe Aero
, and
Spline
have supported this revolutionary journey. Vectary simplifies web-based 3D modeling, Adobe Aero creates immersive AR experiences, and Spline allows easy creation of sophisticated 3D visuals in the browser. These tools allow designers to work with new interfaces, introducing a new era of dynamic digital engagement.
Trend Emergence
Propelled by smartphones, AR platforms, and advanced web standards, 3D graphics and AR became mainstream in the late 2010s. Because they could render complex 3D graphics and AR experiences directly in web browsers and mobile apps without the need for specialized software, they unlocked an era of new possibilities for designers.
Early Example
IKEA Place
, an app launched in September 2017, enabled users to place true-to-scale 3D models of furniture in their own space using AR technology. By reducing uncertainty and enhancing customer satisfaction, this showcased a timely, practical application of AR in retail.
AI-powered Personalization
Trend Overview
The seamless integration of AI into design tools empowered creators to personalize and elevate user engagement through algorithms and data analytics. Each interaction can now become deeply relevant to the user, exemplifying AI’s power to customize digital experiences.
Tools
Adobe Sensei
and
Google Analytics
are leading this movement by offering predictive capabilities that aid the design process. These tools deliver customized content and recommendations, helping designers analyze user data to meet individual needs. AI-powered personalization has redefined modern technology with user-centricity as a cornerstone for all creative decisions.
Trend Emergence
AI-powered personalization became popular in the 2010s when advancements in AI and data processing technologies began supporting real-time personalization. This period saw a rise in personalized experiences across streaming and content platforms in line with a broader shift towards more individualized content.
Early Example
Netflix's recommendation system made content discovery more efficient in the late 2010s. Although Netflix has been refining its website since the early 2000s, its use of algorithms to analyze users' viewing habits, ratings, and preferences set it apart from other streaming platforms. Other platforms soon followed suit, demonstrating the importance of designing user-centric services.
Cyberpunk and Neon Noir Aesthetics
Trend Overview
Characterized by futuristic technology and deep, glowing neon colors with dark backdrops, Cyberpunk and Neon Noir aesthetics introduced a visually arresting style to digital design. Vibrant color schemes, textured environments, and the combination of past and future elements make this trend a distinct, moody stand-out in UI/UX design.
Tools
Adobe Photoshop
and
Adobe After Effects
helped craft the distinctive visuals associated with this style. Photoshop allows designers to develop complex color schemes and textures, while After Effects adds dynamic, animated elements that enhance storytelling. Together, these tools help create rich digital worlds that cemented Cyberpunk and Neon Noir's influence.
Trend Emergence
Cyberpunk and Neon Noir aesthetics had a resurgence in the late 2010s, inspired by the revival of '80s and '90s pop culture with content like the "Cyberpunk 2077" video game and "Blade Runner" film. This trend blends nostalgia with futuristic imagination to create compelling visual experiences.
Early Example
Cyberpunk and Neon Noir aesthetics found an early application in Blade Runner 2049 promotional content. Characterized by dark, neon-lit visuals and futuristic themes, this style mirrored the film's immersive world. The film's website also exemplified Cyberpunk’s lasting influence in digital design.
Design Systems and Component Libraries
Trend Overview
A systematic approach to digital design through design systems and component libraries aimed to ensure product consistency across platforms. With a collection of reusable guidelines, the trend helps teams remain consistent with their themes and content across all platforms.
Tools
Figma
and
Storybook
powered this shift. Figma enables designers to collaborate, build, and centralize design components to ensure consistency, and Storybook specializes in organizing and reusing React components. Both brought design systems and component libraries into the current age of web development.
Trend Emergence
Design systems became standard in the late 2010s as digital products became more complex and teams grew larger. The need for a unified language across all projects became increasingly apparent, so design systems provided a common framework that could be adapted across an organization.
Early Example
Google's Material Design in 2014
provided a set of design principles to create a consistent user experience across all of Google's platforms. From layout principles and color palettes to animations and depth effects, this release demonstrated the potential to streamline design while maintaining high standards of usability.
Motion UI
Trend Overview
This design trend harnesses the power of motion to direct user attention, offer feedback, signal actions, and make the digital experience feel more alive and fluid overall. By making interfaces dynamic and animated, Motion UI enhances usability and boosts digital storytelling.
Tools
SASS libraries and Adobe After Effects plugins—such as Bodymovin for
Lottie animations
—allow designers to integrate high-quality animations seamlessly into their projects, ultimately lowering the barrier of entry to complex motion designs. With a wide array of predefined animations and transitions that can be customized to fit the specific needs of a project, these technologies provide a lightweight, scalable solution for adding high-fidelity animations to web and mobile apps.
Trend Emergence
As browsers became more capable of supporting complex animations in the late 2010s, motion UI became more accessible. This trend was also fueled by the growing understanding of the role of animation in enhancing usability and storytelling in digital design.
Early Example
The release of Material Design by Google in 2014 advocated for
motion UI
with a well-documented design language. The guidelines provided specific recommendations for how elements should enter the screen, how feedback should be given to users through motion, and how animations can create a more coherent understanding of the interface, encouraging their integration into a wide range of digital products.
Gradient 2.0
Trend Overview
Gradient 2.0 embraces bold, multi-color transitions. This modern version of an earlier trend is commonly used in backgrounds, overlays, and UI elements across mobile and web app development.
Tools
CSS Gradient
and
Sketch
made the creation and integration of gradients more accessible for a wide swath of designers. CSS Gradient generates custom gradient codes for web projects directly, and Sketch’s various gradient tools can be used to apply the trend to multiple elements. Most importantly, these platforms empower designers to get creative.
Trend Emergence
Gradients reemerged in the late 2010s when designers sought new ways to bring depth to digital spaces. The renewed interest in gradients went hand in hand with advancements in web standards, such as smoother transitions, which help enhance a brand’s identity.
Early Example
Gradient 2.0 can be seen in Spotify’s branding, specifically in its playlist covers starting around 2016. These gradients conveyed the emotion associated with music through vibrant, multi-color transitions, ultimately creating a memorable visual identity and enhanced brand experience.
2020s - Present
Maximalism in Web Design
Trend Overview
Maximalism creates visually abundant digital experiences with diverse typography, immersive imagery, and lavish use of colors, textures, and patterns. The trend shows users a world where more is more, inviting viewers to explore and interact with rich brand experiences.
Tools
With creative tools for creating intricate compositions, design platforms like
Adobe XD
,
Figma
, and
Sketch
empower designers to explore maximalism. These platforms also enable real-time collaboration and experimentation, allowing creatives to work together to craft bold, expressive designs.
Trend Emergence
Maximalism emerged in the late 2010s and early 2020s as a counterpoint to minimalism. As users began to seek out more individualistic web experiences, maximalism offered a way to break free from these outdated constraints from the early 2010s. Advancements in web technology also field the trend by allowing for more complex designs without compromising performance.
Early Example
Gucci's approach to web design in the late 2010s featured a vibrant mix of patterns, images, and videos layered to reflect the brand's eclectic aesthetic. It created a striking sense of depth, carefully crafted with bold colors, mixed typography, and dynamic elements. By fully embracing maximalism, the website stood out in a digital landscape often dominated by cleaner, more refined designs.
Biophilic Design
Trend Overview
This holistic trend incorporates the essence of nature into digital environments. It transforms digital spaces by reflecting the natural world, often through nature-inspired patterns, colors, and imagery. It aims to enhance user well-being and create restorative, visually appealing spaces.
Tools
Adobe XD
,
Figma
, and
Sketch
foster the creation of interfaces that promote tranquility and connection to nature. Designers can use their advanced customization feature to realistically bring the calming effects of the natural world into the digital realm.
Trend Emergence
Propelled by the recognition of nature’s benefits for mental health, Biophilic Design was put on the map in the 2020s to digitally mirror these effects. With people forced to spend more time indoors and online due to COVID-19, the trend also parallels a larger societal practice to shift towards sustainability and wellness.
Early Example
The rise of
Headspace
and
Calm
in the early 2020s featured nature-themed visuals and audio to cultivate calming user experiences. Similarly, the redesign of the Apple Health app with iOS 14 in 2020 introduced nature-inspired backgrounds and motifs to soothe users.
Neumorphism
Trend Overview
Neumorphism breathed life into digital interfaces with a tactile style reminiscent of the physical world. Marked by its soft, pseudo-3D appearance, this trend leverages subtle shadows, highlights, and blended background colors to infuse digital environments with a sense of realism and familiarity. It effectively marries the clean simplicity of flat design with nuanced depth and texture.
Tools
Adobe XD
,
Figma
, and
Sketch
allowed designers to explore the nuance of neuromorphism with precise element manipulation and user-friendly prototyping. Their shadows and highlights features in particular helped users achieve the characteristic soft, extruded look.
Trend Emergence
Neumorphism gained attention in the design community around 2020. Designers were seeking new ways to add depth to digital interfaces, and the trend emerged as a middle ground between flat design and the highly detailed textures of classic skeuomorphism. The result was clean, minimalistic layouts with depth cues that suggest a touchable interface.
Early Example
Neumorphism’s early rise can be traced back to concept designs that gained traction on platforms like Dribbble and Behance in late 2019 and early 2020. These concept designs showcased how shadows, gradients, and subtle highlights could be used to create interfaces that mimic the physical world's tactile qualities while maintaining a minimalistic aesthetic. One widely recognized example came from Alexander Plyuto, who designed a
music player interface
featuring soft, inset shadows to create the illusion of depth for buttons and controls.
Glassmorphism
Trend Overview
Glassmorphism is distinguished by its hallmark transparency and blur effects that mimic the appearance of glass. It invokes a sense of depth and layered interaction, typically with a frosted glass look where elements seem to float over one another while retaining a cohesive structure. The trend often leverages light and dark backgrounds complemented by vivid color accents.
Tools
Adobe XD
,
Figma
, and
Sketch
simplified the creation of this style's signature transparency and blur effects. By facilitating experimentation with layering and real-time collaboration, they enable designers to experiment with glassmorphism's distinct, ethereal quality.
Trend Emergence
Glassmorphism gained popularity in the design community around 2020 in tandem with increasing interest in neumorphism. The trend was partly inspired by advancements in web and app development technologies that allowed for more complex visual effects, including backdrop filters and advanced layering techniques. It was further validated by the redesigns of major operating systems and applications around this time, which widely incorporated elements of transparency and depth.
Early Example
Apple's November 2020 release of
macOS Big Sur
introduced glass-like elements in various components, such as the menu bar, windows, and control center. The design utilized translucency and blurring effects to create a sense of depth and hierarchy while also maintaining an overall cohesive aesthetic. The new direction was both visually striking and functional, providing users with a clear and intuitive navigation experience.
Extended Reality (ER)
Trend Overview
Extended Reality (ER) technologies dramatically blur the lines between the physical and digital worlds. The trend spans Virtual Reality (VR), Augmented Reality (AR), and Mixed Reality (MR) to immerse users in virtual environments, overlay digital information onto the real world, or a combination of both. It actively redefines the ways we engage with content, learn new skills, train, and communicate.
Tools
Unity
and
Unreal Engine
empower designers and developers to push the boundaries of traditional digital interfaces. Known for its high-fidelity graphics and real-time rendering capabilities, Unreal Engine supports the development of visually stunning and complex ER applications. Unity offers a versatile development environment for AR and VR creators to craft experiences across entertainment, education, and beyond. Both tools pave the way for a future where digital interactions are intuitively integrated into our physical reality.
Trend Emergence
Driven by improvements in hardware (like VR headsets and AR glasses), software, and content creation tools, the 2020s have seen rapid advancements and increased adoption of ER technologies. As these resources become more accessible and user-friendly, industries from education and healthcare to entertainment and retail are exploring ER's potential to create compelling immersive experiences.
Early Example
The launch of
Pokémon GO
in July 2016 exemplifies how ER technologies can blend with the physical world to create engaging and interactive experiences on a mainstream scale. Though primarily an AR application, the game leverages GPS and AR technologies to allow players to catch virtual Pokémon in real-world locations.
Interactive Animation
Trend Overview
Interactive animation goes beyond visual appeal to infuse digital design static elements with movement and life. Whether guiding users through a flow, providing contextual feedback, or simply adding an element of delight, this trend reacts to user inputs with depth, personality, and memorable visual signals.
Tools
Framer
,
Rive
, and
Webflow
power interactive animations. Framer is renowned for its dynamic prototyping capabilities, Rive easily incorporates into apps, and Webflow enables designers to build complex animations without coding. Together, they broaden the scope of digital design.
Trend Emergence
This trend took hold in the 2020s thanks to advancements in web technologies(like CSS3, HTML5, and JavaScript frameworks. Designers began to integrate animations more thoughtfully into interfaces during this time, focusing on usability, accessibility, and enhancing the user journey rather than just aesthetic appeal.
Early Example
The Apple Watch's UI features a range of animations that respond to touch, crown rotations, and wrist movements. First introduced in April 2015, this early example of interactive animations in digital design set a benchmark for how devices could respond to human movement to enhance functionality and user delight.
Neubrutalism
Trend Overview
Neubrutalism adds a modern digital twist to Brutalism's stark, straightforward principles. Its unapologetic use of bold colors, heavy typography, and asymmetrical layouts challenges the polished norms of modern digital aesthetics, instead returning to raw, authentic, and functional design that demands user attention.
Tools
Adobe XD
,
Figma
, and
Sketch
support Neubrutalist designs with robust typography tools, extensive color palettes, and the flexibility to experiment with unconventional layouts. They make it easy to integrate Neubrutalism's hallmark characteristics, such as heavy, impactful fonts and stark, contrasting colors.
Trend Emergence
Neubrutalism’s popularity rose in the early 2020s as designers sought to inject more personality and authenticity into digital interfaces. It emerged as a reaction against the sleek, minimalistic designs that dominated the previous decade, offering a more grounded, tactile approach. Its rise also reflects a broader industry shift towards direct and functional designs in a memorable format.
Early Example
The bold redesigns of multiple tech and cultural news sites in the early 2020s leveraged Neubrutalism's principles to stand out in a crowded digital landscape. Through heavy, assertive typography and raw, eye-catching layouts, these new designs aimed to increase the impact of their content through the captivating power of Neubrutalism.
Begin Your Build
Work with us to create the product, site, or brand you need.
Get Started
