Ad
Ad
Ad
Tag

Website Design Tips

Browsing

Some businesses invest in mobile-friendly web design for the sake of following the trend. The truth is, it shouldn’t be done that way. Mobile responsiveness isn’t just a fad that everyone should jump on, but a need that demands attention, especially in the digital space.

It was long ago when personal computers (PCs) are the only medium used for browsing the web and connecting with people online. Today, people carry PC-like technology (a.k.a. smartphones) with them practically all the time.

These facts imply that the future is mobile and that creating a mobile responsive website is a must. Not quite convinced about the significance of building a site for mobile devices? Carry on reading.

What Does Mobile-Friendly Mean?

Websites with a mobile-friendly design are easily viewed on smaller screens like smartphones and tablets. The web contents (i.e., images, texts, videos, etc.) adjust themselves to fit within the screen to deliver a satisfying user experience.

A non-mobile-friendly website, on the other hand, doesn’t adapt its layout and usability to the device. It requires zooming and scrolling to find and read information, not to mention that the text appears too small and difficult to read, and the images look pixelated and tend to load slowly.

Here’s how a web design should look like from a mobile perspective:

x, check, lorem ipsum dolor, mobile phone, smartphone, mobile-friendly website, hands, hands holding phone

On the left, the mobile browser retains the desktop version of the website. The one on the right matches the device width, making the content readable.

Why Make Your Website Mobile-Friendly?

1. Google Recognises Mobile Responsive Sites

For several years, Google has rolled out handy algorithm updates designed to improve the quality and relevance of Google’s search results. A relevant example of such an update is Mobilegeddon.

Mobilegeddon is the name for Google’s search ranking algorithm designed to boost mobile-friendly pages in Google’s mobile search results. Released in 2015, this algorithm remains a relevant ranking factor in present times.

This update was created to respond to consumer behaviour, which was trending in the direction of mobile. Google wanted searchers to easily find high-quality and relevant pages that show readable content without requiring horizontal scrolling.

If the search engine giant recognised the importance of mobile responsiveness, you should too. Your website may provide you with search engine optimisation (SEO) gains, so you should start making mobile-friendly web design a priority.

2. Smartphone Ownership is Rapidly Increasing

Mobile technology is taking over the world. According to GSMA Intelligence, around 5 billion people own and use mobile devices worldwide, which is 67.03% of the world’s population.

However, the growth in smartphone ownership to date vary across nations. The Pew Research Centre reported that countries with advanced economies have higher smartphone ownership than countries with emerging economies.

The survey also showed that younger people in the countries surveyed are more likely to have smartphones, access the Internet, and use social media. And, majority of the people who own a smartphone in advanced economies are under the age of 35. Not only does smartphone ownership is increasing, but mobile internet usage is also growing steadily. As of April 2021, 56% of all web traffic are coming from mobile phones. This figure had increased over ten-fold from April 2011, having only 5.21% of web traffic on mobile.

graph, social media notification, icon - 3D Illustration

The figures say it all—almost everyone in the world use mobile phones. People might be using their devices differently, but another truth lies therein—browsing the web would always be one of those reasons.

To ensure everyone who drops by at your website becomes a customer, make sure your site has a mobile-friendly web design. A website that looks great and functions well on mobile can encourage people to stay and entice them to make a purchase.

3. Mobile Responsiveness Enhances User Experience

User experience (UX) is a critical factor in all business industries. If a business doesn’t fulfil the prospect or customer’s needs and goals, it leads to one thing—lost sales.

In e-commerce, poor usability is the culprit behind cart abandonment (people don’t complete their purchase). Bad UX is basically like a box of burned chocolate cookies. No matter how people like the treats, they wouldn’t finish eating them because of the burned taste.

The same thing applies to the world of the web. People who aren’t satisfied with the experience they get while browsing your website are likely to tune away from the first few minutes of their visit.

Suppose your site has jumbled texts and unaligned images all over the place and requires users to scroll through endless pages to find the information they need. You’re not helping them choose. You’re putting obstacles between you and your prospects.

Don’t let non-mobile responsiveness steal fantastic business opportunities away. Invest in a mobile-friendly web design. After all, your website is a crucial platform that influences your credibility, consumer behaviour, and many other things.

Time to Make Your Site Mobile-Friendly

People use mobile devices to communicate with their friends online, check emails, and do online searches, among other things. These many uses of smartphones and tablets suggest the need for mobile responsive sites.

If you’re ready to make your site mobile-friendly, 2Stallions is the company to call. We create responsive, mobile-friendly designs focused on helping your users find information quickly and take actions.

Learn more about our website, app, and e-commerce design service here.

