Tag Archives: landing page

tubik-studio-architecture-firm

Web of Life. Creative Web Design Concepts.

Nowadays, World Wide Web could definitely be named the web of life. It connects people from all around the world whatever their aims and wishes are about. Personal and professional communication, ordering and delivery of goods and services, education and mentoring, searching for new information, advertising, watching films, tracking everyday stuff and accounting finances, and so on, and so forth—seems, there’s no sphere to which the Internet wouldn’t add its own two cents. No doubt, there are both advantages and disadvantages brought by technology and new ways of broader and faster communication of all kinds. Still, today we are going to focus more on the variety of perspectives for positive influence of the web on people’s lives of global society.

 

In the design glossary issue devoted to key terms of web design we mentioned that as a domain of human activity it lies on the crossroads of many sciences and practices. Among them the following should be mentioned:

  • drawing and composition
  • painting and coloristics
  • logic and schematism
  • analysis and statistics
  • visual arts
  • programming
  • user research
  • psychology
  • copywriting
  • branding and marketing etc.

 

Covering diverse aspects of a website functionality and appearance, some designers work in teams every member of which specializes in a particular sphere while the others can work out different of the mentioned aspects individually. Anyway, in vast majority of cases web design is the sphere of digital products which have to be functional and user-centered. As famous American designer Charles Eames said “Design is a plan for arranging elements in such a way as best to accomplish a particular purpose” and his words totally reflect the idea of modern web design.

 

Working over a website, designers have to concentrate on such aspects as:

usability (the website is convenient, clear, logical and easy to use)

utility (the website provides useful content and solves users’ problems)

accessibility (the website is convenient for different categories of users)

desirability (the website is attractive and problem-solving, it retains users and creates positive experience which they are ready to repeat).

 

Here in Tubik Studio we have felt all the power of web, both from the perspective of professional growth and positive user experience. If you take a virtual trip around Tubik Blog, you’ll see the case studies and articles devoted to the theme of creating websites solving users’ problems, providing natural and effective flow of human-computer interaction and positive experience. Being a team knowing the inside-out of web design and development, today we are going to continue the topic with the collection of practical design concepts presenting design solutions for the variety of websites with different objectives, target audience and visual style. Here you’ll find the concepts for particular web pages, animated web interactions, ideas for landing and home page design and the like. So, let’s get started!

 

Website on travel destinations in Iceland

 

tubik studio ice ui website

Presented concept features the set of interactions with a website devoted to the theme of traveling around Iceland. Working over the color palette, the designer chose the light background featuring the theme of Iceland and a contrast bold headline. Images are used in the scheme one-per-page so that they could support the theme but not overloading the page or distracting the user. Thorough attention was paid to typography and composition as key sides of user-friendly minimalism enhancing usability, navigability and visual harmony transferring the spirit of the presented place. Navigation features the right side menu with titles placed vertically still easily readable due to the choice of font, the rest of the navigation links are hidden in extended menu behind the hamburger button. Animation shows transitions between pages to give the feeling of general design consistency.

 

Design concept for online magazine

 

online magazine design tubik studio

 

The design concept of an online magazine features the page of a particular article presenting a famous person so an image showing the personality becomes the center of composition still doesn’t take too much attention from the text as the bearer of information. All the design is concentrated on user-friendly solutions around readability and stylish non-distracting looks as well. So, the concept is based around clear visual hierarchy applied in general layout of elements and also copy blocks. As for navigation, the page features the header including the title of the website as a central element of the top part composition, two active links to basic categories of publications, link to live mode and search field marked with a magnifier icon.

 

Web design for architecture blog

 

tubik studio design

 

Another concept full of light and air for readable text and stylish visuals. Animated interactions demonstrate the consistency of the flow while scrolling the page with the smooth move of visuals elements, headlines and copy blocks, imitating movement of physical objects while pulling. The presented design of a website has a fixed header which doesn’t hide while the page is scrolled. However, it follows minimalist principles featuring brand name lettering as a center of composition, magnifier icon marking search functionality and hamburger button hiding links to navigation areas.

 

Corporate website for an architectural company

 

website design UI

 

This concept is also devoted to the theme of architecture, still it has different objectives and core target audience: it is the corporate website for a company presenting the variety and potential of its services. The general performance of the webpages is following minimalist and functional approach. The layout is accomplished on the basis of priorities in presenting this particular business field. Taking into account that the nature of the company activity is deeply visual especially in terms of presentation to new clients, the designer selected the background and fonts that have to leave the immediate impression of style and sophistication. The key words brought out in capital letters become the integral part of stylistic concept being also informative and quickly setting the company ideas and approach to work. The visual effects are supported with smooth animation.

 

Landing page for the website of seafood recipes

 

landing page UI design tubik studio

 

This example presents a landing page for a website collecting recipes of meals with seafood from all over the world. As well as in the previous case, dark background is chosen to make the images of meals look even more delicious and also create stylish appearance for general visual presentation of the layout. The landing quickly provides general understanding of the website purpose and content featuring different sections that could be interesting for users.

 

website UI design

 

Website on Swedish ski resorts

 

tubik studio web UI design

 

Obviously, traveling is the great way to get inspired and we really believe it’s true. This concepts adds one more example on this theme. Here is the set of animated interactions for a website Slopes presenting Swedish ski resorts and enabling users to get full scope of information about them. Home page features the video background immediately setting the theme, and color palette based on strong contrast and concise color combinations also visually supports the idea of active winter holidays. The basic points are shown in header for quick availability while all the other variety of content categories is hidden behind the hamburger button to support minimalist design approach.

 

Web interface for design blog

 

design4users blog

 

This case shows the web interface for Design4Users, a content project created, designed and developed by Tubik Studio team. Design of the webpages is accomplished with a view to effective presentation of both copy and visual materials featured in wide variety.

 

webdesign tubik studio

design blog web UI

 

Web design for an online magazine about traveling

 

tubik studio web design

 

Here’s the design concept for a website which presents the online magazine «The Big Landscape». Its target audience is primarily people keen on traveling and learning more about the world. The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation and aesthetic pleasure from visual perception.

 

Website for a design studio

 

tubikstudio ui animation website design

 

It is a promotional webpage of the particular product by design studio. Its purpose is to present the design object via descriptions and visual details providing users with the link to this item in online shop. Thus, this page, which is actually the part of a sales funnel for the e-commerce website, is in charge of attracting users and informing them about the product. Minimalist design full of air makes visual accents noticeable and engaging while general layout presents the actual direction of company services. Broader aim was to transfer the atmosphere and spirit of the brand by means of design solutions.

 

Web platform for an encyclopedia

 

tubik studio web ui design

 

This case realized the idea of web encyclopedia devoted to the theme of birds-of-paradise. The designer concentrated on main aspects of usability and utility of such a resource for readers and at the same time set the goal to make it attractive and giving clear message of the site features with general stylistic concept. Animated transitions make  scrolling interactions engaging and add style to general performance.

 

Web design for photography workshops service

 

website design for photographers

 

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind this web interface, visual elements inform users and provide quick harmonic perception of the nature of the services while animation is provided to show the transitions between content blocks.

 

Landing page for coffee delivery service

 

web design UI tubik studio

 

It’s not a secret that drinking coffee is the daily habit, sometimes even obsession, for many people, and different services speeding up the process of getting a cup “on the go” are getting more and more popular. This example shows you a design concept of a landing page which presents an experimental service «Coffee Wings» providing coffee delivery by drones. Landing was created in the manner combining traditional visual elements setting positive associations with coffee and images of innovative technologies involved to this user-friendly service. Copy blocks are not overloaded so that visitors could get the idea and benefits of the service quickly and clearly and obtain more information, if they want, following the calls to action.

 

Design concepts for 404 page

 

web page illustration

 

There are tons of design solutions for 404 webpage, which is strategically important for any website, and still this design object is always actual. This sample shows web design accomplished with some artistic approach featuring the original illustration of the penguin directing everyone back from the Pole where nothing can be found.

 

tubik studio web design

 

Another concepts shows different stylistic approach and features a page 404 for e-commerce website. It is based on harmonic interconnection of the background and actual layout elements such as header, CTA button and copy.

 

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


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

Welcome to read UI/UX glossary on web design

tubik studio landing page design

Soft Landing. 10 Design Concepts of Landing Pages.

What makes the journey by air good? Easy take-off, smooth flight, breathtaking view from the air. And soft landing with feeling safe and convenient. These final minutes of getting to your destination can become the icing on the cake, enhancing comfort and excitement of the flight, or vise versa, the dark spot crossing out all the amazement and positive moment if landing is hard and unpleasant, perhaps confusing or painful. Landing really does its job.

 

In webdesign it works similar. For many users well-thought-out landing page will be the good experience of getting to the right destination and starting a journey around the website from the proper point. In our previous article sharing the details of design for efficient landing pages we mentioned that process of creating landing pages lies on the crossroads of design, marketing, user research, psychology and other spheres dealing with people, their behavior and solving their problems. 

 

Here we have collected 10 different UI design concepts accomplished by studio designers. They represent different landing page reflecting various business goals, natures of presented offer and visual styles supporting the purpose.

 

Landing page for the shop selling organic products

 

Tubik studio landing page design

 

The aim of the presented landing page is to promote a shop of organic food. It is composed in several blocks presenting the name of the shop, products, highlighting some important aspects of service, call to actions and testimonials. The designer sets the purpose to make it informative but not overloaded, appealing but not aggressive. So, all the visual accents, first of all key images of food selected carefully to immediately transfer the appropriate message to the user, support the basic theme. To make the experience more attractive and engaging, the process of scrolling the page was livened up with animation and the visual elements were selected to support the general theme and provide immediate visual perception of basic idea.

 

We can also see that in this case the designer chooses quite short and condensed copy blocks which provide users with basic data and give the links to learn more following the call-to-action. At the same time keywords describing the most important benefits like ‘organic’, ‘home-made’, ‘quality’ are marked out visually so that they could be noticed at once. This strategy is wise as users do not need to spend much time reading to learn about the service, but see the opportunity to learn more any time they need. 

 

Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh

 

Landing page for a website providing services for everyday life

 

landing page design by TUBIK

Here is the landing page concept designed for a website of the agency that presents its services. The variety of provided services is echoed by the variety of colors used in the interface. The designer’s aim was to make it lively, vivid and attractive, creating catchy first impression and supporting positive user experience with engaging design solutions. Dynamic motion accents add much to the general stylistic solution whereas good combination of fonts with balanced contrast of layout elements create the field of good visual perception and enhance readability.

 

landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko

 

