Animation Articles https://design4users.com/tag/animation/ Fri, 12 Jan 2024 16:25:05 +0000 en-US hourly 1 https://design4users.com/wp-content/uploads/2020/06/cropped-favicon-32x32.png Animation Articles https://design4users.com/tag/animation/ 32 32 10 Hot UI/UX Design Trends To Start 2024 https://design4users.com/ui-ux-design-trends-2024/ Fri, 12 Jan 2024 16:20:49 +0000 https://design4users.com/?p=12221 Before starting a new year of creative work, let’s take a little glance at what’s popular in design at the moment. So, welcome to a brief review of some current hot UI design trends for web and mobile. Traditionally, it is packed with a massive bunch of UI/UX design examples by the tubik team. Complex […]

Сообщение 10 Hot UI/UX Design Trends To Start 2024 появились сначала на Design4Users.

]]>
Before starting a new year of creative work, let’s take a little glance at what’s popular in design at the moment. So, welcome to a brief review of some current hot UI design trends for web and mobile. Traditionally, it is packed with a massive bunch of UI/UX design examples by the tubik team.

Complex 3D Graphics

With the rocketing evolution of modeling tools, 3D graphics and animation started getting increasingly popular in recent years and have taken a well-deserved place on different lists of design trends. Still, for the last year, the complexity and detailing of 3D images integrated into user interfaces have reached the levels not expected before. Although modeling and rendering can take quite a long time, using this type of visuals helps push the horizons of creative approaches and get more flexible in demonstrating specific objects that are hard to visualize in any other way or getting the modern look for web pages or mobile screens.

The company website for the prosthetics producer uses a complex animated 3D model to make the product demonstration impressive and lively.

nova-post-advent-calendar-case-study-tubik-blog

The interactive advent calendar interface for the Nova Post Christmas campaign presents the long-scroll map with tons of beautiful 3D images, setting the festive mood and enhancing visual storytelling.

Creative Motion Design

Animation in user interfaces also moved to the next level this year, with designers in a non-stop search of applying it to various stages of interaction with websites and apps. Creative motion graphics not only support the usability and accessibility of the interfaces but also spice them with eye-pleasing details and amplify emotional appeal. Moreover, creative approaches to animation in UI play a big part in activating the power of the aesthetic-usability effect.

The hero animation for the poster store app landing page works as an impressive presentation of the product and strengthens immediate aesthetic appeal.

From the background full-screen animation on the hero section to slight motion added to numbers and copy blocks and unobtrusive motion graphics, all animation on this business consultancy website home page works as one system, engaging users into learning more without getting bored or tired.

The animated explainer illustration for the Synthesized website helps to visualize highly technological processes as well as becomes an integral part of the general visual style concept for the service website.

The web platform for bartending courses uses a variety of motion effects to make the user experience intuitive and engaging and amplify the website’s elegance.

Web design for AI-powered content hub uses a variety of web animation effects to turn the scrolling process into a captivating experience and make necessary visual accents.

Diverse Video Content

One more aspect that grows its presence and diversity in user interfaces of all kinds is video content. Realizing the effectiveness of videos for modern users, stakeholders and creative teams find more and more ways and formats of integrating them into the user experience, from full-screen background videos to small ones on some tabs or screen sections. That’s especially brightly seen for digital marketing, with websites and landing pages quickly setting the needed atmosphere and demonstrating service or items to their audience.

Hales Freight website features video content in the hero section of the web page to instantly uncover the essence and benefits of the service to the visitors.

The website for the niche water brand supports the atmosphere and sets the association of their water’s refreshing naturalness with video pieces integrated across website pages.

The home page of the virtual reality studio employs prominent atmospheric video pieces to make an impressive and emotional presentation of the service. 

The website of a mental health guide uses a block of changing video fragments sharing positive vibes.

Scrollytelling

One of the currently popular approaches we have already had the chance to realize within our recent projects is scrollytelling. Basically, it is turning the process of scrolling the page or screen into captivating storytelling with the right balance of visuals and text design and spiced with animation to make it even more dynamic. This approach is also applied in the form of various timelines telling the story of a brand or company development.

Advocacy Through Walls website, an interactive guide for public defenders, community-based organizations, and other social justice advocates on how to ethically and intentionally engage with people currently incarcerated or directly impacted by systemic advocacy, is based on the scrollytelling approach.

The business consultancy website uses the approach of engaging scrolling on the About page to uncover the stages and milestones of the company’s development and achievements.

Emotional Hero Section

One more trend showing the steady growth of popularity is using the potential of a hero section to make the first seconds of contact with the user not only informative and functional but also emotional. Prominent visuals and videos, captivating motion graphics, and bold, concise typographic parts featuring taglines and/or brand names greatly help achieve that goal.

MOVA Brewery website home page has a hero section setting instant emotional connection with the visitor via the party-vibe full-screen photo with branded beer glasses and the tagline uncovering the idea behind the beer space connecting people.

Posse website hero section sets the instant feeling of cheerful and sincere communication. 

The color palette, solid massive typography, ultra-minimalistic layout, and atmospheric full-screen photo background in the hero section set the starting point for the adventure emotion offered on the website of the service organizing sledding expeditions.

Mental health guide website uses the emotional hero section, combining a bright, bold typographic part with black-and-white background video.

The landing page for the fitness application builds an emotional connection in the hero section via the catchy prominent typography of the tagline and engages in scrolling down with the visual hint of the mobile interface, which is presented via eye-pleasing animation when the visitor scrolls.

Typography Experiments

Typography in user interfaces has always presented the field for experiments, and recently, app and web designers have been demonstrating new levels of creativity in approaches to font choice and combinations. Playing with decorativeness, original graphic details, and motion, they continue pushing the borders of making the interface design look unique, elegant, and aesthetic with the help of chosen typefaces.

The ecommerce marketplace website design uses a beautiful decorative font for taglines, headings, and primary text blocks.

The music instrument producer’s website plays with a bold sans-serif font for headings and original all-caps font for the text block, setting the visual connection to modern music technologies.

wildfarm-drinks-ecommerce-website-case-study-tubik

The light and airy website of the niche wild farm drinks producer uses a neat decorative primary font that plays well with the idea of wildflowers and grasses.

Interactive Menus and Catalogs

Having checked the benefits of interactivity and its contribution to positive user experience, today, designers and developers don’t limit themselves to the well-checked types of interactive content but constantly experiment with new approaches and ideas. That results in new kinds of cool interactive details we can find on modern websites and apps, and trendy interactive menus and catalogs are among them lately, making the websites and mobile apps more desirable and handy.

The winery website home page features an interactive menu showing the photos on hover of the specific position.

Interacting with the menu, the visitors of the clinic website get to the page that uses a split screen layout and changes the photo depending on the chosen position. 

The water brand website uses the interactive catalog with text-labeled vertical tabs, allowing users to switch between product pages.

Immersive Experiences

With the technological advancements of AR and VR in recent years, more and more brands integrate immersive experiences into their communication and marketing campaigns. Immersive digital marketing involves users in an experience that merges elements of the surrounding environment with personalized digital content connected to the specific customer journey and purchase needs. So, that means that creatives also have to think over new approaches to design this kind of user experience and make it the factor amplifying the positive result.

The poster store application allows users to fine-tune the search of the poster and try the chosen item in their specific interior.

Mix of Visuals

More and more interface designers tend not to make a choice upon one type of visual content but employ a mix of different visuals, finding the balance of effective combinations. So, websites and apps can feature photos and videos, illustrations and collages, and major and minor motion graphics working as one system and supporting each other to make the pages and screens more usable, informative, and eye-pleasing.

The bartending school website uses a combination of various visual content, from full-screen video to atmospheric photos and neat line illustrations.

