Challenge and Client

To broaden its ways of reaching the audience and set an effective sales channel using mobile technology, Heineken Mexico strived to launch a mobile application that would allow users to buy beer and associated stuff like snacks, cups, and the like and get the orders delivered quickly. This is how the Glup application started.

The clients approached the tubik team with a range of design tasks: we worked on logo audit and tweaks, extended brand identity development, delivery application UI/UX design from scratch, website design, and creating custom 3D icons and 3D illustrations for marketing and user experience objectives.

Process

The creative process included two major directions: developing a flexible identity and creating a consistent functional UX design for the application.

Brand Identity Design

Firstly, it was essential to work on powerful branding that would be effectively applied to both marketing goals and mobile interactions, providing the integrity of the customer experience.

The brand already had a logo, but it had to be enhanced to get a more attractive and trendy look appealing to the target audience and become more pliable for a variety of brand advertising and marketing objectives.

Original logo color variations

Glup logo redesign

Certainly, the team took advantage of color power and its remarkable ability to set the needed mood in split seconds. The primary brand colors were yellow, setting the cheerful spirit and giving instant association to the beer theme, and deep purple, setting the effective contrast and playfulness and supporting the flexibility of the palette for the defined objectives. Also, an extended palette for different ways of product presentation was developed.

Another element of visual branding was the set of abstract geometric shapes to be consistently used across various branded items, advertising materials, delivery bags, social networking, and mobile application screens. What’s more, these shapes reflected the parts of the clock face setting a solid association with the speed of delivery as one of the key features. Take a look at the variety of branded items and advertising design.

Outdoor advertising

Social network posting templates

Billboard design

Delivery backpack design

Range of variants for delivery motorbike branding

Branded T-shirts design

Branded cap design

User Experience Design

The second direction of work was to think about the flawless and intuitive user experience for the mobile application. The interaction design was thoroughly thought-out to make the sales funnel work successfully and let the users move through the whole purchase flow smoothly.

The onboarding screens and categories use trendy and balanced 3D graphics presenting the products and setting friendly communication. Having a different visual style, these original graphics don’t distract users’ attention from the offered items.

The icons working as visual, illustrative markers for the different categories of items in the application also moved through several iterations and evolved from 2D graphics consistent with the general concept of visual branding and echoing its graphic elements to the big set of 3D icons following the style of 3D illustrations used across the app and in the onboarding process. Here’s a quick glance at the stages of the process.

Airy light screens of the application effectively show the products, while branded colors, graphics, and eye-pleasing gradients help to set attractive color accents for interactive elements, making navigation clear and intuitive. Custom icons in the interface also echo the brand palette, supporting both usability and consistency of brand performance. The customers are offered several ways to surf the range of provided items, including browsing the entire catalog, using filters to customize it, or using the internal search to find the needed item quickly. Plus, the button on each card on the catalog screens sets the shortcut to add the items directly to the basket without opening a card, which saves time and effort in cases when users have some faves and order the same items multiple times.

Here’s a quick look at the category screen. All categories are illustrated with stylish theme 3D graphics that instantly set the theme but do not overload the screen with too much detailing.

The shopping cart screen is informative and functional, based on the principles of external consistency and well-recognized mental models so that users can finalize their orders easily and effortlessly. A special progress bar with a text hint is used to visualize the ability to get free shipping for the order.

The home screen and promotions screen also feature sliders with banners for special offers or hot sales to attract more attention to them immediately.

One of the essential elements of building a solid mobile app brand and enhancing its online presence is supporting it on the web with a concise and informative landing page that uncovers the benefits and engages new users to try it. The landing page for the Glup application echoes the design approach of visual identity for the brand. It’s based on a bright background in primary brand colors separating different content sections, a solid visual hierarchy of text blocks, clear and visible call-to-action elements, and prominent visuals that present the balanced mixture of app screens and thematic 3D graphics to instantly set the connection with the essence of the offered service. Smooth web animation makes the user experience even more lively and dynamic.

