Kinds of Visual Dividers

Talking about dividers, we can analyze them in two aspects: their appearance and their functions. Starting with the visual part, there are five basic and broadly used methods of dividing content in user interfaces:

• lines
• color
• negative space
• shadows/volume
• images.

Lines

Lines have belonged to the top methods of separating the pieces of content since time immemorial, both in print production and in digital interfaces. They are recognized easily in this role, so users won’t need to think twice.

On the other hand, this type seems to be super simple and far from original. So, quite often, designers strive to find other ways of content separation. What’s more, it is recommended to use lines only if the content cannot be effectively divided in another way. Too many lines can overload the screen with visual noise and create unnecessary visual tension.

The mobile version of the Nonconventional Show website uses lines to divide different sections in the menu.

The product page for a website devoted to zero-waste living uses horizontal lines as visual dividers to clearly organize different information about the item.

The webpage of the scientific platform uses horizontal lines to separate different content blocks and make their structure easily scanned.

The ecommerce website of a tea brand uses different levels of visual separation of the content, from the simple horizontal line to separate the pricing and CTA element to a kind of table with an irregular grid look for the information about the item, a regular table look for the items in the website header and color contrast to separate visual content from text content.

Negative Space

Negative space (aka white space) means empty space on the screen around and often inside the elements. Yet, empty doesn’t mean passive or wasted: as well as any other element of the screen, it works supporting a positive user experience. Negative space is one of the most popular kinds of visual dividers, especially in interfaces built on the idea of minimalism and simplicity. Spiced with the knowledge of Gestal principles of visual perception, for example, proximity and similarity principles, negative space turns into an effective and elegant visual divider that also lets the interface breathe and avoid clutter.

Education app design demonstrates the elegant approach to unit arrangement via a well-balanced negative space.

The travel planner app separates the items in the list without any additional visual elements, just with white space.

The Health Blog list of articles is based on typographic hierarchy and negative space to make them look like a clear set of items without stealing the air from the layout.

Color Contrast

Another effective type of visual divider is color contrast. Color choice and combinations in UI design have great psychological potential: they are able to strengthen the message and content of the website, creating the appropriate mood. Contrast is one of the key factors influencing the scannability and visual hierarchy of the page or screen. With all that, color contrast can effectively separate different options, items, or interactive zones, which means working as a visual divider. That is the reason why split screens have been so trendy in recent years. And that may explain the popular approach of organizing landing pages and single-page websites along the content blocks presented on contrasting color backgrounds.

The landing page concept for Momatu divides content with different color backgrounds.

The Nonconventional Show website design employs bold color contrast to arrange the content more engagingly and dynamically.

The mobile menu concept is based on color contrast to make the items clearly distinguished.

Even in pastel elements like this one, the power of color contrast is clear: it helps to divide the page on the hero section with the CTA and the active section of the menu. Also, pay attention to the vertical lines used as visual dividers for menu items: together with slightly seen images, here they also work as directional cues and help to avoid the illusion of completeness on the page.

In the website design for GNO blankets, the color contrast helps to divide the long webpage into digestible and elegant blocks of content.

Shadows and Volume

Shadows and volume, which are usually reached with the effect of visual elevation of a part of the content, may also work effectively as dividers. They create a feeling of depth and separate the page into several layers that often look natural and harmonic to the human eye. On the other hand, it looks less obvious and noticeable than lines, so this approach may be helpful in achieving balance and legibility of the particular items without too much visual noise or distraction.

Music Learning application uses the effect of volume to make items look clearly divided in a list of tracks.

The catalog screen presenting the items in stock uses drop shadows this way giving the layout more depth and clearly separating the cards from each other.

The mobile app for buying customized bouquets also divides the positions in the catalog with a card standing out from the background. This way the content looks clear and interactive in the interface that looks all light and airy.

Images

Images of all kinds present one more effective visual divider. In this role, they are especially popular in the interfaces with lots of text content, for example, blogs, online media, and text-based landing pages. Photos, illustrations, 3D graphics, as well as animated images, help to balance the text content, increase scannability and readability levels, effectively divide the visual blocks, as well as add fun and emotional appeal.

The university website uses images and videos not only to set the atmosphere but also to divide different blocks of content.

The landing page for the cryptocurrency report uses catchy blocks of 3D graphics with an animated Learn More call-to-action. This way, the theme blocks are also clearly separated.

The menu screen for the restaurant app uses images as a crucial element in dividing the options.

