This state of things sets new challenges for the sellers, with efficient and appealing digital products for e-commerce ahead. “If you do build a great experience, customers tell each other about that. Word of mouth is very powerful,” said Jeff Bezos, the founder of Amazon, the biggest global online retailer. Today’s generation of shoppers is different in its vast majority: they are ready to buy almost everything online, they want to see the simple way to do it, they demand secure payment and fast delivery – and good design to present that all. That’s why websites and applications for e-commerce are so various: they have to attract their customers without getting lost in the ocean of the online competition. Well-designed user experience, based on the research of the market and target audience as well as nice and effective visual performance, grows the chances of getting profits: in the e-commerce sphere, the connection between design and profits is tighter than anywhere else.

Today we would like to offer you the set of interface concepts created by Tubik designers with the issue of e-commerce in mind. Here you’ll find the websites, mobile applications, and landing pages aimed at selling products and services.

Website for a florist shop

Flowers present a popular way to express various feelings and celebrate special occasions. Here’s the design concept for the online florist store: the general stylistic concept is light, minimalist and airy while prominent theme photos set the mood and inform users about the nature of the e-commerce offer. The home page sets the theme, establishes branding with the logo and slogan, and shares some information about the service. The header gives instant access to the extended menu of items hidden behind the hamburger button as well as provides the links to search, wishlist, and shopping cart presented with minimalistic stroke icons. The footer includes links to important service pages and accounts in social networks.

Another page shows the catalog of items organized in cards: each presents the high-quality photo which is vital for this kind of business, price, and ability to add it to the cart or save to the wishlist right from the catalog page. There’s also the cloud of tags marking popular categories for better navigation.

If the user wants to learn more about the particular offer, it can go to its product page, like the one shown above, and check the details.

Application for the e-commerce jewelry store

Here’s a set of interactions for the app design concept of the online jewelry shop. The presented screens show the starting point of interaction with the app from the splash screen to the catalog showing categories of goods and special offers. The app provides theme photos setting instant visual associations with the offered items while icons are stroke and minimalistic not to distract buyers’ attention. The color palette features pastel shades that look sophisticated on a general layout full of light and air, and that feeling is supported with smooth and unobtrusive animation of the interface elements.

The presented screens show the animated interactions with items: you can see how users can choose a product from the catalog, check its details and rating. They can also share the product cards to their social network accounts and open check out. Visually, the center of the visual composition is focused on the images presenting the items, while icons are stroke and minimalistic not to distract buyers’ attention.

Application for a cinema

Despite the Internet, movie portals and super TV-sets we have in our homes, going to the cinema is still one of the most enjoyable and popular ways to spend free time either alone or together with friends and family. We follow the premiers, check the schedules, discuss acting and special effects afterward. And obviously, it is another perspective for e-commerce challenge. Here’s a sort of creative experiment – a mobile application for a cinema chain called Cinema App. The home screen shows the list of films presented with instantly recognizable posters. Tapping on the one among them, users see a screen of the particular film with all the necessary details: genre, trailer, description, rating, as well as the showings for the particular city for a particular date.

And this is the flow of choosing and booking the seat. Selecting a particular showing, users can see the available seats, choose the ones they like and book them, paying right from the app.

Landing page for dance academy

Here is the animated set of interactions for the landing page of the dance academy called HeartBeat. The elegant and minimalistic layout shows prominent theme images, gives short descriptions of the activities and links to core areas of information as well as provides the contact form to get in touch. The top section includes the horizontal slider which informs users about the upcoming workshops. Scrolling down, users can read brief descriptions about the academy and the types of classes it offers with buttons enabling users to learn more, and they can use the simple contact form to get in touch. The designer was inspired by the photos of dancers by NYC Dance Project, Paul B. Goode, Andrew Eccles, Paul Kolnik, and rich animation of the dancers added a special experience to scrolling. This approach creates a sort of wow-effect to support aesthetic satisfaction which corresponds to the preferences of the target audience. This is an effective example of selling the original type of services with sophisticated design solutions and a good balance of beauty and simplicity.

