Tubik

Magazine

No. 3

Problem-
Solving Web
Design
Strategies for Efficient Websites

The review of theory, practices and

design cases for user-friendly websites
and landing pages.

2017
Copyright © 2017 by Tubik Studio.

All rights reserved. No part of this publication

text may be uploaded or posted online without
the prior written permission of the publisher.

For permission requests, write to the publisher,

addressed “Book Content Permission Request”
to [email protected]
 Problem-Solving Web Design

CONTENTS

About Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Chapter 1. Back to Basics. Web Design Glossary: Terms and

Definitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Chapter 2. Home Sweet Home. Strategies and Practices

of Home Page Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Chapter 3. Landing Page Design. Direct Flight to High

Conversion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

chapter 4. Best Practices for Website Header Design . . . . . . . . . . 44

Recommended reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

3 tubikstudio.com
 Problem-Solving Web Design

ABOUT AUTHORS

Sergii Valiukh Marina Yalanska

Founder, CEO and Art-Di- Content manager for Tubik Stu-

rector of Tubik Studio. dio. Tech/design blogger, high-
Award-winning UI/UX design- lighting diverse issues of design
er, one of the opinion leaders processes and strategies. Con-
in the field of functional UI tent writer for Tubik Blog and
animation, the head of inter- Design4Users with background
national design and software in education, journalism and
company, worldwide recog- research.
nized expert in the domain.

Ernest Asanov

UI/UX designer for Tubik Studio

with considerable background
in problem-solving design for
various business spheres and
markets.

4 tubikstudio.com
 Problem-Solving Web Design

BRIEF INTRO

Nowadays, World Wide Web could be named the web of life. It con-
nects people from all around the world whatever their aims and
wishes are about. Personal and professional communication, order-
ing 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 com-
munication of all kinds. Still, today we are going to focus more on
the variety of perspectives for positive influence of the web on peo-
ple’s lives.

The previous issues of Tubik Magazine were devoted to the aspects

of design for business and logo design. This one is all devoted to
strategies and practices of problem-solving web design. We offer
you the overview of the practical questions that could rise in the
process of creating websites for different purposes. On the ground
of numerous design projects here in Tubik, our team believes that
efficient websites should be based on the balance of usability and
visual harmony. Hopefully, our tips will be useful for global design
community.

Tubik Team

5 tubikstudio.com
 Problem-Solving Web Design

C H APTE R O N E

Web Design
Glossary. Terms and
Definitions

6 tubikstudio.com
 Problem-Solving Web Design

Let’s start with the basic notions widely used in connection with the
phenomenon of web design. This chapter will set the foundation for
the further, more detailed insights into the sphere.

Web Design
Web Design is a term defining design field featuring all the activities
connected with creation and maintenance of websites and pages
as both pieces of practical interaction and the product with cer-
tain 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 updates
design in the process of actual website use.

Web design as a term can also name the result of mentioned activ-
ity direction, which means that this word is used to describe struc-
ture, 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 comprehen-
sive. 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 color theory
• logic and schematism
• analysis and statistics
• visual arts
• programming

7 tubikstudio.com
 Problem-Solving Web Design

• 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 the vast majority of cas-
es, 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, design-
ers should consider a full range of user-interface issues, and work to
create a website that enables the best possible human performance.”

Working on a website, designers have to concentrate on four as-

pects:

8 tubikstudio.com
 Problem-Solving Web Design

• 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).

Architecture Firm
Website

For practical example, let’s review the design concept devoted to

the theme of architecture. It is the corporate website for a company
presenting the variety 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 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 com-
pany ideas and approach to work. The visual effects are supported
with smooth animation.

9 tubikstudio.com
 Problem-Solving Web Design

Randomizer Concept

Here is another web concept. It presents the flow of interactions

for the website created with the objective of e-commerce. The
randomizer enables the buyer to check different items shown with
high-quality and realistic images. Light airy background creates
space for effective offer presentation and good contrast for inter-
active elements of navigation. The designer applies header which
includes links to the core thematic zones of the website as well as
the logo identifying the seller.