Functional Types

The functional types of visual dividers depend on the hierarchy levels they work at.

Full bleed dividers

Full bleed dividers are the ones that separate the sections and span the whole length of the screen layout.

Astrology website uses full-bleed dividers to separate blocks of content.

The gallery app uses horizontal lines as dividers in the catalog of artists.

The Perfect Recipe app uses full-bleed dividers to separate the recipes.

The finance app uses slight, barely seen full-bleed dividers to separate the items in the list of expenses.

The cinema app uses full-bleed dividers on the check-out screen.

Inset dividers

Inset dividers separate the items of related content, anchored by elements that align with the app bar title or adjust to the specific kind of text content on the page.

The website of the construction features the part with specs that uses horizontal lines as inset dividers.

The Spa Space website uses lines to organize the options on the menu page elegantly.

Dividers with subheaders

In some cases, you can pair dividers with subheaders to identify a block of grouped content. In this case, the divider should be placed above the subheader to make the subheader’s connection to content more obvious.

Middle dividers

These are usually dividers placed somewhere in the middle of a layout, for example, to separate related content, such as prices on a receipt.

The product page for the ecommerce website selling herbs features the middle divider to clearly separate the check-out interactive zone from the text content describing the product.

Points to consider

Choosing the type of visual divider for the layout you design, you’d rather consider two essential factors.

Subtlety: dividers shouldn’t yell for users’ attention and shouldn’t distract users from the content itself. The goal behind the divider is to support and make the layout clean, not to catch attention. So, make them noticeable but not annoying.

Moderate Frequency: as was mentioned above, too many visual dividers, especially if they present the additional element of the layout like lines do, can create visual noise and make the user interface tiring for users. So, thinking over the type, think twice or seven times more. Prefer negative space to lines where it’s possible; don’t overplay with colors; strive for harmony and consistency.

As the examples above show, designers tend to find an effective combination of visual dividers that would effectively organize the content on the webpage or mobile screen.

Useful Articles

Here’s the set of articles on more aspects and best practices of user experience design.

Directional Cues in User Interfaces

How to Make User Interface Readable

Basic Types of Buttons in User Interfaces

The Anatomy of a Web Page: Basic Elements

3C of Interface Design: Color, Contrast, Content

Negative Space in Design: Practices and Tips

How to Make Web Interface Scannable

How to Use Hero Images in Web Design

Light or Dark UI? Tips to Choose a Proper Color Scheme

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение How to Use Visual Dividers in User Interfaces появились сначала на Design4Users.

Factors Influencing the Choice of Color Scheme

Be sure, there is no one particular choice which would work for all the aims. The solution heavily depends on numerous factors covering not only the user’s side but also business goals, market conditions, and current design trends. Let’s review the essential factors which have to be considered regarding the issue.

Readability and legibility

These terms are both directly connected to the perception of the content presented with text. Readability defines how easily people can read words, phrases, and blocks of copy. Legibility measures how quickly and intuitively users can distinguish the letters in a particular typeface.

These characteristics should be carefully considered, especially for the interfaces filled with a lot of text. Among many other factors, the color scheme chosen for the interface plays a crucial role in the effective process of text perception. For example, as well as with physical objects perceived on different backgrounds, black copy shown on white or light background seems to be larger than the white copy on a dark background. Poor readability results in poor user experience: users aren’t able to scan the data, even more – even if the data is relevant but not readable, users feel the inexplicable tense struggling with the text or may even miss the critical information.

Does it mean that interfaces with a light background are more readable? Not always. One of the famous gurus of user experience design Jacob Nielsen mentioned: «Use colors with high contrast between the text and the background. Optimal legibility requires black text on a white background (so-called positive text). White text on a black background (negative text) is almost as good. Although the contrast ratio is the same as for positive text, the inverted color scheme throws people off a little and slows their reading slightly. Legibility suffers much more in color schemes that make the text any lighter than pure black, especially if the background is made any darker than pure white.» So, any color scheme may be readable enough if the designer studies the peculiarities of copy perception on different backgrounds and works carefully on the font choice.

Museu landing page

Hair beauty website design

However, some scientific studies dating back to the 1980s show that big bulks of text light background appear to be a more effective choice for the majority of users. Studying how advertising carriers worked, D. Bauer and C.R.Cavonius shared their explorations in the paper “Improving the legibility of visual display units through contrast reversal” (1980). In particular, they found that participants were 26% more accurate in reading text when it was featured with dark characters on a light background.

