What are morphisms in design and how to work with them

Contents:

• Skeuomorphism
• Flat Design
• Neomorphism
• Glassmorphism
• Squirclemorphism
• Conclusions

Each interface design trend related to the concept of "morphism" is recognized as trendy, but not all of them are suitable for use in specific projects. In this article, we will talk about how different morphism styles can help in creating your application or website, and also share recommendations for their implementation in Figma. Understanding the features of each style will allow you to choose the most suitable for your project and create an intuitive and attractive interface.

Skeuomorphism

Skeuomorphism is an approach to interface design that involves stylizing real-world objects using the textures of natural materials, volumetric shapes, and shadows. However, its significance extends beyond simple visual aesthetics. Skeuomorphism serves as a tool for explaining new and unfamiliar features through clear analogies and metaphors, making it easier for users to perceive and use technology. This approach not only makes interfaces more attractive but also improves user experience, helping users master new features faster.

The Recycle Bin on every computer is perceived as a trash bin designed to store unwanted files. Despite its simplicity, this function serves more complex purposes. Designers continue to use the Recycle Bin metaphor to make the interface intuitive for users without confusing them. The Recycle Bin allows for the temporary storage of deleted files, providing the ability to restore them, making it an important element of data management on a computer.

Skeuomorphism continues to exist in modern systems. Older iPhone apps retain their unique graphical features, indicating minimal changes to the interface. This confirms that visual elements that imitate real objects remain relevant and in demand in the design of mobile applications.

Artem Gorbunov is the art director of the Gorbunov Bureau. His experience and creative approach to design contribute to the successful implementation of projects in visual art and graphic design. Under his leadership, the team creates unique solutions that meet client needs and stand out from the competition. Artem actively monitors current design trends, allowing him to propose innovative ideas and effectively address any challenges along the way. Skeuomorphism makes no sense from a design or technological perspective. It's a design technique that irritates idealistic designers because it slows down design progress. However, in practice, skeuomorphism facilitates the onboarding of untrained users to new products, making interfaces more intuitive. Its use allows for the creation of a familiar environment, which is especially important when implementing innovative technologies.

Flat Design

Flat design, considered the successor to graphic skeuomorphism, became popular after the release of iOS 7 and continues to be used by many, including design studios and large corporations such as Apple, Google, and Microsoft. The basic concept of flat design is that the interface should be minimalist and not distract the user from completing tasks with unnecessary textures and volumetric elements. The flat design aesthetic emphasizes simplicity, clarity, and functionality, making it an ideal choice for modern digital products.

One of the most prominent examples of a flat design system is Material Design, developed by Google. This system is based on the physical properties of paper: it can be of various colors, cast shadows, and ink can be applied to it in a specific way. Despite the introduction of volumetric elements and shadows, the concept of flat design has remained unchanged. This allows us to create intuitive interfaces that harmoniously combine aesthetics and functionality, providing users with a convenient and pleasant experience when interacting with digital products.

The design systems of companies like Microsoft and Apple are based on different principles of using color, contrast, animation, and volume. However, the core idea remains the same: aesthetically pleasing textures don't distract the user from the main content. This creates a harmonious interaction, allowing the user to focus on the functionality and usability of the interface. High-quality design and thoughtful visual elements contribute to a better user experience and increase engagement.

Creating a flat design is not difficult, but to ensure that your app looks attractive across multiple platforms, it is important to follow the guidelines of the systems it will run on. This will help achieve consistency and improve the user experience. Consider the interface features and style guidelines for each platform to ensure your app looks professional and is intuitive for users.

• Apple
• Android
• Windows

Don't take guidelines as absolute truth. They are simply recommendations that you can ignore if they don't suit you. However, it should be noted that neglecting them may result in your app looking unconventional for the ecosystem. This, in turn, can reduce user trust and negatively impact the success of your product.

Neumorphism

Neumorphism is a design style that creates an extruded effect reminiscent of the rubber buttons on older devices. This approach became popular on the platform Dribbble and gained attention in early 2020, when discussions about it were actively underway. However, despite its appeal, neumorphism has not gained widespread adoption in web design due to issues with contrast between interface elements. This limitation makes it difficult for users to perceive and interact with the interface, making it less practical for everyday use.

In 2020, Accedia designer Ivan Savkov shared his experiments with neumorphism, demonstrating them through examples of a mobile app for home temperature control and an admin panel for an online store. These projects illustrate how neumorphism can improve the user experience, creating more intuitive and visually appealing elements. Innovative design approaches not only help differentiate a product from the competition but also improve user interaction with the app, an important aspect in digital design.