You, me, and billions of other people rely on the Internet as the first source of information. Despite the sheer number of people who go online every day, websites are still in a fierce competition for traffic. Website owners try to remain at the top by producing quality content, developing cut-edge marketing strategies, and of course, dishing out a stunning website.

Although content is still the king, no one wants to read anything on a poorly designed website. As business owners gunning for online presence, keep in mind that the overall visual appeal of a website also contributes to capturing a reader’s attention, and should not be taken lightly.

A website’s layout is crucial in making sure that your content is received well. As a website owner who wants to reach the top, you must take note of the flow of information, layout, graphics, and structure of your site. By doing so, you ease readers into the information on offer without overwhelming them, thereby keeping interested to continue reading.

Smart and efficient web design is more relevant now that the universal display or resolution no longer exists. Mobile phones and computers now come in a myriad of screen sizes, making it important to optimize your website to look good and function well on any device, i.e. to be responsive. Research shows that 57 percent of mobile users will close a website if it takes too long to load while Adobe claims that 8 in 10 consumers will stop viewing content if it isn’t displayed properly on their device. Evidently, there is power in effective website design and optimization for page speed.

Visual Hierarchy

Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.”

Jeffery Veen, The Art and Science of Web Design

Visual hierarchy, one of the most important principles behind good web design, is the difference between a site that strategically influences user flow and decisions and a site that just “looks nice.” It refers to the order in which the human eye perceives what it sees.

In basic terms, visual hierarchy describes which elements capture your user’s attention and draw their eyes most. But there’s no right way to build a concrete hierarchy, and competitive designers must have perfectly unique methods – or invent new ones – to stay on top of the game.

Visual presentation of a web interface is essential for:

  • Informing Users
  • Communicating Content Relationships
  • Creating Emotional Impact

The end goal of your UI design should be to answer the following questions :

  • What is this? (Usefulness)
  • How do I use it? (Usability)
  • Why should I care? (Desirability)

Let’s describe the most basic elements, the essential building blocks, necessary to support simple or complex hierarchies.

1. Scanning Patterns: The Predictability of The Human Eye

There are two predominant reading patterns for cultures who read left to right.

1. F-Pattern

Typically for text-heavy websites like blogs, the F-Pattern is prevalent amongst readers.

First scanning a vertical line down the left side of the text looking for keywords or points of interest in a paragraph’s initial sentences. When the reader finds something they like, they begin reading normally, forming horizontal lines. The end result is something that looks like the letters F or E. As shown, readers on CNN and NY Times both use the F-Pattern to read the content.

Jakob Nielsen of The Nielsen Norman Group conducted a readability study based on 232 users scanning thousands of websites and elaborates on the practical implications of the F-Pattern:

  • Users will rarely read every word of your text.
  • The first two paragraphs are the most important and should contain your hook
  • Start paragraphs, subheads, and bullet points with enticing keywords.

F-Pattern Scanning Pattern
Source : Understanding The F-Layout

You can see in the left image that the most important content can be seen in a few seconds, with more detailed content (and a Call-To-Action or CTA) presented immediately below for quick scanning. The pattern can be very helpful for sites that want to embed advertising or CTAs in a way that doesn’t overwhelm the content.

Just remember that content is always king, and the sidebar exists to get users involved on a deeper level.

As with all patterns, the F-Pattern is a guideline, rather than a template. It can begin to feel boring after the top rows of the “F.” As you’ll see below, Kickstarter adds in some widgets (laid out horizontally) to keep the design visually interesting beyond the first 1000 pixels.

Source: Understanding The F Layout

  1. Z-Pattern

Z-Pattern scanning occurs on pages that are not focused on the text. If you were to access a Z-Pattern website, tendency is that your eyes would wander horizontally over the top. It’s possible that your attention is drawn to the menu bar at first or simply because you’re used to reading from left-to-right. When you reach the end, your attention shifts down and left (again based on reading habit), and repeats a horizontal search on the lower part of the page.

Source: Understanding The Z Layout

The Z-Pattern is applicable to almost any web interface since it addresses the core website requirements such as hierarchy, branding, and Calls-To-Action. The Z-Pattern is perfect for interfaces where simplicity is a priority and the CTA is the main takeaway. Forcing a Z-pattern for a website with complex content may not work as well as the F-pattern, but a Z-pattern can help bring a sense of order to simpler layouts (and increase conversion rates). Here are a few best practices to keep in mind based on the image above:

  • Background: Separate the background to keep the user’s sight within your framework
  • Point #1: This is a prime location for your logo
  • Point #2: Adding a colorful secondary CTA can help guide users along the Z-pattern
  • Center of the page: A featured image slider in the center of the page will separate the top and bottom sections and guide the eyes along the Z path.
  • Point #3: Adding icons that start here and move along the bottom axis can guide the users to the final CTA at point #4.
  • Point #4: This is the finish line and an ideal place for your primary CTA.