The mental health guide combines photos, videos, and illustrations for emotional and diverse communication of the ideas to the reader.

winery-website-design-tubik

The winery ecommerce website features a combination of beautiful vineyard photos, product presentation photos of bottles, and sophisticated line illustrations to visualize the production stages.

High-Level Conceptuality

One more trend of the recent months in UI design is the creation of high-fidelity concepts to think over user experience for future technological advancements, gadgets, and devices that are not massively used or affordable yet but are already talked about actively enough to consider interaction design for them.

Here’s an elegant design concept for a product manager application created to be used effectively on a foldable device; in this project, our team set the challenge to think over both additional limitations and possibilities that foldable devices open for the user experience. 

Some UI/UX and interaction design solutions for the vibrant and engaging mobile application concept of the AR-based social network.

Sure, these are only some of the actual trends in web and mobile design at the moment, so let’s move on and see what the new year of design will bring out.

New articles on user experience design are coming soon; stay tuned.

Useful Articles

Here’s a bunch of articles to dive deeper into the theme of usability and user experience design.

6 Essential Elements of a Company Website Design

Big Little Details: 7 Helpful Elements of Web Usability

UX Design: Types of Interactive Content Amplifying Engagement

Negative Space in Design: What It Is and How To Use It

5 Types of Images for Web Content

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

How to Make Web Interface Scannable

The Anatomy of a Web Page: Basic Elements

Error Screens and Messages: UX Design Practices

Web Design: 16 Basic Types of Web Pages

 

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение 10 Hot UI/UX Design Trends To Start 2024 появились сначала на Design4Users.

]]>
Branding Case Study: Identity Design for Health Application https://design4users.com/branding-identity-design-health-application/ Fri, 05 May 2023 11:06:55 +0000 https://design4users.com/?p=11744 The new creative story is up: welcome to check another identity design case study by the tubik agency team. In this project, the task for designers was to create a bright brand identity for Uplyfe, the new health app that employs the power of medical science, innovative technologies, and artificial intelligence to help users get […]

Сообщение Branding Case Study: Identity Design for Health Application появились сначала на Design4Users.

]]>
The new creative story is up: welcome to check another identity design case study by the tubik agency team. In this project, the task for designers was to create a bright brand identity for Uplyfe, the new health app that employs the power of medical science, innovative technologies, and artificial intelligence to help users get healthier and feel better.

Product

Uplyfe is an AI-powered health app that reacts to your behavior in nutrition and exercise and provides personalized recommendations. The app is designed to help users improve their health, as well as prevent or manage non-communicable diseases (NCDs). Founded by specialists with medical and healthcare backgrounds, the product shares the philosophy that a healthy lifestyle is the best medicine. The product team is based in Switzerland.

Research and Design Approach

Creating a brand image, the design team has to consider all the major ways the brand employs to communicate with its users and customers. Even an excellent logo design may not work effectively if it’s designed in a creative vacuum without a clear understanding of where and how the brand will use it, what environment it will be integrated into, and how it will be distributed. That’s why the first stage of design is all about deep research, asking tons of questions, and building up a great deal of communication between the brand team and the design team. This process is vital as not only do designers get a more comprehensive view, but also, brand holders start looking at their product from different perspectives and asking themselves new questions. You can read more about the design process for branding in one of the earlier articles:  together with the client, we discuss and define ‘the soul’ of a client’s brand. That helps us to create strong branding and identity, ‘the face,’ for products and companies. From the brand model to the design system, we build the identity that translates the product values.

The essential point to take into account about Uplyfe’s brand image was that, in a nutshell, it is not a product solving a narrow circle of specific health problems but a comprehensive eco-system of building a healthy life, adapting its recommendations to users’ goals and performance. What’s more, it’s based on a scientific approach but simple and accessible for the broad target audiences of different ages, from youngsters to the elderly. The app aims at being used by both people with NCDs and healthy people who want to improve their lives. As the team is based in Switzerland and that’s its core market at the moment, the research phase included the analysis of what kind of health services and apps are demanded and popular in this area.

To define the design approach, user personas were developed and analyzed as well as mood boards were created and discussed to determine the compelling visual design perspectives.

Based on that, our team created a complex brand design for Uplyfe.

Brand Graphics

Logo

The final logo design is a combination mark made up of a symbol and a typographic part presenting a brand name. The elegant and curvy symbol is balanced by the simple, solid, and highly readable font chosen for the text part. The color palette is based on a combination of pure colors that provide good contrast and work well both in digital and analog spaces.

As for the symbol, it employs a triangular shape. According to the psychology of shapes, a triangle is an energetic and dynamic shape always associated with motion and direction. The lines are placed so that human eyes automatically move to the triangle’s top or in the direction it is placed. An upright triangle brings feelings of stability and balance.

Also, the symbol intentionally doesn’t feature any visual triggers or prompts that are typical for the medical theme. The major goal in identity design for Uplyfe was to step aside direct associations with medical treatment, hospitals, and the like, as the application goes beyond that and is positioned as a helper in supporting a healthy lifestyle in general. What’s more, for many people with NCDs, their states of health are a matter of everyday life, like, for example, those who have diabetes, so the app would rather avoid day-by-day connection to that from the medical perspective and focus on helping users make their life better in those conditions. As well, a part of the target audience consists of people who have no specific health issues but would like to enhance their general physical conditions, so the logo directly connected to the medical theme could create confusion about the nature of the Uplyfe service and lead to losing a part of the audience. Instead of associations with medical treatment, the logo had to transfer the strong message of a bright, healthy, and well-balanced life.

_tubik_Uplyfe_logo_animation

To increase the logo’s flexibility for different visual design goals, the designer developed a set of variations, including a black-and-white version, monochrome variants on light and dark backgrounds, and options with a gradient background based on the corporate palette.

tubik_Uplyfe_logo_variations

Digital touchpoints: app graphics, favicon, logo animation

But brand design goes much further than well-crafted and tested logo design. Together with the client, we defined the touchpoints and channels via which the brand communicates with its customers to create an appealing and balanced visual style covering them all. This way, the brand image looks and feels consistent, and brand recognizability increases.

First, let’s take a look at how branding was integrated into the digital product. Here’s the logo animation for the splash screen: it gives a clear visual connection with the brand from the first seconds and, at the same time, makes waiting bright and dynamic while the app is loading. Also, below, you can see how the branded app icon looks for the Uplyfe application.

And here’s a glance at the favicon for the app landing page. Favicon, also known as a URL icon or bookmark icon, is a particular type of symbol representing the product or brand in the URL line of the browser and in the bookmark tab. It allows users to get a quick visual connection with it while they are browsing. Although small and not prominent, this interface element is essential for effective web promotion; it contributes much to web usability and good recognizability of the brand’s visual identity.

The concept of the custom branded illustration was also developed to experiment with the general style of brand graphics that could be used for social networks, banners, and other marketing goals.

tubik_Uplyfe_app icon favicon

Going further, the extensive set of neat icons, both in corporate colors and in monochrome versions, was designed to support visual consistency for diverse branding and user experience goals behind the application and its pages in social networks.

tubik_Uplyfe_special_icons

Landing page design

One more important channel of app promotion is a landing page. For mobile applications, it is a web page created to set another touchpoint that informs users about the nature and benefits of the app, engages them to try it, and provides shortcuts to downloading it. Moreover, sticking to the brand style and color palette, the landing page strengthens the brand image’s web presence and recognizability.

Here are different design concepts for the landing page of the Uplyfe application.

tubik_Uplyfe_-landing page design

Landing page employing dark background, prominent app demonstration screens, and bright color accents

tubik_Uplyfe landing page design

Landing page design based on light, airy background and big custom illustration in brand style

tubik_Uplyfe landing page design