Home Page
Home page is the most popular name for the main page of the web-
site. It is called home as it usually provides starting point with many
further directions for the user, containing links to the most impor-
tant 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

10 tubikstudio.com
 Problem-Solving Web Design

often contains search field, basic onboarding functionality for per-

sonalized sites, different areas of navigation showing users diverse
categories of data. It might also contain engaging welcome mes-
sages 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 meas-
ures 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 — re-
gardless 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.

Bookshop Website

Here you can see the example of the homepage for an online
bookshop. The interface, which has to present a lot of items with
different visual performance and style, uses light background to set

11 tubikstudio.com
 Problem-Solving Web Design

the harmonic visual perception. The page includes several theme

blocks showing news, bestsellers, categories of items and reviews
from readers.

Home page is 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.

We will consider the structure and strategies of homepage design in

the second chapter here.

Landing Page
Landing page in its basic 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. How-
ever, today the other specific meaning is used much more often to
define a landing page. Behind this term, people understand the spe-
cial web page created for the 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

Magic.co
Landing Page

12 tubikstudio.com
 Problem-Solving Web Design

analysts say a landing page can be more efficient than the home
page for marketing needs. 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? It is easy to answer with a little meta-

phor. 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 ad-
miration 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 yourself. How
do you like it now? Who knows, perhaps you will be not so happy after
the 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 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, a thought-out land-
ing page is really vital to strengthen marketing strategy and increase
conversion rates.

Here is a part of the landing page for the Big City Guide, the online
service providing travelers with the information about big cities all

13 tubikstudio.com
 Problem-Solving Web Design

Big City Guide

over the world. The presented page features Stockholm. The name
of the city becomes the center of the composition, bold and quick-
ly readable in strong uppercase letters. The word is harmonically in-
scribed into the thematic picture with deep and magnificent Nordic
forest. The subheading presents the motivating line whose message
naturally combines with the image and the associations set by the city.

Welcome to read the full case study about this design project.

The third chapter here will be all devoted to the issue of well-de-
signed landing pages, so you will get more details there.

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 conven-
ient anyway? Sure, every customer is aware of growing popularity of
mobile devices.

14 tubikstudio.com
 Problem-Solving Web Design

The idea behind responsive web design (RWD) is that the content
and layout of a website should efficiently adapt according to the siz-
es 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 ele-
ments 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 the audience which likes surfing and using the internet
sources “on the go”. It’s vital to consider that this part of the audi-
ence is mainly the most active part, non-afraid of technologies, fast
in browsing necessary information and options, easy-going in mak-
ing 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 re-
sponsive web design is a powerful approach indeed.“

15 tubikstudio.com
 Problem-Solving Web Design

Creating responsive web design for a web product means making it

pleasant-looking, clear and functional in different sizing with optimal
navigation that provides the high level of usability. This technique
presents an 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. Responsive web design makes the website flexi-
ble, 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, then 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 an important part of general
search optimization of your product.

Header
In terms of web layout elements, header is the upper (top) part of the
web page. It is a significant and strategic part as people see it before
scrolling the page in first seconds of introduction to your website.

16 tubikstudio.com
 Problem-Solving Web Design

Therefore, the header should be informative and provide the most

important information about the digital product so that users could
scan it in split seconds. A header is also the area providing the broad
field for creative design solutions which should be catchy, concise
and useful. Headers are often referred to as “Site Menus“ and posi-
tioned 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 multilingual 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 ele-
ments 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 marketing spe-
cialists, decide on the strategically important options and pick them
up from the list or add the others.

Here is the 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 imag-
es of innovative technologies involved to this user-friendly service.

17 tubikstudio.com
 Problem-Solving Web Design

Coffee Wings
Landing Page
Copy blocks are not overloaded so that visitors could get the idea
and benefits of the service quickly and clearly and obtain more in-
formation, if they want, following the calls to action. The concept
uses sticky header, connecting users to the key areas of interaction
and featuring the visual branding element in the center.