Why may that be so? Jason Harrison from Sensory Perception and Interaction Research Group (University of British Columbia) explains this phenomenon the following way. People with astigmatism (which according to various stats present about 50% of the population) feel it harder to perceive white text on black than black text on white. Part of this has to do with light levels.  With a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens. With a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye. So, based on this, if the interface presents a lot of copy and suggests a long-reading experience, a light background may feel more user-friendly.

Accessibility

Accessibility is mostly defined as the ability of the web or mobile interface to reach as many people as possible and provide its functionality regardless of any discriminations. So, the decision “to use or not to use” has to be mostly grounded in users’ needs and preferences, not on their physical abilities. The color scheme is mentioned among the top factors affecting this aspect. Selecting the palette and color combinations, a designer needs to take into account the users of different ages, special needs, or disabilities which can also determine the choice of color for the background and layout elements. User research becomes a great help providing UX designers with data that helps to get closer to the target audience.

Landing page for a babysitting service uses the light background for all the parts with text content for a high level of readability

Clarity

Clarity defines the ability to see and distinguish all the core details on the screen or page. First of all, it deals with simplicity and intuitiveness of navigation: being able to scan the layout and find zones of information and elements of interaction, users don’t need to put much effort into getting what they need. If this aspect is not tested properly, it may lead to weak visual hierarchy and turn the screen into a complete mess. Contrast plays a big role here and color scheme becomes the foundation for it. To check, if the interface is clear and contrast enough, don’t forget about a good old trick of “blur effect” when you look at the screen or page in the blurred mode and check if everything vital is easily reached and noticeable.

Landing page for the digital agency

Responsiveness

Responsiveness of the interface means that users get it usable and functional whatever it the device they use it on. What looks stylish and appealing in Sketch in the high-res professional monitor may transform into a dirty stain on the small low-res screen. Therefore, some color schemes looking nice at the design stage may lose their beauty in a variety of everyday conditions they are applied in. As color scheme directly influences color, shape, and copy perceptions, it should be tested on diverse devices before making the final decision.

Responsive website design for the forest camping service

Environment

Web and mobile interfaces are used in environments that may be pre-supposed as typical if the target audience is researched carefully. For instance, concerning constant use under natural light, a dark background can literally create the effect of reflection, especially on glossy screens typical for tablets and smartphones. On the contrary, in conditions of the badly-lit environment, a dark background can take the light away from the screen which has a bad influence on navigation and readability. So, the issue of color combinations, contrast and shades draw big attention here.

Slumber mobile app 

Checklist for color scheme selection

With the factors mentioned above, we offer here a short checklist of basic steps to follow while selecting a general color scheme for web or mobile interface.

1. Define the purpose of the interface. Having determined the core points of the interface utility and problem-solving capacity, you make the choice of the color scheme more reasoned. If the UI is text-driven (a blog, news platform, e-reader, etc.), light background tends to be an effective choice. Light makes the screen airy and spacious and it will be easier to concentrate purely on the copy. On the other hand, if the interface is visually driven and moves around images rather than text, a color scheme with a dark or bright background may be a good solution as the colors of the images feel deeper and the general layout gets stylish or even luxury look.

2. Analyze your target audience. Definition and analysis of the target audience are the primary things a designer should do. Knowing who is your potential user and what they will want to get from the website or app sets the solid basis for a usable, useful and attractive interface. Middle-aged and older people tend to prefer interfaces with the light color scheme as they find them more intuitive and navigable. Younger people often find well-performed interfaces with a dark background more original and stylish so that can be the way to involve target users. Teenagers and children are attracted to interfaces using bright backgrounds and funny details. The choice of color obviously depends on the nature of the interface functionality and content. But the preferences of the target audience are always a good clue to user-centered decisions.

Nature Encyclopedia app based on dark background and contrast yellow and white for images and copy content

3. Research the competition. Another aspect to keep in mind is that your product isn’t going to appear one in a blue ocean. Vice versa, it will fight for user’s attention in conditions of great and dynamic competition. The choice of the color scheme also becomes the way to make an app or website outstand and lead to such a precious first wish of interaction from the user’s side. Time spent on exploration of the existing products in the segment saves time and effort otherwise wasted on the redesign of ineffective solutions.

