Tag Archives: typography

copy content in user interfaces UI design

Tips on Applying Copy Content in User Interfaces

Words are a powerful weapon. They can bring both success and failure depending on how you put them together. They can motivate or confuse, strengthen or weaken, call or push away. That’s why designing a digital product, it’s vital to remember that high-quality copy is as essential as the details of visual performance.

 

In one of our previous articles, we’ve already considered the big role of textual content in UI design, covering the definition of copy and its functions in graphic user interfaces. Important point to remember from it here is the words cannot be fully replaced with the graphics whatever amazing, high-quality and professional they are going to be. Efficient and engaging copy content in user interfaces is defined by two equally significant basic criteria: the quality of writing and the appropriate look. Words and visual elements should mutually support each other, exist in harmony and provide organic consistency. So, every single piece of copy should be thoughtfully analyzed and created in a way corresponding to general design concept and enhancing positive user experience via successful interaction. 

 

Could you imagine an interface containing badly-written copy with the same type sizes, fonts, and colors? The chances are big that it would cost users great effort to solve their problems or get needed information with the product, so they would simply choose other product that is more user-friendly and less time-consuming. Let’s check what types of copy content designers and copywriters deal with creating websites or mobile applications, and think over the points needing special attention.

 

copywriting tips

 

Visual hierarchy

 

To organize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present the content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc. In the aspect of creating copy content for web pages and mobile app screens, there are two aspects important to consider: page scanning patterns and typographic hierarchy. 

 

Understanding the importance of visual performance and readability of copy in digital products and its impact on user experience, numerous usability experts explore this issue comprehensively and collect statistics providing valuable data for designers. Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, UXPin team and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

 

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads across the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the paragraphs’ initial sentences. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials etc. How could designers employ this knowledge? First of all, placing the information of key importance or core interest on the most scanned spots and trying to use short catching headlines and bold headers to draw users’ attention.

 

Z-pattern is applied to pages which are not so heavily concentrated on copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area. In this case, designers place core information in the spots of highest attention, such as top corners, and put the other points requiring attention along the top and bottom lines.

 

website design tubik studio

The Big Landscape

 

Here we can see the design concept for a website which presents the online magazine «The Big Landscape». The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation and aesthetic pleasure from visual perception. The designer followed Z-scanning-pattern placing vital elements such as the logo and CTA button in the corners of the top line while the bottom line informs users about the website creators and provides with the ability to contact via social networks instantly. 

 

Typographic hierarchy

 

Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and combination of types and fonts. It is aimed at creating contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating type fonts, sizes, and colors as well as their placement and alignment. Typographic hierarchy is presented with common types of copy content used in UI design.

 

Headlines

 

A headline is the first thing that users should see in any interface. It is a large, bold word or phrase which transfers and emphasizes the core informative message on the page. It’s essential for headlines to be catchy and short, so that they could draw users’ attention, and meaningful in order to inform users about the theme and benefits of the content of the page or screen. According to the research published by one of the popular social media sharing platforms Buffer, the ideal length of the headline is 6 words; Jacob Nielsen provides the study at which shows that headlines of 5-6 work effectively, not less than extensive headlines presenting a full sentence. 

 

Another point to remember: it’s good when headline is visually supported by other elements on the page or screen, still it also should be understandable and meaningful without such context.

 

website design for photographers

Photography Workshops 

 

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind the web interface. The bold headline is placed on the left which makes it noticeable but the major accent still remains on the head picture.

 

landing page UI design tubik studio

Website on cooking seafood

 

tubik_studio_website_ui_bakery

Vinny’s Bakery

 

These are two examples of the websites concentrated on providing content around the same theme — food. They both have minimalist design with centrally located headlines. However, the headlines differ with the message they send to the users as well as nature of the websites differs in its core: one of them stimulates uniting users around the action (cooking seafood) while the other is focused in presenting the goods (bread and bakery). The first example presents a website collecting recipes of meals with seafood from all over the world, so its headline contains a CTA with a key element — action verb in imperative form “Let’s cook!”, which dynamically tunes users into the activity. On the other hand, we can see another concept — a website for a small bakery selling homemade bread. The lyrical headline makes users feel warm, sets strong positive emotional connection and lets them instantly imagine the smell of bakery products which are sold via the website.

 

Subheaders

 

It’s impossible to put all the significant information in a headline, that’s why you need subheaders. These are brief, concise and catchy phrases that are similar to headlines, although they typically mark out the key points in separate sections while headlines summarize the theme or message of the whole page. Following the principles of visual hierarchy, fonts chosen for subheaders are usually smaller than for headlines but bigger than the rest of the copy. Traditionally, they are also bold and short. 

 

Landing Page Animation Tubik Studio

Organic — landing page

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

Subheaders play a big role in landing page design. These two concepts for landing pages above are good examples of how subheaders inform users about the data provided in different sections. Bold subheaders point out the main idea of body copy helping users find the information they need easily and quickly.

 

Body copy

 