Landing page for museum exhibitions

 

Tubik studio UI animation

Tubik Studio | Museu by Ernest Asanov

 

This example presents a landing page promoting art exhibitions. The idea behind it is to make this sort of promotion aesthetic and unobtrusive for the user as well as highly informative. The balance of minimalism and utility appealing is kept by means of style, color and motion. The minimalistic presentation still is highly informative and successfully uses the studies along eye-tracking for applying the most important layout elements in the zones of the highest usability.

 

As we mentioned in the article devoted to benefits of dark background in UI, color of background can be not only the effective field of presentation but also the carrier of its own message. Dark colors are usually associated with elegance and mystery. Moreover, black is often associated with elegance, formality, prestige and power. That is, perhaps, one of the reasons why many powerful brands build their visual presentation around black-and-white scheme with dark dominating and light presenting and informing the recipient. Playing out this aspect in interface design can provide additional support to other design solutions and general presentation of the product which we can definitely observed in the presented design concept. Dark background make the images of the exhibits look more deep and stylish while the readability doesn’t suffer being supported with the right choice of fonts.

 

Landing page for a non-profit charity organization

 

Tubik studio landing page ui

 

The provided example shows the design concept of a landing page for a non-profit organization accomplished. It uses considerable copy blocks and supporting visual elements to set the understanding of the club activity. Decision on the amount of copy used on the page should be the aspect of thorough research and testing as it directly and highly influences conversions. However, it doesn’t mean that every landing page should contain minimal number of words. If it presents a famous company product or service or informs about special offers, sometimes short and concentrated copy is enough to encourage users. However, if a new unknown product or service is presented, it is important to provide users with more information persuading them to follow call to action. So, in this case copy becomes a tool of engagement and informing as the service is not concentrated on the product that can become the primary visual accent, but with the activities that should be verbally described.

 

tubik studio landing page design

Arts, Culture & Education Curation | Landing by Polina

 

Landing page for a native Mac application

 

tubikstudio swiftybeaver landing

SwiftyBeaver Landing Page by Ludmila Shevchenko

 

Here is a landing page for SwiftyBeaver native Mac application whose target audience is developers. As we can see it is designed in minimalist manner and concentrates users’ attention on short copy about the product’s functionality and CTA enabling to request a free beta access. Although the page provides other important links, they are designed in a way not distracting from the main elements providing conversion. The work on landing page for the product was also an interesting and challenging design task as far as the product doesn’t offer a lot of visual material for user engagement and attraction. Therefore, the main visual design solution was made around the colored accents echoing the design solutions of the application interface layout. 

 

Landing page for a gym

 

gym_landing_page_concept

 

Here is the landing page of a gym presenting all the basic information necessary for user: general description, provided services, trainers, prices and location. Slight colorful accents and motion effects are used to make the interface more engaging and scrolling more smooth. In this sort of service selection of appropriate motivational images is vital as people associate workouts first of all with attractive and athletic body and positive energy. So, photos applied in design presentation support this particular aim creating clear and obvious perception of the theme and benefits of the service. Bold and strong font applied for headlines adds to both fast readability of key messages and general visual consistency of all the design.

 

gym landing page concept by Tubik

Gym Landing Page by Dima Panchenko

 

Landing page for the shop selling travel gear

 

Travel Gear Landign page by TUBIK

 

This one features the layout of a landing page for e-commerce. 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 general description of the shop, presents ability of transition to the catalog via description of hot offers and also has testimonials part to provide users’ opinion about the service. Good combination of visual elements on the background as well as dynamic photos support the clear setting of the theme and provide the strong associative link to potential buyers engaging them and informing about the nature of the offer.

 

tubikstudio travel gear landing

 

Travel Gear Landing Page by Tania Bashkatova

 

Landing page for a service selling wood products

 

landing page TUBIK design

 

Here is a landing page concept for the company offering handcrafted wood products for everyday life. The main design idea was to use wooden textures in some parts of the page to visually maintain wooden atmosphere and create a feeling of naturalness. The dark background helps to emphasize the colorful elements and make the overall color scheme more intense and stylish. Types and fonts were carefully selected and tested in order to strengthen general composition and provide readability for all the copy elements on the page.

 

TUBIK webdesign landing page

Wood Products Landing Page by Alla Kudin

 

Landing page for a digital non-profit product

 

landing page for capitoledge by TUBIK

Capitoledge — Free Screensaver by Vladyslav Taran

 

The landing presented here has the aim to inform users about a free education service Capitoledge Screensaver which provides the opportunity to use screensaver for studying capitals. Here you can see the upper part of the landing page which features interesting and engaging animation activated by smooth scrolling. Visual presentation is full of air due to light background which also provides easy readability and quick perception of the background map image. 

 

Landing page for an adventure agency

 

landing page design TUBIK

Adventure Agency Website by Valentyn Khenkin

 

Here is the concept design, presenting a landing page for an adventure agency specializing in air-balloon tours. All the information blocks are supported with bright thematic photos while copy blocks move users through the sales funnel stages. Again, light background feels harmonic and naturally adds air to general design presentation.

 

So, practice shows the diversity of techniques and methods to make a landing page informative and attractive. Nevertheless, to retain users, trendy and pleasantly-looking design should just cover effective functionality and user-friendly solutions which are accomplished according to business goals and user research. Otherwise, beautiful design will work like a hard landing immediately erasing all the positive vibes caught during the flight and that is a fast way to reduce conversion rates which are actually the main purpose of landing pages. Put usability, informative value and functionality first, think over the logic, transitions and intuitive navigation — and visual design will become a great support for smooth and effective landing!

 

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


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

tubik studio home page design

Home Sweet Home. Strategies of Home Page Design.

Home is usually associated with the place where you feel comfortable, convenient and safe. That is why, perhaps, the saying «Home is where your heart is» has gained its popularity. For many of us, web network has become an integral part of everyday life, both professional and personal, so no wonder the word «home» describing the main page of a website stays much more common and frequently used than all the other versions.

 

Talking about webdesign, home page in fact is the place which should make the interaction with a website of any complexity convenient and positive. Any designer wants to create it as a place where users can find everything they need easily and quickly. So, this object of design effort is strategically significant as most users dealing with a final web product in vast majority of cases have a chance to interact with a home page, even if its not a place from which they start a jorney around the website.

 

Earlier, we have already provided our readers with general explanation of home page and its typical features in the issue of UI/UX glossary devoted to web design issues. This time let’s extend the basics with some ideas and strategies important to consider designing home page.

 

 

What is a home page?

 

Home page is the most popular name for the main page of the website. It is called home as it usually provides starting point with many further directions for the user, containing direct links to the most important areas of interaction with a website. In other words, it can be also named initial page or index page. Home page is mostly the start of users’ journey if they are directed to the site by search engines which means that it is the page which is visited by the biggest number of website users.

 

In addition to essential links to different website parts, home page often contains search field, basic onboarding functionality for personalized sites, different areas of navigations showing users diverse categories of data. It might also contain engaging welcome messages and copy blocks featuring slogan and/or explaining benefits of the website or objects it presents.

 

More than a decade ago famous expert in usability Jakob Nielsen wrote Top 10 Guidelines for Homepage Usability in which he said: “Homepages are the most valuable real estate in the world. Each year, companies and individuals funnel millions of dollars through a space that’s not even a square foot in size. For good reason. A homepage’s impact on a company’s bottom line is far greater than simple measures of e-commerce revenues: The homepage is your company’s face to the world. Increasingly, potential customers will look at your company’s online presence before doing business with you — regardless of whether they plan to close the actual sale online.” Long time has passed since then but clear and user-friendly home page is still the issue of vital importance for an efficient website.

 

Home page is actually a basis of good navigation which is usually the core of positive user experience. Messy interface and badly designed layout can become the reason of user confusion and annoyance.

tubik studio homepage design

Event Agency Webpage by Tania Bashkatova

 

What does a home page usually include?

 

The aspects of interaction with a website home page should advisably provide the following data:

 

— the nature/theme of the website: the users need to understand immediately if they deal with a company website, professional blog, e-commerce website, social network, personal blog, educational platform etc.;

 

branding elements or other stuff supporting the web product identity: home page should be easily recognizable, memorable and identified by users among tons of others. Thoughtfully accomplished branding can be used to serve these goals, at least presented with a logo and corporate color palette. It plays the vital role for commercial and corporate websites which should feature strong connection with a particular brand or company; however, for non-profit or personal websites elements of identity also have a great impact on boosting usability and memorability;

 

goals and utility of the website: it’s important to let users know what is the purpose of the website and what users’ needs it can satisfy. When users are provided with this sort of data during the first interaction with a website, they are ready to devote their most precious resource — time — to know more;

 

ability to search around the website content: the search field or button should be easily seen and recognizable as well as located in the area of high visual intensity according to eye-tracking trends;

 

navigation elements providing the ability to move to different sections and pages starting from the home page: the home page becomes the starting point of the route from which the user should get the ability to move to any essential and meaningful part of the website an also get back home any moment and from any point of journey;

 

contact information and preferably data about creators or responsibles: the home page is the place where users expect to get provided with the basic information about who creates, maintans and curates the website and how to contact people in charge if there is such a need;

 

— links to social networks: support of social networks is not only an effective tool of social marketing but also the good way to communicate to users. Social networks are now used by thousands of users on regular basis, so there will be always the ones who are interested to see how the website is positioned in the environment which is common and clear for them as well as contact via usual social network tools instead of looking for the means of communication on the website. Considering and applying this trend can be one more step to positive user experience;

 

testimonials or information supporting trust to the website: mentioning famous clients or partners as well as the signs of social popularity can be a catchy factor to learn more and further invesigate the website content.

 

Defined target audience and rigorous user research, made on the earliest stage of interaction and visual design, enable designers to sort out layout elements of the highest priority according to target audience’s needs, expectations and  peculiarities of psychological perception. Preferably, the components of the highest priority should be placed in the pre-scroll area of the home page to make their perception fast.

 

As home page is actually the front door to the website, definitely it should provide all the strategically vital information about the website which a user should be able to absorb in split seconds. It’s important to remember that not many users tend to spend much time investigating a new website: in most cases there is a couple of minutes to attract their attention and inform about the website while they are scanning the page. If this short time is used wisely to communicate the observers about the theme and benefits they can get, they will be ready to spend more time to learn further and browse the site.

 