4. Test, test, test. The points described above are convincing about a key thing to do: as the color belongs to the factors directly affecting usability and attractiveness of the interface, every design solution should be appropriately tested, in different resolutions, on various screens, and under diverse conditions. Testing reveals strong and weak sides of the color scheme before the product comes on the market, gets discussed and loses the chance of stunning first impression if the design solution is inefficient.

Compromise Solutions

Not wishing to stick to the strict color schemes, user interface designers sometimes find compromise solutions, like the following ones.

Dark interface, white tabs for copy

As we mentioned in the review of UX design trends, this trend got especially popular for interfaces based on the dark background scheme. It features one more approach to proper readability which is often the issue of debates: applying boxes or spaces with the light background for core data blocks, designers solve this problem and add elegant contrast to the screen or page. One of the cases, when it was applied efficiently, is Watering Tracker app designed by the Tubik team.

Giving the choice of color scheme to the user

Another approach is giving users a choice of modes. That is what we did for Upper, a to-do list app that offers the user a selection of color schemes. On the one hand, it makes the product really friendly to users and makes a choice more personalized according to not only usability issues but also aesthetic preferences. On the other hand, it takes additional work hours for designers and developers to work out all the schemes.

Useful Reading

Dark Side of UI: When Dark Is Good for Users
The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention
Visual Perception: An Introduction
Art and Visual Perception: A Psychology of the Creative Eye
Colour Choices on Web Pages: Contrast vs Readability
The Dos and Don’ts of Dark Web Design
Why light text on a dark background is a bad idea
When to Use White Text on a Dark Background
Design Glossary: Basic Color Terminology
How Color Influences User Behavior

Originally published in Tubik Blog

Сообщение UI Design: How to Choose Between Light and Dark Theme появились сначала на Design4Users.

One of our previous articles has already given the insights into the definition, types of content such a page usually includes and basic design strategies increasing home page usability. Continuing the topic, today we are adding more recommendations organized around three essential aspects: information, interaction, and appearance.

Home page designed for Health Blog

Information

To use or not to use? That is the question. In the vast majority of cases, home page is the point of the user’s decision. In the early 2000s guru of usability, Jacob Nielsen mentioned in his article: “Your homepage is often your first — and possibly your last — chance to attract and retain each customer, rather like the front page of a newspaper.” With all the progress the World Wide Web has witnessed, this position doesn’t change: home page often defines if a user goes further around the website. And it is done not only by beauty and style but first of all by information which is looked for by visitors to the resource. Making it accessible, noticeable and clear, designers grow the chances of positive user experience.

In general, home page can include the following data:

• the nature of the website: the page has to instantly inform users if it’s a company website, blog, e-commerce website, social network, educational platform or anything else
• brand or company identity elements: home page requires a recognizable visual presentation distinguishing the website from its competitors. If there is a product, company or brand behind it, webpage design should consistently reflect its identity with logo, slogan, corporate colors or anything else of that kind. In other cases, the website itself should be seen as a brand and apply strategies of identity design for better brand awareness.
• benefits of the website: it should quickly inform users why the website can be helpful or interesting for them
• search: many users come to the websites with clear goals, so functionality to search right from the homepage will make interaction highly productive
• links to the core interaction zones
• contact data and links to social networks
• signs of trust: testimonials, reviews, big numbers of presence in social networks, etc.

The solution which of the mentioned points are going to be included and how they are going to be spread on the layout should depend on the goals of the website and the research of the target audience. Let’s check some tips effective in this aspect.

Fill the header with core navigation

As we mentioned in the article about web header design, it is the top part of the webpage, which people see before scrolling the page in the first seconds of introduction to the website. Headers can include a variety of meaningful layout elements, for example:

• basic elements of brand identity: logo, slogan, etc.
• tagline setting the theme of the website
• links to the core categories of website content
• links to the most important social networks
• basic contact information (telephone number, e-mail, etc.)
• a language switch in case of a multilingual interface
• search field or icon
• subscription field
• links to interaction with the product such as trial version, downloading from the AppStore, etc.

Obviously, it’s impossible to put all the list into one header. Moreover, it’s not a good idea to put everything because the header overloaded with diverse information will distract users’ attention. As Aarron Walter said in his book, “If everything yells for your viewer’s attention, nothing is heard”. That is why the choice which information goes to the header and what it looks like arises on the solid ground of communication between a designer, a stakeholder, and a marketing specialist. The header is the top zone of early interaction: eye-tracking studies show that the web page is mostly scanned starting from it. So decide, which elements are primary to achieve website goals and use the limited space of header for them. For example, on a news website or a big e-commerce platform search field is crucial for positive UX while on a small company website it may be not needed at all.