Body copy is usually a part of text presenting the description or some essential information placed in a compact block, usually under a subheader or a headline. Fonts are thinner and smaller than in headlines and subheaders, sometimes they are presented in italic for even more prominent visual contrast.

 

There is no unified opinion about the best length of body copy. Some content creators support the approach that long copy is more informative and serious-looking, while the others claim that only short copy is effective because Internet users never want to read too much. Here in Tubik we support the approach that the length of effective and user-friendly copy depends directly on target audience: users as well as products are incredibly different, they have diverse preferences, goals and wishes when search for web resources or mobile apps. Both long and short copy have their own pros and cons, and each of them can be appropriate than depending on target audience of the product and its conversion goals.

 

Short copy is often effective for mobile interfaces and landing pages: their users are usually keen to see concise and highly informative copy content. Moreover, mobile interfaces have limited amount of space, so too much copy won’t look nice and will demand additional effort for reading, which can be the reason for poor user experience. Long copy is good for web resources that provide users with complex information on specific topics as well as presentation of the products which aren’t well-known for users and need additional informative support.

 

website design UI

Architecture Firm

 

Here is the example of a web page where long copy is useful. It’s a design concept featuring a website for architectural bureau following minimalistic and functional approach in creative practice and demonstrating it via website visual performance. The aim of such websites is to tell the company’s story, present professional level and achievements, so detailed copy works efficiently in this case.

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

This design concept also presents a website deeply based on copy: it’s an educational project setting the online encyclopedia about specific family of birds. Although it contains great amount of information presented in text, this type of content is logically divided into many brief and concentrated copy blocks supported with prominent headlines as well as bright and catchy illustrations. This approach makes interaction with the website more dynamic which is especially effective for a teenage part of target readers that presumably often perceive encyclopedias as boring stuff.

 

tubik toonie help screens interaction

Toonie Alarm tutorial

 

As we mentioned above, short copy is useful for mobile interfaces since they are limited in space. The interface of brief tutorial for Toonie Alarm app demonstrates the how copy is divided into short blocks in order to leave enough «air» on the screen and make copy readable.

 

Call-to-action elements with copy

 

The core elements that make UI interactive are those which contain a call-to-action (CTA). Some call-to-action elements may be represented with icons that don’t require copy using widely and instantly recognized icons such as a telephone receiver for a phone call or the envelope for mail. However, in cases when the image of an icon is not so obvious or can be misleading, it is more effective to use double scheme, when the icon, button, or link is supported with the copy.

 

The copy for call-to-action elements consists of one or two words or a linked phrase in a body copy. Verbs in the imperative form are one of the frequently applied mechanisms of engaging users.  Designers are recommended to use various techniques of creating contrast, first of all via color, in CTA elements, so that they could stand out in the layout and draw user’s attention quickly.

 

tubikstudio swiftybeaver landing

Landing page for SwiftyBeaver

 

travel agency website UI

Travel Agency Website

 

The CTA buttons on these two landing pages are both centrally located, although they employ different types of copy. The first one consists of the four-word-phrase, while the other applies only one word. However, both look good and work effectively since they both contain the verb in the imperative form and inform target audience about appropriate action solving their potential task on this website.

 

good_sign_app_tubikstudio

Good Sign App Concept 

 

This is a concept for an unusual Good Sign app that gives you a new sign to look for, and you make your wish every time you see it in real life. Such an extraordinary app has also unusual CTA buttons like “Make a wish”.

 

book swap app tubik studio

Book Swap App

 

There’s no need to create CTA buttons exceptionally in bright colors — their main task is to be easily noticeable in the general layout. If the interface is bright and colorful, why don’t you make the contrast with light background which will make bright copy even more prominent, like in a concept for the Book Swap app above?

 

Captions

 

Caption is the short text under a picture describing its content. In web interfaces fonts are usually small and often italic, and in mobile interfaces the sizes of fonts depend on a size of a picture.

 

gym landing page fragment

Gym Landing Page

 

Here is a concept for the landing page of a gym. The captions here have bold fonts that make them easy to read. They are shown only when the picture is hovered which makes interaction more engaging for the users.

 

Points to consider

 

All in all, creating a quality copy content isn’t that hard if you keep in mind the typographic hierarchy principles. And here are some basic tips of presenting the copy:

 

  • Create catchy headlines. They draw users’ attention and often become the point of decision whether user continues interaction with the page or bounces it.
  • Make headlines short, but keep them highly informative. 
  • Subheaders relate to separate section, so they guide users through the content in the interface.
  • Use brief concise copy for mobile interfaces and landing pages.
  • Consider using long copy for web resources aimed at providing informative content.
  • Use verbs in the imperative form to encourage people to actions.
  • Use contrast colors for call-to-action elements, so that they could draw user’s attention more effectively. However, don’t forget to test readability of the text on the CTA elements: it has a crucial impact on usability and conversion rates.
  • A caption should preferably describe or add the data that isn’t obvious from the image.
  • Give strong preference to present tenses in captions.
  • Always ground your solutions on preliminary user research and don’t neglect testing different options.

 