We will concentrate on the approaches and practices for website

header design in the third chapter here.

Footer
According to everything mentioned above, it’s easy to understand
that footer is the lower (bottom) part of the web page. Footer usual-
ly 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.

18 tubikstudio.com
 Problem-Solving Web Design

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 web-

sites. For instance, with some tasks when designers apply infinite
scrolling technique, the traditional footer is not an effective naviga-
tion zone. However, in the 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 the case when the page has long scrolling area. The 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 in-
formation. First of all, footer should provide information support and
in this way strengthen the chances of positive user experience.“

19 tubikstudio.com
 Problem-Solving Web Design

Bonano
E-Commerce
Website

Here is the website selling women’s clothes. The concept uses

the footer seen after scrolling the page down. The footer area
features contact data, links to social networks and some impor-
tant financial data.

20 tubikstudio.com
 Problem-Solving Web Design

C H APTE R T W O

Home Sweet Home.

Strategies and
Practices of Home
Page Design

21 tubikstudio.com
 Problem-Solving Web Design

Home is usually associated with the place where you feel comfort-
able, 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 profes-
sional 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 web design, home page, in fact, is the place which
should make the interaction with a website of any complexity con-
venient and positive. Any designer wants to create it as a place where
users can find everything they need easily and quickly. So, this ob-
ject of design effort is strategically significant as most users have a
chance to interact with a home page, even if it’s not a place from
which they start a journey around the website. Let’s extend the ba-
sics with some ideas and strategies important to consider designing
home page.

Event Agency
Website

22 tubikstudio.com
 Problem-Solving Web Design

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 a 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’ jour-
ney if they are directed to the site by search engines which means that
it is the page 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 per-
sonalized sites, different areas of navigation showing diverse cate-
gories 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.

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.

Design4Users
Website

23 tubikstudio.com
 Problem-Solving Web Design

What does a home page

usually include?
The aspects of interaction with a website home page should advisa-
bly 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, edu-
cational 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 ac-
complished 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 locat-
ed in the area of high visual intensity according to eye-tracking
trends;

• Navigation elements providing the ability to move to different

24 tubikstudio.com
 Problem-Solving Web Design

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 and also get back home any moment and
from any point of journey;

• Contact information and preferably data about creators or

stakeholders: the home page is the place where users expect
to get provided with the basic information about who creates,
maintains 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 for social marketing but also the good
way to communicate to users. Social networks are now used
by thousands of people on regular basis, so there will be al-
ways 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 so-
cial popularity can be a catchy factor to learn more and further
investigate 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 tar-
get audience’s needs, expectations and peculiarities of psycholog-
ical 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.

25 tubikstudio.com
 Problem-Solving Web Design

Vinny’s Bakery
Website

As the home page is actually the front door to the website, 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 re-
member that not many users tend to spend much time investigat-
ing a new website: in most cases, there are 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 tell the observ-
ers 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 Wrob-
lewski and Nielsen Norman Group. They are deeply helpful for de-
signers seeking to create home pages with the 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 high-
est visibility and in this way make the page quickly informative and

26 tubikstudio.com
 Problem-Solving Web Design

catching attention of target users or readers.

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 user attention and its
concentration on definite areas of the website 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 di-
rected 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 di-
recting 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 sat-

isfy 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 infor-
mation 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 atten-
tion on something important, to make it noticeable and easily avail-
able 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, ser-
vices or items. This is the issue of especially high importance in the

27 tubikstudio.com
 Problem-Solving Web Design

case of e-commerce websites when unwise design solutions bring

to poor user experience and financial losses. 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 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 expec-
tations
• usage of language (vocabulary, syntax, modality, keywords etc.) which is
understandable and appealing to target audience

28 tubikstudio.com
 Problem-Solving Web Design

• 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.

29 tubikstudio.com
 Problem-Solving Web Design

C H APTE R T H R E E

Landing Page Design.