For this reason, it is highly advisable for web designers to learn more about psychological and physiological aspects of user interaction with web products, in particular color psychology and studies about eye scanning trends, for example the investigations by Luke Wroblewski and Nielsen Norman Group. They are deeply helpful for designers seeking to create home pages with high level of usability which directly influences general conversion and bounce rates of websites. Knowing how users tend to scan the web pages, designer can apply the most important elements in the zones of the highest visibility and in this way make the page quickly informative and catching attention of target users or readers.

 

tubik studio ice ui website

Tubik Studio | Ice by Ernest Asanov

 

Should all the traffic be directed to home page?

 

The answer considerably depends on the nature and complexity of the website. The biggest deal to think over is the user attention and its concentration on definite areas of the websites in terms of solving a particular problem or satisfying particular needs.

 

For simple one-page websites this question is not actual: indeed, they represent only a home page which satisfies one or multiple functions and there is no other place where the traffic could be directed from the outer sources. The same happens if the website is not complex, home page in not overloaded with diverse links and navigation elements, so conversion can be reached right from the home page while other pages play secondary roles. In this case directing all the traffic to the most informative part of the site, which also enables a user to accomplish necessary action and get what they need, is a good idea.

 

However, for complex websites and platforms, especially if they satisfy multiple needs of broad target audience, this approach can be the step killing profitability and reducing conversion rates. The user can get scared, distracted or even annoyed with the tons of information they have to get through to find what they need, especially if the needs or wishes are focused on a particular narrow goal. Using landing pages in case when you need to concentrate user’s attention on something important, to make it noticeable and easily available can be the efficient way of solving this problem. Landing page is a tool to emphasize one item, to make it quickly found and reduce delays in cases when target user seeks for specific operations, services or items. This is the issue of especially high importance in case of ecommerce websites when unwise design solutions bring to poor user experience and financial losses. If you want to know more about effective use of landing pages, welcome to read about the topic in detail in our previous article.  Anyway, the approach in every case should be based on user research and then thorough user testing.

 

What are important aspects of efficient home page?

 

Among the numerous aspects essential for such an essential zone of high functionality as home page, we would define the following aspects as the ones definitely deserving attention:

— clear intuitive navigation and balanced visual hierarchy

— application of different menu types enabling to avoid overloaded page design

— utility of the applied layout elements

— readable copy easy to scan

— length of copy blocks that correspond to target users’ needs and expectations

— usage of language (vocabulary, syntax, modality, keywords etc.) which is understandable and appealing to target audience

— intensity of graphic visual content

— short loading time of the webpage

— thought-out and efficient search

— responsiveness of the webpage when it’s opened on different devices and screens with various resolutions

— effective application of keywords

— good balance of tradition and innovation

— accessibility of the home page from any point of the website

— easy and clear recognizability of the home page in comparison with the other pages of the website

— consistency of visual design solutions

— visible and informative call-to-actions

— defining most important content to get it supported and strengthened with visual design solutions.

 

Here are some more design concepts for home pages accomplished by Tubik Studio designers.

 

home page landing tubikstudio

Comics Shop Home Page by Dima Panchenko

 

tubik studio design

Structure – Architecture Blog by Ernest Asanov

 

Recommended reading

 

Here are some more articles we could recommend for those who would like to get deeper into the topic of home page design. Some of them are classics while the others represent the ideas around quite modern and fresh trends, anyway all are useful for those who want to design helpful, usable and attractive home pages :

Top 10 Guidelines for Homepage Usability

6 Features a Prospect Needs to See on your Homepage Design

The Ten Most Violated Homepage Design Guidelines

5 Things to understand before designing Homepage for your start-up website

113 Design Guidelines for Homepage Usability

36 E-commerce Homepage Design Best Practices from the Experts

6 Elements of Outstanding Homepage Design

Home page principles

How eye scanning impacts visual hierarchy in UX design


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

tubik studio graphic design illustration

Tubik Monthly Review. June.

Hot summer days are full of bright impressions, various design projects, creative brainstorms and productive teamwork. Starting a new month, let’s remember what was done in June.

 

Our Dribbble page got new shots presenting various design concepts: graphic design, mobile interfaces, landing pages, animations were posted by studio designers.  Let’s look through the June shots. If you are interested to see all the details  full-size, just follow the links.

 

tubik_studio_website_ui_bakery

Vinny’s Bakery by Ernest Asanov

 

icon pack tubik studio

Bright Icon Pack by Ludmila Shevchenko

 

tubik studio landing page design

Landing Page. Design Issues by Marina Yalanska

 

character illustration tubik studio

Indian Dreamcatcher by Arthur Avakyan

 

travel app tutorial tubik studio

Travel App Tutorial by Denys Boldyriev

 

3d animation tubik studio

BeBright App 3d Animation by Kirill

 

book swap app tubik studio

Book Swap App by Ludmila Shevchenko

 

web design tubik studio

Web Design Glossary by Marina Yalanska

 

tubik studio healthy food animation

Healthy Food App by Ernest Asanov

 

gym landing page concept by Tubik

Gym Landing Page by Dima Panchenko

 

tubik studio illustration graphic design

Muscles Magazine by Denys Boldyriev

 

tubikstudio travel gear landing

Travel Gear Landing Page by Tania Bashkatova

 

Surely, we took a chance of publishing some articles here in Tubik Blog about actual design issues. In case you missed any of them, look through the list of topics discussed in June:

  • UI/UX Glossary. Web Design Issues.  New set of UI/UX design glossary focused on basic terms used in webdesign sphere. Here you will find the explanations and examples of webdesign as a sphere of human activity, responsive design, home page, landing page, footer and header.
  • ITEM 2016. Conference Connecting Experts. The review of ITEM-2016, big IT conference held in Dnipro, Ukraine, which became a bright start of our summer. Great speakers and guests from different countries, wide range of topics and many bright moments of professional communication.
  • Design Is a Job. 30 Honest Quotes by Mike Monteiro. Fresh set of quotes about design issues. This time it is based on useful and helpful book «Design Is a Job» by Mike Monteiro, the co-founder of Mule Design who is deeply and sharply honest about not only the benefits but also pitfalls of design process.
  • FAQ Design Platform. Human-Centered vs User-Centered. Are the Terms Different? The issue of FAQ Design Platform concentrated on slight nuances in definitions of human-centered and user-centered design with examples by studio designers.
  • Business Terms in Design for E-Commerce. Sales Basics. When in Rome, do as the Romans do. When in business, know what the business people talk about. First set of key business terms for designers who work for e-commerce: conversion, sales funnel, sales channels, niche, 4P etc.
  • UI in Action. 15 Animated Design Concepts of Mobile UI. The diverse set of design concepts providing practices by studio designers in interface animation. Motion design ideas for various mobile applications, supporting layouts from slightest motion accents up to core interactions.
  • Short but Vital. Key Abbreviations in Design for Business. The article continues to set the bridge between business and design. This time we consider popular abbreviations such as MVP, USP, B2B, B2C, C2C and their influence on design solutions in perspective of UI, UX and branding.

 

tubik blog article

 

As usual, we were keen to actively share our knowledge and experience answering questions about various design topics on Quora. Here are the most popular ones in June:

What blogs can help me become well versed in UI, UX and usability standards?

— What is a home page?

What is a landing page?

— What’s the difference between human-centered design and user-centered design?

 

Tubik studio on Quora

 

Design events were also a bright part of the month. In June the team of studio managers attended the conference ITEM-2016 and designers attended Shuba meetup.

 

ITEM conference IT Tubik managers

 

Tubik studio designers

 

June moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page.

 

tubik studio design office

 

tubik studio designer ecommerce

 

Definitely, we didn’t miss the chance to share our ideas and experience via Medium and kept everyone updated with studio news via Twitter, Tumblr and Flipboard.

 

Welcome to join us wherever it’s convenient for you. Positive summer vibes and bright inspiration to everyon. Let’s meet a new month of projects, ideas, meetings, fresh design concepts and wise tips from experts. Stay tuned!


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

tubik studio design business

Business Terms in Design for E-Commerce. Sales Basics

 

«Contrary to popular belief, designers are not artists. We employ artistic methods to visualize thinking and process, but, unlike artists, we work to solve a client’s problem, not present our own view of the world.» (Erik Spiekermann)

 

 

Modern design has multiple faces, sides and directions. Some of them are more artistic than the others which are deeper concentrated on profits and goals. However, any way it goes design is the sphere with different perspective. Design is goal-oriented and problem-solving activity applying art to serve people.

 

«Whether you are helping to launch a new business from scratch, or making incremental changes to an existing product, or something in between, any design task you undertake must serve a goal. It’s your job to find out what those goals are.» (Mike Monteiro)

 

Talking about the sphere of web and app design, one of the most practical and goal-oriented fields of creativity is design for e-commerce. In this domain, there are many factors influencing design decisions and lots of relevant aspects to study and research. Designing a product for ecommerce, be it a website, a web or mobile application, branding design, advertising materials, designers work within various limitations built by particular product or service features, target audience, marketing and promotion strategy, business goals, budget and investment plan etc. Design becomes a tool working when used properly. Therefore, to use it efficently, the designer needs to know the basics of business and economy as the goal of design process in this case is creating an app or a website raising money and built on business techniques and methods. Moreover, quite often designers creating e-commerce platforms and products work in team with marketologists, advertisers, researchers, analysts and psychologists all of whom have a purpose to increase the level of profit brought by the final product.

 

So, today we decided to start collecting and explaining here basic business terms which are important in the process of digital design for e-commerce. Considering this list can make the designer much closer to marketologists and provide great help for better communication. In addition, keeping the aspects mentioned below in mind on the earliest stages of design such as UX research and wireframing is a good way to effective solutions increasing profits on the solid well-thought-out logic of interaction. The set of terms can be also useful for project managers involved in the process and managing collaboration between different sides of the same process.

 

tubikstudio design office teamwork

 

Business Basics

 

Today’s section is focused on basic terms used in the domain of economics and business strategy mostly concentrated on sales in their broad understanding. Taking them into account and analysing significantly increases the chances of creating efficient digital product.

 

«A satisfied customer is the best business strategy of all.» Michael LeBoeuf

 

E-commerce (Electronic Commerce)

 

«If you do build a great experience, customers tell each other about that. Word of mouth is very powerful.» (Jeff Bezos)

 

Definition. E-commerce is the direction of business activity when the process of providing customers with goods or services is done by means of electronic devices and the Internet. This sort of communication and finalization of sales adds some new aspects to data management, sales channels, advertising, presenting goods and services and moreover — enabling full cycle of commerce operations, including payments, delivery and refunds.

 

The last decade witnessed booming ecommerce development. Today it provides the opportunities for not only e-trade both from businesses to buyers but also online auctions and user-to-user sales platforms. E-commerce systems and activities today include presenting and booking wide range of services, e-banking, commercial operations with e-money and e-wallets, diverse forms of e-marketing and many other things which customers are using more and more often on everyday basis.

 