tubik_Uplyfe landing page design

Landing page design concepts with atmospheric background photo content setting the visual connection with the theme of healthy life. The photo also works as a gaze-directing directional cue: on the slide with yoga, the woman’s fingers direct users’ eyes to the CTA element in the header.

Social networks

Naturally, digital products are mainly promoted via digital channels of communication, so the next step of brand design for Uplyfe was considering its consistent identity in social networks.

Here’s how the Facebook page for the app looked. The concept features custom header images based on graphics combining abstract shapes and recognizable objects like a microscope, providing a quick visual connection with the brand style, the theme, and the goals of the service. Also, another illustration is shown as an example of theme graphics for posts.

tubik_Uplyfe social page design

Here’s how the same approach is adjusted for the Twitter page.

tubik_Uplyfe social media page design

And here’s a look at the brand image concept on Instagram and Facebook for mobile. The system of icons works effectively as the covers for Instagram highlights. Also, the general style of brand graphics for Instagram posts is offered to make them consistent, attractive, and recognizable, sharing the brand mission and valuable information for the followers.

tubik_Uplyfe social media page design

Printed stuff: business cards, posters, lightboxes, billboards

Talking about the more tangible side of branding, here’s how the business card design looked.

tubik_Uplyfe_business_card

What’s more, the style, curvature, and shapes used in the process of design exploration for icons let the designer develop the design system for brand posters and other stuff or merch that could be involved in marketing.

tubik_Uplyfe brand poster design

Another direction to take into account was the design of outdoor advertising to spread the word about the application in various urban spaces, such as billboards with motivational taglines or lightbox ads informing about the app’s benefits.

tubik_Uplyfe_billboard design

tubik_Uplyfe_billboard design

tubik_Uplyfe_billboard design

This project demonstrates how the comprehensive design approach covers different aspects of the ways the brand uses to connect with its customers and how much more should be done to develop an attractive and informative brand identity than just logo design.

New design case studies are coming soon; keep up with the updates.

More Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the tubik team.

FarmSense. Brand Identity and Website Design for Agricultural Technology

Synthesized. Website Design for DataOps Platform

ProAgenda. Identity and Website Design for Golf Management Service

BlockStock. Brand Identity and Website for Minecraft Models Resource

Carricare. Identity and UX Design for Safe Delivery Service

ShipDaddy. Identity and Web Design for Shipping Service

Illuminating Radioactivity. Interactive Web Design for Education

Lumen. Website for Museum of Mountain Photography

GNO Blankets. Branding and Web Design for Ecommerce

Designer AI. Dashboard and Graphics for Fashion Service

Shpin’s Wine. Identity Design for Family-Run Winery

 

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Branding Case Study: Identity Design for Health Application появились сначала на Design4Users.

]]>
UX Design: How Video Content Can Enhance User Experience https://design4users.com/ux-design-video-content-for-user-experience/ Mon, 01 May 2023 19:06:58 +0000 https://design4users.com/?p=11739 Integration of video content into web pages and mobile screens has been a steady trend in user experience design for the last few years. In this article, let’s review how videos can be used as a part of the user interface, what types and design practices are popular, and how video content enhances UX design […]

Сообщение UX Design: How Video Content Can Enhance User Experience появились сначала на Design4Users.

]]>
Integration of video content into web pages and mobile screens has been a steady trend in user experience design for the last few years. In this article, let’s review how videos can be used as a part of the user interface, what types and design practices are popular, and how video content enhances UX design for web and mobile. Packed with various UI design examples by the tubik design team.

case study water brand ecommerce website tubik

The niche e-commerce website for the water brand uses different atmospheric videos to make the user experience positive and emotional.

Types of Video Content in Interfaces

People are overloaded daily with tons of diverse information coming from various channels. So, make no mistake, most visitors to a website or users of a mobile application aren’t going to spend much time learning about products or services, especially the new ones. In these conditions, video can become another effective way of communication, informative, dynamic, and attractive.

A catchy video crafted with an understanding of the target audience is a tool for attracting customers’ attention as well as a well-checked method of informing them quickly and brightly. Video content activates several channels of perception – audio, visual, motion – simultaneously, and usually does that wrapped in telling a story. Such a combination of factors often makes a video presentation strong, emotional, and memorable.

Hero section video used as a part of the home page for the gardening company website

Content and Goals Perspective

From the perspective of the content packed in motion and the goals set behind it, there are several popular types of videos we can often come across on different websites and applications.

Welcome (introduction) video: these are videos mostly used on websites, especially company and portfolio websites. This video usually aims at welcoming and greeting visitors and introducing a company, service, or person in a friendly and lively manner. Another option is the “about” video created to tell more about the company, people working for it, mission, achievements, etc. Videos of this kind should be quite short, concise, and telling a visitor the core information that could engage them to see more.

Promotional (commercial) video: this type of video rooting in TV commercials and movie trailers. It’s created to inform people about a product, service, event, brand or company, new release or premiere, major updates of the product, and so on, and so forth, in a way that encourages people to learn more, buy, or join in. It’s a video playing a big part in increasing brand awareness and focused on getting the target audience aware of the offer and its benefits.

Promotional video presenting Carricare brand

Showcase (showreel) video: that’s another type of video coming from the movie industry. It’s a video showcasing a set of previous works by a person or company. This one is usually quite long, about 2-3 minutes, and is often used as an impressive addition to the portfolio of people representing various creative spheres like design, animation, filmmaking, acting, modeling, marketing, and the like.

Tubik showreel videos

Short showcase video giving a glance at the icon design project for HUAWEI EMUI 10

Showcase video for the case study about the design process for the Glup delivery application

Video testimonial: these videos share the feedback from buyers and users, show them describing their experience with the brand, product, or company, this way sharing the signs of trust and loyalty and contributing to positive brand image and reputation.

Background video: this kind of video is used as a part of website design when the background of a page is chosen not to be static. As technical improvements in web development don’t stop, video backgrounds and any other kind of video integration into web pages aren’t seen as a great challenge anymore. So, web designers often turn to full-screen videos as a way to capture people’s attention, create the needed atmosphere, and give an instant glance at the product or service.

Background videos on the landing page promoting the mindfulness application.

Mywony website design uses full-screen video setting the instant connection to the nature of the product

Website for the editorial about insomnia uses a background video to instantly set the mood

Product video: these pieces of video are widely used as a part of the e-commerce user experience, in particular on product pages and landing pages, to give details about the product’s features and advantages, and inform customers about the problem-solving potential of the product.

Pet Shop website uses video content to demonstrate the products they offer in the proper environment and the way to connect faster to buyer’s needs

Hero section video: that’s another kind of web page video that is used as a part of the hero section, which is the above-the-fold part of the web page, often the home page, that includes a prominent and attractive piece of content, be it an image, video, text, slider or other elements. Choosing a video for the hero section, designers often breathe life into it, make it dynamic and strengthen its emotional appeal.

Hero video for PointZero25 event agency website

Hero section video used on the confectionery website home page

Video guides and tutorials: these are classic how-to videos. They present video instructions of a different kind showing the step-by-step process of interacting with a product, a piece of information (for example, a recipe), etc.

Explainer video: basically, this video explains to the visitor what the website, app, product, company, or service is about, and often answers the most frequent questions that may arise about it. Being a part of branding strategy, it is focused on presenting the benefits of the product or service and explanation about how to. It often employs storytelling showing the flow of interaction or sharing particular cases and situations, and infographics helping to understand the effect quickly.

Explainer video for OffCents

Entertaining videos: these videos are more about fun rather than information. Their main goal is to encourage emotional feedback and make it connected to a particular product, brand, or company. What’s more, videos of this kind have a high virality potential as having fun; visitors may want to share it with their friends or audience in social networks, this way spreading a word about the brand.