Direct Flight to High
Conversion

30 tubikstudio.com
 Problem-Solving Web Design

In this chapter, let’s 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. Let’s think about the most
popular questions often asked about landing page design.

What is landing page and

why is it needed?
As it was briefly mentioned in the first chapter, 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, fea-
tures 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 op-
tions 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.

31 tubikstudio.com
 Problem-Solving Web Design

Museu Landing
Page

As a practical example, here is the design concept Museu. 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 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 creating a digital interactive product.

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 impor-
tant, to make it noticeable and easily available. Landing page is a tool
to emphasize one item, to make it quickly found and reduce delays in

32 tubikstudio.com
 Problem-Solving Web Design

cases when target user seeks for specific operations, services or items.
As the author of highly informative article “The ultimate guide to de-
signing 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 cam-
paign sending traffic to it. That can leave visitors confused.”

What is conversion and why

is it important?
Talking about the sphere of design for businesses and products, espe-
cially in terms of their marketing and promotion, the word conversion
is perhaps the most popular and widely used. In its most general defi-
nition, 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, in which landing pages have per-

haps 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 mod-
ern terms of comprehensive and numerous functions and needs,
which users are able to fulfill with online resources and digital prod-
ucts, 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

33 tubikstudio.com
 Problem-Solving Web Design

• 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.

Conversion means that your page transforms passive users into ac-
tive. 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 advertis-

ing agency, gives a brilliant thought about the importance of con-
version: “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 land-
ing pages providing specific data and saving their most precious re-
source — time.

Here’s 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
the ability of transition to the catalog via description of hot offers
and also has testimonials part to provide users' opinion about the
service.

34 tubikstudio.com
 Problem-Solving Web Design

Travel Gear
Landing Page

35 tubikstudio.com
 Problem-Solving Web Design

What does a landing page

consist of?
Actually, a landing page is a field for broad creativity depending on
the target audience and objectives behind it. 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. It doesn’t matter what
size is the page, how many parts it includes, how many visual ele-
ments 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, activi-

ty etc.) with call-to-action element. Users need to be provided
with the basic description of the benefits, preferably not too de-
tailed but concise and useful. The aim of this element is to inform
the user and provide a clear and noticeable opportunity to ac-
tively use this information via call to action element which can be
presented with a button, link, contact form, subscription 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 recommend-
ed as worth attention. Therefore, testimonials from clients, con-
siderable 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 can be used as an

additional information supporting the description of basic func-
tionality. 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 land-
ing page longer and requires more attention from users so ap-
plying this block should be always thoroughly analyzed.

36 tubikstudio.com
 Problem-Solving Web Design

The example
provided above is a
concept of landing
page Organic. 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.
The visual elements
were selected to
support the general
theme and provide
immediate visual
perception of basic
idea.

37 tubikstudio.com
 Problem-Solving Web Design

What are important aspects

of an efficient landing
page?
TARGET AUDIENCE ANALYSIS
No landing page should be designed without a solid basis of re-
search 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 the definition of the goals and target audience. So, a
landing page should be designed as a virtual bridge connecting tar-
get customer with a product or service. For a webpage with high
conversion rates, design decisions have to be based on target audi-
ence’s preferences, abilities and psychological characteristics. De-
sign 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 to is
analysis of the competition. Earlier we have already considered the
connection between UI/UX design and advertising basics in the arti-
cle “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 the 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

38 tubikstudio.com
 Problem-Solving Web Design

page should be the aspect of thorough research and testing as it

directly influences conversions.

However, it doesn’t mean that every landing page should contain a

minimal number of words. If it presents a famous company prod-
uct 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.

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 com-
pany 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 im-
ages of high level of abstraction. In vast majority of cases people
fix and perceive pictorial elements like icons and illustrations faster
than words. Great proportion of users are visually-driven creatures
by nature. 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 encour-
age people to realize the conversion. Effective landing page quickly

39 tubikstudio.com
 Problem-Solving Web Design

informs a user about unique selling points and provides noticeable,