Design aspect. Obviously, success of e-commerce activity depends on several factors among which:

— quality of the product or service offered

— quality of the content presenting the offer to customers

— quality of design for the electronic platform — website and/or mobile application — via which the sales are going to be delivered.

 

So, it’s easy to see that UI/UX design part plays the vital role. Thoroughly thought-out logic and transitions, simple and clear microinteractions, fast feedback from the system, attractive product presentation, easy payment flow and plenty of other details and features can directly influence increasing profits for the business involved in such a popular e-commerce game. This is the field where designers and business experts can work as one team for good of everyone, first of all of target user.

 

Designing e-commerce website or mobile app, designers should definitely consider the following aspects:

 

— operational simplicity

— strong branding

— security of users’ data

— effective use of visual elements

— clear data presentation via menus, catalogues etc.

— user’s ability to leave feedback about goods and services

— easily available general and contact information about the business providing goods or services

— design that supports the offer not overshadowing it.

 

tubikstudio ui animation

Product Card Animation by Alla Kudin

 

Conversion

 

«It’s much easier to double your business by doubling your conversion rate than by doubling your traffic» (Jeff Eisenberg)

 

Definition. Initially in terms of e-commerce, conversion is the index showing how many visitors actually moved to the end of the way they were offered actually buying a product. So, for e-commerce conversion transforms visitors (users) into buyers.

 

Design aspect. Today ecommerce uses wide range of techniques, so in terms of web or app platforms meaning of conversion also gets broader. In modern terms of comprehensive and numerous functions and needs, which users are able to fulfill with online resources and digital products, conversion is the rate of cases when visitors did the action they were called to. And that can be not only buying something.

 

For example, in our article about landing pages which are recognized as one of strong tools for e-marketing and e-trade we mentioned that conversion can be also fixed in case of:

 

  • moving to direct use of a product
  • subscription
  • transition to the other page
  • downloading an app or a file
  • providing some information
  • answering the question in the survey
  • starting free/discounted trial use of a product
  • browsing a library
  • reading more detailed description of the product or service etc.

 

Therefore, conversion for a webpage or app screen can mean different actions that correspond to sales or marketing strategy of the particular business.

 

Conversion means that your page transforms passive users into active. They don’t just observe the information given to them, but also do the action which is offered by this page. So, conversion is one of the most important indices of the web page or app screen efficiency which is vital for business. It is a metric reflecting focus on engaging visitors with data performance and stimulating them to make the action which is a part of a business plan.

 

For designers the factor mentioned above means that if they create design concentrated on conversion rates via positive user experience, their work will result in website or app bringing profit both for user and business.

 

Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh

 

Read more and review the examples on this topic in our previous article

 

Sales Funnel

 

«Communications is at the heart of e-commerce and community.» (Meg Whitman)

 

Definition. Sales funnel (in other words — purchase funnel) is a technique which is deeply customer-focused and based on gradual involvement of a customer into the process that potentially gets finalized with the act of actual purchase. When this technique is applied, the customer moves through several stages of involvement providing him/her with necessary information about the product and benefits persuading to make a purchase.

 

Basic sales funnel includes the following stages:

 

— Introduction (Awareness). User gets the initial information about the product, its brand name and nature. In other words, user learns that the product or service exists on the market.

 

— Education (Interest). User is provided with more detailed information about the features and benefits of the product or service that can potentially interest them and solve their problems.

 

— Evaluation (Analysis). User gets the chance to compare the offer with its competitors and obtain the information about USPs (Unique Selling Points) of the offered product or service.

 

— Decision (Engagement). User gets final vital arguments engaging him/her to make a decision; it can be short summing-up about core benefits of the offer, data about additional bonuses or special offers, engaging call to actions and explanation of purchase process.

 

— Purchase. User makes a decision and takes the ability to make a purchase. The sale is done.

 

— Retaining (Repeating the experience). User gets the opportunity to leave feedback, obtain additional contacts supporting the offer, subscribes to updates, gets the chance to repeat the purchase easily if desired.

 

Design aspect. In terms of e-commerce, sales funnel is highly effective commercial technique supported with diversity of functions digital products can offer. Knowing the priciples of sales funnel leads to customer-centric, informative and engaging design solutions. Sales funnel can be either fully represented on the website or landing page as well as in mobile application or from outer source,  for example social media taking over the mission of awareness and interest and directing engaged traffic to the platform enabling the product.

 

In addition, sales funnel stages thought out and applied properly can work as a sort of filters letting quickly inform users about the product or service and move to the next stage those who are potentially more interested while saving time and effort for those who are looking for something other.

 

However, sales funnel designed carelessly can play the opposite role: it can confuse users who are potential buyers and turn them out of the website or app without taking a chance to know proper information about the offer.

 

Sales funnel should be applied and designed on the basis of thorough research of target audience and market segment. Moreover, it should be carefully tested from the very start of its implementation to measure if all the stages work efficiently. Practice proves that even minor design changes can bring big changes.

 

website design concept tubikstudio

BRMC Website by Konst

 

Sales Channel

 

«It is not your customer’s job to remember you.It is your obligation and responsibility to make sure they don’t have the chance to forget you.» Patricia Fripp

 

Definition. Sales channels are the ways through which the potential customers come to the point of e-commerce, be it a website or mobile application with which they can realize the actual purchase.

 

Design aspect. Designing for e-commerce, it is important to take into account maximum of the possible sales channels which are really numerous in the Internet, from social networks to specialized forums, influencer’s reviews and tailor-made advertising campaigns. Researching and understanding those channels gives broader prospects to the actual point of sale which you are designing for.

 

There are several vital asects to remember about:

 

— Sales channels should be initially concentrated on target audience. There is always the place and time to broaden the perspective as soon as core target audience is involved. However, the attempts to «sell for all» and «design for everyone» from the launch can bring to waste of effort, time and money spent on design and promotion. Move gradually and measure the efficiency of design solutions at every step.

 

— Sales channels will work effectively from initial awareness stage if they witness strong connection to general brand identity. That is the reason to develop guidelines for online sources presentation in brandbook considering all the details of visual presentation and mission statement. Consistency is a powerful tool of both design and marketing.

 

— Sales channels should direct traffic to the places which enable users quickly get informed and make the actions they come for. For example, if the post in Facebook invites users to participate in summer sale, they should be directed right on the landing page of this sale, not to the home page of the website.

 

The mentioned factors thought out at the stage of thinking over UX design solutions are able to make a good impact on conversion and sales rates.

 

Niche

 

«We will continue to see a convergence of the digital and physical world. Those who conquer that trend will be market leaders.» John Phillips

 

Definition. In business, niche means concentration of the offer on specific needs, wishes and problems of a specific target audience. Niche market is a specialized market segment which is aimed at specific market needs with a close view on its demography, education level, level of income and purchase abilites etc. For example, when one company produces software generally used for creating and editing textual materials for broad target audience while the other is adopted for specific needs of copywriters and editors (grammar checking, plagiarism analysis, synonyms prompts etc.), the latter one presents the niche business.

 

Design aspect. Designing for niche market and niche product, it’s important to learn all the details about the target audience as it is going to be quite specific and more details are usually influencing the process of design and marketing. Applying psychology of color, copy targeted at potential clients, deep analysis of their needs and providing efficient layout, easy transitions, clear data presentation and aesthetic features that suit this particular audience is good way to high profit. In addition, creative ways to emphasize specific nature of the product or service by means of design such as branding and original UI solutions can help the product to stand out of the crowd and stay competitive.

 

tubik studio ui animation

Bonano e-commerce interactions by Vladyslav Taran

 

Maslow’s hierarchy of needs

 

«It is quite true that man lives by bread alone — when there is no bread. But what happens to man’s desires when there is plenty of bread and when his belly is chronically filled?

At once other (and “higher”) needs emerge and these, rather than physiological hungers, dominate the organism. And when these in turn are satisfied, again new (and still “higher”) needs emerge and so on. This is what we mean by saying that the basic human needs are organized into a hierarchy of relative prepotency» (Abraham Maslow, 1943).

 

Definition. One of the basic psychological theories widely applied in business on both micro- and macroeconomical levels. Developed by Abraham Maslow, it is focused on the hierarchy of human needs and consequently factors of motivation.

 

Its presentation found at Simply Psychology website features  5 levels of human needs featured by the theory:

 

1. Biological and Physiological needs — air, food, drink, shelter, warmth, sex, sleep.

 

2. Safety needs — protection from elements, security, order, law, stability, freedom from fear.

 

3. Love and Belongingness needs — friendship, intimacy, affection and love, — from work group, family, friends, romantic relationships.

 

4. Esteem needs — achievement, mastery, independence, status, dominance, prestige, self-respect, respect from others.

 

5. Self-Actualization needs — realizing personal potential, self-fulfillment, seeking personal growth and peak experiences.

 

Design aspect. Having read the points of the theory, it’s easy for a designer to ask: «What does it have in common with design process?» The link perhaps doesn’t look really obvious, but it is fundamental in motivating people to use or buy products or services on different levels of economic relationship. Designing for e-commerce, which is one more type of human relationship, with a specific goal and ability to apply the mentioned theory can produce user-friendly and customer-centric product achieving its target audience and solving its problems.

 

Certainly, it’s great when designer is able to involve professional marketologists into all the stages of the creative process and apply their professional knowledge and skills in design form. However, this opportunity isn’t always available. Moreover, designer able to analyse economic basics and business factors influencing the design scheme and logic gets the higher level of proficiency.

 

In design for e-commerce, it is good to understand from the early stages of the process what stage of the Maslow’s pyramyd the core target users are at. Answering this question, designer is able to talk to users’ in their language and find the solutions that resonate in their hearts and minds the best. Users’ needs form their motifs, triggers that can catch their attention, words that can touch them, length of copy and calls to actions that they are ready to accept and follow. Analyzing the level of needs and expectations, designer is able to find the most efficient layout and informative graphic elements. Knowing and feeling the user is the solid foundation for problem-solving goal-oriented design.

 

ui animation cafe app tubikstudio

Cafe Coupon App by Dima Panchenko

 

4P Theory

 

“People don’t call it e-commerce anymore. It’s called omni-commerce, and it’s the idea that digital permeates every step of the purchase chain from product discovery to trial to pricing to actual purchase.” (Tolman Geffs)

 