Educational videos: these videos usually become a part of educational platforms and can present a diversity of content, from specially crafted models explaining the processes to videos of wildlife or people doing different jobs.

nature encyclopedia UI animation tubik

Educational videos about wildlife integrated into the Nature Encyclopedia app

Design and Technical Realization Perspective

From the perspective of how it’s made, we could mention such common types of video content for UI design:

Live-action videos: these videos are closest to the classic filming process and feature real people, objects, or locations. Their major benefit is a strong collection with real life that has the great power of setting associations and encouraging viewers’ empathy.

Atmospheric live-action video as a part of the home page hero section for the Lumen Museum website

Example of a live-action video combining human talk and visual demonstrations

Fitness application using video tutorials on how to do exercises

Screencast videos: this video type captures the screen this way, showing particular processes. It is especially effective for various tutorials and product videos presenting digital products and software.

Screencast video capturing the illustration process in Procreate

Live-action screencast videos: as it’s clear from the name, this type presents a combination of two previous types. In this case, viewers can simultaneously see what is going on the screen and the person giving explanations.

Animation (cartoon) videos: these videos are very close to cartoons, which means that they present the animated sequence of many still images that can be presented in a variety of visual styles: 2D (flat), 3D (having dimension and depth), and stop-motion (capturing individual frames and combining them in a sequence).

Animated video created as visual storytelling support for the article about gamification in UI design

Motion graphics videos: these ones are based on animated graphic elements, for example, shapes or text, aimed at catching attention, impressing, and setting the theme, but not employing storytelling. They also become a great help in cases when complex or abstract information should be visualized in a way that is easy to understand.

Motion graphics video background for digital transformation agency

Ecommerce website design using impressive motion graphics video for the home page hero section

Photomontage videos: this video type imitates a slideshow, combining a set of photos in an animated sequence that can be supported by special effects, voice-over, or music. This type can work effectively to present various events, charities, or social issues, tell about companies, mark achievements and milestones, and the like.

Whiteboard videos: this is a captivating type of video, where the story, guide, or information flow is unveiled as a picture drawn step-by-step on the whiteboard.

Typographic videos: this is a type of video based on moving text. It helps to make text content perform in a more dynamic and emotional way and engage users that are not keen on reading static text content not to miss core messages. In most cases, it is supported by the voice-over or sound accompaniment enhancing the message.

360-degree (immersive) videos: trendy and getting more and more popular, this type of video records a view in all directions at the same time, this way allowing the viewer to get the full panoramic view. These are, in particular, effectively used as a part of the shopping or booking user experience.

Functions of Video in UX Design

Being a type of content that is quite complex in production and often needing much effort for smooth integration, videos in user interfaces are often in question. However, there are different functions they can cover, often better and faster than other types of content. So, by analyzing the target audience and business goals and considering these functions, designers and creative teams make a decision if they need a video and, if yes, what type is better for their objectives and budget. Let’s take a quick glance at them.

Information

The core factor in making video content considered a part of the user interface is making the information flow clear and easier to perceive. In many cases, a short 1-minute piece of video can share a chunk of information that would take far more time from the visitor reading it in text or trying to understand it from screenshots, mockups, and the like. That is a basic reason why various explainers, tutorials, and guides work well in video format.

No doubt, background videos applied to many web pages or screens now make them visually and emotionally appealing as well as informative, as the image instantly captures users’ attention much faster this way. Also, it supports the feeling of the integrity of all the layout elements.

An explainer video on the home page of Credentially website is placed in the above-the-fold area and lets visitors quickly check the benefits of the service

Atmospheric video integrated into the museum website design concept quickly gives visitors a glance at it in a realistic and dynamic way

Demonstration and Presentation

One of the strongest points of video content is the ability to demonstrate products or services using all the channels of perception at the same time. If visitors are interested, watching the video, they can consume quite a lot of information in a very short time without the need to scroll, read, see the pictures, and keep all those different pieces of information in mind in the process. As the human attention span is quite short, video often allows for using it effectively and gets higher chances of visitors’ engagement and website conversions. For instance, explainer videos or product videos allow for catching how to deal with it while the visitor is on the wave of interest. As well, for services that are focused on visual outcomes like design, advertising, illustration, art, modeling, and so on, well-crafted showcase videos can become the fastest way to the future client’s heart.

Video demonstrating Fitness App interactions

Short videos used instead of static images to demonstrate the options of models on niche accessories website lets customers learn more about the product and get a positive impression

Video demonstration of the product in the Drink Recipe application helps to impress users and supports the atmosphere of a bar or restaurant

Storytelling

Another strong point of video content is its ability to tell a story in a smooth and engaging way, according to the laws and techniques of visual storytelling, supported with voice narration or music enhancing that effect. People like stories: they clarify things, illustrate situations, are often fun and aesthetic, they are often easier to perceive and remember. In most cases, videos based on storytelling feature a plot that moves through 3 basic phases: showing pain points, activating emotions, and offering the solution.

Promotional video for the cleaning service tells an illustrated story using cute characters and sharing positive vibes

The video version of the case study on design for the Annual Awwwards 2020 website

Atmosphere

As well as images, many videos integrated into UI are super powerful in setting the needed atmosphere, which is a part of customer experience with the offered service, product, place, or event. This way, it pushes demonstration to a higher level, letting the visitor catch the vibe in split seconds. That’s one of the reasons why immersive videos are getting more and more popular and demanded.

The background video for the home page of the agricultural holding website impresses with the atmosphere from the first minute

The hero section video of the website for forest camping creates the needed cozy atmosphere from the very start of interaction with the website

The atmospheric hero section video on the winter holiday website shares the views of the destinations users can travel to, and this way lets them get stunned and dive into the mood instantly

Emotion

Whatever logical and clever people are, many of our decisions are partly or fully based on emotions, not only facts. “I feel it,” “I like it,” “I want it” – aren’t these reasons often stronger than any logic, calculations, and analysis? Video content is often a good way to cover that point: as it employs multiple perception channels and can collect various factors of influence together in a time-saving concentrated piece, the chances it sets the emotional connection to the audience get much higher.

Hero section video for a horse riding club sets strong emotional appeal

Archive video added to the article devoted to the historical period strengthens the emotional appeal of the page

Points to Consider

Loading Time

This is a core thing to consider when you decide upon video integration into the website or application. This issue requires a thoughtful approach from developers and thorough testing. That’s especially vital for the web pages that are expected to attract much organic traffic but can be downgraded in search results just because the loading time of the page is too long while the bounce rate is high as some visitors won’t wait long to see the page and will just move away. Think twice, consider technical options, and do your best to test that aspect. Otherwise, there won’t be much effect from even a very well-crafted video if it’s not even got a chance to be seen.

Contrast Issue

Integration of video content, especially full-screen backgrounds well-spread these days, requires much skill and effort to find the right contrast and hierarchy of elements and integrate the navigation and text content properly so that the page wouldn’t turn into an illegible mess. Test the contrast on various screens, devices, and in different environments to make sure it doesn’t spoil general readability and doesn’t break navigation leaving users lost in all that beauty.

Other Ways to Communicate

Make no mistake; video content is not a cure-all or a magic wand, as it could seem from everything mentioned above. Not all people like videos. Not all of them, interacting with your website or app, find themselves in conditions that are convenient for watching a video. So, don’t make the video your only way of communicating with visitors or customers. Support it with other ways of communication, like text and images. Otherwise, you risk losing a part of the audience just because video as a way of getting information is not comfortable for them. The “Show, don’t tell” rule may work, but the “show and tell” works better in this case.

Manipulations