In the admin panel, the user may need to change the graph, view certain metrics, and highlight important data. To ensure convenient access to such functions, multiple buttons are required. However, the use of neumorphism in this case proved ineffective, as the developers had to reduce functionality to fit all the necessary buttons into the limited interface space. This limitation negatively impacts usability and reduces the efficiency of data processing. Optimizing the interface for administrators requires a more thoughtful design approach that will ensure access to all functions without compromising usability.

Creating and developing neumorphic interfaces requires a significant investment of time, since each element must be designed manually. This leads to an increase in the cost of design services. Neumorphism, while visually appealing, requires careful attention to detail, making the process more labor-intensive than other styles.

Ivan Savkov is a designer at Accedia. His professional experience includes developing innovative solutions in web design and user interface (UI). Ivan actively applies modern trends and technologies to create functional and aesthetically pleasing products. At Accedia, he focuses on improving user experience and enhancing customer engagement. Ivan's work is distinguished by its unique style and high-quality execution, making him an important member of the company's team.

Neumorphism has significant design potential, but for now, I would recommend avoiding its use in commercial projects. This style may seem attractive, but its shortcomings and perception issues can negatively impact the user experience. It's better to focus on more traditional and proven design approaches that ensure usability and accessibility for users. Interface designer Michal Malevich warns against using neumorphism as the primary interface style. This approach can make it difficult for users to perceive controls such as buttons. Difficulties with interface perception can occur not only for people with visual impairments but also for users of devices with low-quality screens. Therefore, when designing interfaces, it is important to consider accessibility and usability for all users. Michal Malevich is an interface designer with extensive experience in creating intuitive and attractive user interfaces. Michal focuses on making user interaction with a product simple and effective. His work is distinguished by its original approach and attention to detail, which helps improve the user experience and increase customer satisfaction. Michal uses modern tools and methodologies to ensure high-quality design and adherence to current interface design trends.

Buttons are perhaps one of the least successful examples of neumorphism, especially when pressed. For many users, the visual difference between buttons and regular text can be imperceptible. This creates problems with interface perception and can negatively impact the user experience. Neumorphism in design requires careful consideration to ensure controls stand out and are intuitive.

Michal suggests using neumorphism as a decorative element for plates and backgrounds. This modern design trend creates depth and volume, making interfaces more engaging and interactive. Neumorphism combines minimalism and realistic visuals to highlight UI elements and enhance the user experience. Using this design style can significantly enhance the visual appeal of your project, adding a modern and stylish look. Michal Malevich is a professional interface designer specializing in creating user-friendly and visually appealing user interfaces. His work is distinguished by its original style and functionality, making it popular in web design and app development. Michal strives for harmony between aesthetics and usability, allowing him to effectively solve user problems and improve their satisfaction. In his practice, he applies modern trends and technologies to create intuitive and effective interfaces. Cards and sliders are striking examples of neumorphism in web design. It's important to organize the card structure correctly: the hierarchy of images, icons, and text should be clear and understandable. If the card retains its functionality and aesthetic appeal even without a neomorphic background, this indicates the correct structure. Correct application of these principles contributes to a better user experience and increased engagement.

• Install the Neumorphism plugin.
• In Figma, create a frame and place a circle inside it. In the settings panel, in the Fill block, specify the color #F6F4FF. Don't use a completely white color, otherwise you won't be able to achieve the desired effect.
• Right-click on the circle, in the menu that appears, go to Plugins and click Neumorphism.
• In the window that appears, click the Neumorph' it! button.

In the settings, you can set the button height, determine the shadow intensity, choose the button shape and set the position of the light source. This allows you to fine-tune the visual perception of an interface element and improve its interaction with the user.

Mikhal Malevich is a professional interface designer with extensive experience in creating user-friendly and functional digital solutions. His works are distinguished by an original approach and attention to detail, which allows users to easily interact with products. Michal focuses on user experience, developing intuitive interfaces that enhance efficiency and customer satisfaction. Specializing in modern design trends, he creates visually appealing and practical solutions for a variety of platforms.

Cards and sliders are outstanding examples of neumorphism in web design. It's important to properly organize the card structure, ensuring a clear hierarchy of images, icons, and text elements. An effective box structure will work even without a neumorphic background, which is a positive aspect of its design. Optimizing visual elements and their sequence contributes to a better user experience and enhances information comprehension. Proper use of neumorphism can enhance visual appeal, but the fundamentals of design and functionality should not be forgotten.

Glassmorphism