clear and easily-available calls to action.

SHORT LOADING TIME

One of the aspects influencing design solutions for landing pag-
es 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 can become a very good way to present a product without
making users read long copy blocks. It involves all the senses of per-
ception into process. Video can make the page active and interest-
ing. However, there is a pitfall to remember about: video has a con-
siderable 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 responsive
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 the everyday basis. Ne-
glecting this aspect may negatively influence conversion rates.

ABSENCE OF DISTRACTION

40 tubikstudio.com
 Problem-Solving Web Design

As it was mentioned above, landing page should concentrate peo-

ple’s attention on 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 navi-
gation to the goal.

Here is a landing page for SwiftyBeaver native Mac application. 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 impor-
tant links, they are designed in a way not distracting from the main
elements providing conversion.

Landing page for

SwiftyBeaver

41 tubikstudio.com
 Problem-Solving Web Design

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 long-term. Moreover, the
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’ behavior and fix the solutions that are
not effective.

Seafood Recipes
Landing Page

42 tubikstudio.com
 Problem-Solving Web Design

This example presents a landing page for a website collecting rec-

ipes of meals with seafood from all over the world. The dark back-
ground is chosen to make the images of meals look even more de-
licious and also create the stylish appearance. The landing quickly
provides general understanding of the website purpose and content
featuring different sections that could be interesting for users.

Studies based on 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 design solutions providing high conversions and sales.

43 tubikstudio.com
 Problem-Solving Web Design

C H APTE R FO UR

Best Practices for

Website Header
Design

44 tubikstudio.com
 Problem-Solving Web Design

Everyone knows: there is not the second chance to make the first
impression. In the sphere of digital products, this eternal truth works
in terms of high competition and incredible diversity. No doubt,
some zones of the webpage or mobile screen are particularly im-
portant and effective in this aspect. In this chapter we are going to
discuss one of them in deeper focus: the header of the website.

What is a header?
As we briefly mentioned in the glossary before, in web page layout,
header is the upper (top) part of the web page. It is definitely a stra-
tegic part of the page as the area which people see before scrolling
in the first seconds of introduction to the website. Being somehow a
sign of invitation, header should provide the core information about
the digital product so that users could scan it at once. In design
perspective, header is also the broad field for creative design solu-

Comics Shop
Website

45 tubikstudio.com
 Problem-Solving Web Design

tions which should be catchy, concise and useful. Headers are often
referred to as “Site Menus” and positioned as a key element of navi-
gation in the website layout.

The presented concept shows the home page for the online book-
shop selling comics. The top horizontal area aka header presents
the logo lettering showing the name of the website and the core
navigation around: links to the catalog of items, fresh and special
offers, blog, action figures, an icon of the shopping cart typical for
e-commerce websites and the icon of search.

What can a header include?

Headers can include a variety of meaningful layout elements, for
example:

• 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.

It doesn’t mean that all the mentioned elements should be included

in one web page header. The more objects attract user’s attention,
the harder it is to concentrate on the vital ones. On the basis of de-
sign tasks, designers, sometimes together with marketing specialists,
decide on the strategically important options and pick them up from
the list or add the others.

46 tubikstudio.com
 Problem-Solving Web Design

Let’s have a look at a couple of examples to see which of the men-

tioned elements designers placed in the header for particular web-
sites.

This is the website

of an interior design
studio. The upper
part of the page
presents the sticky
header which stays
in the zone of visual
perception all the
time in the process
of scrolling. It is
divided into two
blocks: the left
part features brand
logo while the right
part presents the
interactive area
with links to several
information blocks
like “Product”,
“Studio” and “Press”
and call-to-action
button “Shop”
marked out with a
shape. The central
part of the header
uses negative space
for visual separation
of these two blocks.

Bjorn Website

47 tubikstudio.com
 Problem-Solving Web Design

Why is header important?

There are several issues why the header is a vital element of many
websites.

The first thing to consider is eye-scanning models which show how