Take care of allowing a visitor to manipulate the video where it’s needed, especially if it’s long and heavy. Think twice about using autoplay, as it may appear less convenient for your audience than the ability to control if they want to watch a video or not. Make sure that the user can control the volume of the sound part as audio autoplay as soon as the web page or screen is loaded is reported to be one of the most annoying aspects of the user experience. Put shortly, consider all the basic manipulations that will allow users to feel more confident with the video content in your web or mobile product.

Mobile Adaptation

What looks well on a desktop or TV, may not work at all on a much smaller mobile screen. As more and more digital interactions of different kinds move to mobile these days, this aspect should also be well-considered and tested for all types of content, including videos. Make sure that it looks clear and legible and is well-adjusted to the mobile screen of any kind.

Mobile adaptation for a niche e-commerce website selling accessories

Sure, that’s only the tip of the iceberg in such a deep and diverse issue as video implementation into user experience design, so we’re going to share more examples, UX practices, and tips about it. Anyway, this article may help UX designers, marketing specialists, and businesses to take into account the different benefits and pitfalls of using video content on websites and mobile apps. Stay tuned, and don’t miss the updates!

Useful Reading

For those, who want to dive deeper into the topic, here’s a list of handy articles:

UX Design: Types of Interactive Content Amplifying Engagement

Photo Content in User Interfaces: When and How It Works

Aesthetic Usability: Beauty on Duty for User Experience

5 Basic Types of Images for Web Content

Motion in UX Design: 6 Effective Types of Web Animation

Types of Contrast in User Interface Design

5 Pillars of Effective Landing Page Design

How to Improve Website Scannability

The Anatomy of a Web Page: Basic Elements

How to Design Effective Search

Web Design: 16 Basic Types of Web Pages

Videos as Instructional Content: User Behaviors and UX Guidelines

Step-by-Step Guide to Custom Promo Video Design

 

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение UX Design: How Video Content Can Enhance User Experience появились сначала на Design4Users.

]]>
Illustration Art: Funny 3D Characters by Arcade Studio https://design4users.com/illustration-art-3d-characters/ Mon, 27 Feb 2023 19:40:27 +0000 https://design4users.com/?p=11267 Meet a new creative name in D4U Gallery: in a new art collection, for the regular dose of some artistic inspiration, let us introduce Arcade Studio, the team of designers specializing in visual storytelling through animation and illustration, mostly in trendy 3D clay style. Their portfolio is filled with digital artworks reflecting the diversity of characters, […]

Сообщение Illustration Art: Funny 3D Characters by Arcade Studio появились сначала на Design4Users.

]]>
Meet a new creative name in D4U Gallery: in a new art collection, for the regular dose of some artistic inspiration, let us introduce Arcade Studio, the team of designers specializing in visual storytelling through animation and illustration, mostly in trendy 3D clay style. Their portfolio is filled with digital artworks reflecting the diversity of characters, bright, cheerful, cute, and funny. So, here we’ve collected some of our favorites for you. Enjoy the big set of 3D characters and get inspired!

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

arcade studio 3d characters design

Check more design projects by Arcade Studio on Behance.

New D4U Gallery issues are coming soon; keep up with new posts.

For more inspiration, check the sets of other posts from our D4U Gallery, where we gather impressive creatives to share their art with you, for example:

Сообщение Illustration Art: Funny 3D Characters by Arcade Studio появились сначала на Design4Users.

]]>
14 Logo Design Cases for Different Business Goals https://design4users.com/logo-designs-for-business-goals/ Thu, 24 Nov 2022 19:17:07 +0000 https://design4users.com/?p=11045 With the rocketing number of brands, companies, and services, the number of diverse logos also grows. Welcome to review a collection of logo design concepts by the tubik design team: check 14 logo design examples for various companies, services, and products. Logo for Dry Cleaning and Laundry Service This logo is designed for Levapp, the […]

Сообщение 14 Logo Design Cases for Different Business Goals появились сначала на Design4Users.

]]>
With the rocketing number of brands, companies, and services, the number of diverse logos also grows. Welcome to review a collection of logo design concepts by the tubik design team: check 14 logo design examples for various companies, services, and products.

Logo for Dry Cleaning and Laundry Service

This logo is designed for Levapp, the company providing on-demand dry cleaning and laundry services. The identity design is based on simple shapes that, if you look closer, form a combination of L and A in a symbol, presented in a lovely and catchy color combination.

logo-design-levapp-company

The branding sign is amplified by a smooth and dynamic motion for the options of use in digital products.

Logo and Identity for Traveling Service

Here’s a glance at the logo and identity design for gotikket, the company that offers an easy-to-use service helping travelers to cover their needs. The wordmark shares a positive mood and is balanced with a contrasting bold color palette.

logo-design-gotikket-service

To add even more fun and make the logo lively, here’s an animated version.

Logo for Bakery

This is a logo design and branded packaging concept for a small bakery, Gustavo, named after its founder. Custom illustration featuring the baker’s silhouette is combined with a sophisticated typography part for the brand name and contrasting sans-serif font for the explanatory part.

bakery logo design tubik

bakery brand logo design tubik

Logo animation to be used for the goals of web marketing adds even more elegance and smoothness to the idea.

Logo for AI-Based Chatbot Service

This symbol has been designed for Ortico, the platform producing and supporting AI-based conversational user interfaces and bots. Logo animation allows for making the smooth curves of the brand sign even more expressive for digital interactions.

Logo for Flight Rights Protection Company

This symbol has been designed for Aviar, the company that deals with flight rights protection. The designer created an elegant and bold symbol playing with visual metaphors of a plane and shield combined with the power of negative space.

aviar logo design tubik

Logo for Wine Brand

Shpin’s wine is a brand that originates in a small winery, where the love of wine has grown into a family business. It involves the whole family in the process of creating a unique and exclusive wine based on the tradition of classic winemaking. We’ve shared the creative process for the brand identity earlier in the case study: idea search, logo design, original illustrations inspired by art, and integration of all that stuff into the web interface. Take a look at the final logo variant.

branding-design-for-wine-brand

wine-identity design posters

Logo for Heavy Blankets Brand

Here’s the logo designed for GNO Wellbeing, the brand that produces and sells heavy blankets that let people get a good sleep that helps them to achieve their goals.  Through creative search and iterations, the team came up with a final logo: a beige outline logo symbol of a sleeping moon accompanied by a solid and simple typography part.

logo-design-gno-branding-case-study

logo-design-gno-branding-case-study

logo-design-gno-branding-case-study

Logo and Brand Mascot for Party Game

Here’s a glance at the branding design for a fun party game called Dicey. The creative process for this project didn’t get separate parts for the logo and mascot character. The wordmark uses smooth lines; it’s elegant and stylish but also playful and friendly.

dicey-design-case-study-logo-black-and-white

dicey design case study logo mascot

Logo for Photo Sharing Service

This is a brand sign for Eyepic, the new-age photo-sharing service. The concept features color variations for the dark and light backgrounds as well as options for the vertical and horizontal composition of the elements in the combination mark. Also, you can see the design solution for the app icon.

photo_sharing service logo design tubik

Logo for Food Delivery Service

Quisine is an innovative service that delivers food of different national cuisines. It’s easy to use; it offers a big diversity of meals typical for different countries; it provides quick delivery and adds innovations to the entire customer journey, from making an order to receiving a meal. That’s what the brand image was based on. The company name presents a compilation of two aspects: quick cuisine. two contrast colors were chosen for the brand presentation, yellow and black.

quisine_logo-design-iterations

The choice of the font for the final logo was made in favor of serif to share the vibes of high-quality meals and fine dining.

quisine_logo_design

quisine packaging-design

Logo for CRM Service