Recommended reading

 

Here is the collection of recommended articles for further reading in case you would like to read more on the theme.

 

The 5 pillars of visual hierarchy in Web design

6 principles of visual hierarchy for designers

On Visual Hierarchy

F-Shaped Pattern For Reading Web Content

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

Effective Writing For Your UI: Things to Avoid

The Ideal Length of Everything Online, Backed by Research

Copywriting in UI. Words that Make Design Go Round.

 

Our next publication will continue the comprehensive theme of visual hierarchy and its effective practices in web and mobile interfaces. Don’t miss!


 

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

year in review tubik studio design

Tubik Studio 2016. Year in Review.

Bright, fast and furious, the year 2016 is over. For Tubik Studio it was dynamic, bright, rich in meetings, shots, interesting projects and non-stop professional growth. The company got bigger, more experienced and diverse. Traditionally, we start every new stage of our workflow remembering the most significant points of what has already been done, and today won’t be an exception. Let’s take a moment to turn back for a while and remember some outstanding things that marked 2016 for our team.

 

Being active on Dribbble, we published over 170 shots. Welcome to look through the set of top positions in the categories of UI/UX design, animation, branding and illustration. Following the links, you will be able to see all their detailed descriptions and full-size attachments.

 

Top Twenty UI/UX shots

 

tubik studio web design

Page 404

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

tubikstudio library widget

Library Widget

 

tubikstudio ui webdesign

Comics Shop Home Page

 

graphic design tutorial tubik studio

Singify App Tutorial

 

Christmas graphic design tubik studio

Magic Christmas App

 

tubikstudio homepage design

Event Agency Webpage

web design UI concept tubik studio

The Big Landscape

 

tubik_studio_website_ui_bakery

Vinny’s Bakery

 

health care app UI design

Health Care App

 

website design tubik studio

Adventure Agency Website

 

landing page UI design tubik studio

Website on cooking seafood

 

tubikstudio graphic design illustration

Ryiadh Tour Guide

 

tubik studio design

Weather App Concept

 

mobile app design tubik studio

Moneywise App

 

travel app tutorial tubik studio

Travel App Tutorial

 

snake battle app UI design

Snake Battle

 

toonie alarm UI design

Toonie Alarm

 

online magazine design tubik studio

Daily Bugle Online Magazine

 

book swap app tubik studio

Book Swap App

 

Top Twenty Animated shots

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

landing page animation Tubik studio

Magic.co landing page animation

 

 

tubik_studio_book_swap

Book Swap App

 

Landing Page Animation Tubik Studio

Organic — landing page animation

 

tubik studio healthy food animation

Healthy Food App 

 

tubik studio application recipes and cooking

Recipes App

 

tubikstudio ui design

BuonApp

 

website design UI

Architecture Firm

 

Tubik studio UI animation

Museu

tubik studio ice ui website

Ice Website

 

tubikstudio ui animation website design

Bjorn Website

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

apple even animation tubik studio

Apple Event Animated Graphics

 

gym landing page concept by Tubik

Gym Landing Page

 

tubik studio animated illustration

Lowrider

 

tubik_toonie_help_screens_interaction

Toonie Alarm tutorial

 

animation design

Night Run Animation

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

animated tutorial

Social Network Tutorial

 

motion design tubik studio

Rocket Animation

 

Top Ten Branding shots

 

business cards design

Deetu Business Cards

 

logo design music app tubik studio

Switch-up logo

 

logo design tubik studio

fOxygenic logo

 

andre logo design tubik studio

Andre logo 

 

logo design branding tubik

Pickitout logo

 

lion browser logo tubik studio

Lion browser logo icon

 

snake battle logo for game app

Snake Battle Logo

horsy logo design branding

Horsy Logo

 

logo design by Tubik studio

Elephun logo

 

logo animation tubik studio

Realli logo

 

Top Ten Illustration shots

 

Rio 2016 Illustration tubik studio

Rio 2016

 

graphic design illustration tubik studio

Californication Bus

 

tubikstudio space wallpapers

Free Space Wallpapers

 

character illustration tubik studio

Indian Dreamcatcher

 

Christmas graphic design tubik studio

Christmas Spirit Illustration

 

game character design tubik studio

Ulf the Viking

 

tubik illustration jazz tales book

Tales of the Jazz Age Book Cover

 

tubik studio illustration graphic design

Muscles Magazine

 

star-wars-rogue-one_tubik_studio_illustration

Star Wars Rogue One Illustration

 

badges illustration tubik studio

PukaPal Badges

 

Top Ten Articles in Tubik Blog

 

2016 brought a great deal of new posts in Tubik Blog to share our ideas, case studies and experience. Here is the list of some articles which got shared and read by big number of readers.

 

tubik blog article

Visual Perception: Icons vs Copy in UI

 

Tubik Studio Interface Animation

UI Animation: Microinteraction for Macroresult

 

toonie alarm time picker

The Ultimate Guide to Creating a Mobile Application

 

book swap app design