Definition. Famous 4P theory, presented by Neil H. Borden and later grouped by E.Jerome McCarthy, also known as marketing mix, has become highly popular and efficient in business strategy, including e-commerce sphere. It states that product launch and lifecycle is based on four «P» factors: product, price, place, promotion. Business Case Studies website simply formulates it the following way:

 

«When marketing their products, firms need to create a successful mix of:

  • the right product
  • sold at the right price
  • in the right place
  • using the most suitable promotion.»

 

Marketing case studies prove that missing even one of four mentioned positions can waste all the effort and reduce the levels of profit and brand awareness significantly.

 

Design aspect. No doubt, 4P theory is highly applicable in design for e-commerce. The Price of product is usually the furthest part from designer’s decisions as it is decided and given by the stakeholders ordering design part of work. In perspective of Product it works only partly being applicable to those cases when users buy digital products or services, let’s say mobile applications, which also need UI/UX design.

 

However, talking about the other two factors we can see how actual they are in terms of design effort and creativity. Indeed, designers creating websites or apps for e-commerce, create the right Place for trading and are responsible for making this place comfortable, attractive and correspondent to the product nature as well as target audience expectations. As for the Promotion, today online marketing features numerous ways of presenting the product and achieve the target audience; it’s effectiveness also significantly depends on design decisions. 

 

Neglecting close interconnection and mutual influence of all those factors on the final result increases risk of poor rates. Design decisions made on the basis of those factors supporting each other help to provide pleasant, positive, easy-to-use and user-focused e-commerce platforms.

 

Tubik studio UI animation

Tubik Studio | Museu by Ernest Asanov

 

The bottom line

 

The set of business terms and their definitions given above builds the bridge between business strategies and designs able to efficiently support them. However, it’s very easy to get overwhelmed with all those techniques and forget the first and most important thing. There are no any sophisticated design solutions, marketing techniques and any sort of magic which will sell the bad product for a long time. Surely, there can be some effect, but it will never retain the users. Positive experience of interaction with a website will not overcome bad experience of interaction with low-quality product or service.

 

The offer is the key. Design is an actionable and helpful tool on every stage of launching, presenting and promoting the product, informing users about it and selling it in fast and easy way. Nevertheles, if the product is of poor quality, successfull design of e-commerce platform isn’t going to make it better. Think over the product and its user first, only then design will give it the chance to beam at full.

 

«To satisfy our customers’ needs, we’ll give them what they want, not what we want to give them.» Steve James

 

tubik studio designer ecommerce

 

Don’t miss our next article which is going to present the set of business terms useful for UI/UX and graphic designers in terms of marketing and user research. Stay tuned!


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

Landing page design by Tubikstudio

UI/UX Glossary. Web Design Issues.

Perhaps you remember our previous issue of UI/UX Glossary dedicated to general terms of creating design with high level of usability. We were discussing the difference between UI and UX, which are often confused, explained the process and aims of wireframing and prototyping, presented our explanations of icons and microinteractions.

 

Today continuing the stream we are going to provide some new entries to our glossary, this time concentrated more on web design elements and techniques.

 

Web Design

 

Web Design is a term defining design field featuring all the activities connected with creation and maintenance of websites and pages both as pieces of practical interaction and the product with certain aesthetic qualities. Web design process includes full cycle of production path from the initial idea sketched roughly in pencil to elaborate visual performance, information architecture and updating design in the process of actual website use.

 

Web design as a term can also name the result of mentioned activity direction, which means that this word is used to describe structure, functionality, style and appearance features of a website or a webpage interface. In addition, web design also can include content generation and management.

 

So, it’s easy to see that the term itself is very broad and comprehensive. Due to this fact, web design as a domain of human activity lies on the crossroads of many sciences and practices. Among them we should mention:

  • drawing and composition
  • painting and coloristics
  • logic and schematism
  • analysis and statistics
  • visual arts
  • programming
  • user research
  • psychology
  • copywriting
  • branding and marketing etc.

 

Covering diverse aspects of a website functionality and appearance, some designers work in teams every member of which specializes in a particular sphere while the others can work out different of the mentioned aspects individually. Anyway, in vast majority of cases web design is the sphere of digital products which have to be functional and user-centered. As famous American designer Charles Eames said “Design is a plan for arranging elements in such a way as best to accomplish a particular purpose” and his words totally reflect the idea of modern web design.

 

The authors of the book “Research-Based Web Design & Usability Guidelines” mention: “To ensure the best possible outcome, designers should consider a full range of user-interface issues, and work to create a Web site that enables the best possible human performance.” Working over a website, designers have to concentrate on such aspects as:

 

usability (the website is convenient, clear, logical and easy to use)

utility (the website provides useful content and solves users’ problems)

accessibility (the website is convenient for different categories of users)

desirability (the website is attractive and problem-solving, it retains users and creates positive experience which they are ready to repeat).

 

Here are some examples of web design concepts created by Tubik Studio designers.

 

tubik studio design UI

Randomizer concept by Vladyslav Taran

 

tubikstudio ui animation website design

Tubik Studio | Björn by Ernest Asanov

 

website design concept tubikstudio

BRMC Website by Konst

 

Home Page

 

Home page is the most popular name for the main page of the website. It is called home as it usually provides starting point with many further directions for the user, containing direct links to the most important areas of interaction with a website. In other words, it can be also named initial page or index page. Home page is mostly the start of users’ journey if they are directed to the site by search engines.

 

In addition to essential links to different website parts, home page often contains search field, basic onboarding functionality for personalized sites, different areas of navigations showing users diverse categories of data. It might also contain engaging welcome messages and copy blocks featuring slogan and/or explaining benefits of the website or objects it presents.

 

More than a decade ago famous expert in usability Jakob Nielsen wrote Top 10 Guidelines for Homepage Usability in which he said: “Homepages are the most valuable real estate in the world. Each year, companies and individuals funnel millions of dollars through a space that’s not even a square foot in size. For good reason. A homepage’s impact on a company’s bottom line is far greater than simple measures of e-commerce revenues: The homepage is your company’s face to the world. Increasingly, potential customers will look at your company’s online presence before doing business with you — regardless of whether they plan to close the actual sale online.” Long time has passed since then but clear and user-friendly home page is still the issue of vital importance for an efficient website.

 

Home page is actually a basis of good navigation which is usually the core of positive user experience. Messy interface and badly designed layout can become the reason of user confusion and annoyance.

 

Here are some examples of home pages created by Tubik Studio designers.

 

home page landing tubikstudio

Comics Shop Home Page by Dima Panchenko

 

tubik studio ice ui website

Tubik Studio | Ice by Ernest Asanov

 

Landing Page

 

Recently we published an article devoted to functionality and efficiency of landing pages. Let’s remember key points here.

 

Landing page in its basic wide meaning is the term used for analytics to describe any page where the user started his or her journey around your site, in other words, where a user lands on the website. However, today the other, more specific meaning is used much more often to define a landing page. Behind this term, people understand the special web page created for presentation of the specific product, service, features or options so that the visitor could get necessary information quickly and easily not being distracted. That is why the analysts say a landing page is in most cases of marketing and presentation of particular product or service is much more efficient than home page. Home page can have too many options and getting through all of them to find the particular product the user can get distracted from making the decision, lose interest or even get annoyed.

 

Why is landing page needed? As we mentioned in the case study about designing a landing page, it is easy to answer this question with a little metaphore. Imagine, you are going to visit, let’s say, New York to walk around Manhattan. That is the dream of your life. Finally you find the service which offers to take you to New York City fast and cheap. Great, isn’t it? You pack your bag, you charge your camera, you get up full of admiration as the dream of your life is going to get real. And then you are taken by those amazing people who offered you the realization of your dream to the entrance point of New York City. They leave you there to find Manhattan or any other place you want by youself. How do you like it now? Who knows, perhaps you will be not so happy after exhausting journey around the huge city looking for the place you want. Wouldn’t it feel great to be taken right to the destination, fresh and ready to admire and absorb positive emotions? Wouldn’t you as a customer be happier to reach your goal faster and easier? Sure, yes.

 

That is actually what a landing page does. When a person obtains the information from the outer source about the specific product, feature, information or service and clicks through the link to its provider, sure, he or she doesn’t dream to spend a lot of time looking for desired product or page among all the links and information provided on your homepage. The user wants to «land» directly at that very place which will make possible for him or her to get what they want as fast as possible and getting enough (but not too much) information to support their decision-making process. So, creating a well-thought-out landing page is really vital to strengthen marketing strategy and increase conversion rates.

 

In general, typical landing pages often have:

 

1) General idea of the presented object (product, service, activity etc.) with call-to-action element. Users need to be provided with basic description of the benefits, preferably not too detailed but concise and useful. The aim of this element is to inform the user and provide a clear and noticeable oportunity to actively use this information via call to action element which can be presented with a button, link, contact form, subscrition field etc.

 

2) Testimonials and signs of trust. People usually tend to trust more to what is already used or tried by other people and recommended as worth attention. Therefore, testimonials from clients, considerable numbers of followers in social networks, awards and certificates can have a great impact on conversion rate.

 

3) Description of the main features. This block of information can be used as an additional information supporting description of basic functionality. It supplies a visitor with more details about the product or service, its abilities and technical characteristics, its influence on life and productivity and the like. It certainly makes the landing page longer and requires more attention from users so applying this block should be always thoroughly analyzed.

 

Here are some examples of landing pages created by Tubik Studio designers.

 

Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh

 

tubik studio landing page design

Arts, Culture & Education Curation | Landing by Polina

 

landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko

 

Read more and review the examples on this topic in our previous article

 

Responsive Design

 

The necessity of responsive design is based on the audience you want to cover for your website. Would you like your users to use your site from any device and feel it positive, useful and convenient anyway? Sure, every customer would being aware of growing popularity of mobile devices. And in this case we should say confidently: you obviously need responsive web design for website.

 

The idea behind responsive web design (RWD) is that the content and layout of a website should efficiently adapt according to the sizes and technical abilities of a device it is opened at. For most users, these changes are so subtle that it is easy to say “ Hey, guys, this is the same site on my smartphone which I looked through yesterday at my desktop. Nothing special has changed here!” And somehow these words can be the great praise of designer’s work. That will mean that the designer managed to keep all the meaningful elements and general layout of the desktop version efficiently and at the same time avoid making the page or layout elements too small, hardly seen or impossible to distinguish even on the much smaller screen of a mobile device. That is RWD in action.

 

Nowadays making the site non-mobile-friendly means to lose the part of audience which likes surfing and using the internet sources “on the go”. It’s vital to consider that this part of the audience is mainly the most active part, non-afraid of technologies, fast in browsing necessary information and options, easy-going in making internet purchases and try new products. That’s why neglecting the idea of RWD can bring real loss to the product which otherwise could be highly efficient and bring high conversion rates.

 