This sign has been designed for the digital product, a CRM system that helps to manage clients, segment audiences, and make communication more productive and focused. The logo presents a combination mark, including a symbol and a typographic part for the brand name. The elements of the logo work well both together and separately, depending on the branding and marketing goals. The color palette combines the feelings of energy and stability that lie at the core of such a service.

CRM-service-logo-design-tubik

Logo for Crypto Startup

This logo has been created for the cryptocurrency startup called Enigma. The combination mark includes a symbol and a typographic part for the brand name. The elements of the logo work well both together and separately, depending on the branding and marketing goals.

enigma crypto logo design

Logo for Healthcare Service

Not only purely commercial and business projects need a solid brand strategy and identity design. Charities, healthcare, education, and the like also have to care about their branding to get a chance to connect to their target audience. Here’s a symbol created for a health service focused on cardio problems and helping people to keep their hearts healthy. The logo is aimed at being used on a wide variety of carriers and media, both offline and online.

cardio_health_service_logo_design_tubik

Logo for Car Cleaning Service

This one has been designed for the mobile app of Cleanerz, a service that provides innovative car cleaning on the spot with the use of eco-friendly technologies. For the brand logo and an app icon, the lettermark was chosen and transformed into a dynamic sign combining the energy of water and the power of fast movement.

cleanerz_logo_design_tubik

Today’s list is over, but studio practice is full of many other interesting examples of design concepts for different purposes and needs. Don’t miss new presentations and case studies in our future posts.

Useful Articles

Here’s a set of articles for those who search for insights into logo design and brand identity creation.

Branding Design Process in Tubik: FAQ from Clients

Collection of Creative Logos for a Variety of Brands

Logo Design: Creative Stages

Basic Types of Efficient Logo Design

Shape and Color in Logo Design. Practical Cases

How to Use Mascots in UI and Branding

Why and When Brand Needs an Animated Logo

6 Creative Stages of Branding Design

 

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение 14 Logo Design Cases for Different Business Goals появились сначала на Design4Users.

]]>
10 Touching Award-Winning Short Films Packed in Stunning CG Art https://design4users.com/touching-short-films-cg-art/ Sat, 12 Nov 2022 17:30:58 +0000 https://design4users.com/?p=11041 Year by year, the sphere of CG art and animation pushes the boundaries of creativity and breathes life and beauty into numerous stories and games. In today’s episode of D4U Inspiration, we’d like to invite you to get touched, stunned, and impressed by a pack of amazing short films that employ the power of computer […]

Сообщение 10 Touching Award-Winning Short Films Packed in Stunning CG Art появились сначала на Design4Users.

]]>
Year by year, the sphere of CG art and animation pushes the boundaries of creativity and breathes life and beauty into numerous stories and games. In today’s episode of D4U Inspiration, we’d like to invite you to get touched, stunned, and impressed by a pack of amazing short films that employ the power of computer graphics and motion to touch the sophisticated strings of human souls and raise important themes to consider.

Let’s Eat

Umbrella

Present

The Wishgranter

WindUp

Coin Operated

The Little Shoemaker

Mind Games

Napo

Spring

Bonus: Believe in Love Advertising Short Video

Title image by Yibing Jiang

For more inspiration, examples of awesome packaging designs, impressive food photography and food styling3D illustrations, realistic 3D portraitslogo designs activating negative space, and other D4U Inspiration posts.

Сообщение 10 Touching Award-Winning Short Films Packed in Stunning CG Art появились сначала на Design4Users.

]]>
Case Study: Identity and Web Design for Niche Blankets Brand https://design4users.com/identity-web-design-blankets-brand/ Wed, 17 Aug 2022 20:10:17 +0000 https://design4users.com/?p=10844 Time for a new design case study, and this one is all about ecommerce and web marketing. Today we are unveiling the creative process by tubik agency on branding and web design for GNO Wellbeing, the company producing and selling special weighted blankets that improve the quality of sleep. Project Logo, identity, and ecommerce website […]

Сообщение Case Study: Identity and Web Design for Niche Blankets Brand появились сначала на Design4Users.

]]>
Time for a new design case study, and this one is all about ecommerce and web marketing. Today we are unveiling the creative process by tubik agency on branding and web design for GNO Wellbeing, the company producing and selling special weighted blankets that improve the quality of sleep.

Project

Logo, identity, and ecommerce website for the brand of weighted blankets

Client and Story

It’s not a secret that healthy sleeping plays a huge role in people’s physical and mental health, productivity, and creativity. GNO Wellbeing company produces special and well-checked heavy blankets that present a reliable and comfortable way to wipe out anxiety and racing thoughts and sleep better.

First, GNO weighted blankets were sold only via Amazon, and people bought the product quite well there. However, to reach a wider audience and increase profits, GNO founders decided to build a solid brand and create an ecommerce website to expand their sales. As well, they strived for a new identity that would be both modern and flexible for various marketing goals.

Logo Design

Traditionally one of the core tasks at the branding design process is creating a logo, and this case was not an exception. The client gave a clear direction set behind the brand message: GNO Wellbeing is the brand that helps achievers to get a good sleep that helps them to achieve their goals. They wanted the logo to be fun, modern, and youthful and wished to think in the direction of a symbol logo rather than a wordmark.

As usual, the logo design process started with the creative search for a general visual idea. What the designer had to consider was the flexibility of logo usage for a diversity of surfaces, from blankets and packaging to the website and social networks.

The first set of concepts played around letter variations.

Here’s the symbol featuring the letter G that covers itself. The curves and rounded corners give a cozy feeling. In addition, the covering gesture corresponds with protection from anxiety and sets the visual association with the blanket.

logo-design-gno-branding-case-study

Logo concept

design-gno-branding-case-study-label

Label concept

bag-design-gno-branding-case-study

Bag design concept

Another concept presented a curvy letter G with a wavy ending that refers to the flow of a blanket when covering someone.

logo-design-gno-branding-case-study

Logo concept

design-gno-branding-case-study-label

Label design

bag_design-gno-branding-case-study

Bag design

One more logo design concept was inspired by the folds on the blanket. Also, it referred to ripples in the water, which is associated with calmness.

logo-design-gno-branding-case-study

Logo concept

logo-design-gno-branding-case-study

Label design

logo-design-gno-branding-case-study

Bag design

From this iteration, the style of the first variant was chosen for the further creative search direction to continue and dive deeper into searching for a proper symbol that would be both attractive and informative.

The new set of logo concepts offered a variety of symbols that could be developed and polished for the final brand sign. The set included both color and outlined options; most variants featured recognizable symbols such as a sleeping cat, moon, dreamcatcher, and some more abstract signs.

logo-design-gno-branding-case-study

 

In addition, to get another angle of view, the graphic designer made the set of options for typography logos in different styles, from bold and minimalist to beautifying serif.

logo-design-gno-branding-case-study

Having considered all the options, the symbol featuring a peacefully sleeping and smiling moon was agreed upon as the most effective for the brand goals.

So, this option was further developed as a brand sign for different goals. The choice of color had to be made, as well the designer offered two options for each color solution, outline and filled.

logo-design-gno-branding-case-study

The choice of visual concept was made upon a beige outline logo symbol (variant 1) accompanied by a solid and simple typography part.

logo-design-gno-branding-case-study

Then the approved logo was applied to the branded packaging and blanket label.

logo-design-gno-branding-case-study

logo-design-gno-branding-case-study

logo-design-gno-branding-case-study

logo-design-gno-branding-case-study

 

One more aspect to cover for the identity design was packaging solutions for branded candles. The minimalist and elegant solution for the candle with a branded cork featuring the outline logo and the readable label that used color marking for different scents and clear typographic hierarchy to let the buyer quickly skim the information.

logo-design-gno-branding-case-study