UI Animation: Eye-Pleasing, Problem-Solving.

 

lion browser logo tubik studio

Logo Design: Creative Stages.

 

tubikstudio ui ux design

UI/UX Glossary: Steps to Usability.

 

web design tubik studio

Home Sweet Home. Strategies of Home Page Design.

 

tubik studio ui design dark

Dark Side of UI: Benefits of Dark Background.

 

ios-developers-tubik-studio

Review of Popular Trends and Tools for Developers in 2016

 

UI design trends

Review of Popular Design Trends for Interfaces in 2016

 

Top Five Tubik News

 

Growing diversity of services

In 2016 we formed the full team of specialists able to create and maintain a digital product from scratch to release: today we are a comprehensive full-cycle digital agency, with experienced specialists in the domains of branding, UI/UX design for websites and applications, graphic design of any complexity, motion design, iOS and web-development, QA testing.

 

collaboration-process-app-design

 

Variety of outsource projects

2016 brought us the great bunch of outsource design and development projects for diversity of businesses and organizations. They established broad experience of collaboration with different customers, including big and well-known clients. One of the latest projects of 2016 was a «year-in-review» video for Opera.

 

 

In-house iOS application: Toonie Alarm

In 2016, to get closer to our outsource clients, we have set the purpose to create in-house studio products helpful for their target audience and adding some social value as well as giving us comprehensive experience of full path for creating and promoting digital products. In the domain of iOS app design, the product created and released by Tubik in 2016 is Toonie Alarm, entertaining and funny free alarm app for iPhones rewarding users for waking up with cute stickers. 

 


 

In-house content project: Design4Users

Design4Users is a blog devoted to diverse design issues solving users’ problems. It is organized via the basic categories such as «Branding» «Product» «Print» and «UI/UX» and plenty of more detailed tags in the mentioned domains. This resource was started with the aim to provide designers, customers and all those who are interested in this sphere of human activity with a wide variety of useful and interesting content supported with attractive and functional design. The blog is designed, developed and curated fully by Tubik studio team.

 

design4users blog

 

Free e-books by Tubik team

Additional big news was the start of Tubik Magazine, the set of free e-books from us about different aspects, approaches and tips on design and development. The first issue called Design for Business presented a variety of business points and terms important to consider for designers working over goal-centered design for companies and brands. The second ebook called Logo design was devoted to creative stages and strategies of efficient logo design. Both books are supported with practical cases. Welcome to read them or download totally for free.

 

tubik studio free ebook design for business

 

Bright moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page. No doubt, we also didn’t miss the chance to share our ideas, news, tips and experience via Medium and Quora as well as kept everyone updated with studio news via Twitter, FacebookTumblr and Flipboard.

 

new-year-photo

 

Even this quite brief review makes obvious that 2016 was full of everything for our team. And we are ready for new challenges, perspectives and projects in 2017 which will definitely open many new unforgettable creative pages. 

 

 

Warm greetings for everyone from Tubik Studio, we wish you amazing and successful year 2017!

UI design trends

Review of Popular Design Trends for Interfaces in 2016

The year is going away so fast: seems each day just melts away like a snowflake. Traditionally, before the holidays start, it is the high time to turn away and revise what deserves to be remembered.

 

We have already reviewed the most popular trends and tools for developers in 2016, today the theme will be continued with significant design trends that couldn’t be left without attention. No doubt, this design year was globally dynamic, creative, full of news and events. Having worked over diverse design projects and tasks as well as in-house studio products here in Tubik Studio, we prepared our list of trends in design for web and app interfaces, which got popular this year, illustrating some of the mentioned points with works by studio designers. Let’s get started.

 

Flat design

 

Flat design has significantly grown its presence and diversity this year, both in interface design and branding. The design approach is known for its minimalist and concise use of visual expressive means and has established itself as a style favorable for enhancing usability and visual harmony of user interfaces. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images.

The features of flat design supporting its steady popularity in interface design include:

  • simplicity of shapes and elements
  • minimalism
  • functionality
  • bold and highly readable typography
  • clear and strict visual hierarchy
  • close attention to details
  • thoughtful appliance of bright colors and contrast supporting quick visual perception
  • avoiding textures, gradients and complex forms
  • applying the principles of grids, geometric approach and visual balance.

 

ui animation cafe app tubikstudio

 

Here in Tubik we have checked high potential of flat design for interfaces on practice, with not only numerous outsource projects, but also the iOS app Toonie Alarm, designed and developed by studio team. Thoughtful integration of flat design via diverse interface elements, including icons, illustrations, buttons, tabs and the like, proved itself efficient for making UI bright, attractive, clear, intuitive and easy-to-use.

 

Toonie Alarm UI design

 

Moreover, this year flat design has set the strong link between branding and UI design, mutually supporting each other in digital products.  One of the fields broadly strengthening this trend was creating logos and app icons flat and simplified. This trend has featured itself not only in brand new projects, but also for well-established websites, apps, companies and products, which have presented new redesigned logos and corporate style visuals redesigned according to the principles of flat design.

 