Home page design for the scientific web platform

Apply informative tagline

Don’t think the users are going to wander around the website trying to set why it’s useful for them. Being surrounded by the thousands of websites, they may get away at the first seconds if they don’t see a clear reason to stay. So, give it to them – it’s the time for a tagline. In marketing terms, it is the name of a short and catchy phrase that summarizes the benefits or gives the description of the website. Including the keywords setting the proper theme and taking the place on the first level of visual hierarchy for the page, the tagline will quickly inform users why the website is worth their attention.

Home page for the booking service website

Enable users to contact duty holders

Home page is usually the place where people expect to find the contact info any time they need it. The most popular placement for it is a footer, the bottom part of the page. However, if any kind of contact data is core for conversion, it’s logical to put in the pre-scroll area or even a header. For example, if the website presents the delivery service or online shop, users may want to call more frequently and this ability will have a direct impact on conversion rate. Meanwhile, for an entertainment or news resource, it may be not that crucial so it’s placed in zones of less active interaction. However, in any case, the contact data should be available from home. Among other reasons, it is one of the factors influencing the level of trust to the website.

Contacts can be presented in various formats. They can reveal the data such as phone number and location, emails, links to messengers, contact forms, and an instant chat window. Making the phone numbers clickable is supportive as many users now browse from their smartphones and may want to call right from there. The address can be also clickable opening the screenshot or map showing how to find the location. The solutions have to be based on thoughtful user research setting target audience’s expectations, level of tech literacy and the most convenient ways of contact for them. For instance, if your target audience is teenagers, just giving the phone number may be not effective as they really stick to messengers and social networks. At the same time, if your users are elderly people, social networks may not work in comparison to a phone number.

Make the call-to-action element instantly visible

Unlike the landing pages, focused on narrow and concise goals, home page contents are quite diverse. That’s why it’s important for a UX designer to care how users will see what they really need to see in all that mass of data. No doubt, it cannot happen that all, let’s say, fifty available links on the home page are equally important. So, to make the page usable, all the interactive elements in the layout should be prioritized. Visually, it can be done via the rules of the visual hierarchy so that users could see the key things first. And among them, call-to-action elements should be noticed instantly. Otherwise, there will be loss in conversion not because users didn’t want to do the action but because they didn’t find how to do it.

Home page design for a food delivery service

Interaction

The next aspect to consider is interaction – the way how users perceive, process and interact with the information they find on the home page as well as the website in general. The next set of tips is all about that.

Check scannability and mind eye-tracking models

It’s not a secret that users first scan pages and only then make a decision if they want to get dip into details. Interface designers are highly recommended to study eye-tracking models which are now described in numerous publications, with the most prominent contribution by Nielsen Norman Blog sharing the results of actual experiments in that sphere for a couple of decades. Among the following common models, you’ll find Z-Pattern, Zig-Zag pattern and F-Pattern. Let’s check what are the schemes for them.

Z-Pattern is quite typical for the web pages with the uniform presentation of information and weak visual hierarchy.

Zig-zag pattern is typical for pages with visually divided content blocks.

F-pattern is natural for pages with the massive presence of copy content.

Scannability of web pages is enhanced with a visual hierarchy that enables designers to show the content in terms of its priority and navigates the user from the core zones to the secondary ones. Scannability is one of the parameters to be carefully tested all the time as it has a great impact on the usability of the page and its problem-solving potential.

Remember that patterns are user’s friends

Every creative person feels the urge to apply the original and unique solutions and think out-of-the-box all the time. However, make not to go too far on that way. Remember that the website is made not for creative contests or gallery of fame but for real users. As we mentioned in the post about social networks design, the power of habit in terms of user experience can be stronger than the wish of revolution. Surely, the dose of wow-effect is needed, but not so much to knock down the user. On the home page, too much of design revolution might confuse and scare: if the first page is so hard to understand, a user thinks, what’s going to be next? Study the habits of interaction and typical products for that particular target audience to make their habits their power. Strive for the balance between innovation and traditions.

Home page for the bookshop website 

Make the search field easily accessible

As we said above, search means much, especially for the users coming to the resource with a clear understanding of what they want. A/B testing can support the analysis of its most productive placement on the page layout. It can be a small search field, an icon in the header, a long horizontal field across the page as we have here on Design4Users Blog. The main thing is to make it noticeable and clear so that users didn’t waste their time.