Another point to consider was updating and improving the Amazon presentation as the company still continues using this sales channel as well. So, it was important to make the brand presentation consistent everywhere. We created new infographics for that goal that supported the design solutions for identity and web design.

logo-design-gno-branding-case-study

Web Design

The website design for the brand had to keep visual consistency and harmony with the identity concept, let users quickly catch the message, review the benefits of the product, and make a purchase.

The web pages feature a well-balanced combination of airy light and deep dark backgrounds, high-quality visual content demonstrating the product outside and inside, clear visual hierarchy, readable fonts, and digestible information blocks, making the website scannable and eye-pleasing.

The website uses the sticky header to make the core links and cart available from any point of interaction.

Here’s a look at the home page. Its mission is to inform visitors that weighted blankets are not just regular blankets; they help people to get over sleep disorders and reduce anxiety. To quickly demonstrate that benefit, designers integrated custom illustrations that add a good mood and emotional appeal to the website. The information is divided into clear, digestible blocks in which background color works as a visual divider. The CTA button in the above-the-fold area echoes the color of the logo.

blankets brand design case study tubik

Home page for GNO Wellbeing website

Smooth scroll animation makes the interaction even more dynamic and attractive.

Except for the hero illustration featuring the peacefully sleeping woman and instantly setting the needed mood and atmosphere, there were some more custom 2D graphics integrated into the layout: a lovely sleeping cat character featured on the popup for subscribers and the section of reviews and original icons reflecting the benefits of the product.

icons-gno-website-design-case-study

Original icons visualizing the product benefits

Reviews-gno-website-design-case-study

The reviews section integrated into a cozy night-theme illustration featuring a cat character. 

subscribe-popup-design-gno-case-study

The Subscribe pop-up window with the custom illustration of a sleeping cat

The product page gives all the details about the product, includes the video presentation, and allows for choosing the needed blanket and adding it to the cart. The light background, balanced and thoughtful use of negative space, instantly noticeable CTA button, and highly readable font create the solid visual hierarchy of the page and make it easy to scan and interact with.

gno-blankets-website-product-page

The GNO blankets are made with premium materials. It’s important to tell customers about it, but it’s even more effective to show it. So, a special 3D illustration of the blanket layers was created to give an impressive visual presentation of that aspect.

The About page also uses contrast blocks to present the pieces of content. In the pre-scroll area, it gives a quick message about the brand message with a clear and prominent tagline in combination with the important infographic-style numbers about the company and lovely photo content setting the needed theme. This block uses a dark background making the photos look deeper and the tagline even more prominent. The next block uses a light background, first of all for the sake of readability as it presents the bigger block of text telling about the brand.

gno-web-design-about-page

So, the website for GNO features three different types of visuals: photos, 2D illustrations, and 3D graphics, harmonically combined and balanced together.

Blog pages designed for the website also feature the same approach: they are airy, calm, and highly readable, with the careful selection of photo content that sets the consistent visual atmosphere.

blog_orange-gno-design-case-study

To make the website usable from any device, the team made the mobile adaptation of the pages considering the peculiarities of mobile interactions.

product_mobile-gno-website-design-case-study

In general, that was the case of tight and fruitful collaboration with the stakeholders to clarify the business goals and find ways to reach them by means of design appealing to the target audience and unveiling the benefits of the product.

Welcome to check the GNO Wellbeing website live.

More Design Case Studies

Tasty Burger. UI Design for Food Ordering App

Designer AI. Dashboard and Graphics for Service for Fashion Designers

Slumber. Mobile UI Design for Healthy Sleeping

Pazi. UX and UI Design for Vehicle Safety Mobile App

CashMetrics. UX Design for Finance Management Service

Bitex. UX Design for Stock Analysis App

Perfect Recipes App. UX Design for Cooking and Shopping

PointZero25. Identity and Website Design for Event Agency

BEGG. Brand Packaging and Web Design for Food Product Ecommerce

 

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение Case Study: Identity and Web Design for Niche Blankets Brand появились сначала на Design4Users.

]]>
24 Hypnotic 3D Animation Concepts by Webshocker https://design4users.com/3d-animation-concepts-webshocker/ Sun, 14 Aug 2022 19:50:58 +0000 https://design4users.com/?p=10818 Meet a new creative name in D4U Gallery: this time, for the regular dose of some artistic inspiration and motion amazement, we’d like to introduce the 3D artist and motion designer Matjaz Valentar, the founder of Webshocker design studio. His portfolio is particularly known for its diversity of detailed, captivating, and hypnotic 3D animation. So, […]

Сообщение 24 Hypnotic 3D Animation Concepts by Webshocker появились сначала на Design4Users.

]]>
Meet a new creative name in D4U Gallery: this time, for the regular dose of some artistic inspiration and motion amazement, we’d like to introduce the 3D artist and motion designer Matjaz Valentar, the founder of Webshocker design studio. His portfolio is particularly known for its diversity of detailed, captivating, and hypnotic 3D animation. So, here we’ve collected some of our favorites, both individual and integrated into web pages as hero animations. Enjoy and get inspired!

Check more artworks by Webshocker on Dribbble.

New D4U Gallery issues are coming soon; keep up with new posts.

For more inspiration, check the sets of other posts from our D4U Gallery, where we gather impressive creatives to share their art with you, for example:

Сообщение 24 Hypnotic 3D Animation Concepts by Webshocker появились сначала на Design4Users.

]]>
12 UI Design Trends for Web and Mobile We Started 2022 With https://design4users.com/hot-ui-design-trends/ Wed, 09 Feb 2022 18:53:19 +0000 https://design4users.com/?p=10588 Another design year is rocketing at full speed, yet nodding to our tradition, let’s take a look back and recollect what was popular and demanded in UI/UX design for websites and mobile applications for the last design year and what we started our new design year with. Here’s our annual review of design trends, as […]

Сообщение 12 UI Design Trends for Web and Mobile We Started 2022 With появились сначала на Design4Users.

]]>
Another design year is rocketing at full speed, yet nodding to our tradition, let’s take a look back and recollect what was popular and demanded in UI/UX design for websites and mobile applications for the last design year and what we started our new design year with. Here’s our annual review of design trends, as usual, packed with tons of web and mobile UI design examples by Tubik team. Join in!

design trends 2021 tubik blog

Diversity of shapes

Definitely, one of the hottest trends this year has been a great variety of shapes we both applied and observed in different designs. Shapes help to add playfulness and originality to the layout. What’s more, in many cases, they play the role of visual accents, attracting attention to particular elements or zones on the screen.

Various shapes applied to the design of the toy store website set the visual connection with kids toys like sorters and building blocks and help organize some of the interactive elements in a playful and catchy manner

Neat and curvy shapes as a part of elegant design for cosmetics e-commerce website

Video integrations

Using videos as an integral part of user experience design for websites and apps has been going from trend to solid tendency this year. Background videos and explainers, video tutorials, product videos, hero section video crops, testimonials, showreels, showcases, and screencasts – the diversity of video materials helps designers make interfaces more dynamic and engaging as well as allows users to get their experience more informative and emotional.

Awesome video background for the webpages of the e-commerce website selling niche perfumes

Atmospheric full-screen bird-view background video for the design of the website telling about mountain resorts

Lovely videos used for products demonstration on the e-commerce website for the pet shop

Airy and windy home page video for the yacht hiring website sets the atmosphere in split seconds

Accent line elements

One more trend rising in popularity is the smart usage of unobtrusive line graphics to provide visual accents in the blocks of text or support the integrity of different sections. Sometimes, they also work as directional cues attracting users’ eyes to particular elements.

tubik momatu website redesign

The website design concept for the Momatu app uses line graphic accents to attract attention to some keywords or work as directional cues.

Illusion Space website uses animated graphic accents adding dynamics to the pages