So, as a result of the project, the Glup brand obtained a solid and effective sales channel via the easy-to-use mobile application, consistently reflecting brand identity and making the customer experience integral, engaging, and smooth.

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.

HP23. Website and 3D Animation for Prostheses Producer

Nova Post. Interactive Christmas Advent Calendar UI Design

FluxWear. Web Design and Development for Health Tech Product

Magma Math. Web Design for Educational Platform

HotelCard. Brand Identity for Hotel Offers Service

Nibble Health. Identity and UX Design for Healthcare Fintech Service

Physica Magazine. Web Design and Graphics for Scientific Blog

CSConnect. Website Design for Immersive Experience Marketing Platform

ProAgenda. Identity and Website Design for Golf Management Service

Kaiten. Identity and Product Design for Food Marketplace

THT. Website Design for Electrical Engineering Service

Crezco. Brand Identity and UI/UX Design for Fintech Service

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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

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.

Printed stuff: business cards, posters, lightboxes, billboards

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

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.

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.

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.

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.

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.

Mountain Resorts Website

This website design invites you to get stunned by the atmospheric mountain resorts and instantly sets the mood with the impressive video content and elegant typography. The website visitors are welcome to explore a variety of destinations with many interesting details smoothly integrated into the web page design, for example, the latitude and longitude of the specific spots. Also, the design concept literally plays with typographic contrast and uses the prominent cut-off typographic part at the top of some pages or the combinations of different fonts within one headline.

Lumen Museum Website

Here’s the website of Lumen Museum, the charming place that gives this fascination a photographic home with breathtaking views and interesting insights. The museum harmonically combines history and innovations, interactivity, and exploration, covering the subject of mountain photography from diverse perspectives. The website design features a variety of elegant pages, smooth animation, engaging scroll, video integration, and other design solutions to present the amazing museum content online. All the major pages of the website are based on a minimalist layout, impressive visuals, a light background, and mastered negative space, which makes them full of air and freshness and lets the visitors feel it from the first seconds. Also, such an approach ensures that all the diverse visual content, from archive black and white photos to modern shots and videos, will look good on the pages.

Learn more about this project in the case study about the Lumen Museum website design

Nature Expeditions Website

Here’s the concept of the website promoting expeditions that allow travelers to explore unspoiled nature and enjoy unusual destinations. The breathtaking full-screen hero video lets the visitors dive into the mood and get impressed immediately. Trendy shapes, elegant, neat fonts playing with upper case and lower case within one piece of copy, colored page backgrounds, and cool motion graphics pack the information in a stylish, emotional, and attractive dress.

Ecotourism Website

This website was designed to support people that want to try ecotourism and have some rest deep in nature and far from the urban hustle and bustle. The design shows the balance of readability and decoration in typography choice, solid visual hierarchy, and thoughtful combination of different types of visuals such as photos and custom theme illustrations. The home page features a stunning hero illustration while the Discover web page tells more about the destinations and types of holidays to book, with the video integration to amplify the effect. Mobile adaptation helps to save visual harmony and allows users to interact successfully with the website from any device.

Museum Website Concept

“A people without the knowledge of their past history, origin, and culture is like a tree without roots,” Marcus Garvey once said, and that may be the reason why museums will never be out of fashion. This design also touches on that important theme: it’s the website concept for Moesgaard Museum, a Danish regional museum dedicated to archaeology and ethnography. Impressive full-screen photo background lets the visitor instantly plunge into the atmosphere, while a solid typographic hierarchy supports both readability and visual elegance. The website uses interactivity to make the pages more engaging, and the pages demonstrate a thoughtful approach to data organization and visualization.

Geography Blog

This is the user experience design concept for a niche blog devoted to the topics connected with the environment, ecology, geography, and all things the modern state of nature. Here the design impresses the visitor with the spectacular photo and video content, illustrating informative and important text content and enhancing its emotional communication with the readers.

Event Booking Website