Conversational UI

 

Another broadly discussed trend is conversational UI which has been the object for hot debates and theme for many speeches and case studies this year. Basically, the term «conversational UI» is connected with interfaces that enable users to communicate directly to the system in a way imitating conversation with people. In vast majority of cases, this sort of UI involves voice manipulation and recognition as the part of interaction.

 

More and more products are featuring this sort of functionality: some want it just because it’s trendy and fashionable while others find real ways to engage it for problem-solving objectives. Most often it is realized by chat-bots providing a flair of talk to the users. In automated dialogues of this kind, depending on the nature of the product and style of talk which is seen appropriate for the target audience, conversational UI can effectively involve both verbal (language) and non-verbal (emoticons, pictograms etc.) means of communication.

 

Among the advantages of conversational UIs, one of the frequently mentioned is automation of some basic and repetitive operations saving people’s effort for more creative and complex task. It can enhance usability of the product and even make it proactive, giving prompts to the user and improving interaction with the product. Still, there is the trap to overload the product with this sort of communication, based on standard situations and issues while missing non-typical cases or questions which need different solutions. Moreover, by far not all target users are ready to communicate in that way, so this design solution needs to be grounded on extensive user research and testing from the early stages of user experience design. Conversational UI can easily give zest to user interface. Yet, if it’s not analyzed and tested well, conversational UI can do the opposite and spoil user experience by poor interaction.

 

Anyway, this year UI designers have thought over new perspectives of applying conversational UI, in particular in combination with AI technologies, and this trend will definitely grow showing new rays of creativity next year. Conversational UI isn’t just another fad: it is the trend providing total or partial changes to certain areas of interaction design and giving alternative approach to problem-solving and decision making processes.

 

Minimalism

 

This year has given the great bunch of applications and websites designed on the principles of minimalism. They support positive user experience by providing clear and simple interfaces, full of space and air, focused on content and navigation. Minimalist interfaces are characterized with thorough attention to visual elements, not numerous but always transferring a particular message. Minimalist interfaces, both for web and app, also feature sophisticated work with typography and visual hierarchy supporting instant scanning and skimming the content of the page or screen. Moreover, interfaces of this sort usually provide high level of legibility and readability.

 

tubikstudio ui animation website design

 

Custom graphics

 

Desire of originality sprung out in UI design in the area of custom graphic design of all kinds. More and more interfaces apply custom mascots, icons and  illustrations that fulfill multiple goals: adding originality to the visual design concept, enhancing usability, strengthening navigation and marking out the content depending on its nature and functions. Graphic details play crucial role in usability and accessibility of the product and even the slightest changes can bring significant results, speeding up visual perception and understanding interface elements or transitions.

 

Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in the interfaces such as icons and their impact on general efficiency of the product has been an actual topic in global design community for a long time. In addition, images push the limits of perception for users who have natural problems with text recognition such as, for instance, the dyslexic or non-reading preschoolers.

 

As for custom illustrations or icons, created for specific products, made according to the preferences and needs of the particular target audience and with a view at certain business goals, they are able to make the product work more efficiently solving users’ pains and satisfying wishes. Perhaps, that is one of the most popular reasons why this trend got so popular in 2016 presenting interesting interfaces with custom graphics of diverse styles and performance.

 

Tubik Studio Weather App

 

Another side of this trend is evolving field of wallpapers for desktops and mobile devices featuring original graphic artworks on a variety of topics. It also can be characterized as user-friendly trend giving users the choice of means for self-expression and satisfying personal aesthetic needs.

 

Animated microinteractions

 

Interface animation is one more hot and debatable topic of this year. Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. So, designers and developers work over more and more sophisticated methods to make animation pleasant-looking and problem-solving characteristic of modern apps and websites.

 

One of the frequent methods of adding motion to UI are animated details featuring microinteractions. Microinteractions supported by clear finalization via motion create fast feedback for the user and make the experience positive and efficient while navigation simple and intuitive. Animated buttons, switchers, toggles and other interactive elements inform user in split seconds activating all the potential of fast visual perception.

 

tubik studio button ui

 

As we mentioned in the earlier article, animation in the interface can create pleasant illusion close to natural interaction with physical objects which often doesn’t need too much cognitive process. For example, if you pull the object, press it, move out the tab, the movements should feel natural.  Most users won’t be able to see this sophisticated work accomplished by designers: they will take it for granted and the fact it makes them comfortable will be the biggest praise for design solutions.

toonie switch UI animation

Scroll animation

 

Scroll animation also got new vibes and perspectives of artistic realization. Thought-out movement of layout elements while the webpage is scrolled enhances user experience significantly and creates the harmonic feeling of one integral smooth interaction rather than perceiving several separate parts or blocks of the page. Moreover, this sort of interactions is aesthetically pleasant and engaging, and these emotions are a good factor of retaining users. This year, full of new updates in design tools and software, showed great practices of sophisticated work on scroll animation.

 

Landing Page Animation Tubik Studio

 

Animated tutorials

 

