Tag Archives: website

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

Bakery website design case study tubik

Case Study: Vinny’s Bakery. UI Design for E-Commerce.

Design for e-commerce platforms is a special field of knowledge and practice. On the one hand, there are more and more users with an average or high level of tech literacy, who trust this way of shopping and are open to buying online. On the other hand, the level of competition in the field is also becoming more diverse and comprehensive with the constantly increasing number of services and platforms for selling and buying via the Internet. 

 

In one of the chapters of our e-book «Design for Business», the success of e-commerce activity depends on several factors among which:

 

— the quality of the product or service offered

— the quality of the content presenting the offer to customers

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

 

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

 

Today’s case study is all about this theme: it presents the UI concept for Vinny’s Bakery website. 

 

tubik studio landing page design

 

Task

 

UI/UX design of a website for a small elite bakery selling fresh hand-made bread.

 

Process

 

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

 

  • operational simplicity
  • strong branding
  • security of users’ data
  • effective use of visual elements
  • clear data presentation via menus, catalogs etc.
  • user’s ability to leave feedback about goods and services
  • easily available general and contact information about the business providing goods or services
  • design that supports the offer not overshadowing it.

 

Grounded on these general principles, Tubik designer Ernest Asanov studied the trends on the market and analyzed the potential target audience of customers who would actually buy the goods, not just watched the offers. On the basis of the obtained data, in UI design he followed the philosophy of minimalism which is user-friendly, attractive and informative.

 

tubik_studio_website_ui_bakery

 

The website promotes a small bakery selling homemade bread. The home page presents the service, providing the links giving more information about the company and the items it offers as well as links to social accounts. The designer was keen to activate different techniques of visual perception via headline, images, background and copy block so that users could get the basic information immediately and got the warm feeling of freshly baked bread. On the basis of the design solutions, it is easy to assume that this is the service positioning itself as a producer and seller of upmarket products which are exclusively hand-made and presumably because of that reason cost higher than average bread in the supermarket. Harmony is the style provided by the webpage: dark background, branding element as a central element of a header, strong and clear headline establishing positive emotional message, visual elements enabling immediate perception of the theme and setting strong visual association with tasty pastry, short text block describing basic benefits of the product and clear visible call to action.

 

Bakery website catalog design ui

 

The next webpage to look at is the catalog of the offered products: again, it supports the user with the prominent and high-quality photos of actual products with brief core information on every position. Users can also quickly review the rating of every item and its price. Horizontal scroll is applied for seeing more positions, that’s why the last item is shown not in a full view to let the user see that this is the direction of scrolling. Call-to-action button, via which the user can add the item to the cart, is designed with a different color comparing to all the other elements of the interface, and this technique allows making CTA prominent and seen immediately. Such an interface lets users add goods right from the catalog without the necessity to go to the page of this particular position. It’s a user-friendly way to go, especially for loyal customers who know well the quality and tastes of the presented bread and wouldn’t like to spend their time on additional transitions just to put the item into their cart. Still, if the user wants to know more about the particular item, it’s easy to do by just clicking or tapping on it in the list.

 

bakery website product page ui

 

Clicking on a particular item, users get the access to more detailed information about the bakery item, including the description, weight of the pack, nutritional rates, rating, price and CTA button. The photo of the item remains the only pictorial element of visual support which makes the interface concise and non-distracting. 

 

Bakery website animation

 

Here you can see the full set of the transitions: you can see that header and footer are fixed, the horizontal scrolling opens more positions in the catalog and strengthens the feeling of the minimalistic and focused interface. The interactions are supported with smooth and unobtrusive animation making the interface even more stylish via the imitation of interaction with physical objects in the real world.

 

Another aspect to mention generally about this web design concept is typography which set one more object of the thorough creative search for the designer and resulted in the combination of fonts, that are effectively contrast and easily readable. Color applied for headings, presented in bold and prominent font and applying uppercase letters echoes the color typical for the freshly baked bread, while the color of copy blocks sets the visual association with the flour on the baker’s table — the element which is used on the background imitating the cooking worktop. Therefore, all those elements get visually connected to each other and present the web interface which looks harmonic and consistent. These are the feelings playing the significant role in building up the positive user experience and attracting buyers to use the service again and again.

 

designers tubik teamwork

 

No doubt, a new day will bring fresh challenges which will result in practical case studies for Tubik Blog readers. Stay tuned, have a tasty day and don’t miss the new posts!


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