This design concept gives you a look at the website that helps visitors choose and book diverse events and experiences. The home page is made highly functional, with the form allowing users to search for the event in the above-the-fold area. In general, the website employs a variety of trendy shapes and minor geometric elements and makes shape and color contrast the primary tool of expressiveness, supporting beautiful photo and video content.

Winter Holidays Website

Take a look at atmospheric web design for the service helping to book accommodation and build routes for amazing winter holidays. The visitors dive into the magic of winter instantly due to the breathtaking video content naturally integrated into a minimalistic and airy web layout.

Yacht Hiring Website

Take a look at the website designed for the service allowing users to find and hire yachts. Atmospheric videos and beautiful photos, as well as the color palette, help visitors dive into the theme of sailing immediately. Interactive yacht visualizations assist in making the process of yacht choice both straightforward and fun, while sophisticated typography, functional color accents, smooth motion, and intuitive navigation make the web pages and their mobile adaptation attractive and easy to use.

New web and mobile design collections by our team are coming soon – don’t miss the updates!

Tubik Design Collections

If you want to check more creative sets of web, app, and graphic design examples, here are some of them.

Web Design: 11 Diverse Functional and Awe-Inspiring Website Designs

Product Page Design Inspiration: 17 Ecommerce Web Designs

App Design Ideas: 7 Nifty Mobile Application Design Projects

Information Beautified: Media and Editorial Website Designs

23 Impressive Web Design Concepts for Various Business Objectives

8 Bright Packaging Design Projects Employing Illustration Art

Mobile Design: 14 Stylish and User-Friendly App Design Concepts

Design for Sales: 10 Creative UI Designs for Ecommerce

Save the Planet: Web Designs on Environment and Ecological Issues

Web Design: 26 Examples of Creative Landing Pages

UI in Volume: 3D Graphics in Creative UI Design Concepts

Logofolio: 14 Logo Designs for Different Business Goals

Web Design: 16 Basic Types of Web Pages

Originally written for Tubik Blog, graphic content by tubik

Сообщение Atmospheric Web Design Projects Inspired by Travel Mood появились сначала на Design4Users.

Fitness application design by tubik

Activity tracker by Sigma Software Design

Workout app design by Odama

Fitness app design by Musemind

Fitness and yoga application by Outcrowd

Fitness app concept by Anastasia Golovko

Workout application by Enver Studio

Workout planner app by ever

Fitness tracker application by One Week Wonders

Fitness tracker application by tubik

New design collections are coming soon; stay tuned!

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

• people illustration gallery
• a big of user-friendly mobile applications
• logo design collection for various business goals
• captivating 3D animation concepts
• creative web designs with 3D graphics
• web design examples on ecological issues
• inspiring mobile interactions design examples
• Procreate illustration tutorials

Сообщение UI Inspiration: App Design Concepts for Sports and Fitness появились сначала на Design4Users.

Task Manager App

Having a life full of various things to do, we try to find the best way to organize them all neatly, and task manager apps become a great help. Here’s a glance at the design for one of them. With it, users can create multiple calendars, plan their tasks, and enjoy a simple aesthetic interface. Color marking helps to quickly monitor tasks from different calendars, while the dark theme supports the good balance of contrast to make text and bright color accents deep, scannable, and avoid eye strain in any environment of usage.

Calorie Tracker App

Those who care about being fit know what a big part healthy eating plays. Today, there are numerous apps helping people track their eating habits and analyze their influence on weight and well-being, yet we want to add our two cents to this theme. So, here’s the user interface designed for the app to calculate calories and give users a better understanding of the essence of the food they consume. An airy light interface with fresh green as the main color in the warm app palette, custom illustrations, and smooth animations make the app user-friendly, attractive, and engaging. But what UX designers put the most effort into is data visualization, allowing users to get confident about their stats and progress.

Exotic Fruit Ecommerce App