Tutorial is a vital part of onboarding users for most mobile applications. Certainly, wide variety of means and techniques are applied to make it clear, engaging and informative as it is a strategically important element of involving users into further interaction with a digital product. This year designers combined traditional techniques with new popular findings: in particular, custom illustrations and animation brought new vibes to app tutorials, making them more dynamic and enhancing their informative potential.

 

tutorial interface animation tubik studio

 

Diversity of landing pages

 

Surely, landing pages were discovered much earlier than 2016, still this year has brought the new lap of their development and diversity. More and more businesses and social projects take advantage of using them for effective presentation of special services, sales, offers or issues that need focused user’s attention. Landing pages have also grown their presence in the Net as the effective method of promotion for native mobile apps. Accomplished wisely and thoughtfully, grounded on user and market research and testing, broad usage of landing pages can be also seen as the other user-friendly trend, providing users with necessary information and interactions in clear and accessible way saving their time and effort. From the business perspective, they also work well giving businesses the flexible tool for original and effective presentation.

 

web design UI tubik studio

 

Brutalism

 

The trend of brutalism in digital design has rocketed this year getting more and more expressions and diversity. It is often characterized as a webdesign style aiming at breaking standards and predictable design techniques. The websites created in this manner are a sort of rebellion to sophisticated designs with thought-out symmetry and harmony, complex layouts and accents of aesthetic visual performance. Vice versa, brutalism is based on simple and raw appearance, in most cases not loaded with many visual details and sometimes even close to plain HTML page. Used wisely, for the appropriate goals and audience, this approach can bring high level of originality to the website and make it really stand out of the crowd.

 

Contact List Concept Scrolls Tubik

 

Custom grid

 

According to Internet Live Stats, there are over 1 billion websites in the World Wide Web today. This milestone was first reached in September of 2014, as confirmed by NetCraft in its October 2014 Web Server Survey, and first estimated and announced by Internet Live Stats. The number had subsequently declined, reverting back to a level below 1 billion due to the monthly fluctuations in the count of inactive websites before reaching again and stabilizing above the 1 billion mark starting in March of 2016. With more and more websites coming into play, designers have to be more and more creative to not only make them attractive and harmonic, but also give them a feel of uniqueness and original appearance. That is one of the reasons, why experiments with grid also won their place in the list of general design trends of the leaving year. Custom grid is the way to save the feeling of harmonic layout and placement of the elements with higher level of flexibility and originality. However, this sort of experiment requires thorough research and in many cases the final result comes via several iterations tested and analyzed in terms of usability and visual perception.

 

 

web design UI concept tubik studio

 

Bold and catchy typography

 

2016 could also be mentioned as the year of further rigorous practice on typography in global design community. It brought the world loads of new nice typefaces both universal and created with a view to particular objectives or products. Typography continued its progress as one of the crucial aspects of efficient web and app design, and one of the trends in this domain was practices of applying bold and outstanding typography for webpages, catching users’ attention and instantly informing them about the core message. In particular, this approach got its development in the sector of landing pages whose quick and dynamic presentation of core data to users has great influence on conversion rates.

 

tubik_studio_website_ui_bakery

 

Large thematic image

 

One more trend often found in various designs for interfaces is applying prominent images, which could be either photos or illustrations, as the central visual element of the general composition. Important thing is that the image is never just a placeholder of nice looks: it presents a powerful way to strengthen the informative potential of the page or screen, set the theme instantly and focus user’s attention at the significant details. Needless to say, it takes much designer’s effort to choose the one successfully transferring the necessary message and supporting general stylistic concept.

 

UI design trends

 

Handwriting lettering

 

Custom handwriting lettering also got popular as a design trend and is often used for marking out significant details and images in an original way. Special lettering made by professional designers looks fresh and unique, refreshing visual performance of the webpage or screen. On the other hand, being applied in UI design, it demands additional effort to be tested in the layout as it can happen that hand-crafted lettering looks great separately, but doesn’t work effectively in combination with other elements of the interface.

 

Real content instead of Lorem Ipsum

 

This year has featured growing attention to content, its quality and performance. In user interfaces, content and design and interconnected parts that should successfully support each other instead of fighting for users attention. That makes more and more designers prefer applying real content instead of well-known Lorem Ipsum, even in cases of creative stages or presentation of design concepts. It gets designers, clients and users closer to real experience and more natural feel of interactions.

 

landing page UI design tubik studio

 

Videos explaining or presenting products

 

Due to easy access to reviewing videos via YouTube, social networks and other platforms of product presentation, video explainers have quickly established themselves as a popular trend. Naturally, it wouldn’t be logical to neglect such a powerful source of connection with clients and users, so 2016 has brought a great variety of videos presenting the products, companies and services, explaining their benefits and special offers, showing engaging flow of interaction and connection. They took over the responsibilities of the picture which is worth a thousand words: video explainers quickly show the most important features of the product and let the users know what deserves their attention first of all.

 

Example of video explainer designed by Tubik Studio for Toonie Alarm

 