users interact with a webpage in the first seconds. This significant
domain of user research is massively supported by Nielsen Norman
Group and provides designers and usability specialists with the bet-
ter understanding of user behavior and interactions.

In brief, when people visit the website, especially the first time, they
do not explore everything on the page carefully and in detail: they
scan it to find a hook which would catch their attention and convince
them to spend some time on the website. Different experiments col-
lecting data on user eye-tracking have shown that there are several
typical models along which visitors usually scan the website. In the
article about 3 design layouts, Steven Bradley mentions the follow-
ing common models: Gutenberg Diagram, Z-Pattern, And F-Pattern.
Let’s check what are the schemes provided for them in the research.

Guttenberg Pattern is quite typ-

1 2
ical for the web pages with the
uniform presentation of informa-
tion and weak visual hierarchy. As
it can be seen from the scheme
we found in Steven Bradley’s re-
search, it marks out four active
zones — and two of them go
Z-Pattern Layout 3 4 across the typical header area.

48 tubikstudio.com
 Problem-Solving Web Design

Another scheme features Z-pat-

1 2 tern and the presented zig-zag

version is typical for pages with
visually divided content blocks.
3 4
Again, the reader’s eyes go left to
right starting from the upper left
5 6 corner and moving across all the
page to the upper right corner

Zig-zag Pattern
7 8 scanning the information in this
initial zone of interaction.

One more model is F-pattern presented in the explorations by Niels-

en Norman Group and showing that users often demonstrate the
following flow of interaction:

F-pattern

• Users first read in a horizontal movement, usually across the upper part of
the content area. This initial element forms the F’s top bar.
• Next, users move down the page a bit and then read across in a second
horizontal movement that typically covers a shorter area than the previous
movement. This additional element forms the F’s lower bar.
• Finally, users scan the content’s left side in a vertical movement. Some-
times this is a fairly slow and systematic scan that appears as a solid stripe
on an eye-tracking heatmap. Other times users move faster, creating a
spottier heatmap. This last element forms the F’s stem.

All the mentioned models show that whichever of them a particular

user follows, the scanning process will start in the top horizontal
area of the webpage. Using it for showing the core information and

49 tubikstudio.com
 Problem-Solving Web Design

branding is a strategy supporting both sides: readers scan the key

data quickly while website gets the chance to retain them if it’s pre-
sented properly. That is the basic reason why header design is an
essential issue for UI/UX designers as well as content and promotion
specialists.

In one of the articles devoted to practices of header design, its au-

thor Bogdan Sandu mentions an important point that should be kept
in mind: “People judge the quality of a website in just a few seconds
and a second impression is something absent on the Internet. In
conclusion, a website must be eye-catching else, it would be noth-
ing more than a big failure”.

Another thing to consider is that the header can become a great help
in presenting the essential data to the user quickly and providing pos-
itive 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 re-
search of target audience for the product or service.

Design practices
READABILITY AND VISUAL HIERARCHY
The choice of typefaces for headers and the background color
should get under rigorous research and testing as the aspect of
readability in header plays a vital role. The user has to be able to scan
and perceive this basic information as fast as possible without any
sort of additional effort. Otherwise, you risk providing the non-us-
er-friendly interface.

50 tubikstudio.com
 Problem-Solving Web Design

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.

Daily Bugle
Magazine

The Big
Landscape

Here is another website whose layout is built on the broken grid, so

the header corresponds to this approach. The left part of the header
is visually longer and consists of four elements: the logo and the

51 tubikstudio.com
 Problem-Solving Web Design

links to three data blocks, while the right part is shorter and includes
only two layout elements: search and call-to-action button marked
out with the shape and colored for the high level of contrast.

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 core
elements of the layout active and available during all the process of
interaction.

HAMBURGER MENU
Another design solution which is quite 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 hori-
zontal lines looks like typical bread-meat-bread hamburger.

Hamburger
Button Concept

52 tubikstudio.com
 Problem-Solving Web Design

This button is usually placed in the header and nowadays it is a typi-