Website for herbs and spices store

This is the design concept of The Gourmet, the online market for herbs, spices, seasonings and all that kind of stuff. Here you can see a product page presenting a particular item with the prominent theme image, description, price, and ability to add the item to the cart. The minimalist header provides the links to the core areas of the website while the hamburger menu hides the extended catalog. Moreover, here the designer tried a creative experiment: this concept applies design techniques traditional in e-commerce for fashion but the type of goods is very different – they are for eating and cooking.

Bookshop website

The famous author Stephen King once said: “Books are a uniquely portable magic” and numerous generations of readers prove it all the time. More and more people now use the Internet as the source to both learn about books and buy them. To support this direction of e-commerce, here’s the design concept for an online bookshop Book Pitch. The interface uses light and airy background and includes several theme blogs showing news, bestsellers, categories of items, and reviews from readers. The visual presentation is strengthened with slight scroll animation.

Landing page for selling exhibition tickets

Although the sphere of art doesn’t look directly linked to e-commerce, the connection really exists: more and more users are buying and booking tickets online. Here’s the interface for this service – 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. It applies the horizontal scroll with the smooth animation of cards presenting key exhibits, shows the locations and dates, and prominent call-to-action for buying a ticket.

Landing page for an online travel gear store

Here is the layout of a landing page: the company presented by it sells gear for extreme sports and active traveling so images were selected to set immediate understanding of the main theme. The page includes the general description of the shop, presents the ability of transition to the catalog via the description of hot offers and also has testimonials part to provide users’ opinion about the service.

Website for a bakery

Another example the concept of a bakery website for which we presented the full design case study here before. Here is the animated version featuring interactions with the website: home page, catalog the f offers and the page presenting a particular position. The designer followed the philosophy of minimalism which is user-friendly, attractive and informative. Dark background supports the brand image with the idea of the elite and exclusive offer as well as set the ground for sophisticated presentation of the sold items.

Randomizer for the online furniture store

Here’s the concept of a randomizer that allows users to choose between many options of designer chairs in this case. However, the idea can be applied to any e-commerce digital product. This is a helpful thing as usually we don’t know what we want until we see it. Minimal and bold color palette and prominent item images make the interface helpful and intuitive for users.

Landing page for online farm grocery

As a famous writer George Bernard Shaw once said, there is no sincerer love than the love of food. This one is a landing page whose aim is to promote the shop of organic food. It is composed of several blocks presenting the products, highlighting some important aspects of service, call to actions and testimonials.

Website for the fashionable clothes shop

Another example of design for e-commerce presents the layout of a catalog page for the website of a company selling fashionable clothes for women. The header includes the links to the global categories of the clothes and the page features the fresh arrivals with photos on models, pricing, and brief item description.

Useful articles

If you want to go deeper into the theme of design for e-commerce and learn more about strategies, principles, terms and practical cases, this set of articles can be helpful:

Hit the Spot: Design Strategies for Profitable Landing Pages.
UX Design for E-Commerce: Principles and Strategies.
Design for Business Goals. Explore the Target.
Case Study: E-Commerce. UI Design for Bakery Website.
Short but Vital. Key Abbreviations and Terms in Design for Business.
Strategies for Efficient Landing Page Design.
Case Study: Saily App. Designing C2C E-Commerce Application.

Originally written for Tubik Blog

Сообщение UI Design Concepts for E-Commerce: Sell Like Hot Cakes появились сначала на Design4Users.

Graphic design broadly covers all spheres of human life which deal with visual communication, from books and posters to sophisticated mobile applications or 3D animation. Today’s post presents 15 creative concepts by Tubik which we gathered to show you the diversity of graphic design.

Character concepts

Girl and Flowers