Example of promotional year-in-review video designed by Tubik Studio for Opera

 

Bright and dark color palettes

 

No secret, color is one of the most powerful and influential factors in UI design. One more trend in UI design deserving a place in the list of this year is great variety of color palettes designers choose for applications and websites. Diversity of new fonts and typefaces as well as research of usability studies allow going beyond standards and trying new combinations which will take advantage of diverse colors but with it won’t lack in usability. More and more creatives are discovering new horizons combining traditional techniques with innovative approaches in the domain of work with color.

 

tubik studio application recipes and cooking

 

To sum up, we can certainly say that in the sphere of UI design 2016 has been the year of creative search and experiments, still most of them were focused on usability and desirability of the final products. No doubt, 2017 will not lose its chance to polish these trends and open the new ones. 


Welcome to read the review of popular trends and tools for developers in 2016

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

ted talks graphic design typography books

TED-talks: Typography, Books, Graphic Design.

It’s not a secret how diverse and influential is graphic design nowadays. It covers multiple purposes and serves great deal of diverse spheres of human life and activity. Today it is enhanced and strengthened by broad opportunities of modern technologies, but new generations of the best designers keep following the roots and getting inspired from the experts.

 

One of the ways to inspiration we find productive and highly professional here in Tubik Studio is TED videos. Perhaps you remember the collections we have already suggested watching: 20 TED talks for designers about diverse design issues and 10 TED-talks for creatives from different spheres. Today we’re going to recommend you a new set of professional and informative TED and TEDx-talks that we find interesting, useful and helpful. 

 

Here is the collection of 10 TED-talks all with the descriptions given on the TED website or YouTube presentations. This time they are focused on the issues of graphic design. Most of them are already classic, sometimes even could be called legendary, and that makes them even more precious as they have been successfully checked with the time and practice. The ability to analyze take the best from the past usually broadens the creative horizons and becomes a solid foundation from innovative thinking. So, enjoy watching and feel the energy of great masters!

 

My life in typefaces — Matthew Carter

 

Pick up a book, magazine or screen, and more than likely you’ll come across some typography designed by Matthew Carter. In this charming talk, the man behind typefaces such as Verdana, Georgia and Bell Centennial (designed just for phone books — remember them?), takes us on a spin through a career focused on the very last pixel of each letter of a font.

 

 

Intricate beauty by design — Marian Bantjes

 

In graphic design, Marian Bantjes says, throwing your individuality into a project is heresy. She explains how she built her career doing just that, bringing her signature delicate illustrations to storefronts, valentines and even genetic diagrams.

 

 

The art of first impressions — in design and life — Chip Kidd

 

Book designer Chip Kidd knows all too well how often we judge things by first appearances. In this hilarious, fast-paced talk, he explains the two techniques designers use to communicate instantly — clarity and mystery — and when, why and how they work. He celebrates beautiful, useful pieces of design, skewers less successful work, and shares the thinking behind some of his own iconic book covers.

 

 

Designing books is no laughing matter. OK, it is. — Chip Kidd

 

Chip Kidd doesn’t judge books by their cover, he creates covers that embody the book — and he does it with a wicked sense of humor. In one of the funniest talks from TED2012, he shows the art and deep thought of his cover designs. This talk is from The Design Studio session at TED2012, guest-curated by Chee Pearlman and David Rockwell.

 

 

Can design save newspapers? — Jacek Utko

 

Jacek Utko is an extraordinary Polish newspaper designer whose redesigns for papers in Eastern Europe not only win awards, but increase circulation by up to 100%. Can good design save the newspaper? It just might.

 

 

Why write? Penmanship for the 21st Century — Jake Weidmann

 

What is the future of writing in the digital age, and why does it matter? In this surprising talk, Master Penman Jake Weidmann explores the connections between the pen and how we learn, think, and carry our cultural heritage at a time when the very act of writing is being dropped from school curricula across the country.

 

Jake Weidmann became the youngest person to receive his Master Penman certificate in July 2011. He works across several mediums including drawing in pencil and charcoal; pen and ink; painting in acrylic, airbrush, oil and gouache; sculpting in wood, bone, antler and clay; and is versed in numerous forms of calligraphy. He is best known for the integration of flourishing and hand- lettering in his art. Jake also designs his own hand-made pens. He, like his pens, travels the globe, reintroducing this Old World art form and cultivating its relevance in the world of today, of tomorrow, and forevermore.

 

 

The beauty of data visualization — David McCandless

 

David McCandless turns complex data sets (like worldwide military spending, media buzz, Facebook status updates) into beautiful, simple diagrams that tease out unseen patterns and connections. Good design, he suggests, is the best way to navigate information glut — and it may just change the way we see the world.

 

 

Wake up & smell the fonts — Sarah Hyndman

 

Sarah shares with us a story of type and invites us to consider our emotional response to the printed word. Each font/typeface has a personality that influences our interpretation of the words we read by evoking our emotions and setting the scene. We all understand this instinctively but it happens on a subconscious level. Sarah shows us that conscious awareness of the emotional life of fonts can be entertaining and ultimately give us more control over the decisions we make.

 