Use different menus and interaction zones

As home pages can provide a variety of links, tabs, fields, and buttons, they should be grouped in different menus and zones instead of being given as the list of links. For example, a double menu in the header can present two layers of navigation. We have shown the example of such a trick in the case study for a bakery website design. The website uses a sticky header which has 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 an 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 quick interaction right from home page.

Home page of the bakery website

Make the home page accessible from any point of the website

Home is usually the foundation of the website structure. So, users need to have a chance to get back home from any page they are on. Check it when all the pages are designed not to miss this obvious still vital interaction.

Don’t direct all the outer traffic to the home page

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

However, for complex websites and platforms, especially if they satisfy the multiple needs of a broad target audience, this approach can be the step in killing profitability and reducing conversion rates. The user can get scared, distracted or even annoyed with the amount of information they have to get through to find what they need, especially if focused on a particular narrow goal. Using landing pages in the case when you need to concentrate the user’s attention on something specific can be an efficient way of solving this problem. A landing page is focused on one item, to make it quickly found and reduce delays when the target user seeks for specific operations, services or items. This is the issue of especially high importance in the case of e-commerce websites when unwise design solutions bring to poor user experience and financial losses.

Landing page design for a shopping delivery service

Appearance

The third set of tips is concentrated on the page looks. No doubt, the recommendations are applicable for any kind of webpage, still, on the home page, they tend to be more influential.

Be stringent in color choice

Color is the power which can either strengthen or ruin other design decisions. Choosing the color palette, remember that colors influence user perception. Studying color psychology is helpful to make choices that transfer the right message. Attention to traditional color theory will help to find the color combinations that will look elegant and harmonic. One more popular issue is choosing between light or dark background: the solution is mostly based on the type of content website presents. Text-based websites usually use light and airy interfaces while visual-based ones can apply a dark background to make the images look deeper and more stylish.

Apply recognizable visual prompts and associations

Being full of data, home pages usually include a variety of icons and illustrations. Choosing them, always test their recognizability and check if they build right associations. If there is the risk of double meaning or culture differences of the target audience, supporting the icons or illustrations with a short copy might be helpful.

Home page for the architecture magazine website

Mind the typography issues and readability

Choice of fonts and their combination determine not only style but also the readability of the home page. Even more, fonts, as well as colors, are also powerful in forming the mood of the page, from entertaining to business-like. So take your time to test various combinations and find the one which corresponds to the nature of the website as well as other design elements.

Strengthen the page with a prominent visual

Most users are visually driven and perceive messages given in images faster than words. That is why applying custom theme illustrations, high-quality photos, or hero banners is a profitable step for a home page. The image of that kind will work as a quick hook catching users’ attention and transferring the necessary idea. However, overloading a home page with images will make none of them effective.

Home page for a visual media creator using prominent 3D graphics as a hero image

Think about motion and video

Another way to support interesting experience on the home page is applying videos and animations. On the one hand, motion breathes life into the page, makes it more dynamic and lively, always draws attention. On the other hand, it can increase the loading time. Moreover, too much animation annoys users. So, motion should be added in an unobtrusive way and thoroughly check in terms of its effect on page functionality.

Home page of a designer portfolio website offers the user to watch the showreel of his works

Test the loading speed

Whatever brilliant, stylish and breathtaking the page is designed, whatever cool and intuitive is navigation and information architecture – all those things won’t work if users have to wait while it’s loading. For the home page filled with various data, too long time of loading means losing the part of the target audience. So, check the speed, optimize the images, make sure video and animation loads up correctly. Caring about this aspect, you respect your users’ time and effort and lay the ground for positive user experience.

Interactive home page for the website of the company that designs and produces sustainable homes.

Obviously, not all the list of mentioned tips is actual for every single project: approaches can differ as well as the audience and goals of the created websites. Yet, it may become a helpful checklist for web designers striving for home page usability.

Useful Articles

Small Items, Big Impact: Types and Functions of UI Icons
Best Practices for Website Header Design
Best Practices on Effective Visual Hierarchy
Color Matters. 6 Tips on Choosing UI Colors
How to Make Interface Effort-Saving
Typography Tips For Designers: Make Fonts Speak

Originally written for Tubik Blog

Сообщение Feel at Home. Tips on Effective Home Page Design появились сначала на Design4Users.

