Tags Archives Category Books

UI/UX

UI Inspiration: 14 Elegant Interfaces Using Dark Background

The diverse collection of UI designs for web and mobile that use the dark background: check how dark side of UI works in practice on websites and apps.

Mobile and web interfaces with color schemes based on dark background have incredibly grown their presence for recent years. First of all, we can often come across this design trend in digital products based on visual content more than text. Dark colors used as a background are widely associated with prestige and elegance. They enhance the perception of images, make them feel deeper. The dark palette can make the interface less contrast, which means it’s more natural to observe in different environments. What’s more, such a choice of basic color now corresponds to preferences and expectations for quite a broad target audience that likes this stylistic performance. Today to add a bit of practice to the issue, we have collected a bunch of UI design examples made by Tubik designers for web and mobile: all of them are based on a dark background.

 

Designer Portfolio Website

designer portfolio website UI

There are two vital things to sell design services: well-done portfolio and happy clients. Here’s a web design concept focused on the first one: it’s a home page of a portfolio website for a designer that specializes in projects for celebrities, entertainment, music and film production. Dark background allows the custom hero illustration look more vivid and catchy and creates the association with the atmosphere of a concert stage.

 

Museum App

museum app

Do you like museums? What if you have the one right in your smartphone? Here’s a UI design of an interactive museum app supporting visitors: it helps to check the available exhibits, learn more about them in split seconds and can even make a route through all the museum to the exhibits you want to see. The dark base makes the 3D graphics look stunning.

 

Museu Landing Page

museum website

Another concept based on museum theme but oriented to web users. It is the UI design concept of a landing page promoting an art exhibition. The idea behind it was to make this sort of informative promotion aesthetic and unobtrusive for the user as well as highly informative. The general stylistic concept keeps the balance of minimalism and utility appealing via style, color, and motion. The dark background makes the photo visuals deeper and creates eye-pleasing contrast with the accent color.

 

Nature Encyclopedia App

nature encyclopedia app

Technologies change but the thirst for knowledge never goes out of fashion. Here’s another educational concept: an encyclopedia app that presents interactive infographics for a variety of themes. The presented flow features the chapter devoted to elephants and based on graphics that are quickly scanned due to the great contrast of colors.

nature encyclopedia app

nature encyclopedia app

Dark background in combination with contrast yellow color chosen for graphics makes the screens highly legible. Instead of using a variety of colors, the designer keeps the palette limited and plays with shades and sizes of the elements to build solid visual hierarchy.

 

E-Commerce Bakery Website

Bakery website design case study tubik

Here is the animated flow of interactions with Vinny’s bakery website, e-commerce for a small elite bakery selling homemade bread. On the basis of the design solutions, it is easy to assume that this is the service positioning itself as a producer and seller of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Harmony is the style provided by the webpage: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clearly visible call to action.

 

Mobile App for Healthy Sleeping

It’s a mobile app called Slumber with a gallery of music and meditations for relax and good sleep. As for the choice of colors and background,  the mobile user interface is designed in accordance with app functionality: it is based on the dark color palette to transfer the atmosphere of night and subdued lighting. The screens also feature corresponding graphics which look deep and stylish with dark skin.

slumber app interactions ui animation design

The screens present a harmonic combination of high-quality photo content with dark basic color and thoughtful typography which is one of the core issues for the interfaces with such a color scheme; so, the app layout uses highly readable fonts for copy content.

 

Recipe and Cooking App

tubikstudio ui design

This is the interface of a social network for people that like cooking, want to communicate and exchange opinions on it in a fast and easy way. The app allows using all the scope of social functions: sharing recipes, making discussions, chatting, following, uploading images, collecting favorites and so on. Again, we observe how delicious the photo content looks in the chosen dark palette.

 

To-Do List App

upper app UI design tubik

Here’s Upper, simple and motivating to-do list app. The task list design is performed in the minimalist and elegant style of the layout based deeply on quick functionality and intuitive navigation. The designer uses a limited color palette made of three bold and contrast colors.

upper app UI design case study

Not only does this approach support aesthetic satisfaction and elegance of looks but also makes all the content on the screen scanned in split seconds.

 

Cinema App

cinema app interaction UI

This UI concept was designed for a mobile application of a cinema chain. Here you can see the flow of choosing and booking the seat. Choosing a particular showing, users can see the available seats, choose the ones they like and book them, paying right from the app. The dark background sets the strong visual association with the atmosphere of the cinema hall and creates the good contrast with the accent color of the CTA button.

 

Book Swap App

tubik_studio_book_swap

This one is the interface of a social network for readers focused on book swapping. The dark background was chosen as a basis of color palette because the application is image-driven and features a lot of diverse pictures including numerous book covers and users’ avatars, so the dark environment creates the eye-pleasing style for all that stuff.

 

Finance Management App

finance app

Time to talk about money: here’s a set of interactions of a Finance App, the application enabling people to track their expenses and income individually or in a group. Here you can see a group mode, which may be helpful for family use, joint budgets and even small business needs. Deep blue background color supports the feeling of balance and businesslike mood. What’s more, it creates a good basis for contrast with bright color accents used for data and interactive elements.

 

Home Budget App

home budget web interface

One more interface focused on finance is Home Budget app. It allows users to manage their expenses and incomes, creating the extended database for tracking financial flows or changes and getting comprehensive stats. The choice of generally dark interface enabled the designer to create an attractive layout with prominently visible colored details drawing users’ attention to the interactive zones of key importance.

home budget web interface

The other direction of the creative process was focused on the UI for a mobile app concentrated on having the user informed about the operations of the current day and adding new data in different environments and on the go. The color palette keeps its consistency. The notifications are presented in different colors that mark the nature of the message, for instance, applying orange for warnings and blue for reminders. They work effectively with the background color in various conditions of perception.

 

Smart Home App

homey app interactions tubik

Here’s UI design for Homey App, a mobile application with “smart home” functionality. The featured screens show that users can choose the room and see the basic data about them like temperature, humidity, and energy consumption, can tune the settings and see the expenses as well as turn saving mode and security of different levels. The concept applies dark background which makes the interface look elegant and creates a nice contrast with visual layout elements and color accents.

 

Explore Universe Website

encyclopedia website design

The presented UI concept was created for Explore Universe, the interactive online encyclopedia devoted to the Solar System, its planets, interesting facts and stats. Here you can see the entry page on Jupiter. Photo and graphic assets are integrated into the dark background to support the visual connection with the theme. Smooth animation supports the impression of diving into the endless outer space. Again, the typography aspect demanded designer’s attention and testing to make sure the content is easily readable.

encyclopedia website

 

Useful Reading

If you want to learn more about best practices of using a dark background in user interfaces and how to deal with colors in UI, here are handy articles on the topic.

Light or Dark UI? Tips to Choose a Proper Color Scheme

Dark Side of UI. Benefits of Dark Background

Color Matters. 6 Tips on Choosing UI Colors

3C of Interface Design: Color, Contrast, Content

Color Theory: Brief Guide For Designers

Color in Design: Influence on Users’ Actions

Color in UI Design. Look on the Bright Side


Welcome to see the designs by Tubik Studio on Dribbble and Behance