The first concept introducing this set is an illustration of a girl with flowers. The work is a representation of flat design which is seen in the simplicity of shapes and visual elements. Despite the minimalist style the illustration accurately transfers the bright and warm feeling of the springtime. The designer applied the color palette which shows a little girl’s sensitivity and purity. And, the final accent was made via shadows giving the flat picture more vivid look.

Underwater Explorer

The next concept is a flat design illustration presenting a character of underwater explorer. The designer applied various techniques combining classic and new approaches to flat design. Along with minimalistic shapes, there are noise textures across the illustration which are unusual for the direction. The dark background and bright elements, including the character’s costume, create deep contrast and enhance visual perception. One more detail complementing the illustration is the light lines which are barely seen still they make the picture complete.

Character design is used for different video and mobile games, the reason why designers often need to create more than one character for the particular project. The trick is that all the characters should be made in one original style so that they would be recognizable for gamers. Let’s look at the Wild West set of characters by Tubik.

Sheriff Foxx

The first character created for this set was a sheriff named Jimmy Foxx. The designer has chosen the unique style of drawing putting accents to the details which transfer character traits. Creating the sheriff personality, the designer aimed at illustrating fearless and fair man with a sense of humor. The prominent mustache makes Jimmy look serious still there might be the smile hidden behind it. The main attribute is the big hat with the star signifying sheriff’s power.

Indian Dreamcatcher

Good stories require the presence of cultural spirit, so the native American character was an obvious choice continuing this set. The designer sticks to the style applied to the first character. The character wears typical attributes such as a feather and a painted mask. His eyes are closed which makes a character look wise. The circle around the character, which by the way is shown in the first illustration too, is decorated with a skull of a bird. Such an item usually serves for magical rituals so the character seems mysterious.

Wild West Bandit

It’s hard to imagine a wild west story without a bandit terrorizing the citizens. The designer presents us a bad guy through the well-thought details. The bandit has a massive chin with a dimple and the dark straight hair. The cigarette and the golden tooth give him a brutal look. The hat and scarf are embellished with the skull signs to show that he’s a dangerous man.

City illustrations

There are many paintings and drawings illustrating the beautiful sights of various cities. Today designers have an opportunity to show cities from a different perspective – as digital artworks. Here is the set of city illustrations by Tubik.

Hallo Lofoten

The first illustration presents Norwegian city Lofoten. Beautiful colors, nature, bright buildings and amazing mountains of this city have inspired the designer to create the illustration. The unique idea of this set of concepts is that they are framed like post stamps. The illustration is another example of the flat design which is created with simple geometric shapes. Lines on the water presents the reflection of the building so it feels more natural. Bright colors and various tones transfer the atmosphere of the city.

Buongiorno Roma

Next city chosen for this set was Rome. The designer applies the complementary scheme of colors mixing blue and yellow, which makes the illustration full of contrasts similar the bright Italian city. Famous buildings are formed with simple shapes so the viewer can easily recognize the city. The designer creates lights and shadows on the landmark via different tones sticking to the minimalistic style.

Guten Tag Bavaria

The last concept of the series illustrates Bavaria. The Neuschwanstein Castle, the nineteenth-century palace known all over the world, is presented as a magical place full of spring vibes. The mild color scheme is pleasant for human eyes enhancing visual perception.

Posters

Nowadays, graphic designers experiment a lot with poster creation following modern design directions such as flat design and applying various techniques. Digital artists design original posters which accurately bring people into the atmosphere of the films, cartoons, and other performances or events.

Star Wars Rouge One Illustration

No matter if you’re a fan of Star Wars or not, you obviously know what they are. This graphic design concept is devoted to the recent episode of Star Wars (Rogue One) which inspired the designer to create the original poster. The illustration presents the main characters of the movie in a minimalistic style. They are shown as focused, strong, and brave heroes ready to fight for the better. Dark blue background creates an atmosphere of the deep space. Small but bright details such as characters’ clothes make this poster contrasting and interesting for the viewers.