Predicting where the user’s eye will go can be a huge advantage. Before arranging the elements on your page, prioritize the most over the least important ones. Once you know what you want your users to see, it’s just a simple matter of placing them in the pattern’s “hot spots” for the right interactions.

  1. Size

Bigger is more eye-catching, but it’s not always better. The simplest way to explain it is that your most important element should be the one that is standing out, but it’s when we get into the details that it becomes a little more complicated. The user exerts less effort to click bigger items. This holds especially true for calls-to-action, where you want to leave no question as to where the user should go. Of course, that’s not to say that it’s as simple as making your “DOWNLOAD NOW” call-to-action 10x larger for more conversions. Subtlety and harmony between elements is the key.

Source: Huge Inc.

All the principles of size are visible in this screenshot from Huge Inc. The first thing you notice is the biggest, the stylistic H that serves as their logo. Next is “Nike Making,” whose large typeface and bold style create immediate weight. Next is the line of text directly beneath it, written in a smaller font size so as not to steal attention from the key visuals. If your eyes are still interested enough to wander, they’ll eventually notice the tiny logo and hamburger menu in the corners, or the navigation bar to the right.

The hierarchy makes sense here. First, the large colorful H catches your eye. Soon afterward, you’ll seek context for the unorthodox visual, which is immediately accessible with the hyperlinked “Nike Making” headline and secondary sentence. Visual hierarchy lays out the user path, while size hierarchy simplifies interaction by making the entire chunk of copy clickable and in close proximity to its related visual.

Without even thinking about it, you end up clicking exactly where the designer wants you to go. It goes without saying that balance and moderation is key. The design should not

  • be overpowered with an overly large focal point or
  • compromise user usability with secondary content that ends up being too small.
  1. Color

We’re visually drawn to color, especially when it’s used strategically to highlight important information or imagery. A bright splash of a color like red or yellow, for example, is hard to miss — whether it’s on a traffic sign on the side of the road, or a flyer hanging in your local coffee shop. Clever use of color can be one of the most visually interesting ways to differentiate elements on a page and draw attention where you want it. Your brain’s obsession with contrast will cause your eyes to focus on objects that stand out due simply to their difference in color in relation to the surrounding objects. Consider the following example:

Source: Fitbit

Fitbit’s use of color in their Z-pattern interface above is especially clever. The bright use of magenta immediately places the calls to action near the top of the visual hierarchy, but also matches the color of the “Get Active” button — subconsciously signaling that the two concepts are related. Similar shades of blue are also used in the fitness goals and product sections, which cleverly creates an association between the two (and draws clicks to the most valuable parts of the interface).

  1. Layout

One of the most straightforward ways to control your website’s visual hierarchy is through its interface. By placing a focus element front and center, you can then follow up the visual hierarchy with the use of rows and columns for a more organized and structured layout. This can help keep the chaos at bay and also leaves some space at the end for CTAs or other chosen content. It can be a tedious and fiddly balance, but crucial if you want to avoid overcrowding your website with too many elements. The visual hierarchy can flatten and very little will stand out on the design.

Source: Adoratorio

In web design, these are, amongst others, the corners and border of the screen. As “throwing” the cursor to sides requires less mouse control than a fixed point in the middle. While you’ll probably focus primarily on the center of the screen (given its size and contrasting black lines), the stagnant clickable links remain easily accessible in the corner and at the bottom. Scrolling up and down changes what’s displayed in the middle. However, the site logo, hamburger menu, contact information, and social media links stay firmly in their prime locations.

Of course, your layout certainly affects the visual hierarchy, not to mention usability. The Gestalt principles (described below) dictate that objects in a line create momentum to propel eyesight forward, even dominating the effects of color. Rows and columns, then, aside from supporting an organized structure to keep the chaos at bay, also create some prime real estate when they end – perfect for CTAs or other preferred content.

Source: Huncwot

As you can see, Huncwot keeps the options for its homepage organized in a straight horizontal line (with an animation behind whichever selection you’re hovering over). It’s a tricky balance, but mandatory for every single website. Otherwise, if you crowd your website with too many interface elements, your visual hierarchy flattens, and nothing stands out for the user.

  1. Spacing