You can’t build a great building on a weak foundation. You must have a solid foundation if you’re going to have a strong superstructure. Gordon B. Hinckley

Effective design always requires a stable foundation. Well-thought information architecture, as well as prudent interaction and navigation systems, are the base which forms positive user experience. It is recommended to plan the details from the very beginning of the creative process.

There are certain techniques which allow creating visual representations of layouts and sharing the ideas with everyone involved in a project. Two of these techniques called wireframing and prototyping have become a significant part of design process.

However, designers sometimes confuse a wireframe and prototype or talk about them as synonyms. Today’s D4U post discovers the differences between wireframing and prototyping and shows which objectives they help to accomplish.

What’s a wireframe?

A wireframe is a simple visual scheme which represents a layout of a screen or page of a digital product such as a website or application. They are often compared to architectural blueprints since a wireframe is usually a monochromatic illustration which shows the structure of a screen. Also, designers can use bright marks or spots to outline specific areas or design elements. There are three types of wireframes: low-fidelity, medium-fidelity, and high-fidelity.

Low-fidelity wireframes are black and white illustrations which aim at showing a “big picture” of a layout and often created manually with pencils or markers. UI elements are represented as boxes and lines followed by short captions. This type of wireframes may seem a bit abstract still it shows the basic structure of a user interface.

Medium-fidelity wireframes are similar to the previous type since they are also created in a monochrome palette. They are oriented to demonstrate more detailed and realistic layouts the reason why medium-fidelity wireframes can be created both manually or via digital tools. Another difference is that this type allows for distinguishing copy elements so that the typographic hierarchy could be set. In addition, designers provide more detailed comments on each element.

Example of UX wireframe for HealthCare App

High-fidelity wireframes (mockups) are created via digital tools. They are built in color and present the screens in the view close to the final visual performance which makes it differ from the previous. Designers pay deep attention to typography and UI elements presentation. This type can be called UI wireframes or mockups.

UI Mockups for PassFold

What’s a prototype?

A prototype is a sample model of a digital product. It is created for testing the efficiency of the solutions and decisions made about design for websites and applications. Designers think out interaction and navigation systems and try to make them as much similar to the final result as it is possible. Such an approach gives an opportunity to reduce possible problems before the development team starts their work. Making changes is much more time-consuming and expensive at the stage of development that’s why it’s vital to check the usability and navigation in advance.

Prototypes should not be seen as the analog of the final product. They are effective tools helping to improve UX design at the very first stages of the creative process. However, prototyping all the details on the final stage of UI in most cases is not so reasonable. It can be too time-consuming and in this perspective, it would be better to spend the same time coding a demo-version. Prototyping seems much more efficient and useful as the step between UX design and UI design.

Prototyping with InVision App

Wireframing vs Prototyping

High-fidelity wireframes and prototypes have been mistaken for a long time since they are quite similar in visual presentation. Nevertheless, they are different techniques which are applied at the different stages of a creative process. To find out the differences let’s see which objectives they aim at.
Wireframing objectives:

• Creating a fast visual representation of a layout.
• Visualizing an idea and share it with clients.
• Building effective information architecture of a product.
• Setting visual and typographic hierarchy.
• Making a pre-plan of a user journey.
• Thinking through UI elements placement.

Prototyping objectives:

• Giving a detailed view of the UI elements of a future product.
• Thinking through navigation and interaction systems.
• Testing design solutions.
• Reducing the possibility of UX problems and difficulty in navigation.
• Experimenting with the style and alignment of UI elements.
• Showing clients a clickable version of an interface.

As we can see wireframing and prototyping have different objectives. Wireframes are focused mostly on the structure of the page while prototypes are created to give a more detailed look at the UI elements, their style, and alignment. Moreover, prototypes have a great advantage as they give the opportunity to test the interactions similar to the final product.

We can’t say that one technique is better than the other. Even more, they can work better if they are applied together. Prototypes can be created on the basis of the static wireframes, making them clickable and interactive.

Everyone is free to determine for themselves which of these techniques to select or even maybe apply them in a combination. Everything lays in the situation and circumstances. Choose wisely!

Useful design articles

UX Design Glossary: Navigation Elements

UX Design Glossary: Interface Navigation Elements. Set 2

How Human Memory Works: Insights for UX Designers

Types of Affordances in User Interfaces

Сообщение Wireframing VS Prototyping: Specify UX Terminology появились сначала на Design4Users.