This mobile user interface design project is full of juicy colors and tasty looks. Take a look at the product screens designed for the e-commerce mobile application for buying various exotic fruit. Eye-pleasing, clear, and readable screens with prominent and attractive product images and contrasting call-to-action buttons are all aimed at making a choice and purchase process easy. The bright color marker gives the user a prompt that the shopping bag already has something added, special tab helps to choose the number of items quickly, just tapping on the slots and seeing the price changed immediately. An engaging and artistic main screen with custom illustrations of fruit allows for choosing a product right from there.

Cloud Storage App

Here you can take a glance at the design for a mobile app that offers a sort of cloud storage, nice and clean in the best traditions. The primary goal of design for such products is making them super intuitive and usable, with no distraction from content users interact with, but also aesthetic and eye-pleasing.

Drink Recipes App

This app design is filled with the vibes of a party or relaxation after a hard day. Here’s a mobile application with a big base of recipes and guides on how to make various soft and alcoholic drinks. The dark background sets the atmosphere of a bar or restaurant and adds depth and elegance to the photo and video content. Solid visual hierarchy, intuitive navigation, and data visualization help users feel confident.

Personal Challenges App

One of the interesting opportunities the modern world offers to us is various challenges that can be done remotely and supported by coaches from different corners of the world. Here’s a bit of app design devoted right to that theme. That’s a set of interactions for a mobile application helping people take various challenges online and boost their skills, knowledge, health, and fitness. It’s easy to see that elegance, readability, and usability were top priorities in the design process.

Quotes App

This UI design concept is about wisdom and inspiration packed together. Here’s the set of interactions for a minimalist and elegant Quotes App, the mobile application allowing users to collect wise thoughts and ideas from different sources.

Task Tracker App

Take a look at the user interface design for a task tracker that helps users to schedule and track various tasks, events, and things to do, this way increasing their productivity. An elegant and usable balance of dark and light backgrounds, lovely color accents, animated illustrations, onboarding, a variety of stats, clear transitions, and solid readability make the interface both handy and beautiful.

Finance Tracker App

This design project is devoted to money and finance. Here’s the finance tracker app that helps users to manage their incomes and expenses. Design solutions for this mobile application feature the dark theme, wise and balanced inclusions of custom catchy graphics, strong readability, and thought-out color accents for clear data visualization. Another thing worth attention is well-crafted and engaging UI animation.

Fitness Tracker App

Progress owes much to self-control, and in its turn, self-control is stronger when you are aware of what is going on. Here’s the design project whose aim is to help users keep their fingers on their health and fitness: that’s the Fitness App, with a personalized choice between a trendy dark theme and airy light theme, simple, clear, legible data visualization, highly intuitive navigation and eye-pleasing smooth UI animation for different states and clear communication between the app and its user.

Event App

Being sociable is not only fun and joy but also a challenge for your responsibility. Sometimes, it’s not that easy to keep everything in mind. Here’s the app solving that problem. That’s a simple mobile application for scheduling, keeping, and tracking events. It is aimed at young people as the core target audience, which determined the bright and trendy visual style as well as a catchy custom illustration used as loading animation.

Bees And Honey App

This app is about the sweetness and hard work combined together. It’s all about bees. Here’s a sneak peek at some mobile screens of the app that lets users buy and hire bee families as well as get some products and useful information connected to the theme. Another interesting design feature to attract the user’s attention is the playfully illustrated onboarding screens setting a friendly mood and tone of voice from the first contact with a user.

Gallery App

“Art is not a mirror held up to reality but a hammer with which to shape it,” Bertolt Brecht once said, and it doesn’t change with time and generations. Whatever progress is achieved, whatever technologies are invented, art still remains one of the biggest sources of inspiration, education, and motivation for mankind. More and more apps are rising to support it, and this app design continues showing you one of a kind.

This is a UI design concept for a gallery app performing the artworks by modern artists. The artists can sell their artworks here while visitors are able to choose the picture they would like to buy or just enjoy the variety of art. Sure, all the navigation and composition of the layout are built around visuals performed on the dark background to show them in the best light and supported with an asymmetric grid and smooth motion.

Bar Inventory App