tubik studio web design

6 Big Reasons to Start a Website

For centuries, people have found hundreds of ways to communicate and collaborate for both professional and personal aims. Still, since the time when the Internet came into play, these directions of human activity have witnessed really prominent progress. It got especially significant and impressive for the last decade, with broader availability of the Internet and development of new technology. Decent ten or twenty years ago having a website was seen a sort of luxury while today it is often a widely-used and important factor of personal, professional and business growth.

 

There is a great number of big and small goals standing behind the incredible variety of websites whose number seems to grow every single minute. According to Internet Live Stats, there are over 1 billion websites in the World Wide Web today. This milestone was first reached in September of 2014, as confirmed by NetCraft in its October 2014 Web Server Survey, and first estimated and announced by Internet Live Stats. The number had subsequently declined, reverting back to a level below 1 billion due to the monthly fluctuations in the count of inactive websites before reaching again and stabilizing above the 1 billion mark starting in March of 2016. In general, this is the sort story of the amazing path from 1 website in 1991 to 1 billion websites in 2014. 

 

No wonder, more and more people are thinking over the idea of setting their websites and they come to this decision along the different ways reaching various life destinations. Let’s review the most popular reasons that make people work over their websites either by themselves or hiring professionals for that job, and in some cases applying both of the mentioned options. The ideas will be supported with web design concepts accomplished by Tubik designers and corresponding to particular objectives.

 

E-commerce

 

Nowadays this reason would definitely take its place in the top. With better technical abilities of presenting goods and services as well as fast and secure payments enabled via the Internet, more and more people take opportunities of buying and selling online, right from their desktop. It can deal even with the case of personal websites, if people both communicate and sell the goods or services they produce via this website. So, getting real financial profit can be named among the prominent reasons of creating a website. Moreover, modern content-management systems support this aim with tools and features strengthening the website rates in search browsers. 

 

tubikstudio ui webdesign

Design concept of online comic bookshop

 

tubik studio UI design

Design concept of online auction

 

tubik studio design UI

Design concept of the randomizer for e-commerce platform

 

tubik_studio_website_ui_bakery

Design concept of the bakery enabling online orders

 

Business presentation

 

Another reason connected with professional activity and encouraging more and more people to start their websites is presentation of their business, whatever is its nature and volume. It can be anything, from simple one-page website giving basic description of the professional and contact data to complex web platforms providing the variety of business directions or extensive portfolio. The core distinguishing feature comparing to the previous position is that this website doesn’t provide full cycle of direct sales from order to payment and delivery, its aim is to present the services or goods as well as the ways of getting them. This can be the reason for not only fully packed websites of broad functionality but also landing pages fulfilling the same need.

 

tubikstudio homepage design

Web design concept for a company organizing open air events

 

website design tubik studio

Web design concept for a company organizing hot-air-balloon rides

 

website design UI

Web design concept for an architectural bureau 

 

tubikstudio ui animation website design

Design concept for the interior design studio

 

Sharing information

 

This is the reason why people set up diverse blogs and websites aimed at sharing information: these can be online magazines and newspapers, thematic collections and bloggers’ reviews etc. It is usually not aimed at direct communication, only providing users with fresh and actual information.

 

online magazine design tubik studio

Design concept of online newspaper

 

web design UI concept tubik studio

Design concept of the online magazine devoted to travelling

 

tubik web design

Web design for the blog devoted to design news and trends

 

Education

 

One more reason to start the website is the ability and wish to provide some materials and/or communication with educative objectives. These can be different stuff, from personal teacher’s blogs to interactive encyclopedias or platforms for online courses.

 

tubik studio web ui design

Web design for online encyclopedia

 

Communication

 

The Internet presents great and easily available opportunities for communications, so communication can be one more good reason for creating a website, like blogs with direct discussions, forums, social networks for general or special themes etc.

 

sport social network design tubik

Design concept of a social network for sport fans

 

Self-expression and practice

 

Sometimes, people create the website with the aim of getting a platform for expressing their creativity and trying particular skills, like, for example, creative writing. Again, complexity and quality of these websites can be very different, still the basic reason behind them is self-expression and growth.

 

tubik studio design

Design concept of a personal blog devoted to architecture

 

Surely, this list is not totally full, it mentions only some of the globally popular reasons for creating websites. Stay tuned and don’t miss the new articles analyzing all the mentioned directions in closer detail.


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

Welcome to read UI/UX glossary on web design