Pikachu Poster

Many people will associate last summer with the hype about mobile game Go Pokemon. Designers couldn’t stay unaffected so there are various design concepts devoted to the topic. Here is graphic design poster featuring one of the favorite pokemons Pikachu. The character’s body isn’t highlighted with lines still people can recognize the pokemon’s silhouette due to face parts and the yellow color of the background. Unusual presentation of the character is complemented with white lighting which is the special power of the little creature. Pokemon’s shadow is performed via repeating a word, “Pika” to be more specific. Such a creative idea will definitely strike a fan right in the heart.

Suicide Squad Poster

Continuing the topic of the mainstream, here is the poster for Suicide Squad movie. One of the brightest and deepest characters of a film is Joker who’s well-known for all DC comics fans. Creating this poster, the designer tried to catch and transfer the character’s features by means of digital graphics. The poster is dark transferring character’s mood still with the original lettering which presents laughing. Moreover, if you take a closer look at the poster, you’ll find small Joker’s signs hidden everywhere.

Covers

The cover illustration is a substantive art direction which deserves great respect. Graphic designers usually work long and hard to create one single composition that will do its function best. Let’s look at the cover designs by Tubik.

Muscles Magazine

The first example presents a cover page for the magazine devoted to sports and active life. The issue shown here is about relations of sport and business. The idea behind the central illustration featuring the athlete was to immediately introduce the topic and at the same time add some fun and style. Graphic elements fully replace the photos creating the original look for the magazine.

Tales of the Jazz

Many graphic designers secretly dream to create the cover design for their favorite book. Here is an interpretation of cover page for a collection of short stories by F. Scott Fitzgerald called Tales of the Jazz Age. The girl on the cover looks like a typical lady of the jazz age setting the right mood for the viewers. The mild color scheme and noise texture are nice to the visual perception.

Stickers

Today stickers are everywhere, printed and digital, especially popular in mobile apps. Tubik designers constantly work on original sticker packs for apps, websites and promotional campaigns.

Healthy Stickers

This design concept presents stickers of vegetables and fruit. They are meant to stimulate everyone to follow a healthy lifestyle and add energy to people as well. Bright colors make vegetables and fruit look juicy and yummy so it’s hard to resist the desire of tasting one of them in real life which means the stimulation works well. This flat picture is good for both printed and digital use.

Animated Stickers for Mood Messenger

Today stickers are popular in various messengers. This concept shows stickers designed for Mood Messenger. Each sticker presents a different emotion so that the users could chat quickly showing their friends how they feel. Detailed faces on this concept are able to transfer any emotion clearly. Attractive illustrations can make applications interesting and fun for users setting great benefits for the owners.

Reviewing creative graphic design artworks is always inspiring. These fifteen concepts are only a few examples but there are many more of them waiting for you to look. Stay tuned and get inspired!

Originally written for Tubik Blog

Сообщение Functional Art: 15 Creative Graphic Design Concepts. появились сначала на Design4Users.

Tubik designer Tania Bashkatova loves traveling as much as design, so she often combines these passions to create sophisticated concepts devoted to travelings and nature. Today we present the case study on the design concept of the website for travelers called the Big City Guide.

Task

UI/UX design for onboarding landing page presenting a website about big cities all over the world.

Process

The Big City Guide (BCG) is one of the first works made in terms of Tubik UI Fridays which is the set of creative sessions when the designers have a day to work on the design concepts out of current projects. The concepts are created within a particular general idea of a digital product but with all the passion and freedom for the designers’ artistic souls.

During one of these creative sessions, the task was given to design the landing page for the online resource providing information about big cities around the world. Typically for the design of landing pages, the designer decided to apply the expressive and informative potential of the background images. The objective set for the visual design was to convey the mood and the atmosphere via one photo for each city. The solution found for this aim was the animated widget with horizontal scrolling presenting three big cities in order to create an efficient visual perception of the information for the target readers. The three different capital cities were chosen to show how dissimilar styles can be united in one design.

