Tag Archives: header

tubikstudio homepage design

Best Practices for Website Header 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 important and effective in this aspect. Today we are going to discuss one of them in deeper focus: the header of the website.

 

In the issue of UI/UX glossary devoted to the web design terms, we have already provided the brief overview of what is a header. Today let’s look a bit closer at the topic and discuss what are the functions of a header and recommendations for its design. In addition, we will show a bunch of web design concepts applying different approaches to header design.

 

What is a header?

 

In web page layout, header is the upper (top) part of the web page. It is definitely a strategic part of the page as the area which people see before scrolling the page 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 in split seconds. In design perspective, header is also the area making the broad field for creative design solutions which should be catchy, concise and useful. Headers are often referred to as «Site Menus» and positioned as a key element of navigation in the website layout.

 

tubikstudio ui webdesign

 

The presented concept shows the home page for the online bookshop 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 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: in this case, the risk is high that the header section would be overloaded with information. The more objects attract user’s attention, the harder it is to concentrate on the vital ones. On the basis of design tasks, designers, sometimes together with marketing specialists, decide on the strategically important options and pick them up from the list or add the others.

 

Let’s have a look at a couple of examples to see which of the mentioned elements designers placed in the header for particular websites.

 

tubikstudio ui animation website design

 

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.

 

tubikstudio homepage design

 

Here is another sample of the webpage with a bit different approach to the header design. This time the composition is built around the center featuring the logo and brand name. Left and right side are balanced around it with two links each allowing users to scan quickly and move to the information blocks they are interested in.

 

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 better 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 collecting 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, the author Steven Bradley mentions the following common models: Gutenberg Diagram, Z-Pattern, And F-Pattern. Let’s check what are the schemes provided for them in the research.

reading pattern

Guttenberg Pattern is quite typical for the web pages with the uniform presentation of information and weak visual hierarchy. As it can be seen from the scheme we found in Steven Bradley’s research, it marks out four active zones — and two of them go across the typical header area.

 

reading pattern zig-zag

Another scheme features Z-pattern and the presented zig-zag version is typical for pages with visually divided content blocks. Again, the reader’s eyes go left to right starting from the upper left corner and moving across all the page to the upper right corner scanning the information in this initial zone of interaction.

 

f_reading_pattern_eyetracking

 

One more model is F-pattern presented in the explorations by Nielsen Norman Group and showing that users often demonstrate the following flow of interaction:
 

  • 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. Sometimes 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 branding is a strategy supporting both sides: readers scan the key data quickly while website gets the chance to retain them if it’s presented 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 author 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 nothing 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 positive user experience via clear navigation. However, that doesn’t mean that every website needs a header. There are many creative solutions providing designs applying typical header functionality in other zones of the layout. Every case of website design needs analysis and research of target audience for the product or service.

 

Design practices

 

Readability and visual hierarchy

 

The choice of typefaces for headers and the background color should get under highly rigorous research and testing as the aspect of readability in header plays 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-user-friendly interface.

 

online magazine design tubik studio

 

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.

 

web design UI concept tubik studio

 

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 links to three data blocks, while the right part is shorter and includes only two layout elements: search and call-to-action button market 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 horizontal lines looks like typical bread-meat-bread hamburger.

 

hamburger button tubik studio

 

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

 

tubik studio ice ui website

The presented web design concept shows the version of hamburger menu. As the menu of the website contains many positions, the designer 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 as a negative space separating two different functional blocks.

 

tubik studio web UI design

 

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 still widely used as header elements. 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 definition of target audience’s abilities and needs.

 

Fixed (Sticky) header

 

Sticky headers present another trend able to boost usability is applied effectively. Actually, it enables to provide users with navigation area available at any point of interactions, which can be helpful in terms of content-heavy pages with long scrolling.

 

Tubik studio UI design

 

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

 

website design for photographers

 

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.

 

Bakery website design case study tubik

 

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 social networks, the logo, search, shopping cart and hamburger button hiding the extended menu. The second line of navigation gives instant connection to the core interaction areas:  products catalog, locations for the point-of-sales, news and special offers, information 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 of any website 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 organization or require totally new perspective.

 

Recommended reading

 