cal 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 mini-
malistic and full of air as well as save the place for other important
layout elements. This design technique also provides additional bene-
fits for responsive and adaptive design hiding navigation elements and
making the interface look harmonic on different devices.

ICE Website

The presented web design concept shows the version of hamburger

menu. As the menu of the website contains many positions, the de-
signer uses this technique placing the hamburger button in the area
of initial interaction — top left corner. It allows creating the header
supporting general minimalistic style of the website. The horizontal
area of the header is divided into two zones: the left zone presents
branding and a short introduction of the website colored in red and
keeping visual consistency with visual performance of the headline
and call-to-action element of the page; the right zone features icons
of social networks and search icon. The central part of the header is
left empty which adds some air and balance to its design and works

53 tubikstudio.com
 Problem-Solving Web Design

as a negative space separating two different functional blocks.

Slopes Website

This design concept presents the website with an original structure

of the page, leaving the wide light margin in the left part of the page,
with the brand name and logo in the top left part which is the first
point of scanning. The other part presents interactive zone and has
its own header composition: hamburger button to the left and four
core links of transition to the right. As this example of interaction
shows, hamburger menu allows the designer to organize numerous
theme blocks of information and provide effective visual hierarchy.

Although hamburger menus still belong to highly debatable issues

of modern web and app design, they are widely used as header el-
ements. The arguments against hamburger menu are based on 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 defini-
tion of target audience’s abilities and needs

FIXED (STICKY) HEADER

Sticky headers present another trend able to boost usabilit. Actually,
it enables to provide users with navigation area available at any point

54 tubikstudio.com
 Problem-Solving Web Design

of interactions, which can be helpful in terms of content-heavy pag-

es with long scrolling.

Structure:
Architecture Blog

The presented design concept of a website has a fixed header which

doesn’t hide while the page is scrolled. However, it follows mini-
malism principles featuring brand name lettering as a center of the
composition, magnifier icon marking search functionality and ham-
burger button hiding links to navigation areas.

Photography
Workshops
Website

55 tubikstudio.com
 Problem-Solving Web Design

Here is one more design concept featuring creative approach to

the header design. The initial view of the home page includes the
extremely minimalistic header: it shows only social icons and the
search. However, scrolling down users get the sticky header with
quite a traditional set of navigation items: the first element to see
on the top left part is hamburger button hiding the extended menu,
then branding sign followed by the links to thematic information
blocks. The composition is finished with the search placed in the
top-right part of the page in all the process of interaction with the
page and supporting the feeling of consistency.

DOUBLE MENU
Double menu in the header can present two layers of navigation.
We have shown the example of such trick in one of the recent case
studies for a bakery website.

Vinny’s Bakery
Website

As you can see, the website also uses a sticky header which consists
of two levels of navigation. The upper menu shows the links to so-
cial networks, the logo, search, shopping cart and hamburger but-
ton hiding the extended menu. The second line of navigation gives

56 tubikstudio.com
 Problem-Solving Web Design

instant connection to the core interaction areas: products catalog,

locations for the point-of-sales, news and special offers, informa-
tion about the service and contact section. Visual and typographic
hierarchy makes all the elements clear and easily scanned providing
solid ground for positive user experience.

The bottom line is simple here: header is the strategically vital zone
of interaction for any website. Each particular case requires its own
approach which will be informative and usable for the specific target
audience. User research can provide the good basis for the design
solutions which can follow quite traditional forms of header organ-
ization or require totally new perspective.

57 tubikstudio.com
 Problem-Solving Web Design

RECOMMENDED READING
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

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

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

F-Shaped Pattern For Reading Web Content

Sticky Header Usability: Making Menus Part of a Great User Experience

30 Interesting Examples Of Headers In Web Design

Headerlove: curated collection of headers design

58 tubikstudio.com
SHARE

Feel free to share this book with your friends and colleagues
and keep up with new updates. New issue of Tubik Magazine
is coming soon!

tubikstudio.com