The first page of the BCG concept presents Berlin. The city is filled with various sights so it was a difficult choice to make. The designer tested many pictures to find the one which would bring the right mood of the city. In the end, there were two variants.

Both pictures make an effective design but the second conveys the atmosphere of solid and futuristic Berlin better so the designer favored it. The name of the city becomes the center of the composition, bold and quickly readable in strong uppercase letters. The word sets the high perspective of the famous tower. The letters are arranged among the spires in the way which gives the feeling they always were there.

The second featured city is Madrid. It is often thought that the Spanish capital city fully consists of medieval buildings but that’s not exactly true. Today Madrid is one of the modern European business centers, so the designer decided to present the modern side of the city. Here is one of the examples made while searching for the best fitting picture.

Yet the priority has been given to the bridge in a contemporary style. Keeping the consistent scheme with the previous page, the center of the composition remains the name of the city. The word shows a deep perspective with the modern construction echoing the form of the swirl or vortex. The subheading presents the motivating line that gives the mood of the energetic and bright city. Here is the final result.

Every new day brings new knowledge. Searching for the perfect background photo the designer missed the fact that there is not only Madrid in Spain but also another one in Iowa, USA. The Internet played a joke with the designer mixing photos of two Madrids, so it’s impossible to distinguish them for those who haven’t visited all the corners of these places. Well, that’s good to take lessons from the errors, and this case gave us all the chance to learn something new.

The last city featured is Stockholm. It is full of magnificent ancient buildings and modern-styled places, so the designer experimented with various photos of the city places. Here is the example with the picture of the underground in Stockholm which presents the part of the creative search for the visual concept.

However, all the urban photos couldn’t convey the unique atmosphere of Stockholm. That’s why the designer comes from the other side. Stockholm is one of the biggest Scandinavian cities, so nothing can deliver the Nordic vibes better than its nature.

This is the final variant of the Stockholm page. The content elements on the page are placed similarly to the previous with the name of the city in the center. The word is harmonically inscribed into the thematic picture with deep and magnificent Nordic forest. The subheading presents the motivating line whose message naturally combines with the image and the associations set by the city.

The onboarding landing page applies simple structure recognizable for users. The left part of the header features a clickable logo BCG taking users to the home page. The header menu allows people to see the full list of cities, go to the blog or learn the maps. Also, the service provides the registration feature. The search icon completes the header.

The vital part of any city guide is the description copy. Since the pages are focused on the name of the city, short copy is placed at the left bottom part of the page. CTA button under the text provides users with an opportunity to read more if they are interested in detailed information. The users can also find social network links easily in the footer.

The final stage of work on the landing page was the animation of the presented layouts, accomplished by motion designer Kirill Erokhin.

The static variants of pages have different colors of the background, but in the final animated version, all pages are united with one color. Smooth animation adds the dynamic nature of traveling and supports the feeling of consistent interaction. Navigation through the pages can be accomplished in two ways: via the navigation button and with the help of a progress bar placed on the top of the page. They both use the same contrast color to keep the visual consistency and make all the ways of navigation clear.

As we can see, despite the fact that all cities differ by style and energy they bring, the designer managed to keep them in a single tone creating the feeling of the website unity. Moreover, such a construction of the landing page makes it flexible for further alterations, for example, adding more pages of the cities that are particularly popular with readers of the website.

Design Case Studies

If you are interested to see more practical case studies with creative flows for mobile and web design, here is the set of them.

Home Budget App. UI for Finance

Health Care App. UI for Doctors

Toonie Alarm. Mobile App UI Design

Slumber. Mobile UI Design for Healthy Sleeping

Tasty Burger. UI Design for Food Ordering App

Watering Tracker. UI Design for Home Needs

Originally written for Tubik Blog

Сообщение Design Case Study: Big City Guide. UI for Landing Page появились сначала на Design4Users.