Glassmorphism is an interface style in which elements appear as transparent glass. However, using glassmorphism, like neumorphism, is challenging due to the low contrast between elements. This can create difficulties for users with visual impairments or those using devices with low-quality screens. Reading text and perceiving glass buttons on a translucent background becomes challenging, highlighting the need to consider interface design for accessibility and usability for all users. Optimizing contrast and clarity of visual elements are important aspects when implementing glassmorphism in interfaces.

Despite certain shortcomings, elements of glassmorphism are actively used in large projects. An example of glassmorphism is the notification panel in macOS, which demonstrates an elegant combination of transparency and background blur, creating a modern and stylish interface. Glassmorphism imparts visual lightness and depth, making it a popular choice among designers and developers.

In the recently announced Windows 11, the Start menu and taskbar have become translucent. This innovation gives the interface a modern and stylish look, improving the visual perception of the system. Translucent elements allow for better integration of desktop content into the overall design, creating a more airy atmosphere. This design is not only aesthetically pleasing but also functional, as it draws attention to active windows and applications. The updated interface of Windows 11, including translucent menus and the taskbar, is aimed at improving the user experience and ease of use of the system.

The style used in Windows 7 became an iconic element of the operating system's design. It was distinguished by its simplicity and elegance, which made it popular among users. The Windows 7 interface combined functionality and visual appeal, offering an intuitive user experience. Design elements such as the taskbar and Start menu were designed with user experience in mind, contributing to the high ratings of this version of the operating system. Windows 7 continues to be a benchmark for modern interfaces, inspiring developers to create new design solutions.

Michal Malevich is a professional interface designer with extensive experience in UX/UI design. He specializes in creating intuitive and attractive interfaces that enhance user experience. Michal applies modern design trends and best practices to develop solutions that meet user needs and business goals. His approach combines creativity and analytical thinking, which allows him to achieve high results in interface design for various digital platforms.

Glassmorphism is only relevant when the transparency effect is used purely for decorative purposes. It is important to avoid using this style for buttons and switches, as such elements must have high contrast for usability and accessibility.

To create a glass effect, it is important to choose the right background image. It should be neither too simple nor too complex, so that the effect is clearly visible. We recommend using wallpapers from macOS or Windows 11 operating systems as a practice example. Selecting a high-quality image will achieve visual appeal and highlight the glass effect.

Create an attractive background that will effectively convey the necessary information and attract the attention of your audience. Ensure your banner is clearly designed and contains key messages relevant to the topic to increase its visibility in search engines. Use contrasting colors and a legible font to ensure information is easy to scan. It is also important that your banner is responsive and displays well on a variety of devices. Don't forget to include a call to action that will encourage users to engage with your content.

Upload an image to the layout and place a rectangular frame over it. This will create a clear structure and highlight important design elements. Using frames helps improve visual perception and organize content more effectively. Make sure the frame size and position match the overall style of the layout.

In the frame settings panel, in the Fill block, click the color swatch. In the menu that opens, set the color to white and change the fill type from Solid to Radial at the top.

Create a gradient line on the shape, which should be extended diagonally from one corner to the opposite one. Set the fill opacity to 30%.

In the settings panel, select the plus icon next to Effects. In the menu that opens, select the Drop shadow effect and replace it with Background blur.

Click the icon next to the background blur parameter and set the value to 40 pixels. This will achieve the desired blur effect, improving the visual perception of your content.

In the settings panel, click the plus sign next to Stroke. Then select the color swatch and set it to white. Set the opacity of the created border to 18%.

The border is ready to use in your layout. It's perfect for integrating into your design and enhancing the visual appeal of your content. Make sure to position the border correctly to ensure it matches the overall style of your project and attracts user attention. The morphism bar can be adapted to various formats and sizes, making it a versatile tool for your web design.

Background blur and opacity settings can be adjusted to suit your preferences. To make the morphism bar blend better with the background, choose a color that is close to the main background color. This will help create a more harmonious and aesthetically pleasing look for your content.

It is important to consider the principle of layering interface elements. The closer the bar is to the user, the lower its opacity should be. Ignoring this rule can lead to visual chaos, where bars merge with each other, creating an illegible structure. Proper use of transparency helps improve the perception of information and makes the interface more user-friendly.

Michal Malevich is an expert in interface design. His work encompasses the creation of intuitive and visually appealing user interfaces that enhance user interactions with digital products. Michal has a deep knowledge of UX/UI design, allowing him to develop solutions that meet modern user requirements and expectations. His practice focuses on ergonomics, functionality, and aesthetics, ensuring his projects are not only beautiful but also user-friendly. Michal Malevich continues to develop his expertise in interface design, striving to implement innovative approaches and technologies.