One of the most important yet often ignored design principles is the use of White or blank space and spacing. Failing to allow some amount of blank space can leave your design looking overcrowded and confusing, ultimately drowning viewers with too much information. White space is your number one go-to for separating and organizing the elements in your design. No one wants to spend time making sense of a design. What you want is a site that is easy on the eyes, orderly, and well balanced. Always plan for unused space. It’s essential for things like:

  • Giving the viewer’s eyes a place to rest and a path to travel through the design
  • Separating your layout into sections (the flip side of this is proximity – reducing space to place related items close together – also an aspect of good spacing)
  • Isolating focal points

David Salgado and Mariana Perfeito’s editorial design does both of the above, leaving plenty of white space between and around each section of the layout, while grouping related items together. The result is a clean and balanced design.

  1. Fonts

When typesetting, there are other aspects to take into consideration other than just Typographic hierarchy. Different aspects of the fonts can really make or break the design such as the category used, decorative, script, sans-serif, serif or script or even the use of uppercase, lowercase, bold or italic, width of the strokes, etc.

Notice how typeface affects the hierarchy order of the words in web design below for The Tea Factory. “The perfect teas to keep you warm” is the focal point, but differences in type weight and italicization, in addition to word placement, produce a more dynamic, less linear, reading experience. “See our selection,” the call to action, is more strongly emphasized than the text above it due to sizing and spacing.

Source: Tea Factory

  1. Style & Texture

Another way of drawing attention is to give content ample room to breathe. A site that looks crowded will render your visitors lost and later asking themselves “what am I supposed to do here?” Ultimately, they click away, absorbing no information about your brand at all. If there is substantial negative space left around a button, or the lines in a text block are widely tracked, these elements will be more readily visible to readers. Not everyone will know where to click next, as a website owner, it is your job to guide them to the behavior you desire.

As you see in the image below (part of DrawtoClick‘s website), spacing can be an elegant alternative or addition to the use of size. Here, the selling point, “Notre agence vous accompagne …”, is in a very small font, but it is surrounded by an excess of white space that signals its importance. Below, the phrases “Le Compendre,” “Le Réaliser” and “Le Partager” receive extra emphasis by being boxed off from surrounding space.

Source: Draw to Click

When people talk about “texture” with respect to visual hierarchy, they are not referring to pictorial texture effects. Rather, this kind of “texture” refers to the overall arrangement or pattern of space, text and other detail on a page. This example by Bright Pink illustrates the concept nicely:

In the first image, the word “Sports” is higher in the hierarchy than “badminton” due to being higher, bigger and bolder. In the second image, the two words are about equivalent. Thanks to a black rectangle that highlights “badminton” and sets it into its own space.

In the third image, a background scribble interrupts the space of “Sports” but not “badminton.” Consequently results in a reversal where “badminton” is highest in the hierarchy. Such a progression is difficult to predict, so designers often chalk it up to a holistic sense of “texture.”

Source: Posters “Bright Pink” via Smashing Magazine

  1. Composition

Using some of the techniques in the article can help guide visitors to your website through your design and layout. Think of it as a first impression. At first glance, does your website leave a pleasant impression? Or will it scare visitors away because elements are all over the place?

Overall, most designs will greatly benefit from putting in place an overall structure, more commonly known as the composition, which is made up of Implied Movement:

  • The Rule of Thirds

Following the rule of thirds is one way of creating a dynamic composition. This is where your focal point isn’t predictably placed at the center.

Instead, this rule divides a layout into a grid (three equally spaced horizontal lines and three vertical lines). The focal point is placed either on one of the lines, or ideally, on one of the four points where the lines intersect.

Source: Cover Design Studio

  • The Rule of Odds

The rule of odds often involves threes as well. The idea behind this one is that an odd number of objects (perhaps the focal point surrounded by two other items — or four, as below) is always more interesting and pleasing to the eye than an even number.

Source: Charlotte Cheetham (many stuff)

Failed Hierarchy  – Brandon Jones (Web Designer Speaker, Author, Former editor for Tuts+)

“Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters; it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.”

As suggested in the last section, it’s important to note that hierarchy can be used for both good and evil. Think of all the annoying Flash advertisements, popup windows, glitter banners, etc. the web has been plagued with for years! While these ads succeed in grabbing attention, they ultimately fail the site owner. They also fail the viewer by breaking the visual hierarchy within a site.

Similarly, if a designer builds a visual hierarchy with certain key pieces of information nearly impossible to find, the designer will have failed at his task. Brandon Jones put it best when he states that good visual hierarchy isn’t about wild and crazy graphics or the newest Photoshop filters; it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.

REQUEST A QUOTE

We seek to create long-term relationships built on results. Tell us about your business
goals and we will contact you