Here is a bunch of links to the articles and design collections which could provide further interesting explorations of the topic:

 

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


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

Welcome to read the UI/UX Glossary: Web Design

tubik studio landing page design

UI/UX Glossary. Web Design Issues.

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

 

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

 

Web Design

 

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

 

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

 

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

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

 

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

 

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

 

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

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

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

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

 

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

 

tubik studio design UI

Randomizer concept by Vladyslav Taran

 

tubikstudio ui animation website design

Tubik Studio | Björn by Ernest Asanov

 

website design concept tubikstudio

BRMC Website by Konst

 

Home Page

 

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

 

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

 

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

 

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

 

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

 

home page landing tubikstudio

Comics Shop Home Page by Dima Panchenko

 

tubik studio ice ui website

Tubik Studio | Ice by Ernest Asanov

 

Landing Page

 

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

 

Landing page in its basic wide meaning is the term used for analytics to describe any page where the user started his or her journey around your site, in other words, where a user lands on the website. However, today the other more specific meaning is used much more often to define a landing page. Behind this term, people understand the special web page created for 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 analysts say a landing page is in most cases of marketing and presentation of particular product or service is much more efficient than the home page. Home page can have too many options and getting through all of them to find the particular product the user can get distracted from making the decision, lose interest or even get annoyed.

 

Why is landing page needed? As we mentioned in the case study about designing a landing page, it is easy to answer this question with a little metaphor. 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 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, information or service and clicks through the link to its provider, sure, he or she doesn’t dream to spend a lot of time looking for desired product or page among all the links and information provided on your homepage. The user wants to «land» directly at that very place which will make possible for him or her to get what they want as fast as possible and getting enough (but not too much) information to support their decision-making process. So, creating a well-thought-out landing page is really vital to strengthen marketing strategy and increase conversion rates.

 

In general, typical landing pages often have:

 

1) General idea of the presented object (product, service, activity etc.) with call-to-action element. Users need to be provided with the 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 opportunity to actively 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 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 the description of basic functionality. It supplies a visitor with more details about the product or service, its abilities and technical characteristics, its influence on life and productivity and the like. It certainly makes the landing page longer and requires more attention from users so applying this block should be always thoroughly analyzed.

 

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

 

Landing Page Animation Tubik Studio

Landing Page Animation by Sergey Valiukh

 

tubik studio landing page design

Arts, Culture & Education Curation | Landing by Polina

 

landing page animation Tubik studio

magic.co landing page concept by Ludmila Shevchenko

 

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

 

Responsive Design

 

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

 

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

 

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

 

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

 

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

 

Tubik Studio Tracking App

 

Read about this topic in our previous article

 

Header

 

In terms of web layout elements, header is the upper (top) part of the web page. It is a significant and strategic part of the page as it is what people see before scrolling the page in first seconds of introduction to your website. Therefore, 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 positioned as a key element of navigation in website layout.

 

Headers can include:

 

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

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

— links to basic categories of website content

— links to the most important social networks

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

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

— search field

— subscription field

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

 

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

 

The choice of typefaces for headers and the background color should get under highly rigorous research and testing as the aspect of readability in header plays 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 non-user-friendly interface.

 

online magazine design tubik studio

Daily Bugle Online Magazine by Dima Panchenko

 

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

 

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

 

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

 

hamburger button tubik studio

Hamburger button by Kirill

 

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

 

Although hamburger menus still belong to highly debatable issues of modern web and app design, they are still widely used as header elements. The arguments against hamburger menu are based 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 definition of target audience’s abilities and needs.

 

Tubik studio UI design

 

Structure – Architecture Blog by Ernest Asanov

 

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

 

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

 

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

 

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

 

Footer

 

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

 

Footer can include:

 

— name and logo of the company or product

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

— credits to website creators

— contact info and forms

— links to company or product accounts in social networks

— testimonials and badges

— certification signs

— subscription field etc.

 

As well as header, footer is not the element found in 100% of websites. For instance, with some design tasks when designers apply infinite scrolling technique, the traditional footer is not an effective navigation 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 information.» First of all, footer should provide information support and in this way strengthen the chances of positive user experience.»

 

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


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

Welcome to read us on Quora