In the book «Responsive Web Design» experienced designer Ethan Marcotte says: «…web design is about asking the right questions. And really, that’s what responsive web design is: a possible solution, a way to more fully design for the web’s inherent flexibility. In the first chapter, I said that the ingredients for a responsive design were a fluid grid, flexible images, and media queries. But really, they’re just the vocabulary we’ll use to articulate answers to the problems our users face, a framework for ordering content in an ever-increasing number of devices and browsers. If we’re willing to research the needs of our users, and apply those ingredients carefully, then responsive web design is a powerful approach indeed.»

 

Creating responsive web-design for a web-product means making it pleasant-looking, clear and functional in different sizing with optimal navigation that provides high level of usability. This technique relieves a owner from the necessity to develop several versions of the site as it provides one site with fast adaptation to different technical conditions, so RWD is also generally cheaper than creating several versions of the site. Responsive web-design makes the site flexible, easy to manage and nice to use. Moreover, you don’t need to publish your content several times for different versions and it saves your time or human resources. If these are the features you want your product to obtain, than consider responsive web design for your product from the earliest stages of its design and development. In addition, you will get higher positions in Google search engine as it supports the idea of RWD, so that is important part of general search optimization of your product. Therefore, it’s up to you whether to apply RWD for your web-product or not, but consider all benefits before making your decision.

 

Tubik Studio Tracking App

 

Read about this topic in our previous article

 

Header

 

In terms of web layout elements, header is the upper (top) part of the web page. It is a significant and strategic part of the page as it is what people see before scrolling the page in first seconds of introduction to your website. Therefore, header should be informative and provide the most important information about the digital product so that users could scan it in split seconds. Header is also the area providing broad field for creative design solutions which should be catchy, concise and useful. Headers are often referred to as «Site Menus» and positioned as a key element of navigation in website layout.

 

Headers can include:

 

— basic elements of brand identity: logo, brand name lettering, slogan or company statement, corporate mascot, photo presenting the company or its leader, corporate colors etc.

— copy block setting the theme of the product or service presented

— links to basic categories of website content

— links to the most important social networks

— basic contact information (telephone number, e-mail etc.)

— switcher of the languages in case of multi-lingual interface

— search field

— subscription field

— links to interaction with the product such as trial version, downloading from the AppStore etc.

 

Certainly the list above doesn’t mean that all the mentioned elements should be included in one webpage header — in this case, header section would be overloaded with information. On the basis of design tasks, designers, sometimes together with marketologisits, decide on the strategically important options and pick them up from the list or add the others.

 

The choice of typefaces for headers and the background color should get under highly rigorous research and testing as the aspect of readability in header plays vital role. User has to be able to scan and percieve this basic information as fast as possible without any sort of additional effort. Otherwise you risk providing non-user-friendly interface.

 

online magazine design tubik studio

Daily Bugle Online Magazine by Dima Panchenko

 

The design concept for a news website presented above features the header including the title of the website as a central element of the composition, two active links to basic categories of publications, link to live mode and search field marked with a magnifier icon.

 

One more thing to remember is that there are different ways for a header to transform in the process of scrolling the page down. Some websites use fixed header, which always stays visible and active at any point of interaction with the website; others hide the header in the process of scrolling. There are also websites which do not fully hide the header but shrink it in size in the process of scrolling, which means that they hide secondary information and leave only the most important elements of the layout active and available during all the process of interaction.

 

Another design solution which is rather popular in perspective of header functionality is hiding basic links of data categories behind the hamburger button. It is called so as its form consisting of three horisontal lines looks like typical bread-meat-bread hamburger.

 

hamburger button tubik studio

Hamburger button by Kirill

 

This button is usually placed in header and nowadays it is a typical element of interaction. Most users who visit and use websites on the regular basis know that this button hides the core categories of data so this trick does not need additional explanations and prompts. Hamburger menus free the space making the interface more minimalistic and full of air as well as allow massive saving place for other important layout elements. This design technique also provides additional benefits for responsive and adaptive design hiding navigation elements and making the interface look harmonic on different devices.

 

Although hamburger menus still belong to highly debatable issues of modern web and app design, they are still widely used as header elements. The arguments against hamburger menu are based upon the fact that this design element can be confusing for people who do not use websites regularly and can get misled with the sign which features a high level of abstraction. So the decision about applying hamburger button should be made after user research and definition of target audience’s abilities and needs.

 

Tubik studio UI design

 

Structure – Architecture Blog by Ernest Asanov

 

The presented design concept of a website has a fixed header which doesn’t hide while the page is scrolled. However, it follows minimalistic principles featuring brand name lettering as a center of composition, magnifier icon marking search functionality and hamburger button hiding links to navigation areas.

 

In one of the articles devoted to practices of header design, its author Bogdan Sandu mentions an important point that should be kept in mind:

 

People judge the quality of a website in just few seconds and a second impression is something absent on Internet. In conclusion, a website must be eye-catching else, it would be nothing more than a big failure.

 

Header can become a great help in presenting the essential data to the user quickly and providing positive user experience via clear navigation. However, that doesn’t mean that every website needs a header. There are many creative solutions providing designs applying typical header functionality in other zones of the layout. Every case of website design needs analysis and research of target audience for the product or service. 

 

Footer

 

According to everything mentioned above, it’s easy to understand that footer is the lower (bottom) part of the webpage. Footer usually becomes a marker of the end of a webpage. Also, being one more zone of global website navigation, in most cases footer provides additional field for useful links and data.

 

Footer can include:

 

— name and logo of the company or product

— links to user support sections, for example, FAQ page, About page, Privacy Policy, Terms and Conditions etc.

— credits to website creators

— contact info and forms

— links to company or product accounts in social networks

— testimonials and badges

— certification signs

— subscription field etc.

 

As well as header, footer is not the element found in 100% of websites. For instance, with some design tasks when designers apply infinite scrolling technique, traditional footer is not an effective navigation zone. However, in case of infinite scrolling, the idea of fixed footer can be also applicable and support navigation not losing this area. It should be said that for most users footer is a common place of looking for contact information, credits and sitemaps, so playing on this habit can be beneficial and fixed footer can become a good way in case when page has long scrolling area. Decision on using footer is always based on the idea of effective usability. Anyway, if footer is applied it should get in harmonic combination with all the other design solutions of the website layout and support general stylistic concept.

 

In the review of effective footer designs, Nathan Leigh Davis and the Creative Bloq team emphasize: «Designing a great footer is not about finding the best way to layout a lot of unrelated content, but the ability to prioritise and disregard unnecessary or superfluous information.» First of all, footer should provide information support and in this way strengthen the chances of positive user experience.»

 

The new set of our design glossary is ready for those who need it and we are going to continue this practice before long. Don’t miss the new sets in which we are going to tell more about the types and fucntions of buttons, menus and other interactive elements of user interfaces. If there are any specific terms you would like to see explained, described and illustrated, feel free to contact via direct message in our Facebook page or Twitter as well as our Quora representative. New definitions are coming soon!


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

Welcome to read us on Quora

SwiftyBeaver ui by Tubik studio case study

Landing Page. Direct Flight to High Conversion.

Today we would like to discuss the topic which goes far broader than pure design issues. It lies on the crossroads of design, marketing, user research, psychology and other spheres dealing with people, their behavior and solving their problems. Today we are talking about landing pages. Let’s think over the most popular questions often asked about landing page design.

 

What is landing page?

 

Landing page in its basic wide meaning is the term used for analytics to describe any page where the user started his or her journey around your site, in other words, where a user lands on the website. However, today the other, more specific meaning is used much more often to define a landing page. Behind this term, people understand the special web page created for presentation of the specific product, service, features or options so that the visitor could get necessary information quickly and easily not being distracted.

 

That is why the analysts say a landing page is in most cases much more efficient than home page. Home page can have too many options and getting through all of them to find the particular product the user can get distracted from making the decision, lose interest or even get annoyed.

 

landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko

 

What is conversion and why is it important?

 

Talking about the sphere of design for businesses and products, especially in terms of their marketing and promotion, the word conversion is perhaps the most popular and widely used. In its most general definition, conversion means transformation, and depending on the field this words is applied for, it will be used for different objects.

 

Initially in terms of e-commerce, where landing pages have perhaps the widest field of application, conversion is the index showing how many visitors actually moved to the end of the way they were offered actually buying a product. So, for e-commerce conversion transforms visitors (users) into buyers.

 

However, nowadays landing pages go far beyond e-commerce, therefore understanding of conversion also gets broader. In modern terms of comprehensive and numerous functions and needs, which users are able to fulfill with online resources and digital products, conversion is the rate of cases when visitors did the action they were called to. And that can be not only buying something.

 

In terms of landing page, conversion can be also fixed in case of:

— moving to direct use of a product

— subscription

— transition to the other page

— downloading an app or a file

— providing some information

— answering the question in the survey

— starting free/discounted trial use of a product

— browsing a library

— reading more detailed description of the product or service etc.

 

Tubik studio landing page design

 

Here we can see a concept of a landing page designed by Konst. It presents a website of a rock group. Different blocks of the page provide different calls to action not overloading the user with the information. Therefore, a visitor needs split seconds to scan the page and find the necessary section that enables to see more about the topic of a particular interest.

 

website animation tubik studio

 

Conversion means that your page transforms passive users into active. They don’t just observe the information given to them, but also do the action which is offered by this page. So, conversion is one of the most important indices of the page efficiency which is vital for business. Landing pages are focused on engaging visitors with data performance and stimulating them to make the action which in vast majority of cases is a part of a business plan.

 

Jeff Eisenberg, a successful businessman and head of an advertising agency, gives a brilliant thought about the importance of conversion: «It’s much easier to double your business by doubling your conversion rate than by doubling your traffic». His words are proved by practice of numerous businesses that direct target users to landing pages providing specific data and saving their most precious resource — time.

 

Why is landing page needed?

 

As we mentioned in the case study about designing a landing page, it is easy to answer this question with a little metaphore. Imagine, you are going to visit, let’s say, New York to walk around Manhattan. That is the dream of your life. Finally you find the service which offers to take you to New York City fast and cheap. Great, isn’t it? You pack your bag, you charge your camera, you get up full of admiration as the dream of your life is going to get real. And then you are taken by those amazing people who offered you the realization of your dream to the entrance point of New York City. They leave you there to find Manhattan or any other place you want by youself. How do you like it now? Who knows, perhaps you will be not so happy after exhausting journey around the huge city looking for the place you want. Wouldn’t it feel great to be taken right to the destination, fresh and ready to admire and absorb positive emotions? Wouldn’t you as a customer be happier to reach your goal faster and easier? Sure, yes.

 