Headline underlayer

This year, the trend that showed itself brightly in web interfaces was applying bold, sometimes even enormous, headline or tagline text with a graphic or video underlayer, making it bright and attractive.

The home page for the ballet company website uses a prominent headline with a video underlayer in combination with an animated CTA element.

The prominent text block on the e-commerce website selling egg products uses the underlayer photo

Engaging motion graphics

Year by year, UI and motion designers push the limits of their own creativity when it comes to animation in user interfaces. This year was not an exception, bringing up new examples of impressive loading animation that makes waiting easy and fun, animated hints that make important interactions clear and buttons noticeable at once, hero illustrations livened up with motion, and many more types of motion elements that contribute to both usability and emotionality of web pages and mobile screens.

Lovely loading animation for the e-commerce website of a juice brand

Elegantly animated interactions for the page presenting a set of events for the art galleries website

Catchy animated elements and the background Maneki-Neko animation add uniqueness, fun, and mood to the Chinese restaurant website

Creative motion graphics for the website of Illusion Space

Typographic experiments

Another area for endless design experiments is typography, of course, as it is one of the crucial design elements influencing all the sides of user experience design. This year highlighted the following popular design solutions:

  • combinations of different fonts or styles of the same typeface in one piece of text
  • applying original fonts to highlight some text elements
  • playing out different text directions
  • impressive typography-based motion graphics integrated into the UI

The original combination of typefaces used consistently in the brand packaging and website design for egg products

Original typography-based home page design and product pages for the Bennett tea website

Impressive manipulations with typographic elements as a part of design approach for the website of editorial about insomnia

Web page design for the website promoting mountain resorts plays with typographic contrast and uses the prominent cut-off typographic part at the top of the page

art institute blog design tubik

Elegant and sophisticated website of art institute editorial plays with fonts and typefaces to enhance the beauty of visual presentation

Interactive pages

Interactivity as a way to impress, engage and retain users also presented an area of design experiments pushing this trend to the next level.

Interactive web page background for Annual Awwwards website

Interactive scroll at the home page of the toy e-commerce website

Interactive map page for the website of the shipping company

Horizontal galleries

One more trendy design solution for web interfaces of different kinds is applying animated horizontal galleries of photos to set the emotional connection and make the experience dynamic without scrolling.

Horizontal photo gallery on the About Us page for the Synthesized website

Horizontal photo gallery instantly setting the mood and atmosphere for the home page of the website presenting information about various art galleries

Horizontal gallery for the home page of the booking service website

Creative menus

Such a core part of navigation as menu this year got itself even more creative than ever before. Vertical menus, colored tabs, graphic elements, hover animations, and many other design solutions seem to have set the goal to captivate users even at the basic navigation levels.

Interactions with creative menu page of the website devoted to insomnia

Creative menu page for the Awwwards Annual website, literally playing with fonts

Interactive menu page for the egg product e-commerce website

Menu interactions with animated shapes for the website of the booking service

Creative menu with colored vertical tabs for art galleries website

3D Graphics and Animation

Another trend growing into the steady tendency is using 3D graphics in user interfaces, mostly animated to enhance the wow-effect. From massive hero images to product presentations in 3D or minor layout elements, they go beyond the limits and add aesthetic vibes to web and mobile screens.

Catchy and atmospheric 3D hero animation for the e-commerce website selling stationery and office supplies

3D graphics used for a stunning product demonstration on yacht hiring website

Futuristic 3D animation for the NFT page of the Crypto Blog design

3D animation for the hero section of the Uni landing page design

Prominent animated hero image for the website of the shipping company

webpage for developers website tubik design

website development company tubik design

Website for the web development company, applying a variety of 3D graphics on different web pages

Uncommon grids

Applying unusual grids as the way to organize the content in an original and good-looking way also set itself as another interesting creative trend, presented with numerous interface designs.

Habit builder app design and its landing page feature the original grid

Product page design for Bennett Tea website organizes information about the product in the set of boxes forming the original sort of grid

Chinese restaurant website features the original grid for the menu

This museum website concept uses atmospheric video content and an uncommon grid to present the interactive photo tabs telling more about the place

Custom illustrations

Although the number of resources with different ready-made and customizable vector graphics has grown much, it didn’t influence the high demand and steady popularity of creating unique illustrations for web and mobile projects. No wonder, as custom graphics crafted according to the goals and needs of the particular project present the powerful tool of user experience design, giving websites and mobile applications the original dress to impress as well as supporting their usability and desirability.

Custom illustrations for the Mayple website design

Elegant pencil-sketch-like custom illustrations in the mobile version of the website for furniture producing company

Custom illustrations for the pet shop website

Animated hero illustration for the Energizou website

Otozen website illustrations tubik design

Custom illustrations for Otozen application website

Certainly, that’s only a tiny part of the design trends in user experience design, evolving and developing day by day. Looking forward to seeing what’s next, we are totally ready for new creative challenges and out-of-the-box solutions for web and mobile interfaces.

UX Design Articles To Read More

If you want to check more creative sets of UX design concepts and articles on best design practices, here they are for you.

22 Impressive Web Design Concepts for Various Business Objectives

5 Basic Types of Images for Web Design

Hero Images in Web Design: When, Why, and How to Use

The Anatomy of a Web Page: 14 Basic Elements

Photo Content in User Interfaces: 7 Basic Ways to Use

Take My Money: UX Practices on Product Page Design

5 Pillars of Effective Landing Page Design

Design for Sales: 10 Creative UI Designs for Ecommerce

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение 12 UI Design Trends for Web and Mobile We Started 2022 With появились сначала на Design4Users.

]]>
17 Inspiring Examples of Mobile Interaction Design https://design4users.com/mobile-interaction-design-examples/ Thu, 27 May 2021 10:26:07 +0000 https://design4users.com/?p=10320 A new set of UI design examples is up to get you inspired, this time all about mobile interactions. Here we’ve gathered a collection of creative and attractive mobile prototypes in action, made by various UI designers or studios for different users’ goals. Enjoy and catch the vibe! For videos that are accompanied by sound […]

Сообщение 17 Inspiring Examples of Mobile Interaction Design появились сначала на Design4Users.

]]>
A new set of UI design examples is up to get you inspired, this time all about mobile interactions. Here we’ve gathered a collection of creative and attractive mobile prototypes in action, made by various UI designers or studios for different users’ goals. Enjoy and catch the vibe!

For videos that are accompanied by sound use sound volume control near the play bar to tune as you want

Audiobook app interactions by Khonok Lee (mind the sound in the video)

Fitness App interactions by tubik

Fanvest app prototype by PLATFORM

E-medicine application prototype by Outcrowd

Calendar app interactions by Khonok Lee

Personal Challenges app interactions by tubik

Music Player app interactions by Khonok Lee

QUAN app interactions design by PLATFORM

Finance tracker mobile interactions by tubik

Algorithm settings interactions for Investment App by Brave Wings

Fitness application prototype working in sync with smartwatch by PLATFORM

Banking app concept interactions by Khonok Lee (mind the sound in the video)

Mobile app interactions by Dimest (mind the sound in the video)

Quotes app interaction design by tubik

Neumorphic app prototype for the washing machine by Dimest (mind the sound in the video)

Savings app prototype by PLATFORM

Smart Home app concept interactions by Mammad Emin

More thematic design collections are coming soon for your inspiration, don’t miss them.

You may also like the big collections of e-commerce web design examples and ecommerce app designs, examples of web designs with 3D illustrationsneumorphic UI designsweb designs for eventsuser interfaces for finance managementcreative logo designsUI concepts for education, and other D4U Inspiration posts

Сообщение 17 Inspiring Examples of Mobile Interaction Design появились сначала на Design4Users.

]]>