Glassmorphism is suitable solely for the decorative use of transparency. It is important to avoid its use in controls such as buttons or switches, as these elements must maintain a high level of contrast for ease of perception and interaction. Proper use of glassmorphism can improve the visual appeal of an interface, but functionality and accessibility must be kept in mind.

Squirclemorphism

The squircle is a unique geometric shape known as a superellipse. It is often called a "round square" or "quadruple wheel." Unlike standard rectangles with rounded corners, the squircle has smooth lines, making it both visually appealing and functional. This shape finds application in a variety of fields, from design to architecture. Compare the squircle with traditional forms to see its advantages in aesthetics and ergonomics.

The main difference is that not only the corners but also the sides are beveled. This gives the object a unique and modern look, significantly different from traditional forms. This design approach allows for more dynamic lines and shapes, making products more attractive and functional. The use of beveled corners and sides can also improve ergonomics and usability, which is an important aspect when creating modern products.

Squirkles are actively used in large projects, including icons on the iOS platform and user avatars in the Clubhouse app. This design style not only attracts attention but also improves the user experience, making interfaces more modern and attractive. Squirkles are becoming increasingly popular in the world of digital design due to their versatility and ability to fit harmoniously into various visual concepts.

Currently, there are no products in which squirkles occupy a central place in the interface. However, squirclemorphism doesn't suffer from the lack of contrast that neomorphism and glassmorphism do, making it versatile. If you choose to use squircles for all your buttons, keep in mind that unusual button and field shapes may be distracting to users.

Creating a squircle in Figma is a simple task that only requires adjusting the rounding of the corners. To do this, select the desired object, go to the parameters and set the rounding radius. This feature allows you to quickly and efficiently create elements with soft, rounded shapes, giving your design a more modern and appealing look. Since squircles are often used in interfaces and graphic design, proper application of this technique can significantly improve the visual aesthetics of your project.

• Highlight your button in the layout.
• In the settings panel, in the size settings block, specify the rounding of the corners near the icon—for example, 25 pixels.
• Click the icon, then the icon itself, and set the desired value. 60%—the rounding will be similar to iOS icons. 100% — the rounding will be maximum, like a real squirrel.

Conclusions

Skeuomorphism is a design approach that uses elements and shapes familiar to users from real life to explain new concepts. This style helps create intuitive interfaces, facilitating the perception of technology. Skeuomorphism effectively conveys information using visual analogies, which is particularly useful in training and onboarding users to new products and services. Therefore, it remains a relevant tool in modern design, improving user experience and interaction with digital platforms.

Flat design is a standard visual solution that is widely used in various systems. This design style has become universal and continues to be popular among designers. Flat design is characterized by minimalism, simplicity, and functionality, making it an ideal choice for creating user-friendly and intuitive interfaces. Designers are expected to continue using flat design, given its effectiveness and adaptability in modern digital products.

Neumorphism and glassmorphism are current trends in web design, which are effectively used as decorative elements. However, creating a complete interface in these styles can be challenging due to issues with contrast between elements. Both approaches create a modern and stylish look for interfaces, but require careful consideration of color palette and lighting to ensure readability and usability. It's important to note that neumorphism creates depth and volume, while glassmorphism emphasizes transparency and lightness. To achieve design harmony, it's worth combining these styles with more traditional elements to enhance the user experience. Squirclemorphism is a unique style that can be used to create buttons and icons. However, it's important to keep in mind that the squircle shape may be unfamiliar to most users. Therefore, it's important to use this style sparingly to avoid disrupting the intuitive interface. Properly chosen design elements based on squirclemorphism can add originality and modernity to your project, but their use requires careful consideration and testing with the target audience. Interface design is an important aspect of software and website development that impacts user experience. Proper interface design helps users navigate easily, effectively complete tasks, and interact with the product. Important elements of interface design include color scheme, typography, element placement, and interaction.

Modern interface design trends emphasize minimalism, usability, and adaptability. Users expect interfaces to be intuitive and the design to be visually appealing. Therefore, when developing interfaces, it is important to consider the needs of the target audience and conduct testing to identify problems and improve user experience.

Creating high-quality interface designs requires UX/UI expertise and an understanding of human-computer interaction principles. Using modern tools and technologies, such as prototyping and analytics, allows designers to create effective and modern solutions.

Thus, interface design plays a key role in the success of digital products, ensuring not only their aesthetic appeal but also their functionality.

• Interface Design: 8 Principles Every UX Designer Should Know
• What is Conversational Design and How to Design a Humane Interface
• Who are UI designers and what do they do?
• What are microinteractions and why are they needed?