That is actually what a landing page does. When a person obtains the information from the outer source about the specific product, feature, information or service and clicks through the link to its provider, sure, he or she doesn’t dream to spend a lot of time looking for desired product or page among all the links and information provided on your homepage. The user wants to «land» directly at that very place which will make possible for him or her to get what they want as fast as possible and getting enough (but not too much) information to support their decision-making process. So, creating a well-thought-out landing page is really vital to strengthen marketing strategy and increase conversion rates.

 

Tubik studio UI animation

 

As a practical example, here is the design concept Museu by Ernest Asanov. It presents a landing page promoting art exhibitions. The idea behind it is to make this sort of promotion aesthetic and unobtrusive for the user as well as highly informative. The balance of minimalism and utility appealing is kept by means of style, color and motion.

 

In the book «Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions» by Tim Ash, Maura Ginty and Rich Page, the authors provide concise set of rules which designers and marketers should remember about creating a digital interactive product. It’s high time to remember them now:

 

The Rules of Web Awareness:
- If the visitor can’t find something easily, it does not exist.
- If you emphasize too many items, all of them lose importance.
- Any delay increases frustration.

 

These thoughts make the solid ground for using landing pages in case when you need to concentrate user’s attention on something important, to make it noticeable and easily available. Landing page is a tool to emphasize one item, to make it quickly found and to reduce delays in cases when target user seeks for specific operations, services or items. As the author of highly informative article «The ultimate guide to designing landing pages that convert» Cameron Chapman mentions, «One of the biggest mistakes a marketer can make is sending traffic from any kind of advertising or PR campaign to their home page. Your home page likely has little direction or direct connection to the campaign sending traffic to it. That can leave visitors confused.»

 

What does a landing page consist of?

 

Actually, landing page is a field for broad creativity and depending on the target audience and objectives behind it, it can be very different. There isn’t a single guide for the fixed scheme and construction of a landing page, but there is a basic thing that should be provided by any landing page. It doesn’t matter what size is the page, how many parts it includes, how many visual elements it uses, the most important thing for any page is that it should provide VALUE.

 

In general, typical landing pages often have:

 

1) General idea of the presented object (product, service, activity etc.) with call-to-action element. Users need to be provided with basic description of the benefits, preferably not too detailed but concise and useful. The aim of this element is to inform the user and provide a clear and noticeable oportunity to actively use this information via call to action element which can be presented with a button, link, contact form, subscrition field etc.

 

2) Testimonials and signs of trust. People usually tend to trust more to what is already used or tried by other people and recommended as worth attention. Therefore, testimonials from clients, considerable numbers of followers in social networks, awards and certificates can have a great impact on conversion rate.

 

3) Description of the main features. This block of information can be used as an additional information supporting description of basic functionality. It supplies a visitor with more details about the product or service, its abilities and technical characteristics, its influence on life and productivity and the like. It certainly makes the landing page longer and requires more attention from users so applying this block should be always thoroughly analyzed.

 

Tubik studio landing page design

 

The example provided above is a concept of landing page accomplished and presented on Dribbble by Sergey Valiukh. As you can see, it involves all the elements mentioned above.  The aim of the page is to promote a shop of organic food. It is composed in several blocks presenting the name of the shop, products, highlighting some important aspects of service, call to actions and testimonials. The designer sets the purpose to make it informative but not overloaded, appealing but not aggressive. To make the experience more attractive and engaging, the process of scrolling the page was livened up with animation and the visual elements were selected to support the general theme and provide immediate visual perception of basic idea.

 

Landing Page Animation Tubik Studio

 

What are important aspects of an efficient landing page?

 
— Target audience analysis
 

No landing page should be designed without a solid basis of research and analysis. Landing page is not an object of pure art, it is a part of promotion and presentation strategy. Designer working on a landing page should keep in mind that any marketing campaign comes from definition of the goals and target audience. So, a landing page should be designed as a virtual bridge connecting target customer with a product or service. For a webpage with high conversion rates, design decisions have to be based on analysis of target audience’s preferences, abilities and psychological characteristics. Design of a landing page that will work for everyone is utopia, standing far from real business achievements and results.

 
— Market and competition analysis
 

One more aspect designer should dedicate time and effort for is analysis of the competition. Earlier we have already considered the connection between UI/UX design and advertising basics in the article «10 advertising basics to apply in web and app design» and one of the points was devoted to the aspect of competition analysis. As far as landing page is actually an active part of marketing process, the analysis of the market is inevitable for good result. Knowing the competitors, you will be able to create original ideas of presentation that will not get lost among other numerous products and services.

 
— Copy
 

Famous guru of advertising David Ogilvy said: «Every word in the copy must count.» This is a simple but unavoidable truth if you deal with a landing page. Decision on the amount of copy used on the page should be the aspect of thorough research and testing as it directly and highly influences conversions.

 

However, it doesn’t mean that every landing page should contain minimal number of words. If it presents a famous company product or service or informs about special offers, sometimes short and concentrated copy is enough to encourage users. However, if a new unknown product or service is presented, it is important to provide users with more information persuading them to follow call to action.

 

Tubik studio landing page ui

 

The provided example shows the design concept of a landing page for a non-profit organization accomplished by Polina. It uses considerable copy blocks and supporting visual elements to set the understanding of the club activity.

 

tubik studio landing page design

 

— Branding elements

 

It is obvious that elements of branding such as a logo, corporate colors and typefaces, slogan and other identity traits should be strongly presented on a landing page. They should provide strong connection of a presented product, service or activity with the company or brand visual and verbal identity. This improves efficiency of general marketing strategy.

 
— Visuals
 

As it was explained previously in the post about visual perception in UI, people in general have incredibly broad abilities to perceive visual marks, recognize and proceed data even transformed in images of high level of abstraction. In vast majority of cases people fix and percieve pictorial elements like icons and illustrations faster than words. Great proportion of users are visually-driven creatures by nature. As it is shown in all the examples provided higher, using attractive and informative graphics in landing pages enables users to catch the idea and scan the page much faster and saves their time as well as involves their aesthetic perception in the process.

 
— USP and CTA
 

These are two magic words to make a landing page efficient. USP (Unique Selling Point) is the most important benefit (or set of benefits) people can get with your product. CTA (Call to Action) has to encourage people to realize the conversion. Effective landing page quickly informs a user about unique selling points and provides noticeable, clear and easily-available calls to action. Design solutions and techniques for actionable CTA are worth the separate detailed discussion which we will start here in Tubik Blog soon in our next articles.

 
Short loading time
 

One of the aspects influencing design solutions for landing pages should be reasonable time of page loading. Users do not like to lose their time, and landing page is not a piece of unique something that will be an exception. Don’t make the visitors wait. All the design solutions should be thought-out carefully not to overload the page and prolong its time of loading unnecessarily.

 
— Video Presentation
 

Video presentation can become a very good way to present a product without making users read long copy blocks. It involves all the sences of perception into process. Video can make the page active and interesting. However, there is a pitfall to remember about: video has a considerable impact on page loading time. So, it should be really worth watching to become a design element of an efficient landing page.

 
— Responsive design
 

Several years ago one of the articles on Think with Google provided interesting facts and statistics about the importance of resonsive design for web products. Among them, we can learn that:

  • 61% of users said that if they didn’t find what they were looking for right away on a mobile site, they’d quickly move on to another site
  • 79% of people who don’t like what they find on one site will go back and search for another site
  • 50% of people said that even if they like a business, they will use them less often if the website isn’t mobile-friendly.

 

Perhaps, today those numbers are even higher as more and more people are using mobile technologies on everyday basis. Neglecting this aspect may negatively influence conversion rates.

 
— Absence of distraction
 

As it was mentioned above, landing page should concentrate people’s attention around a particular object. So, it should get rid of any elements that can distract user’s attention and highlight the parts directly influencing the conversion. The less additional links are used, the better. Call to action elements should get the fastest and highest level of attention. In this case user will get the best navigation to the goal.

 

tubikstudio swiftybeaver landing

 

Here is a landing page for SwiftyBeaver native Mac application whose design was accomplished by Ludmila Shevchenko. As we can see it is designed in minimalistic manner and concentrates users’ attention on short copy about the product’s functionality and CTA enabling to request a free beta access. Although the page provides other important links, they are designed in a way not distracting from the main elements providing conversion.

 

Why should you test your landing page?

 

In one of our earlier articles «Basic Grammar for Designers. Must and Mustn’t in Design» as well as in practical case studies we have already mentioned the importance of testing. Experts in usability say and practice proves that it’s impossible to be fully objective about the project you work on, especially if it’s a long-term one. Moreover, designer is not a magician turning into anyone who will use the product to understand the best way of doing anything. Therefore, creating the idea is not enough. You should test it to grab the real practical data and improve your product.

 

Let’s also remember David Ogilvy, who said: «The most important word in the vocabulary of advertising is TEST. Never stop testing, and your advertising will never stop improving.» Testing landing page enables to understand users’ behaviour and fix the solutions that are not effective and user-friendly.

 

Studies based on practical landing pages testing prove that even such a small change as color of a CTA element or placement of logo on the page, let alone the copy of the headline and CTA or length of general informative copy blocks, have a huge impact on conversion rates. Collecting statistics and analytics data and their careful analysis is a good way to effective design solutions providing high conversions and sales.

 

Recommended materials

 

Diverse issues of applying landing pages have been an object of professionals’ attention. In terms of design issues, we could recommend the following articles for those who would like to know more:

 

Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions

 

Landing Page Conversion Course (9 parts)

 

Classic landing page mistakes you’re probably still making

 

The ultimate guide to designing landing pages that convert

 

What Happens When You Analyze 100 Landing Page Examples?

 

10 great landing page designs

 

10 Key Landing Page Features That Draw in Prospects

 

7 Landing Page Call-to-Action Formulas for Higher Conversions

 

Want Conversions? Start with User-Friendly, Useful Landing Pages


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

SwiftyBeaver logo case study tubik studio

Case Study: SwiftyBeaver. Designing Logo.

In our previous case study we told you the story of UI and UX design for SwiftyBeaver describing the design process in detail and supporting it with the visual variants of different stages. Today we want to continue with unveiling logo design process.

 

swiftybeaver logo design tubik studio

 

Task

 

Design of a logo for the logging platform uniting the efforts of Swift and Objective-C developers, UX designers, app analytics experts, and product owners.

 