This mobile user interface concept is about increasing the efficiency and productivity of bar workers. The app that is connected to the special scales quickly informs the users how much drink is left in the bottle opened before. This way, the process of inventory is made much faster, easier, and more intuitive. So, the interface is focused on clear navigation and the ability to use the app in a variety of environments.

New web and mobile design collections from our team are coming soon – don’t miss the updates!

UX Design Collections

If you want to check more creative sets of web, app, and graphic design examples, here are some of them.

Web Design: 11 Diverse Functional and Awe-Inspiring Website Designs

App Design Ideas: 7 Nifty Mobile Application Design Projects

Product Page Design Inspiration: 17 Ecommerce Web Designs

Information Beautified: Media and Editorial Website Designs

UX Design for Traveling: Impressive Web Design Concepts

23 Impressive Web Design Concepts for Various Business Objectives

Design for Sales: 10 Creative UI Designs for Ecommerce

Save the Planet: Web Designs on Environment and Ecological Issues

Web Design: 26 Examples of Creative Landing Pages

UI in Volume: 3D Graphics in Creative UI Design Concepts

Logo Designs for Different Business Goals

Web Design: 16 Basic Types of Web Pages

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

Сообщение Mobile UX: 14 Cool and User-Friendly App Design Concepts появились сначала на Design4Users.

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:

• people illustration gallery
• wine packaging design
• captivating 3D animation concepts
• Procreate illustration tutorials
• realistic 3D portraits
• impressive packaging designs 
• artistic portrait collages
• childhood illustrations
• 3D illustrations
• book cover designs
• sunny digital artworks

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

Project

Brand identity and website design for a new-age shipping and fulfillment service.

Client

ShipDaddy is a modern company that covers shipping and fulfillment services to other smaller but growing ecommerce companies and brands that have a product sold online but cannot fulfill by themselves for any reason. ShipDaddy solves this problem by warehousing their pallets, shipping products directly to customers, and repalletizing their inventory if it needs to be shipped to other places in bulk. Put shortly, the service takes over all the needed effort on shipping so that their clients could focus on other aspects of their business growth.

The ShipDaddy team came to us with two aspects to cover from the design perspective:

• logo and identity design for a company brand and diverse marketing goals
• website based on a consistent approach with visual branding and a super high level of usability for any category of the service clients

Tubik agency team created a brand identity and a website that would help redefine a third-party logistics company and let the world know that ShipDaddy people genially care about the success of their clients.

Process

One general direction to take into account for the entire design process was the harmonic combination of friendliness and seriousness: ShipDaddy is a super friendly and open company that deals with serious challenges. The ability to work on both branding and user experience on the web allowed for a comprehensive and consistent design approach for all the channels of company communication with the target audience.

Logo Design

The clients wanted the logo to be friendly, approachable, and cool. It had to give ShipDaddy customers the feeling of working with a partner in helping to build their business, not just a boring and impersonal shipping firm. What’s more, the service goes above and beyond shipping: it acts as a full-on consulting company that helps businesses optimize their entire ecommerce strategy, including shipping and logistics. The best solution to reflect the message was found in creating a mascot that would make communication of the brand with the client emotional and humanized as well as could cover a diversity of marketing goals and campaigns.

The creative process moved through the traditional stages from discussion and research to sketches and then a polished digital version. Focusing on people, Tubik created a cute and friendly brand identity based on the image of the company’s COO. The mascot was a human character that was friendly and funny but also quite adult and serious enough.

The final logo presented a combination mark made up of a mascot and a typographic part with a company name in a bold and highly readable font. The color palette included the primary colors (blue, yellow, red) as they look good in both print and digital presentations.

What’s more, the mascot was developed further in a variety of states and plots to get integrated into the website, social media, branded items, and marketing campaigns.

Packaging design

Stickers design

Favicon for the website and welcome screen for the mobile version of the website

Social media posting

Web Design

The website was designed following the branding guidelines and the chosen palette of corporate colors. As the mascot was chosen as the main tool of communication, it was decided to integrate it broadly into the website and illustrate most of the functions and content with it. To cover that goal, 20+ variations of ShipDaddy were drawn, depending on the context of the website sections and blocks. Also, they were used for branded stickers.