Designer Sarah Hyndman explores typography as we experience it in our every day lives under the banner of Type Tasting. Since the launch in 2013 she’s curated an exhibition at the V&A for the London Design Festival, been interviewed on Radio 4’s Today, taken Type Tasting to South by Southwest in Austin, Texas and has been commissioned to write a book.

 

Sarah has been a graphic designer for over 15 years, working in agencies before setting up design company With Relish. After studying an MA in Typo/Graphics at the London College of Communication she was invited back as a guest tutor.

 

 

Typography — now you see it — Shelley Gruendler

 

Dr Shelley Gruendler is a typographer, designer, and educator who teaches, lectures, and publishes internationally on typography and design. When she is not traveling the world as the founding director of Type Camp International, she is proud to live in the Canadian Typographic Archipelago.

 

 

The art of kinetic typography — Dan Boyarski

 

Dan Boyarski is professor and former head of the School of Design at Carnegie Mellon University, where he has been for thirty-two years. His interests lie in visualizing complex information, interface and interaction design, and how word, image, sound, and movement may be combined for effective communication. In the spring of 1999, the Design Management Institute awarded Dan the Muriel Cooper Prize for «outstanding achievement in advancing design, technology, and communications in the digital environment.»

 

 

Check out the updates here, new collections of wise creative thoughts are already around the corner!

tubikstudio website design ui

Tubik Monthly Review. May.

The summer has come full of bright colors and moments of life. Traditionally, we start it reviewing and analysing what happened during the last month. So, let’s look together what May has brought to studio life.

 

The month brought out new shots published on Dribbble by studio designers: there were presented diverse design concepts of websites and landing pages, mobile applications, interface animation and character animation, lettering, logo and branding design. Follow the links if you are interested to see all the details full-size.

 

tubik studio landing page toys

Henderson — Handmade Toys by Vladyslav Taran

 

contact list design concept tubik studio

Contact List Concept by Eugene Cameel

 

tubik studio ui design dark

Dark Side of UI Design by Marina Yalanska

 

online magazine design tubik studio

Daily Bugle Online Magazine by Dima Panchenko

 

tubik studio ice ui website

Tubik Studio | Ice by Ernest Asanov

 

tubikstudio_ui_swiftybeaver

SwiftyBeaver. UI Design for Mac App by Marina Yalanska

 

landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko

 

tubik studio logo design case study

Case Study: SwiftyBeaver Logo by Marina Yalanska

 

lettering tubik studio design

Rapture Lettering by Denys Boldyriev

 

tubik studio application recipes and cooking

GIF Animation for Recipes and Cooking by Sergey Valiukh

 

monster intro animation tubik studio

Epic Monster Intro Animation by Kirill

 

Contact List Concept Scrolls Tubik

Contact List Concept Scrolls by Eugene Cameel

 

We have published some new articles about general and specific design issues as well as practical case studies here in Tubik Blog. In case you missed any of them, here’s the list of topics considered in May:

 

  • Dark Side of UI. Benefits of Dark Background. The article continues the topic of effective color choices in user interface design. This time it is devoted to the benefits and pitfalls of dark background in UI design solutions for websites and mobile applications.
  • SwiftyBeaver. UX & UI Design for a Mac Application. Fresh case study on UX and UI design process. Detailed description of creating user interface for SwiftyBeaver, a Mac application presenting the first integrated logging platform for Apple’s Swift programming language.
  • Case Study: SwiftyBeaver. Designing Logo. New case study on logo design continuing the story of comprehensive design process for SwiftyBeaver, the integrated logging platform for Apple’s Swift programming language. Packed with graphics demonstrating various creative stages.
  • Landing Page. Direct Flight to High Conversion. The article is devoted to the basics of landing pages design. Considers the issues of conversion, CTA, USP, copy, visuals and other elements of efficient landing. Packed with examples by studio designers and recommended reading.

 

swiftybeaver article tubik studio

 

This month we also actively shared our ideas and experience answering questions about design issues on Quora. Here are the most popular ones which got most readers’ attention in May and some of them got featured in Quora Digest:

 

Why are illustrations important for UX design?

— Why hasn’t Facebook updated their UI to a more modern design?

What is the difference between UI and wireframe?

— In website design, what are the pros and cons of dark text over light background vs light text over dark background, and is one better than the other?

 

Tubik studio on Quora

May was full of unforgettable moments of brainstorming, collaboration, creativity and friendship which we, as usual, actively shared with our followers in studio Instagram page.

 

tubik studio designers instagram

 

Tubik studio design team

 

Getting closer to global design community and all those who have keen  interest in this field, we shared our ideas and experience via Medium and kept everyone updated with studio news via Twitter, Tumblr and Flipboard.

 

So, welcome to join us wherever it’s convenient for you. Bright and positive summer to everyone, we are ready for a new month, new projects, ideas and meetings, fresh design concepts and wise tips from experts. Stay tuned!


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

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

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