Tools

 

Pencil sketching, Adobe Illustrator, Adobe After Effects

 

Process

 

As we mentioned in case study on UI and UX design, SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple’s Swift programming language. It is aiming at developers as its basic target audience. The product supports all the devices belonging to Apple device family.

 

Design practice of previous projects accomplished by studio designers, such as Saily App or Passfold, proved that tight interconnection of design solutions on branding and user interface for the same product features higher level of efficiency. Both mentioned cases showed that in brand positioning and promotion, using the concept of strong corporate style and applying the elements of branding such as logo, lettering and illustrations consistently was the effective strategy. It is also important to remember that user interface of an application or a website is not just a sort of static or moving images — it is the field of active interaction. Interaction with the product via the interface enhances much higher memorability potential of brand elements as well as general stylistic concept. Following this approach for SwiftyBeaver project, user interface designer Ludmila Shevchenko and logo designer Arthur Avakyan worked in tight collaboration to get the design solutions that will effectively support each other.

 

Naturally, the initial stage of general concept search tried the variants of mascot. As the name of the product includes “Beaver”, in the first sketching set the designer presented variants of this animal as a key mascot. There was also a variant of original presentation of “S” and “B” as two basic letters of the product name. In addition, this first set included a bit more abstract version based on the set of lines featuring the movement of beaver’s tail.

 

swiftybeaver mascot tubik studio design

swiftybeaver logo design tubik studio

 

The variant based on lines was accepted as the basic concept practically at once. Although the mascots can be a powerful tool of branding, this time the strategy was different. The target audience as well as the nature of the product is quite specific so more abstract version of the logo could show more flexibility in its expressive potential. Founder and CEO of SwiftyBeaver Sebastian Kreutzberger was very attentive to details and open for discussions. He decided upon the variant with stripes because it made a logo meaningful as logs the app is based on like the logs of trees are stripes so it presented a strong visual metaphor. Additionally, he liked the colored stripes of famous 70s and 80s logos so he wanted to have a logo that would look vintage and at the same time super modern. So, this direction was developed further.

 

swiftybeaver logo sketches tubikstudio design

 

Moreover, this version got closer to the general visual design of user interface for the application. As it was described in the previous case study, UI design widely used color lines as markers for categories of log entries and the chosen concept of logo provided strong connection of UI design and branding. Therefore, the next stage of design process of elaborate and thorough work on the slightest nuances. Different versions of curves and length of the lines were tried and discussed in search of the most harmonic variant.

 

swiftybeaver logo design by tubik studio

 

swiftybeaver logo versions tubik studio design

 

The color palette also echoed the colors chosen for UI design and supported them with smooth gradients. So, user interface of the platform, landing page and logo were cojoint via colored elements.

SwiftyBeaver ui screens tubikstudio

 

tubikstudio swiftybeaver landing

 

The original version of logo was colorful, but monocromatic version was also accomplished and tested to provide branding solutions with high level of flexibility.

 

SwiftyBeaver logo final tubikstudio

 

SwiftyBeaver logo mono tubik studio

 

Another issue to consider was the choice of font for company name lettering featured with logo image. Several options that could work effectively with the logo and correspond with the nature and general design of the product were offered and discussed. The set of potential variants included diverse variants from strict and straight to smooth and curvy. Finally, the font was chosen to provide a good combination with the fonts of the app interface. The client chose that particular font because found it appropriately curved and perfectly matching the curves in the logo.

 

swiftybeaver logo fonts tubikstudio

 

The approved variant of logo image and lettering was also supplied with the design of animated version. It was accomplished with the help of Tubik Studio motion designer Kirill. The designer and the client took considerable amount of time and discussion optimizing the physics of the ball to look and feel as natural as possible.

 

swiftybeaver animated logo tubik studio design

 

And one more important task to move on with was design of an app icon. To prove its efficiency, designers tested it on different devices and in different sizes to ensure that it didn’t lose its recognizability or didn’t get dirty in smaller size.

 

swiftybeaver icon variants tubik studio

 

Logo design for SwiftyBeaver was one more case proving that there are no unimportant details in branding. It was one more project full of elaborate sketching, thorough work on the slightest hues and gradients, numerous variants with different length, width and placement of the elements to make a catchy, harmonic and stylish logo that will represent the nature of its product.


Welcome to see other works by Arthur Avakyan on Dribbble and Behance

Welcome to see designs by Tubik Studio on Dribbble and Behance

Tubik Studio UI UX designer

SwiftyBeaver. UX & UI Design for a Mac Application.

Today we would like to present you a new case study on UX and UI design. This time it is a full design path for SwiftyBeaver project.

 

SwiftyBeaver ui by Tubik studio case study

 

Task

 

Design of user interface for the logging platform uniting the efforts of Swift and Objective-C developers, UX designers, app analytics experts, and product owners.

 

Tools

 

Sketch, Adobe Illustrator, Adobe After Effects.

 

Process

 

SwiftyBeaver is a native Mac application presenting the integrated logging platform for Apple’s Swift programming language, also supporting Objective-C. First of all, it is aiming at developers as its basic target audience. The product supports all the devices belonging to Apple device family. User interface designer had to consider basic and advanced needs of people involved in developing process to make it easier, faster and more productive. The assignment to work over design solutions was given to one of Tubik Studio UI/UX designers Ludmila Shevchenko who says that the project was really a memorable task totally different from everything she had accomplished before. To get more detailed description of the product and its functionality, welcome to read its presentation on Medium. And now let’s look a bit closer at some steps of user interface design for the product.

 

Tubik Studio UI UX designer

 

In software engineering logging should be mentioned among key factors of developers’ routine. It is an integral part of development process helping developers to understand flow, logic and state of an application. Log entries inform them about the state of the application as well as the issues of its actual operating. Therefore, user interface for this sort of product needs to support high level of visibility for changes, intuitive navigation and presentation of big data bulks with high level of readability and visual marking of key details. The basic objective was to design a platform which will be easy to use, informative, supporting broad functionality for professionals and seamlessly integrated with any Apple device.

 

At UX design stage the designer worked over layout and navigation design solutions concentrated around three basic issues:
— the way log entries should be shown in the stream, as a general feed or separated by filters
— the method log entries or the part of the stream history will be saved
— the channels of creating code or working over the existing code.

 

SwiftyBeaver UX by Tubik Studio

 

Obviously, this part of design process, based on specific knowledge about the field, needed tons of discussions and tight collaboration with a client, the founder and CEO of SwiftyBeaver Sebastian Kreutzberger. Being a developer himself, he brought out the idea which was deeply user-centered and problem-solving in terms of application for developing process, thus his detailed explanations of the operations were helpful for setting convenient and efficient layout, transitions and navigation of the interface at UX wireframing stage. Thorough analysis of the target audience and unique selling points of the product allowed paying attention to the practical aspects of the product’s functionality.

 

UI design was concentrated around two major challenges: to present data efficiently in a way that will be quite traditional for developers but at the same time to make it a bit more engaging and stylish via non-distracting design elements and animation. Therefore, the design concept was based using dark background common for coding platforms and software as well as bright color accents and gradients to add some style and make important accents noticeable.

 

So, visual presentation was not the only thing about colored elements. Using common color marking recognizable for developers, the platform supported easy navigation and visibility of key elements. Colors marked types of logging entries both in the names of categories and the stream feed. The designer offered four UI concepts on this basis, with different fonts and variants of visual marking entries and errors.

 

SwiftyBeaver UI concepts by Tubik Studio

 

Having agreed upon the general stylistic concept with the customer, the designer moved on in course of layout simplification. The interface of the product is data-driven therefore it has to exclude any sort of distraction and avoid repetitive elements to prevent the interface from being cluttered. So, it was decided to exclude the copy featuring the type of log entry in the fields of messages. Only color marker was left becoming the central element of the connection between log entry and the categories whose names were provided in the upper part of the screen.

 

The provided set of screens featured different concepts for visual presentation of color markers and entries saved by the user. Understanding the importance of navigability for the interface of such high practical value and information intensity, the designer tried to use the maximum of conventions power. The markers using the colors easily decodable by developers were also supported by the star sign as a popular and clear marker of saving the object to favorites or elements needing further attention later.

 

Among all the versions, the final decision was made upon the most minimalistic one. It used colored lines along the message body and small yellow star for saved entries. All the colored elements as well as the background color and shades of hovered elements were carefully tested to get the high level of visibility and pleasant-looking efficient contrast.

 

SwiftyBeaver ui screens tubikstudio

 

One more key element of design that needed deep attention was a choice of fonts. Actually, in design process around any interface the choice of an appropriate font has a great influence on general usability and presentation of the product. However, in such a specific interface as SwiftyBeaver, which is highly concentrated on textual material, the weight of font choice got even bigger. Moreover, the product is not rich in graphics materials such as icons or illustrations, so font becomes a major element of visual design for the product. The designer took her time to test various solutions and select the font which would be both beautiful and easily readable for users.

 

The background was accomplished in different shades of very dark blue which appeared to be more harmonic and smooth in creating pleasant contrast than black color. To make the entries text more readable, the background behind them is changing slightly in shades one by one: it marks the limits of every entry but without unnecessary distraction for the user. Hovered elements were highlighted while the others were dimmed. Slight gradients made the color markers look more stylish.

 

SwiftyBeaver Style Guide by Tubik Studio

 

The aspect of entry length also was an object of deep consideration. There was such a way to go: the stream could show the fields of fixed height and if the entry was longer it could be hidden showing only a part of the message and opening full view on click. However, after research and testing this solution wasn’t found effective. It was decided to show the full text of each entry as it was more user-centered and excluded additional operations and clicks. Therefore, the designer paid deeper attention to the slightest aspects of kerning and spacing of the lines and work with efficient copy placement.

 

SwiftyBeaver UI screens Tubik Studio

 

The work on landing page for the product was also an interesting and challenging design task as far as the product doesn’t offer a lot of visual material for user engagement and attraction. Therefore, the main accent again was made around the colored accents echoing the design solutions of the application interface layout.

 

tubikstudio swiftybeaver landing

 

In addition, Ludmila accomplished graphic design task which resulted in illustrations presenting the features and benefits of the product.

 

SwiftyBeaver Illustration by Tubik Studio

 

Another design task accomplished by Tubik Studio for SwiftyBeaver was work on logo design for the app.

 

swiftybeaver logo design

 

We will tell about it in our next case study, coming very soon. Don’t miss!


Welcome to see designs by Ludmila Shevchenko on Dribbble and Behance

Welcome to see designs by Tubik Studio on Dribbble and Behance