At the stage of the website UI, the creative team came up with an idea to connect the drawn character with the real-world environment. In the design process, it got clear that such an approach draws too much attention and may distract visitors from the content. Therefore, that idea was implemented only on 2 pages, the first screens of the home page and the Company page.

Let’s take a look at the website pages. All the website was made on Webflow – in our previous web design case study we told about the benefits and functions of this tool in detail.

The home page applies the split screen based on color contrast to make the text content readable and the CTA button instantly noticeable. The motion of a mascot cheerfully walking through the photographed warehouse adds fun, atmosphere, and emotion from the first seconds.

Another page combining illustration and photography into one visual effect was a Company page.

Mascot Motion: APNG for Webflow

To make the user experience dynamic, engaging, and memorable, as well as activate the maximum potential of a mascot, we decided to make the character live with animation on all website pages.

All animations were made in APNG format instead of the usual GIF for the following reasons:

• much better image quality with equal size (compare the samples here)
• APNG works efficiently with Webflow
• mobile devices support APNG as well as desktop, which makes the user experience the same across all platforms.

Breakpoints

Recently, 3 new breakpoints for large monitors have been added to Webflow. In addition to adapting to tablet and mobile, you can now modify the website design at 1280px, 1440px and 1920px width. That helped us to be even more flexible in adjusting the first screens of all pages so that they would look more consistent and proportional even on the largest monitors.

404 Page

If, for some reason, visitors click on an outdated or broken link and get to the 404 error page, they get the experience spiced with a bit of fun with a nice animation. That helps to smoothen the negative effect of dealing with an error and supports a friendly atmosphere of communication. A solid visual hierarchy of the page and an instantly noticeable CTA button help a visitor quickly understand what to do next.

Blog

In Webflow, you can create full-fledged blogs with any design, functionality, and navigation, including categories, author pages, search, subscription, and so on. The client gets access to the admin dashboard, where he adds articles in a simple and intuitive editor, and in a few seconds, they appear on the website. The best benefit of a blog for a company website is that you can greatly increase the organic traffic through regular posts and cross-links in the articles.

The main page of ShipDaddy Blog

Author’s page on ShipDaddy Blog

Blog article page

Page Transitions

Since quite a lot of character animations are integrated into the website, and individual blocks of text are animated as well, they don’t overload the transition process. The motion graphics are light-weighted, so the user experience is not affected badly. And so that the visitor could see all the content at once and avoid the situations when something is loaded faster while something longer, we made the transitions between the pages through the curtain, which disappears only when all the content is fully loaded.

ShipDaddy project is a bright example of a tight and friendly collaboration of the creative team and the stakeholders in the desire to reach the most customer-centric solutions possible.

New design case studies are coming soon. Stay tuned!

Design Case Studies

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

CSConnect. Website Design for Immersive Experience Marketing Platform

Fulfill. Illustrations and Web Design for 3PLs Marketplace

Roebuck. Mobile Design and Illustrations for Educational App

Kaiten. Identity and Product Design for Food Marketplace

Glup. Delivery App Branding and UX Design

THT. Website Design for Electrical Engineering Service

Komuso. Website Design for Wellness Tool

PointZero25. Identity and Website Design for Event Agency

Nonconventional Show. Website Design for Podcast

Crezco. Brand Identity and UI/UX Design for Fintech Service

FarmSense. Identity and Web Design for Agricultural Technology

Carricare. Identity and UX Design for Safe Delivery Service

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

Сообщение Design Case Study: Identity and Website for Shipping Service появились сначала на Design4Users.

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:

• people illustration gallery,
• Procreate illustration tutorials, 
• logo animation examples, 
• realistic 3D portraits,
• impressive packaging designs, 
• artistic portrait collages
• childhood illustrations, 
• 3D illustrations, 
• book cover designs, 
• sunny digital artworks

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