Imagine you’re strolling on the streets and happen to notice these advertisements:

Image Source

There are many hoardings and banners and obviously, one out of these will catch your attention first. Probably the hoarding titled ‘Eleven Art’? Does it mean that hoarding is dominating and prevailing? Perhaps because of its colour scheme? Red has been known to draw the attention of the users.

Just like the above example, in a website design, when two elements are placed in a design layout, either one of them will attract the user’s attention more and exert some dominance over the other or they will be equal in every aspect. It might be larger in size, or have an attractive colour, maybe located in the middle or top area, or the subject matter might stand out. It’ll appear as if it controls the lesser elements to a certain degree. You will end up noticing that first. Consider this example below:

Isn’t it evident that the red triangle stands out and draws your attention more than the grey circles? This is because the triangle dominates in size and colour.

As we continue to add more and more elements to the design layout, some dominate others; and there would be one that dominates all of them and prevails. This element demands attention and becomes the entry point of our design. It will be the first element that will draw the user’s attention in the entire layout.

Elements of lesser dominance become the user’s focal points. They are not the most dominant on the composition however they dominate over the majority of elements on the design layout. This is not the first element the user’s attention would be drawn towards, it’ll perhaps be the second or third.

How to Create Focal Points in the Design?

The designer can create focal points by emphasising on the dominant element through contrast and emphasis. In order to gain the user’s attention, the element must contrast with its surrounding elements. Greater emphasis creates more contrast in the composition. Conclusively, it is about giving website elements greater visual weight so that they stand out.

Designers can control the size, density, colour, local whitespace, value, shape, position, style, shape, depth, and orientation to control the visual weight of the elements. The eyes are a good judge to determine which element weighs more, especially if the goal of the designer is to have elements with large differences in the visual weight.

For example, in this website design below, the icons of facebook, twitter, messenger are focal points whereas the logo and the headline dominate the design.

Similarly, in this design, the app store, google pay option and the details of the event are focal points.

What is Dominance?

Dominance in simple terms refers to the state of being controlling, commanding or prevailing. Every design should have a focal point or primary area of interest that serves its way into the design. The design flow can be achieved by creating secondary and tertiary dominance.

Consider these 2 polygons of different sizes. The larger polygon is likely to dominate (even though it is slightly larger) and the greater the difference in size between these 2 polygons, the larger will dominate the smaller.

A lack of dominance between the website elements in the composition leads to competition and user’s attention. Consider these circles present in the composition. Which one would you look at first? Chances are your eyes will dodge back and forth between the two circles.

This is because there is no dominant element the user’s eyes could anchor to. Without a dominant element, the viewers would struggle to find an entry point into the design layout. This may be more difficult than it sounds and would not only lead to inattentiveness but the viewer’s may also skip to another website. The designers must reduce the amount of effort it takes to enter the composition by having a dominant element that makes the starting point obvious.

How to Create Dominance in Your Design?

Dominance helps to create an area of interest, a focal point or starting/entry point in the design. The dominant design in the webpage or design should be the element that you want your user’s to see first, perhaps a slogan, headline, title of the page or your logo.

Just like in this website design, the designer wants the logo to be dominant.

However, in this website design, the designer wants the user’s to get anchored to the headline.

As a thumb rule, the elements in the design with the most visual weight will be the most dominant one. However, that may not be true.

Just like in the above image, your eyes will probably fall first on the circle in the centre. It is not even the largest shape in the image and does not carry the most visual weight. However, because the element is completely surrounded by whitespace, it dominates the local environment. The elements with more visual weight blend together and do not dominate its immediate space.

Levels of Dominance

Designers can create three levels of dominance in their layout. That is a realistic maximum, the more levels, the less contrast will exist between each level, and lesser the contrast, the harder it will be to distinguish one level from the next.

When creating levels of dominance in the design, the layout will be a part of one of these levels below:

• Dominant: This is the element with the greatest visual weight. It will have primary emphasis and will advance in the foreground.
• Sub-dominant: These are the elements that have secondary emphasis on the design. These have less visual weight than the dominant element but more than every other element. It becomes the middle ground in the composition.
• Subordinate: These elements are given the least visual weight. They recede into the background of the layout.

Designers could also add 4th level of dominance. Human beings can easily distinguish between most and least, but everything in between these levels of dominance tends to become a grey area of equal dominance.

Just like in this image, the red square is at the dominant level. It carries the most visual weight given its dimensionality, colour, and size. The yellow circle in the lower left hand side and the cluster of dots above it are in the subdominant level and serve as a focal point. The former uses a drop shadow to give it extra weight and the latter to use local density to give the group extra visual weight. Every other element in the composition sits at the subordinate level and recedes into the background.

Similarly, in this website’s design, the slogan- “the anti-staffing recruiting company” is dominant because it carries more visual weight and has more whitespace around and is larger in size, with contrast. The sub-dominant textual content in the design would be the names below the photos and the logo of the organisation. They weigh less than the slogan but more than other elements on the page. Lastly, the subordinate dominance in the website design is the navigation tool that has the least visual weight. It recedes into the background of the layout.

Conclusion

It is easy to determine dominant elements in the design, but the task for the designer is to be conscious of how each of the elements dominate each other to its immediate surroundings and the design as a whole.

Dominance can be created by contrast, emphasis and visual weights. Identical elements cannot dominate each other. The more visual weight an element has, the more it will dominate the other elements. However, this may not always be true, designers must also consider elements of lesser visual weight and determine their dominance.

Designers could use dominance to create an entry point in the design. Additionally, by determining hierarchy, designers can also exhibit dominance in the design that would guide the visitor’s eye from one part of the design to the next.

One way designers could incorporate dominance and hierarchy in the design is by observing new designs and compositions and paying attention to where they look first, second and last. Determining what you consider dominant, sub-dominant and subordinate instinctively and why they appear in that way.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Imagine you are eating this. When your friend asks you what you’re eating, you wouldn’t say “I am eating bread, pepperoni, cheese”, instead of “I am eating a pizza”!

Source

This is because you have grouped different ingredients namely cheese, bread, pepperoni and have unified them together to form a pizza. People consider these elements as a group, that is usually caused by the subconscious connections humans make and establish a strong relationship between the elements.

Unity holds the design structure together, both visually and conceptually. It adds organisation and eases the user’s journey on the website as they don’t have to decode every element individually. Hence, indirectly, it helps to convey the prime message out and allows the user to only and only focus on that while interacting with the webpage.

It is an interesting concept as well as an important one to be applied in website designing. If we were to look at the definition of Unity, it is “the state of forming a complete and pleasing whole.” It also helps to create a consistent brand identity for the site or the product. It drives a path to connection between the elements so that the users have an easy time progressing between the pages of the website.

Legos implicitly demonstrate the concept of unity. If you notice, by itself, a lego piece may not mean much but when it is combined with other pieces, it forms into a universal whole and creates a unique identity. Similarly, for web design, each element, paragraph, image, navigation, header, footer, logo alone may not be meaningful but when combined together in the appropriate way, they can create a powerful tool.

There are many factors that contribute to a perception of unity within the website design. Some of these are:

1. Colour

Colour is a great way of forming a connection between elements and objects. If you notice, almost everything sticks to a colour scheme since it helps to facilitate a relationship, especially when used in connection with a product. For example, Coca Cola primarily uses red and white colour in their products. Therefore, while using the product, we instantly link the webpage colour with the product colour that further facilitates unity.

Or how Apple maintains consistency and sticks to silver, white and grey colour in their products as well as in their digital presence.

Unity by leveraging colour can also be used by just consistently utilising a defined colour scheme in the design. Inconsistency may cease the flow of user experience as visual links will be missing.

2. Repetition

Recurring elements in a design that look identical forms a connection and creates familiarity within the design and makes the user think “hey, I have seen that before!”. The users don’t have to reprocess and decode the particular page of the website again.

Branding a website by using a similar colour scheme, fonts, styles, borders and typography would help to maintain unity among their design. For example:

In the design above, all the sections of the page follow a different colour scheme. The top most section in yellow seems to communicate important information for the users and stands out because of its uniqueness from the colour palette. The important content has also been bolded to draw attention. The font style of the logo differs from the other content. The navigation bar also has adequate whitespace. The colour scheme of purple and white has been repeated several times and used effectively in the design.

3. Consistency

Consistency is the key to unity. A soccer team would not go for their match with different coloured jerseys. Instead, they are united as a team with the same colour jersey that represents their brand.

Consistency is achieved by keeping the style of similar elements alike and related to the same colour. When unity is achieved elements would not compete for attention. The theme and the prime message will be communicated more clearly and in greater depth. The users will experience a greater sense of completeness in your composition.

4. Alignment

By keeping a consistent alignment, designers can create a visual unity within a design. Having a bunch of paragraphs in the same alignment leads them to be perceived as one part of an article and not different bits of text thrown together. This makes it look organised and cleanly positioned. Multiple alignments on the design would require more effort to create as well as perceive a connection.

As limiting as adding grids to the design may feel, it offers a solid foundation to align website elements onto a single grid. For example:

Source

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

A website’s domain name and extension do more than just tell users what the brand is about and its purpose. It will also communicate credibility so deciding how to name it and what domain extension to use is one of the topmost priority precedents to building the website.

Domain extensions can either categorize a website by business model, type, or location. When it aligns with your brand, it’ll increase the usability of your website by conveying off the bat what they can expect when they visit the site.

The “.com” is indisputably the most popular domain extension. In many cases, as soon as you see it in the address bar, it intrinsically prompts the trustworthiness of whatever content it has. But is it always the best one to use?

With that question in mind, you might feel overwhelmed deciding which domain extension, or a top-level domain as others call it, to use. The good news is: you can take the confusion about what to use in the equation. In this post, we’ll discuss 3 of the most popular top-level domains: .com, .org, and .net, and talk about when best to use each one.

By the end of this post, you’ll have a clear decision about what domain extension to go for, so stick around.

What “.com” Means

The top-level domain (TLD) .com means commercial. That in itself suggests that it was originally made to host commercial entities. However, as you may have noticed, this domain extension’s purpose has currently extended to other types of websites.

The .com TLD continues to be well-renowned, it’s even been dubbed as the “king of domains.” In fact, according to Statista, 48% of websites use .com as their domain extension. This valuable reputation makes it the most sought-after top-level domain which also implies getting your hand on a .com extension can be tricky because in most cases, it’s already taken. When it’s available, its value makes it too pricey.

If you’re determined to have a .com extension for your website, you’ll have to go through a complicated process of trying out different variations of your brand name to finally come up with one that’s either available or fits your budget.

Though a .com TLD can cause you some challenges along the way, it’ll be worth it. Typically, $users expect a .com to be a default extension so if your website is using it, it makes recall easy for them. Meanwhile, if you use another TLD, it’ll be trickier for people to find your website potentially decreasing your website traffic. It comes with instinctive credibility. People won’t be as reluctant to visit your site as when you would use TLDs like .ai, .so, or .io like what Premio, a Shopify chat plugin website and this call recording software website used.

This means the domain extension you use will largely affect the traffic you can expect for your website and in turn, your marketing efforts. If you want your website to turn up on the top of search engine results pages, regardless of the country it originated in, use a .com top-level domain.

As a recap, here are the pros and cons of using a .com domain extension.

.com Pros:

• Helpful for SEO and overall marketing efforts
• Easy recall
• Comes with instinctive credibility
• Maximized potential website visitors

.com Cons:

• Limited choices because of wide usage
• Pricey
• Longer process of coming up with a domain name that’s either available or budget-friendly
• Maximized potential website visitors

Now that we’re covered the .com domain, let’s now consider .org.

What “.org” Means

The .org extension stands for organizations and arguably offers more credibility than a .com extension. It’s generally used for non-profit sites like NGOs, charities, open-source projects, alliance, art, social, cultural, and even public education platforms like public websites when they opt-out from using a .edu extension.

When an organization doesn’t fall under the government (.gov), military (.mil), networking (.net), commercial (.com), and university (.edu) category, it’s appropriate to use the .org TLD.

The .org extension was launched back in 1985 and was exclusively used for non-profit or non-commercial entities. But in 2019, the domain name registry was sold to an investment firm and since then, the exclusivity was removed. It allowed other entities that didn’t strictly fall under the non-profit category to have the liberty to use it for their website. Still, the public assumption is to set in its old ways that .org sites are non-profit sites.

Keep in mind that if you choose to use a .org extension but some profit-generating transactions are operated on your website, get ready for some backlash that will ruin the inherent credibility your website initially had. While a .org extension carries a strong connotation of being an authoritative and trustworthy website, the .com extension continues to be more popular. A .org extension shows up well in search ranking but not as good as a .com does.

This also means that people will assume your website ends in a .com unless you incorporate the .org extension into your branding or company name. This becomes more advantageous if another unrelated company with the same name already owns the .com extension. It prevents your potential site visitors from showing up by accident on the latter’s website and thus protects your potential site traffic.

.org Pros:

• Best at establishing credibility and trust
• Results in better rankings as long you don’t intend to sell products and services
• Easier to get the desired domain name than those with a .com extension

.org Cons:

• Doesn’t rank in search as good as the .com extension does
• Potential traffic can accidentally show up in the same-named site but with the .com extension
• Selling in .org sites can result in backlash and loss of inherent credibility

Before moving on to discuss the last domain extension, let’s first establish the significant differences between a .com TLD from a .org TLD so that if you’re on the fence between the two you’ll be able to decide which one to use.

.com vs .org Domain Extension: Which One Should I Go For?

To put it simply, if your website is for profit, it’s best to use a domain name with a .com extension. It’s generally understood to be websites where revenue is generated so there’s no need to explain to people that you’re selling goods and services on your website. They already got that at the back of their minds.

If you are building an eCommerce store to sell sexy lingerie, fitness apparel like what Impossible offers, or anything you can think of under the sun, it’s best to use a .com extension. Again, .com TLDs won’t always be available, so if you can, right when you plan to start a business, consider what domain names with .com extensions are available and consider it when deciding on a business name. You can even purchase it in advance just to make sure nobody gets it ahead of you.

Another benefit of having a .com extension for your domain is that it’s mobile-friendly. This means that whatever device visitors use, they can navigate and use the website with ease.

On the other hand, if the purpose of your website isn’t to generate revenue but to provide public knowledge or advance a cause, a .org extension is the best one to use. Still, if you’ve already established a business name and the .com extension for it is already taken, another TLD you can consider in place of it is a .org.

Around 10 million .org domains have been registered, less than 5% of all the domains registered. With more chances of getting the desired domain name with it, .org rises as a preferred alternative for a .com TLD. Still, keep in mind that people expect a .org domain to be non-commercial, if you pursue using this for your business, you have to come up with a strategic marketing plan to avoid misunderstandings with site visitors that can lead to a loss of trust or you can always consider it just as a last resource.

As an example, a review site for medical alert gears offers valuable public insight on prevailing medical alert systems for the elderly. However, if they earn financially like an affiliate commission when a brand makes a sale from their review, people might look at the site in a bad light. In cases like this, disclaimers should be provided outright to prevent people from thinking they had been deceived.

However, if you think your website’s purpose doesn’t fit the mold of either of the two extensions, then a .net TLD might be the solution.

What .net Means

The .net domain extension refers to the network and was originally made for umbrella websites- a portal for smaller sites. It’s the second most sought-after TLD but only accounts for 4% of all domains registered making it another great alternative for a .com website. One thing to note though if you take this course, make sure that the owner of the .com domain isn’t in the same industry as yours, or else you’ll lose your traffic and revenue to that competitor.

Currently, .net TLDs are naturally associated with tech space and web services. Some examples of these are website hosting, internet providers, CRMs, or collaboration and automation tools. Some of those in these spaces that use a .net TLD is sourcefourge.net an online code hosting site, speedtest.net an internet connection performance analysis, and behance.net, a smaller social media site for creative works connected to Adobe.

While the .com option will be more credible for your potential traffic, a .net TLD is the next best thing if a .org extension would cause misunderstandings.

In any case, you have to secure potential visitors by allowing an easy recall of the site name. Like the suggestion made for .org domains, incorporating .net in the branding will make it easier for potential visitors to remember what your website is because they’ll naturally link your business name with the extension.

However, if you ever get stuck deciding whether to form a .com or a .net website, here’s what can help you to decide.

.net Pros:

• Higher availability
• Easily recognizable with tech and web-based brands

.net Cons:

• Risk losing potential traffic if the owner of the .com domain is a direct competitor
• Less credible than .com
• Harder recall than of .com unless incorporated in the branding

.com vs .net Domain Extensions: Which One Should I Go For?

In essence, choose a .com extension when making a commercial site and choose a .net extension when creating an umbrella site for smaller sites, anything related to internet and tech-based websites, and even forums.

What if you’re selling a tech software or Internet protection service given that both extensions for the same domain name are available? Which one should you go for? There’s no right and wrong choice in this scenario. It depends on what you prioritize. If it’s credibility, mobile-friendliness, and high traffic potential, then go for .com. But if it’s instant identification of what a site is about, then you can go for .net.

Many smartphone keyboards nowadays come with a dedicated button for domain extensions, but the most common TLD there is the .com extension. This makes it easier for mobile users to find .com websites more than those with other extensions. It makes browsing sites with this extension less time-consuming compared to the others creating a better experience for the user.

Since mobile users make up more than half of the online traffic, this seemingly insignificant detail will have a substantial impact on the usability of your site and the succeeding traffic and revenue growth. You can also perform usability tests to confirm its impact.

Another option you can take is to purchase both .com and .net extensions of the same domain name. This way, you can increase your online presence. However, additional planning might be needed to determine what content to put in each to ensure there are no duplicates that Google can penalize. One example of this is if you offer multiple voices and audio services like Voices. Instead of putting all services on one website, you can offer the major service on the .com website and the minor offers on the .net website.

.com vs .org vs .net: What’s Best For Which?

Your top-level domain is as important as any practice you apply in your business branding. It doesn’t just affect the likelihood of users finding you online, it also affects how potential visitors perceive your brand. A mismatch has a high chance of an outright loss of credibility. Use a .org for a commercial website and visitors will feel defrauded.

With this in mind, choosing between the three domain extensions should be done right when you decide what to name your business. This will allow you more room to position your brand the way it’s intended that can help radiate a cohesive online presence.

At this point, you already know what each of the three domain extensions is normally used for. Brief pros and cons of each top-level domain are also presented to help make a better gauge of what to go for. Lastly, some suggestions or workarounds are also given in case you highly prefer one domain extension over the other.

• .com: for commercial, used for profit-making websites
• .org: for organization, used for non-profit websites providing public information or advancing a cause
• .net: for network, commonly used as an umbrella site for smaller sites or tech-related websites

If you find that the three domain extension options are too limiting or if you want to have a location-focused website to easily grab the attention of a local market, you can also consider country TLDs like:

• .ru
• .uk
• .ir
• .ua
• .de
• .in
• .us

Bear in mind that using country-based domain extensions will mean laser-focused audiences. This means fewer chances of getting global traffic that will expand your market reach. However, this won’t pose a problem if your product or service is made to cater to just specific locations and your logistics can only handle local shipping of the products.

Generally, using a less popular domain extension will affect how users will perceive your website. Still, you can leverage location-based TLDs if your country is known to deliver quality products and services in the industry you cater to.

Closing Thoughts

Your website’s domain extension significantly impacts your branding, hence, as mentioned a few times by now, it should be thought of right when the business name is decided on. It’s easy to choose a .com extension over the others, however, if that’s not on the table, you still have the next best things to choose from.

At any rate, your chosen domain extension should communicate the purpose of your website. It provides a great user experience and more importantly, it helps build your credibility. And with your credibility intact, you can move forward and build up what you offer on your website and generate the conversions you’re aiming for.

Author Bio

Burkhard Berger is the founder of Novum™. You can follow him on his journey from 0 to 100,000 monthly visitors on novumhq.com. His articles include some of the best growth hacking strategies and digital scaling tactics that he has learned from his own successes and failures.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Look at the big rock on the cliff’s edge in the image below. You think it might come crashing down. It is out of balance and you experience the tension of the impending crash. The users may experience similar feelings when the composition of the web page design is out of balance.

Much of what we have been discussing in the previous blogs about dots, whitespace, forms, lines, depth have been leading to visual weight, visual direction, and visual balance.

In this blog we will discuss:

• Visual Weight
• Visual Direction
• Visual Balance
• Examples

Visual Weight

Every element on a web page exerts some visual force that attracts the eyes of the viewers. The greater this force is, the more attracted viewer’s eyes are. We refer to this force as visual weight.

Physical weight is a measure of the force that is exerted by gravity on an object, however, two-dimensional objects such as elements on a web page do not have mass or any physical weight. Visual weight is the measure of the force exerted by an element to attract the eyes. Two-dimensional objects attract attention. The more an element attracts the viewer’s eyes, the greater is its visual weight.

Visual weight as an attribute is derived from a combination of many other possible attributes a design element might have. Many factors affect the perceived visual weight of the design element and most of these factors come from the work of Rudolph Arnheim. Some of these are:

• Size: larger elements have more visual weight than smaller elements.

• Shape: Elements with regular shape appear to be heavier than objects with an irregular shape. The irregularity gives a sense of mass being removed from a regular shape.

• Value: Dark elements have more visual weight than light elements.

• Colour: Warm colours like pink, red and orange advance into the foreground and weigh more than cool colours like green and blue that recede into the background. The colour red is considered to be the heaviest colour and yellow the lightest.

• Position: Website elements that are located higher in the layout are perceived to weigh more than elements that are located lower in the layout. The further away the element is from the centre or the dominant area of the layout, the greater its visual weight would be. Elements in the foreground carry more weight than elements that are present in the background.

• Texture: Textured elements appear to be heavier than non-textured elements since texture gives them a three-dimensional look.

• Orientation: Vertical objects appear to be heavier than horizontal objects. Diagonal elements carry the most weight.

• Depth: The greater the depth of an element, the greater is its visual weight.

Kadinsky’s composition uses design elements with a variety of visual weights. The dark circles in the upper left corner of the layout carries most of the weight. It is the darkest and largest element in the layout that is located at a higher rate in the composition. It has a regular shape with some whitespace around it and it overlaps with the red circle that draws the viewer’s attention.

Visual Direction

Just like how the visual forces that attract the eye’s of the viewer are known as visual weight, the direction in which the forces act and direct the eye’s of the viewer to the next location is known as visual direction. It is the perceived direction of visual forces.

We can equate visual weight with what attracts the viewer’s eyes the most or “look at me!”, we can equate visual direction with where an object leads our eyes to or “Look over there!”. The area where the viewer’s eye is led gains more attention.

As with visual weight, we can modify the characteristics of an element to suggest different directions, for example:

• Shape of element: The shape of an element might create an axis that is suggestive of direction.



• Location of an element: The visual weight of an element either attracts or repels its surrounding elements thus giving a sense of direction and movement.



• Subject matter of an element: an arrow, a finger or a gaze of the eye suggests direction.

What is Visual Balance?

Have a look at the image below and observe the large and small block on the lever

It is likely that you must have perceived the larger block in red colour being much heavier than the smaller block. Also note how our eyes get attracted to the colour red, giving it additional weight.

The dominant force acting on the red coloured block is gravity that is acting downward. You may perceive the larger block to move down on the lever. The blocks in the image may seem visually unbalanced based on the relative weights of the block and the direction of the forces acting upon them.

While we discussed the image above in physical terms, the same imbalance is perceived visually. The human visual system perceives the blocks to be out of balance in their visual weight and visual direction.

Hence, visual balance is a result of two major factors, visual weight and visual balance.

Examples

Now that we have understood the concept of visual weight and visual direction, let us check out some examples

The graphics on this design have a sense of depth because of the difference in size of the elements that increases its visual weight. Although the logo carries less weight because of the size and the menu overpowers in terms of visual weight. But it is vital to point out how the colour red in the header section draws attention.

The grid on the graphics “our services” has one of the highest visual weight because:

• The grid is red in colour that draws the viewer’s attention
• The grid has whitespace around it
• The grid sits in contrast with its background making it stand out.

Here the dominant visual direction is horizontal as the main heading, navigation bar and other elements are also horizontal.

The example shown above contains mostly all textual content. The main header “ This Sociological Life” contains the most visual weight since it is the largest piece of text and has local whitespace around it. Followed by this is the second header “Research on academic blogging: what does it reveal?” that has the most visual weight.

The words in orange and blue colour have some weight because of the contrast it has with the background, although the cool colour does not gain much attention.

The content box with the least visual weight is the text box on the right hand side “Follow blog via email”. This makes sense because the viewer’s focus is most likely directed towards the article and not the sidebar. Users tend to selectively attend to web pages and ignore the spaces where ads are usually popper to reduce their cognitive load.

The visual direction of the layout is vertical because of its long columns down the page. The whitespace between the two sections creates a vertical line further directing the composition.

Summary

All elements in a website design layout possess some visual weight and a visual direction to that force. Visual weight is a measure of how the eye of a visitor is attracted to something and visual direction is a measure of where the eye is led. A number of factors affect each and by a combination of these we balance the elements in the website layout.

Hence, the designers must learn to control the visual weight and visual direction of the design that would further lead to greater control over several other design principles, and strike a visual balance.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

There’s more to user experience design than just creating elegant and aesthetically pleasing projects. Some people may think that artistry is all there is to UX designing.

The thin line that separates a good user experience from a bad one is how on-point a designer helps a user think through the experience. Simply put, psychology is involved. A designer should seamlessly convey the full thought of the project to the user.

By understanding concepts in design psychology, a UX designer can create a smooth and intuitive experience, giving users an efficient, usable, and pleasurable experience when interacting with the project.

Using these concepts, you will be able to direct human behavior and elicit specified actions and responses from the users.

In this post, we’ll cover 10 of the most important design psychology concepts that help guide decisions in designing a project. By the end of this post, you’ll be equipped with the knowledge not just of how to make a design aesthetically pleasing but more importantly, functional.

Gestalt Principles Of Visual Perception

Gestalt’s principles in design psychology explain the way humans perceive visual elements. It describes that the human eye subconsciously relates objects and views them as a whole rather than as separate elements. Incongruities and gaps are overlooked.

There are six major Gestalt Principles of Visual Perception, and they are:

Symmetry And Order

The human eye finds symmetry attractive. When looking at objects, we naturally see them as balanced shapes that form around the middles. Two of the best examples of this are the logos of McDonald’s and Twine, a web design freelance marketplace.

Proximity

When simple shapes or elements are closely arranged together, they are perceived as a group resulting in a more complex image. Take the Adidas logo as an example. When the three lines are further away and placed at random, they’re automatically viewed as separate elements. But with the way the three lines are arranged, you’ll immediately perceive them as one image.

This doesn’t work with similar multiple shapes. Even random elements, when arranged in a certain proximity, are automatically viewed as one complex image, just like the Unilever logo.

Similarity

The human eye builds a relationship for the same elements in a design regardless of proximity. It can be viewed as a group through colors, sizes, and shapes.

Continuity

Gestalt’s continuity principle states that the human eye is inclined to follow lines, paths, or curves of a design. Curved lines, for example, compels the eye to move from one object to another or a line moves the eye from point A to point B.

Examples of this are the dominant H in the logo of High Desert Pure, a eCommerce site for hemp lotions and the infinite looking symbol in the logo of a Houston drug rehab facility called Infinite Recovery.

Closure

The closure principle explains that the human brain tries to perceive incomplete objects as a whole by filling the gaps with the missing information. Take the IBM logo, for example, instead of seeing the whole blocks of each letter, the white parts tend to be perceived as the areas with missing information and so are filled up by the brain with blue shapes to make it legible.

Figure And Ground

This principle shows that the human eye will isolate an object or element from its surrounding area or background.

Hick’s Law

Hick’s Law explains that users take more time to decide on any target action you want them to make as you increase the complexity or number of their choices. Simply, the more options are presented to them, the longer they click on a call-to-action button or a buy button.

If there are 43 products to choose from. Imagine how much faster a user would choose if he is only presented with 10-15 options.

In design psychology, if you want users to have a smooth and efficient experience with your design, try to determine which elements are necessary and what you can do without. Don’t present them everything at once.

Limit their options but not to the point where they feel you aren’t giving them enough selection to choose from or too constrictive. But reduce the number of options you present them just enough to accomplish their goal.

This means prior user research and testing must be thoroughly done to pinpoint the most important features you want to include. This can also mean hiding secondary features in dropdown buttons.

So how do you apply Hick’s Law?

1) Remove unnecessary images, links, buttons, and text to allow users to find what they need as quickly as possible. The fewer distractions, the better.

2) As touched earlier, rather than providing all the options at once, you can provide broad categories in the navigation where you insert subcategories for more options when necessary.

3) Shorten lists Limit the number of options like what was suggested in the preceding point. But if that’s not possible and the product requires long lists, limit the number of choices that can be viewed at a single time. This way, scanning them is faster and easier. You can choose to prioritize recommended options on the list.

4) Break down complex processes like checkouts and registrations on several pages. Nothing is too overwhelming than seeing a whole page full of form fields to fill up just like what this growth hacking website form did. Simplify the steps to make them more manageable and provide a clear path to shorten navigation time.

As for registration forms and checkout processes, you can brainstorm with the developer you’ll hire

Dual Coding Theory

The Dual Coding theory was introduced by psychology professor Allan Paivio. This psychology design concept will make it easier for users to remember important points from your website.

Paivio promotes giving equal weight to non-verbal and verbal processes. The theory suggests that human memory has two different but interconnected systems. The relationship between these two processes supposedly affects learning and memory.

He was basically saying that you create visual versions of words in your mind based on your perception and experiences. Think of the word “sea” for example and you’ll automatically connect it to water.

Relating an image to a word makes for an easy recall. You’ll mostly see this in children’s books, not just to make it more appealing but to help children remember concepts easier by seeing an image they can relate the word or story to.

With a visual representation of a word, especially with complex ones, you’ll allow the user to get the idea faster and imprint it into their memory.

How do you apply this in your projects? You can do this by utilizing icons and simplifying text content into infographics when applicable. You can also incorporate images in your logo making it easier to remember.

UX designers keep giving layout and design relatively equal consideration. Users should be able to remember the app or website easily and navigate it with ease.

Visceral Reactions

Ever visited a website or used an app that left you impressed enough to not want to leave? That’s a visceral reaction. This concept is an instinctive response to an experience with a product sent by chemical messengers to the brain. A reaction is then generated that makes users come back for more.

A visceral reaction is an important concept to keep in mind. It usually only takes a split second for users to decide if they’d want to explore your project more or if they should bounce right off.

If they come into the site and find the layout boring or even overwhelming, they’ll leave in a few seconds.

Creating your project in a way that elicits a visceral reaction will help you get loyal users and supporters. In turn, it’ll help you get a better brand image for your website or an app, making more and more people interested in visiting or downloading it.

Keep in mind that a visceral reaction isn’t just produced with an out-of-this-world project design. Having simple design elements in icons, colors, forms, and imagery like what these cloud bookkeeping services did in their website will also get you the wow factor from users.

Why? Because users are comfortable with things they can relate to. So while you give your users a unique experience, there should still be an underlying familiarity they could relate to.

Von-Restorff Effect

This design psychology concept is coined by Hedwig von Restorff, a German psychiatrist. Restorff did an experiment where he presented participants with a list of items with one distinct from the others. The one that stood out was the most remembered.

This concept is also known as the Isolation Effect. It predicts that in a range of similar objects, the odd one out is most likely to be remembered.

A classic case where this concept can be applied is when designing call-to-action buttons. This button dictates what you want the user to do like what this customer success software did. When it pops out – easily distinguishable from the rest, the more likely it is for the user to take action.

Another where this can be used is in an array of products on the page. Making the new arrivals or the best sellers a bit distinct from the rest will move the user to check them out instead of the others.

You can use this concept to direct users to the specific types of products you want to sell most.

Psychology Of Persuasion

The Psychology of Persuasion of Robert Cialdini has five sub-concepts: Reciprocity, Consistency, Social Proofing, Authority, and Scarcity. This set of concepts dictates the way humans behave and can be capitalized on to identify the general human behavior to improve the success of your project.

Reciprocity

This principle explains that humans don’t like to be indebted to others. If you offer something of value, they’ll feel obligated to return the favor one way or another.

An example of this is offering free cheat sheets, guides, free content or free trials like what this employee productivity tool offers. Website and app owners usually use these freebies in return for the user’s email address.

Authority

People rely on who they consider as experts in a certain field. The more authoritative the figure is, the more credible and believable everything he says is. This credibility also trickles down to his network. A human can reason: if this credible person A trusts person B, he must have some rational reason for trusting and so I can trust person B as well.

When we think of authoritative figures, we think of lawyers, engineers, doctors, and high-status professions that add a title to people’s names. But in the digital world, high authority figures include digital marketing professionals who bring in more revenue for a business.

If an email design system provides proof they’ve worked with reputable organizations, he’ll be considered as an expert in the field. Getting associated with these kinds of people and their organizations will make your project trustworthy as well.

Say if you get in touch with Neil Patel and you do a project together and showcase that in your website or app, people will trust you more easily and your user circle will increase.

Scarcity

Have you ever heard of FOMO or “fear of missing out”? Yes, people generally don’t want to miss out on things and this is why most websites capitalize on this concept to generate higher conversions.

By making people feel that a valuable thing is limited in number or offered in a limited time only, they’ll be more inclined to decisively take action fast.

You’ll usually see this in eCommerce sites with countdown timers on discounts of certain items or products with a tag of “last 5 items available”. When trying to capture the email addresses of users, certain content is gated so only those who sign up will be able to take full advantage of it.

Consistency

This concept explains that people want to be consistent in their decision-making process. If you let users answer a short survey on their preferences and after getting the answers you make your offers customized to what they want, they’ll be more likely to take action.

Social Proofing

Even if users don’t know most people on the internet, when a certain stranger gives a testimonial about a product and it’s consistent with other people’s thoughts about the product, they’ll trust it more.

People tend to look for validation, not from salesmen but previous owners, experts, and celebrities. When your product includes a good review from a sizable number of people, it’ll make it easy for new users to trust it. A great example of this is how Axonify, a frontline training platform included the reviews they got from 3rd-party sites like G2 for site visitors to see how others perceive the platform.

Memory Limitation

Memory is malleable and suggestive. It can create false memories where they either remember events that didn’t happen or remember them in another way.

Because of this, the memory limitation concept suggests that it’s important to create designs based on mental models or the brain’s habits. This way, processes are easier to remember.

This also entails making the user experience based on recognition more than just on recall. People don’t remember every page they visit in your website or app, in around 15 seconds, they’ll only remember 4 items at most.

So when designing a website or an app project, don’t leave users guessing about what a certain action does or what they’re expected to do next. Assist them and provide an undo option in applicable areas. This will reduce user frustration and incline them to come back.

Psychology Of Colors

Different colors evoke different emotions and this, in turn, evokes different thoughts. Hence, this is a common concept used by businesses for brand recognition based on the purpose of the design and its target audience.

Colors also make elements look pleasing. The more attractive a product is, the more usable it is in people’s minds. Now let’s consider briefly what some colors convey.

Blue: honest, strong, loyal, calm, secure

Financial institutions and information-rich websites use blue to convey security and trustworthiness, hence the reason why Visa uses it.

Red: action, passion, energy, boldness

Red stimulates energy and action, the reason why Red Bull mainly uses this color.

Orange: happiness, enthusiasm, sociable

Vidizmo wants to convey happiness and enthusiasm as a video-sharing platform so orange is made dominant in their branding.

Yellow: playful, confident, logical, forward-thinking

Yellow triggers logic and confidence, a characteristic a logistic company like DHL wants to convey.

Green: fresh, organic, growth, stability

Green easily conveys growth and stability hence the reason why PayStubNow, an online paystub generator.

Videomaker portrays itself as an authority with a touch of sophistication in the video making and camera rigs industry explaining the heavy use of black in their website.

Progressive Disclosure

Complex features tend to be overwhelming, this is a recurring human behavior mentioned throughout this post. For a great user experience, people should be presented with bite-sized chunks of information.

This is the reason why blogs aren’t just a wall of text. It’s broken up into bite-sized pieces using bullets, images, and videos just like what this predictive dialer blog and this Shopify Partner Program blog did to avoid readers from getting overwhelmed with what they’re supposed to read.

Fitts’s Law

This law proposes that the time needed for a pointer like a mouse cursor to move to a target area is a function of the distance of the target object over the size of that object. Simply, the smaller the size of the object, the longer it takes to move a cursor toward it.

This concept is important since it affects how a user behaves on a desired action and in turn, affects conversions. This means a button for the desired action should be big enough that it’s easy to move around and click it and an undesired action like the delete or exit button should be smaller and placed farther from where the mouse usually sits.

A great example of this is the upper fold of an Austin drug rehab website where the “Get Help Now” button is conspicuous enough to be easily clicked on.

Conclusion

These are just 10 of the most important concepts to consider. There are more as you delve deeper into this field. For now, mastering these concepts will help you create effective designs that will lead users to the emotions you want them to feel and the actions you want them to take.

Author Bio

Burkhard Berger is the founder of Novum™. You can follow him on his journey from 0 to 100,000 monthly visitors on novumhq.com. His articles include some of the best growth hacking strategies and digital scaling tactics that he has learned from his own successes and failures.

Author Picture:Here

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Human visual system is remarkably agile. It helps us perform tasks that are necessary for our survival. Without any conscious effort we are always scanning our surroundings for important information such as which elements are present in the background and whether any of them might be of importance.

Similarly, subconsciously, users scan websites or pictures to acquire information and note if there’s anything of importance in the visual display. All of this occurs effortlessly unless we have consciously focused our attention on something.

Like in the picture above, our visual intelligence enables us to see the word ‘museum’ that is constructed using straight lines and three simple colour contrasts.

Even though we consider our brain as a system that can process massive amounts of data simultaneously, the quantity of information acquired through our visual system is actually way more than what the brain can accommodate into our conscious awareness. Hence, we shift our visual attention from one location to another in a serial manner to extract all the information we want.

The users can be distracted by visual information even when it is not relevant to them. If an element is attractive, it will grab their attention against intention. This suggests that designers can direct where the eyes will look and select what will gain the viewer’s attention.

An interesting feature in the layout or user’s internal goal may direct the user’s eyes. Users want to focus on the most compelling information so they selectively look at what they think is most important. This is known as selective attention .

Prominent elements in an image or a layout compete for our attention, hence if the users are not given a visual direction they may dwell on the wrong information or may experience cognitive overload. A designer can assist this process by purposefully guiding the viewer’s eyes throughout the structure of a graphic. By leveraging this technique, designers can ensure that users comprehend the intended message.

The viewer will pick the most relevant information in a limited time frame when purposefully directing the eyes. The designer can guide user’s eyes by using techniques like:

• Altering the position of an element
• Enhancing the sense of movement
• Signalling the location of visual cues like colour, arrows and captions.
• Varying the degree of emphasis to make the element stand out
• Direction of the element
• Using faces and gaze their eyes in that direction.

In this blog we will understand the position, direction and movement of the website’s elements.

Position

The position of an element in a layout creates perceptual forces and a sense of tension that impacts its perceived importance and hence draws the user’s attention.

For example, an element higher in the layout is usually perceived as more important than an element that is lower in the layout. This is why important elements and information like logos and navigation bars are placed in headers and not in footers. The elements placed in the upper half portion of the layout are considered to be active and dynamic. This also increases the perceived visual weight of the element.

Another study found that users spent more time viewing areas appearing on the upper left hand side of the layout than the areas on the right and lower half. This was true across both double-page spreads and symmetrical designs.

Image Source

Through the placement of elements on the layout, a designer can establish a visual hierarchy and direct the viewer’s eyes. The positioning of each element conveys different messages, like, progression of relative importance from highest rank to the lowest rank. For example, in a magazine page, the information graphic might be the most dominating element, followed by a headline and explanatory content.

Image Source

One thing designers can be certain of is that by varying the position of the objects or elements in the layout creates a varied impact on users.

Direction

Direction in a design can have a powerful influence on the mood of the user and can cause an illusion of movement within it. Making a conscious decision about the dominant direction in a design has a noticeable impact on user engagement and design interaction. Sometimes the element/image will dictate the dominant direction or sometimes, the designer has to take the call. There are 3 basic directions that can be used in a design:

• Horizontal direction- horizontal line in the designs below indicate a feeling of calmness, stability, stillness, and tranquillity.





• Vertical direction – vertical lines in the design give a sense of balance, formality, and alertness.





• Diagonal direction – diagonal lines suggest movement and action in the design.



Visual direction tends to control the eye movement of the user by carefully selecting the image and placing it well aligned with other design elements. It is greatly established that the default eye movement throughout the layout is Left To Right (LTR) that is from top left of towards the right bottom of the layout as observed in the image below



By arranging the elements in a particular way, designers can control the movement of the viewer’s eyes in and around the layout. For example, the eyes will travel along a particular path such as lines, or from light to dark elements. Images can also control the way users view the design and get directed towards a direction, for example:









Image Source

We have been talking about leading the eyes in a particular direction, but what does it exactly entail? Let’s understand this with an example. Have a look at this example from the BBC website



Did you notice how your eyes moved while you were skimming through the above image? Something didn’t feel right? Let me break it down why.



In this example, the top 2 images are both looking away from the centre of the page or outside of the layout. This leads us to ignoring the important information along the default path.

Now compare the next image with the previous one.



After looking at this page you will notice that your eyes do not move outside of the layout. The inward looking faces help you look towards the content.

Movement

Static pictures and layouts move and flow according to the directionality that is inside them. Shapes, textures and lines carry energy and tension based on their position, proximity, and orientation to other elements. This energy can create directional forces in the layout.

For example, imagine the image of a jug that is pouring liquid. As the liquid flows down the jug, your eyes follow the flow. Even though the jug and liquid are static in composition, we tend to perceive the movement that is occurring.

Movement is more than repetition of elements and patterns; rather, it drags the viewer’s attention through the picture or element. Movement is a powerful way for designers to direct the user’s eyes to important elements.

According to Rudolf Arnheim (1974), the direction of visual forces in a picture is determined by three factors:

• the attraction from the visual weight of surrounding elements.
• shape of objects
• visual direction and action of elements

In one study , researchers found that action photographs activated areas of the brain that were associated with real motion, whereas photos including people in still positions did not activate the associated areas. Hence, designers could use these findings effectively by employing movement.

Designers can also utilise the expressive quality of lines and shapes to create movement based on rhythm of elements. For example, curved and wavy lines create a smooth and flowing movement. Jagged or broken lines create a sense of tension and make the user’s eyes perceive and pause. It is quite interesting to note that movement that flows from left-to-right direction is considered easy to perceive.

Designers can also create a perception of movement by creating an illusion of three-dimensional perspective that draws the viewer’s eyes through the depth field. Viewers deduce depth in a picture because of their exposure to the physical world. Objects that are larger in size are assumed to be in the foreground.

Viewers also perceive the illusion of depth through converging lines and a sense of distance through cooler colours. Depth perception also creates a visual hierarchy.

Conclusion

Because the eyes are always moving and fixating, designers can help guide the user’s eyes by positioning, directing, and moving the elements of the layout accordingly.

Giving direction in a layout provides mood and atmosphere which can lead to the perception of movement in the design. Lines are not the only way a designer can show direction but where people look in images, where objects and figures appear, through positioning of orientation and shape elements, and through arrows and other pointing devices are some other ways that could be incorporated by designers.

Creating levels or hierarchy of importance in a layout and positioning the elements accordingly would help the users to quickly decode the scene and consume the information in an orderly format. Doing so would not only speed up visual processing and reduce cognitive load, but also increase the user engagement and experience.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

With the advent of Cryptocurrency and Metaverse, the term Web 3.0 has been gaining popularity in these times. But what does it actually consist of? And what came before that?

Web (or as earlier referred to as World Wide Web) is the Internet’s core information retrieval system developed in the 1990’s. It is the primary tool used by people to read, write and share information across the Internet and to interact with other users. It has rapidly evolved since its conception both from the perspective of users as well as developers.

Web 1.0

The era of Web 1.0 was ushered in by the invention of the earliest browsers such as Mosaic, Netscape, Internet Explorer, etc. Web 1.0 was the first stage of the World Wide Web phenomenon which was also referred to as the Static Web since it only allowed read functionality.

It meant that users were limited to accessing and only reading the content that was made available to them by the scarce content providers. It functioned like a digitised version of a newspaper or magazine. There was no option for the users to provide feedback to the content providers or even interact with other users accessing the same platform.

Web 1.0 surely had its limitations. Nonetheless, most Internet users of that era (1990-2000) were awed and entertained by its novel features of real-time news retrieval and email. Content creation was just at its infant stage and to begin thinking about user interactive applications was a far cry. However it started changing as online banking and trading gained popularity.

AOL in the 1990s when writing and receiving emails was the new ‘cool thing’. Image Credit: PopSugar

Web 2.0

The advent of Web 2.0 saw the paradigm shift of how the Internet was used. It is also referred to as the read-write web or the social web. It’s the longest era of web till date (2000-2010) which brought us user-generated content and interactive web applications mediated by expensive servers.

It completely transformed the bland static pages of Web 1.0 to an explosion of various applications, content and features from every niche that’s ever growing. Web 2.0 allowed any user to become a content creator. This content could now be viewed and shared by millions others through a multitude of sites. Some of the famous Web 2.0 applications are Facebook, Twitter, Instagram, Youtube, Snapchat, TikTok, Uber, AirBnB and many others.

Examples of a few Web 2.0 apps. Image credit: Pixabay

The exponential growth of Web 2.0 was driven by important innovations such as mobile Internet access, social networking and cloud computing.

In 2007, with the launch of the iPhone, the Internet started to become accessible on mobile phones conveniently. This broadened the reach of the Internet as compared to its predecessor of dial-up modems. Users could now access the Internet faster on-the-go and could always stay in a ‘connected state’.

The launch of social networking sites such as Friendster, MySpace, Orkut and later Facebook moved the Internet from a dark, anonymous space to a miniature well-connected world. Social media encouraged and promoted good content creation from its users. It grew exponentially as users now felt compelled to compete for attention from their peers by sharing snippets of their life in the form of texts, pictures and videos.

Staying connected with the world. Image credit: PixaHive

Cloud servers capitalised on the emergence of new websites and applications by providing low-cost data storage and maintenance systems. Cloud providers assembled mass-produced computer hardware in numerous remote data centres around the world. Businesses could now rent the cheap storage and maintenance systems without buying their own expensive and dedicated infrastructure. This enabled small-sized businesses to scale in the digital space.

A server farm. Image credit: Flickr CC BY-SA 2.0

Since Web 2.0 was built on easy-to-use technologies such as HTML5, CSS3 and Javascript frameworks, this enabled a startup culture with a multitude of innovations. Some of the prime examples being Uber and Ola who changed the transportation sector, AirBnB and Oyo Rooms who brought in a culture of affordable rooms for rent, the many easy to use food delivery apps, various web streaming services like Netflix, Hulu and Amazon Prime.

To summarise Web 2.0, the users are the product. It’s completely built around the users with different platforms figuring out ways to enable their users to create their own content and keep themselves engaged.

Web 2.5

This is the current era of Web that we are living in which is the transitional phase between Web 2.0 and Web 3.0. It mainly has been focusing on the practical evolution of mobile computing and mobile technologies primarily in the mobile app market. Its key players being Amazon, Google, Salesforce, KiSSFLOW, etc. the primary objective has been to create web applications that can connect users to any device at any given time and place.

Technologies such as Progressive Web Apps (PWA) and Accelerated Mobile Pages (AMP) were developed in this era.

Web 3.0

Web 3.0, also known as the Semantic Web, is a relatively new concept which aims to look at the future of the web. Its founded on two core technological innovations:

• Artificial Intelligence
• Decentralised Data Networks

Artificial intelligence and machine learning algorithms are very powerful technologies that have already entered the digital world. They create extremely useful and many times life-saving predictions and actions. Using them, many platforms such as the ones in social media and ecommerce have generated recommendation systems which help to intelligently create and distribute useful content tailored to the particular need of a user.

Their potential applications go far beyond into areas such as precision material development, climate prediction, disaster management, drug testing and design etc.

A few applications of AI and Machine Learning. Image Credit: JavaTPoint

With the core tenet of decentralisation of data, Web 3.0 aims to break down the massive databases stored by Internet giants and give greater control to its users. Unlike the data of Web 2.0 which is stored on a single server with a unique https web address, the content of Web 3.0 could be stored at multiple locations simultaneously hence decentralising its location.

Web 3.0 will be trustless and permissionless i.e; the network will allow the users to interact with each other without a mediator and anyone will be able to participate without the authorisation of a governing body. This will result in a Blockchain or a peer-to-peer mode of communication and storage.In contrast to Web 2.0 where the user was the product, in Web 3.0 the user will now truly be the content owner. All the data generated by any computing resource will be sold by and to users through decentralised data networks, ensuring that users retain the entire ownership and control instead of a middleman.

An example of a Blockchain transaction. Image credit: Wikimedia Commons

Experience Web 3.0 for the first time with Myraah. Store your Files, Images, Videos, Websites, Data and NFTs on secure & distributed storage. Built for speed and simplicity, Myraah’s Web3 storage solution is paving the way for a more resilient internet.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Dark and light, large and small, loud and soft, all of these are relative measurements on a scale. Just like a day cannot exist without a night, website elements cannot exist without contrasting each other on a scale.

In website designing, we usually talk about scale when we are referring to size and its relationship with different design elements. Designers may also consider proportions that indicate how well the design has been scaled.

In this blog we will understand the related concepts of Size, Scale and Proportion.

Scale

Scale is a relative measurement of an element or object. It is a progressive classification of some quality like size, rank, amount or importance. In website designing, when we talk about scale, we are typically concerned about the size of the element.

Everytime we make a comparison between the objects, we scale them. When we say something is big it’s immediately seen on a scale and compared to something smaller in size. A single object has no scale unless it is viewed in comparison to another object. Scale needs the context of another object to exist.

For example, the image above shows short, mid-sized, and tall men. We can only compare these because the other is present, if we remove any 2 figures, we can no longer say which one is tall or short.

The moment we place an element on the layout, we have something to compare it with. We can compare it with the webpage or browsing window, with other elements, space around the element that would create a figure/ground relationship between the element and whitespace or to a common standard like size of a table or the television.

Scale communicates the relationship between elements. Two elements of the same dimension when placed on the same point on a scale of size is communicative of that they are similar in some. Similarly, two elements with different dimensions at different points on the same scale communicate that they are not the same.

Scales are paramount and are used across many design principles. Through scale, we can show contrast between different elements as well as similarity in groups of varied elements. Scales communicate relationships between elements. Two elements of the same size are perceived as related in some way. Two elements with notable differences in size are perceived as different.

Through scale, designers can create a variety of varied visual weights that would lead to:

• Dominance and focal points
• Visual hierarchy
• Balance
• Flow and
• Rhythm

Scales can be used to create an illusion of depth as larger elements/objects tend to overpower and advance while the smaller elements/objects tend to recede into the background. Larger elements appear to be closer and smaller elements appear to be further away thus creating illusions. Scaling creates perspective in the layout.

Image source

It can also be used to create icons, for example, the icon below denotes a series of three curves that are scaled in relation to a dot.

Scale can also imply the meaning of an element. For example, in the image below, the larger square dominates and confronts the smaller square communicating pressure. It imposes its will and exerts its influence on the smaller square.

Important information can be communicated through scale alone. By adding a relative contrast in size designers can create an interesting association between two design elements. A composition where contrast exists along a scale creates a comparison that communicates meaning. The layout becomes active by adding contrast and implies meaning.

Image source

Image source

Lack of scaling would lead to a static and boring design thus hampering user experience. It would also create competition between the elements and leave the user to determine and create a relationship in the composition.

Although contrasting is interesting, the similarity of scale is important. When everything contrasts, it may get tedious and confusing for the user to determine the scale and perceive the layout. A perfect blend between contrast and similarity works better. The designer should determine how much of each should be used and scale them effectively.

Size

Size refers to the physical dimensions of an object. Size is an absolute information.

Web designers make a lot of choices about the size of the overall page entailing the size of the sidebar, header, font size, content area, images, footer and main menu. Every element on the page is displayed at some size. Designers size the elements and images to fit within their design, set the text on the page, and build a perception of mass through size.

Sizing can also help the website users and potential customers to find what they are looking for quickly and easily. Size can also be used as an effective design tool to draw user’s attention to key website features and important information by using visual hierarchy. The designer could make the most important content larger and position it at the top of the page.

Image source

Users expect everything to appear in absolute measurement. These measurements may vary as the designers resize the webpage or when viewed through a tablet or mobile that includes different dimensions. But at any discrete point, all the elements are displayed with fixed dimensions and size.

Image source

Image source

Image source

Proportion

Proportion refers to the relationship between the elements on a scale with respect to a comparative magnitude. Proportion is the ratio between parts of the elements and the whole layout. When one element changes, the other must also vary in the same proportion to create a better user experience.

Proportion is usually defined as a comparison of dimensions or distribution of forms. Proportion can help create symmetry and visual weight. It can also help ease the tension and cognitive load of a user.

Certain scalar relationships in the layout may be pleasing and attractive while others are off. If the different sizes of elements are arranged in proportion they are likely to enhance user experience and create balance and harmony.

Image source

Proportion done well creates unity in the composition. The universal way a human would apply proportion to a standard of measurement is the human body. Users tend to judge the size of the objects by their own experience of human proportion.

Image source

Generally proportion is only noticed when one or more elements are out of proportion with other elements in the layout.

Users respond to proportion emotionally. When something is out of proportion it can evoke feelings of disorganisation and confusion. Designers should note that they are communicating varied messages by placing elements in and out of proportion and making appropriate decisions based on what they want to communicate.

Image source

However, designers should also note that elements that are out of proportion grab the users attention, just like in the image below.

One aspect of the website design where proportion is present is the layout. Designers need to identify if their layout is fixed, fluid or elastic. Do the elements of the design also scale when the browser is resized? How large is the header in comparison to the footer? Are they in proportion with each other and the content they contain?

Think of a web page or a blog where drastically increasing the size of a header has no impact on the content body of the blog. The heading text grows while the size of the content body remains the same. This way the entire blog will look out of proportion. If the size of all the elements were changed in the same proportion as the header, the blog would have been more appealing and user-friendly.

Image source

Conclusion

Size, scale and proportion are interrelated concepts and subtly enter design thinking and website layout. These elements allow the designer to manipulate the ideas of many design principles.

In designing when we talk about scale, we refer to size. We often compare and contrast objects with their opposite ends on the scale. Objects contrast through a scale; greater the difference along the scale, greater and better is the contrast.

When the scale is in harmony, it is in proportion. Proportion helps to create unity and harmony in a design. Elements out of proportion evoke emotions, drag attention and sometimes make the design look shabby. However, a purposely done out of proportion element can communicate varied meanings.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Every creative endeavor has a beginning point. For the content writer, that starting point is the article’s outline. For a digital illustrator, the beginning is the initial sketch.

A wireframe is crucial if you’re looking to make your website appealing. Wireframing is the beginning point for an app or website design. It’s the proverbial backbone behind every optimal website or mobile app.

This blog will highlight the benefits of wireframing for UX/UI projects. We’ll explore multiple wireframing types, how they work, and how to design one. Here’s everything you need to know about wireframing.

What Is Wireframing?

Wireframing involves creating a 2D visualization of what the finished product version will look like. A wireframe is the simplest representation of a web or app product’s design. It’s also the fastest way for a design team to get ideas down.

A wireframe is the very first draft of a product’s user interface. It often contains grayscale shapes and the bare minimum design elements.

Here’s what to expect from a wireframe:

• Squares or rectangles representing icons and images
• Lorem ipsum” placeholder for texts
• Squares with a grey filler representing buttons.
• No background color, maybe a grey palette
• Static design elements

Image Source

At What Stage Do You Need a Wireframe?

Wireframing happens during the exploratory stage of a new product cycle. The exploratory phase involves UX/UI designers testing product scope, assessing business demands, and collaborating on design ideas. You can facilitate this collaboration with a free online meeting service, make assessments, and draw conclusions.

The wireframe is the total of conclusions from the exploratory phase but in the form of a simple 2D iteration. Designers can build on the wireframe using insights from user feedback, delivering a more comprehensive product iteration like a prototype.

Why Your App Project Needs a Wireframe

Some designers argue that wireframes are a needless step in the design process, but many design teams still rely on wireframes. Why’s that? The simple reason is that wireframes add value to your product’s production process.

Here’s how:

Life-like Product Assessment

A wireframe takes an imaginary product idea and brings it as close to reality as possible. The new representation of your product can give you a new perspective. A product idea can often seem great until you see what it might look like. If the team has a bring your own device policy, you can have the chance to see what the wireframe looks like on different screens.

• It helps you make your product ideas more tangible
• It shows you what works and doesn’t from your initial idea
• It guides your next steps
• It facilitates informed product design decisions

Product Validations

The end user of any web or app design is the customer. Therefore, it’s important to ensure that your product ideas resonate with your target audience.

A good wireframe can help you understand what your customer wants. Even if it’s a 2D depiction containing boxes and arrows, how people react can inform product direction. A targeted outreach program for your product is more effective when a wireframe is involved.

Compare Multiple Designs

Wireframes are cheap and easy to create. Therefore, you can compare multiple designs and build on the ideal one for your product. Rapid wireframing procedures can help you explore multiple routes, ensuring that you’re leaving no stone unturned.

Allows for Easier Communication

Internal and external stakeholders will spend too much time explaining decisions and ideas without a wireframe.

A wireframe gives the team something tangible to discuss, debate, and collaborate on. And with an enterprise communication solution, analyzing and dissecting the wireframe in real-time is straightforward.

Image Source

Types of Wireframes

There are three types of wireframes, and they differ in the amount of detail they contain.

Low-fidelity Wireframes

This is the most basic representation of the app or web product. It’s the design’s beginning point and is often rough, with minimal scale, pixel, or grid accuracy.

A low-fidelity wireframe only contains block shapes, mock content, and filler text. They’re ideal for starting design conversations, selecting the right navigation layout, and mapping user flow. They’re also the best option for situations where you have multiple unique product concepts.

Mid-fidelity Wireframe

The most commonly utilized version, a mid-fidelity wireframe, is a more accurate iteration of the product layouts. While there’s not a lot of focus on typography or images, a mid-fidelity wireframe can indicate headings, body content, element prominence, and more.

High-fidelity Wireframe

Are you looking for comprehensive attention to detail? A high-fidelity wireframe will include written content and feature images plus pixel-specific layouts.

The comprehensive nature of high-fidelity wireframes makes them ideal for the end stages of product design. A high-fidelity wireframe can help you finetune the product’s user experience and its ecommerce personalisation features.They’re also great for exploring interactive maps and complex menu systems.

Image Source

Step-by-Step Guide to Designing a Wireframe

It’s important to remember that wireframing is a creative process. Therefore, there’s no one-size-fits-all method to building one for your product.

Here, we’ll provide a step-by-step guide to designing a wireframe. But design teams can always proceed in a different order depending on creativity, project, and available resources.

Step 1 – Wireframe the UI for Each Screen

This first step is about adding the different components to individual wireframe screens. This step is all about transferring the elements from your paper drawings to a basic wireframe on a digital screen.

It’s important to keep things simple while wireframing the UI for each screen. Use UI components that reflect functionality as opposed to visual elements. This step should be about providing better detail than paper images while keeping it functional.

Step 2 – Time for Visual Design Elements

It’s not uncommon for this step to cause fierce debate within your design team. It’s all due to this question – how much visual design should be in your wireframe?

Remember that a wireframe should be a simple product iteration. It’s a foundation that should allow the design team to fill in the blanks when the time comes. Therefore, you shouldn’t bother with color palettes and typography.

Instead, the extent of visual design should be to create a low-fidelity wireframe that indicates basic layouts and structures. Your visual design should put a premium on layout and using space correctly to enhance user experience. Doing so will help with design interaction and readability.

Step 3 – Lorem Ipsum or Real Content?

On one side, lorem ipsum placeholder text means you don’t have to wait for real content to be ready before designing your wireframe. Design can move forward while the content team creates text for the web or app product.

Conversely, lorem ipsum may lead to mistakes in designer calculations. As much as they’re similar, real content won’t exist exactly like lorem ipsum. It won’t have perfect alignment, and there’s no way to tell what the eventual text distribution will look like.

Content is a crucial way to build customer relationships. Therefore, the ideal choice depends on your team and product demands. We do advise against relying too heavily on lorem ipsum. Doing so may mean a few unpleasant surprises later in the design process.

Image Source

Step 4 – Wireframe Navigation

Designing the information architecture for your wireframe will force you to think about product navigation.

It’s normal not to be fully sure of how different parts of the product will tie in together. The design and developer team often slice and chop at the navigation system using ci processes.What is ci?

You want to create a navigation system that’s fluid without straying outside the boundaries of logic. It’s very easy for new product users to feel lost. Therefore, it’s important to ensure they can tell where they are at any point within the product interface.

If you’re designing an extensive product, you may want to consider two navigation menus. What makes it to the primary menu? What product features have a supporting role and should make it to the secondary menu? Decisions like this are an important part of designing the wireframe.

Image Source

Step 5 – Add a Decent Level of Interaction

The main components of a wireframe should be user navigation and information architecture. It should be about how it looks and fits without the distraction of aesthetics. But there is a place for interaction design in a wireframe.

It’s important to include a few basic interaction moments in your wireframe. In fact, doing so can make the website more intuitive and change the way it feels for users during product testing.For instance, a button should lead somewhere, and a dropdown menu should be responsive.

There’s Your Guide to Wireframing

Above, we have provided answers to the common questions asked about wireframing. A wireframe is a crucial cog in the design process for an app or web product. Design it well, and you’re setting your project up for success.

Authored by:

Grace Lau – Director of Growth Content, Dialpad

Grace Lau is the Director of Growth Content at Dialpad, an AI-powered cloud communication platform for better and easier team collaboration. She has over 10 years of experience in content writing and strategy. Currently, she is responsible for leading branded and editorial content strategies, partnering with SEO, cloud PBX phone system, and Ops teams to build and nurture content. She’s written for websites like FlippingBook and Mailmunch. Here is her LinkedIn.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

So far, in the series on design elements, we have focused on specific elements that we have added to our design. We started with dots and points and journeyed till we added dimensions to volumes and concepts of optical mass.

In this blog, we will move beyond the objects themselves and consider organising and structuring elements to create visual hierarchy in the form of textures and patterns.

What is a Structure?

When we place two or more elements in a layout, there appears to be some relation between them that forms a structure. This organisation between the elements makes up a complex and interesting structure.

Structures, especially textures and patterns are used to differentiate one form from another and its surrounding whitespace . They add a sense of depth and realism to the design layout. The structure can be either organised or random and added to individual forms or elements or to the space around the elements.

Structures are defined by lines that connect the elements. These lines can be visible, invisible, active or inactive. Active lines are the ones that influence the structure and the layout in some way. Regardless of their characteristic, as long as the user can perceive a connection between the objects, structure lines are present.

For example, the first structure below (left) has visible and inactive structure lines, and the second image (right) image has visible and active structure lines.

A structure can be:

• Abstract: the structure lines are invisible and inactive
• Concrete: the structure lines are active, visible, or both. When the structure lines are visible, the objects themselves don’t need to be present to represent a concrete structure.

The structures that form can be geometric or organic and one can combine geometric elements organically or organic forms geometrically. Each of these convey a different message.

Structures lead to surface activity, meaning, they cover some of the area or surface and make it more active and engaging. The elements in the structure or the structure lines can be perceived as patterns and textures.

Pattern

These are planned structures that are geometrical, synthetic and mechanical. The geometric nature of the pattern means that it can easily be mass produced. Single shapes and elements can be used to create complex geometric patterns by repetition and rotation. Further, these patterns can be used to make another pattern complex and interesting.

Just like in the first image, the shapes are geometric in nature and when combined they form a complex geometric pattern – snowman.

In this image, a pattern is formed from consistent and repeated structural relationships

By increasing the density of objects or elements, the user can perceive the pattern to have a darker value. Changing the density of the pattern over the surface can create a perception of transition from light to dark that mimics the play of light over the surface. Patterns when employed this way tend to create a more attention-grabbing version of structure than when textures are used in similar ways throughout. For example, the pattern below that mimics light creates a stylized look.

Patterns add richness and depth to a design. They make the whitespace of the design look active and energetic. They can also be used as supporting backdrops for images and texts as long as they don’t increase the cognitive load when placed on top of the element they aim to support.

Source

Source

Source

It is vital to remember that patterns are complementary to the main design or are supporting elements. Patterns support the message, they are not the message on their own. The content, message and style of a pattern should enhance the message the designer is trying to convey through an element. They can quickly overwhelm the design and elements when overused.

Texture

Structures that are formed from irregular or random relationships over a given area are known as textures. They are natural and organic in nature. The size, shape, density and interval between the elements, objects, and structure lines of the texture may vary. This variety is what leads to the perception of the texture being natural, random, or organic.

Textures are physical in nature. We can touch and feel them. They can be smooth or rough, hard or soft. Obviously, web designers cannot actually create these physical qualities but can create a perception of them for users. When working in a 2-dimensional format, designers create implied textures as opposed to real ones. The goal of a designer is to make the users experience how the textures feel and evoke the emotions associated with it. Textures allow the users to take advantage of this experience in 2-dimensional picture planes.

Source

Source

Source

This physical quality gives texture a sense of realism and adds depth to the structure thus making it 3-dimensional. The connection between the elements and physical world can give a greater sense of realism to the design. The more consistent the textural irregularity and less density across the surface, the flatter or more 2-dimensional the texture appears. Greater contrast and irregularity leads to greater perception of depth and more 3-dimensional the texture appears.

For example, a flatter texture of sand in a desert does not create a perception of depth but the one with texture does.

When the density of a texture is transitioned from dark to light over the surface or element, it mimics the play of light, further creating a sensation of depth. Unlike other patterns, these elements will seem more realistic and engaging and not come across as stylized. For example, in the element below, the texture mimics the play of light across a surface and creates volume that makes it more realistic.

Textures can be created from lines, dots, forms, patterns or structures. They can be added within the contour of an object or element, or they can be added to the space outside the element.

Texture, in website designing can be used to:

• create areas of visual interest or focal point in the layout.
• create contrast within the element, object or design composition.
• help to visually balance the figure and background of a layout.

Conclusion

Both patterns and textures are attributes of structure that designers can add to their designs. They can be added to planes, whitespace, and surfaces around the form. They can be used to add dimensionality to turn plane surfaces into volumes. They also drag attention to whitespace that has texture or patterns in contrast with a textured/untextured/patterned/unpatterned element.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

2021’s fourth quarter saw mobile devices (tablets not included) account for over 52% of worldwide web traffic. While these numbers are staggering, they’re a call to arms for ecommerce business owners.

The stat above means you risk losing half of your potential customer base without a responsive mobile site. Poor user experience for mobile visitors will drive them away. Worse, it can affect your search engine rankings.

The good news is you can make your website mobile-friendly and boost SEO rankings by following proven optimization strategies. Here are 9 of them.

Make the Website Responsive

A responsive site is the best method to create an ecommerce website that works optimally on mobile and desktop devices. A responsive site includes the same information and content across different devices. But, it responds to the viewing device, optimizing its visual appearance to fit the screen.

The arrangement and design of website elements will change with the screen size. Say a featured image is beside a text block on a desktop screen, a smartphone user will see that image beneath the text block.

A responsive design makes your website accessible to mobile users across the spectrum. The best part is it offers this accessibility without omitting any information for mobile visitors. And, while it may mean a little more work,Google endorses this strategy.

Optimize Your Website Content

Identify the primary goal of each page on your website. Then, work to make this message prominent in the simplest way possible. You can also tweak font size and text placements to ensure a mobile visitor will quickly see the main message.

You’ll also want to avoid big chunks of text on a mobile page. Huge text blocks can seem daunting to the average smartphone user. They may get disinterested and leave your website. Instead, use short sentences and limit paragraphs to 1-4 sentences.

Thanks to Google’s recent page experience update,making the web content mobile-friendly will boost your search engines rankings. However, keywords are the ultimate decider.

Ensure you’re incorporating relevant SEO keywords in your website content. More importantly, these keywords must sound natural within the text. Proper keyword optimization will improve your search engine rankings, organic traffic and increase conversion rate ecommerce.

Image Source

Make Crucial Information Accessible

Customers make search engine queries on mobile phones because they need specific information. This info can be a customer service number, business address, or answers to questions about a product.

Start by identifying the answers and information visitors to your mobile website want. Then, make the content as evident as possible on the mobile homepage.

Of course, it’s impossible to load all this information on the homepage. Just make sure the route to accessing this info via a mobile device is easy to navigate. A dedicated FAQ page that answers customers’ common questions can also come in handy.

How fast your customers get the information they need can also influence your workflow. For instance, it can be hard to get your sales and support team to collaborate effectively for improved customer experience. But each team’s contribution becomes easier when they have a direct line to the customer — and the customer can easily find it.

You can always identify what mobile visitors want from your site by reviewing the numbers from analytical tools. For example, you can leverage the mobile traffic feature present in Google Analytics’ behavior panel.

Image Source

Make the Website Faster By Optimizing CSS and Images

The heavier your website, the slower it’ll be on a mobile device. And, Google is clear about its stance on website speed as a prerequisite for search engine rankings — slow websites will always lose out to the competition.

Imagine having to watch each page element load slowly on a mobile device. That doesn’t sound anything like responsive, does it? It’s a frustrating experience and a turnoff for mobile website visitors.

You can make your mobile website faster by compressing images before uploading them. Doing so will reduce their size without affecting visual quality. Thanks to hybrid cloud architectures, your team can work from anywhere, orchestrating a coordinated effort to remove heavy images on your website.

For videos, it’s better to host them on a third-party service and then embed them on your site. This way, the third-party service has to deal with the video’s size.

Accelerated Mobile Pages (AMP) is a functional framework that can quicken load times for your mobile website. Your web hosting provider can also impact loading speed. You want to ensure you’re using a credible provider to handle your website traffic seamlessly.

Image Source

Don’t Use Flash

Flash is useful for creating animations on a website. While its use is still passable for a desktop site, it’s a huge red flag for mobile websites. Using Flash on your website will make it less mobile-friendly. It slows page loading time and can be bad for crucial SEO rankings.

Worse, neither Apple nor Android devices support Flash. Therefore, the odds are high that it doesn’t load on a mobile website. Say an animation on your home page is a crucial part of your plan to pitch ecommerce personalisation and AR to prospective visitors. Designing it with Flash will mean mobile users can’t view it, thereby contributing to a poor user experience.

Evaluate Button Placement and Size

Making your website mobile-friendly involves tweaking website elements to ensure a mobile visitor can use the page optimally. One area that requires special attention is the buttons on your mobile website. After all, customers will need these buttons to navigate the website, fill forms, and link to other pages.

A button can be bad for mobile users if it’s an improper size or in the wrong location. Any button that a user can’t reach with their thumbs while holding the device is likely to be a pain. Therefore, think about how you hold a mobile device when deciding where responsive buttons should go on your website.

The way your website design utilizes space can affect user experience.

Remove all Pop-Ups

Most mobile users won’t bother to find the tiny “X” that closes pop-up ads. Instead, they’re more likely to close the page and find an alternative option. This means zero tolerance for pop-ups or ads that block page content will boost your website’s mobile friendliness.

We do understand that some situations call for a pop-up ad on your website. The easy solution here is to ditch them for mobile visitors. Alternatively, you can set the ad to appear after the visitor scrolls to the bottom.

Image Source

Use Large, Legible Fonts

Evaluate how a font size looks on different mobile devices before making the eventual decision. The unofficial minimum font size for a website is 14px. While this font size may be great for a desktop, it may turn out too small for a mobile device.

Another way to make your site mobile-friendly is using easy-to-read fonts. A creative spark can prompt an experimental font choice. And, there’s nothing wrong with creativity, as long as you’re not sacrificing readability for it.

Bold, clear fonts are the go-to for mobile devices. Your visitors can read it clearly and will find it easier to navigate the website.

Contact center shrinkage is how long customer service agents spend in-office without taking a call. This shrinkage is a non-issue with a lead conversion page. The internet is always on 24-7. Therefore, you should prepare to accommodate visitors at all times.

This courtesy extends to nighttime visitors using dark mode on their mobile phones. Your choice of font type and size should remain easily readable on a mobile screen, even in dark mode.

Make Mobile Testing a Norm

Testing the website on multiple mobile devices is the best way to ensure you’re still providing a great experience to mobile users. A web design team with a BYOD policy will find it easy to leverage this strategy.

Different people can browse the website on their devices, noting difficult actions and interactions. Regular testing will help you identify those small, pesky problems that can be a big deal for a first-time visitor to your website.

The intervals between periodic testing sessions should be minimal. After all, catching issues fast and fixing them is the only way to truly deliver mobile-friendly experiences to customers.

Plus, you can always leverage technology to your advantage. Google offers a free testing tool that determines how mobile-accessible a page is. Here’s what it looks like:

Image Source

Cater to Your Mobile Customers

The strategies above will make your website more accessible to mobile users. And as long as you follow SEO best practices, they’ll improve your search engine rankings alongside. The sooner you start incorporating them, the better for your online business.

Authored by:

Grace Lau – Director of Growth Content, Dialpad

Grace Lau is the Director of Growth Content at Dialpad, an AI-powered cloud communication platform for better and easier team collaboration. She has over 10 years of experience in content writing and strategy. Currently, she is responsible for leading branded and editorial content strategies, partnering with SEO, cloud PBX for small business,and Ops teams to build and nurture content. She’s written for websites like Premio.io and Mailmunch. Here is her LinkedIn.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Depth perception refers to the ability to see the world in three dimensions. In a plane two-dimensional surface, depth can be simulated by the use of concepts related to depth field. In the previous blog we had discussed 5 ways a designer could create a perception of depth in website design.

In this blog, I will walk you through more ways a designer could create a sensation of depth via:

• Lighting and Shading
• Depth of field (focus)
• Reference to nearby or known objects
• Degree of contrast
• Colour
• The Parallax Effect

Lighting and Shading

As much as the light creates depth by adding external shadow, it also creates a perception of depth in how it plays over a surface of an object. It also offers clues about the 3-dimensionality and shape of that surface.

For example, gradients, embosses, bevels, and the like is how light is absorbed and reflected off a surface.

A surface can emit more or less light depending on its orientation and placement from the light source. Closer to the source of light will show a brighter surface with more light reflected. Just like in the first website design, it is evident that the source of light is from the bottom of the layout and in the second website design, the source of light is from the right side.

Depth of field (focus)

When our eyes focus on one object it remains sharp while other objects around it become slightly blurry. This difference in the sharpness and blurriness is called the depth of field.

The closer an object is to the one with focus, the lower is the depth of field perceived between the two. Objects that are further away from the focused one on the same plane, appear to be blurrier.

Just like in the image below, the die that is focused indicates a lower depth of field since the other dice are closer.

Similarly, the animal does not seem to be far away from the camera thus creating a lower depth of field.

However, in the image below, the mountain, sky and the sun are further away from the focused bridge. This creates a sense of depth perception.

This holds true regardless of whether or not the object in focus is nearer or further away from the viewer. It is the amount of distance from the object in focus that matters to the objects of our focus.

The blurriness is caused by the difference in depth with the objects in focus.

Here are some ways designers can create a perception of depth in their website layout:

Reference to nearby or known objects

When we perceive an object of known size it provides reference for all other objects in the layout. The size of the object can be known because it represents a real object or a person, or because the size has been pre-defined in layout.

We know that a human and a coconut tree cannot be of the same size. For us to make sense of this contradiction, we perceive a depth between the two objects with the coconut tree being further into the background.

The known object adds context for the unknown object tied to the absolute physical world and adds scale to the layout.

The nearby object adds a different context. An object can only be small in relation to another larger object.

Just like in the website designs below, it is evident that there is a difference between the size of a rocket and human. This creates depth of perception

Similarly, it is obvious that the moon cannot be this near to the earth. This perception of size of the objects creates reference for all other objects in the design.

Degree of Contrast

The contrast between an object and its background reduces when the distance between them increases. This is why darker shadows appear to be closer to the object that is casting it. It typically shows more contrast.

The first image (left) appears to have more depth due to greater contrast between the background and the object than the second image (right).

This also explains how depth of field works as greater the contrast in focus and blurriness, the greater the distance and depth.

Just like in the website design below, the figure on the right of the layout does not create a sense of depth because of low contrast.

However, in the website design below, due to colour contrast, the car appears to be 3-dimensional thus creating a sense of depth perception.

Colour

Cooler and darker colours tend to recede into the background, while warmer and brighter colours advance into the foreground.

This could be the result of the cool blue sky being further away than the warm earth. Mixing warm and cool colours adds a sense of depth in the layout by having some elements recede and others advance. This also occurs because of different visual weights that different colours carry.

Designers could use colours with different visual weights in their website layout, for example:

In today’s era of low attention, a designer must be creative and innovative to create a memorable experience. Even though depth perception engages users, web designers have found that the most useful way to achieve a sense of depth is by using parallax website designing.

Parallax Website Designing

Parallax scrolling is a computer graphic technique used by website designers to give a sense of faux 3-dimensional effect. This effect adds action and the illusion of depth by taking different visual elements and moving them at different speeds in the website layout. Some elements move faster and others move more slowly, while others may stand still.

As the user scrolls down the website, different layers of backgrounds or content move at different speeds and create an optical illusion. This is not a newly devised technique. In the early 1980s, game designers working on the Super Mario game used parallax graphics to create a perception of depth.

Today, parallax scrolling has become a trending web design since scrolling is easier than clicking; and a well-designed parallax effect engages users to scroll for more information and eventually click.

Two reasons why parallax graphics should be used are:

• They are ideal for storytelling

Designs are all about communication. When designers create a website design, they want to communicate with the visitors and narrate a compelling story about the product, brand, or a service. It allows the users to have a unique online experience. The designers could also make a one page website containing the required information or the story of the product or brand without having to navigate to multiple pages.

• It helps to improve users’ engagement

Reducing the website’s bounce rate is one of the goals every designer has. By utilising parallax designing, the designer can stimulate the user with a dynamic experience that can tend to engage and grab the user’s attention.

Some of the distinguished examples of this type of designing are:

• Firewatch



Firewatch uses parallax in its landing page to create a genuine perception of depth. As the user scrolls down, he/she begins to perceive that they dive into details. The designer has not even attempted to hijack scrolling, meaning that the user can scroll at his/her own pace and not experience cognitive load.

• Every Last Drop



Every last drop excellently demonstrates the concept of “show, dont tell.” Instead of long content or audios, the designer communicates the message to the user by utilising parallax design. The design demonstrates how much water we consume daily. As the user scrolls down, they see scenes from daily life with information about water consumption.

• Feed Music



Feed Music has parallax website design that creates a truly immersive digital experience for the user. They have utilised a split screen layout that features 3-dimensional images paired with contextual information. Designers have pinned the information details to the images and as the user scrolls down, they see new content blocks and the relevant visual 3-dimensional image representing it and creating a depth perception.

Conclusion

By utilising the concept of depth designers can not only control the hierarchy of their design elements but also enhance user engagement and experience. By utilising lighting and shading, depth of field (focus), reference to nearby or known objects and degree of contrast, designers can create a sense of perception. By utilising parallax effect designers can not only retain the attention of their visitors but also provide an enhancing user experience by utilising engaging graphics.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Websites are two dimensional experiences but, we humans perceive the world in three dimensions. Our mind is hard wired to automatically figure out the third dimension in the two dimensions pictures – well the third dimension is – Depth.

Let’s begin by answering this question. Which line do you think is the longest? ‘Line A’ or ‘Line B’?

Isn’t it obviously Line B? While your eyes may tell you that option ‘B’ is longer, the length of both the lines are exactly the same!

Confused?

This is due to a famous optical illusion – ‘The Ponzo Illusion’. This is a strong example of misapplied size constancy. The side lines indicate depth through linear perspective. The reason behind ‘Line B’ looking longer is that we tend to interpret the scene using a linear perspective. Since the vertical parallel lines grow closer, we interpret Line B as being farther off in the distance. An object at a distance will have to be longer for it to appear the same size as the near object. Hence, Line B seems to be longer than Line A even though they are the same size.

By considering this illusion, designers can further explore how adding a sense of depth can make the design look more realistic and increase its visual interest. A 3-dimensional figure would also capture the user’s attention and lead them to engage and decode the design further. The designer can also set entry points and determine the flow throughout the design.

Human mind perceives the world in three dimensions. Objects around humans exist in 3 dimensions but on the screen it is limited to two. By adding a third dimension, we can make the digital world appear more life-like..

What can the designers do to create an illusion of depth in their design?

In this blog, I will walk you through 5 ways to add depth in the design:

• Occlusion (overlapping objects)
• Size and Shape
• Texture
• Cast shadows
• Location on the Design

Occlusion (overlapping objects)

This is the strongest cue for depth perception that overrides all other cues when a conflict is present. When one object/shape overlaps a part of another object, it is clear that there must be some amount of depth between them.

Objects/shapes that are near overlap the objects/shapes that are further away. The partially overlapped objects in the background must be recognizable by the user to perceive its complete shape. If the user is unable to perceive its complete shape, the objects/shape might be considered as sitting side by side.

For example, in the design below, the left figure of occlusion creates a stronger depth cue than the occlusion on right. This is because transparency in the right figure can make it difficult to determine which shape is in front and which is behind.

Transparency is one form of occlusion where the user is able to see through and past the other object. For example, the design below hampers the user’s depth perception since transparency of these figures makes it difficult for the user to determine which figure is in front and which is behind.

However, in this design below, the moon as well as the round planet create a sense of depth by employing occlusion. When occlusion occurs, the viewer fills in the missing details of the hidden design/object.

Parallax is a way of showing moving objects/elements overlapping one another. One way to employ this principle is by having the more important information or design occlude the less important information.

For example, in the design above, the square shape that contains vital information is overlapped with the rectangle containing less important information

Size and Shape

Larger objects appear to be closer and smaller objects appear to be farther away. By placing different sized objects/elements near each other, designers can add a cue that the difference in size occurs due to difference in depth. This also helps the designer to create a perspective of size and scale that shows the depth of composition.

Just like in the design below, it is evident that the shark (design 1) and the circle (design 2) are nearer to that of the other sharks and circles respectively. The designer has created a sense of depth by manipulating the size of the figures.

By varying scale in a design, the designer can create perspective and again, this can be used to grab attention towards relevant information.

Texture

Just by the literal meaning of it, texture implies a sense of depth as it aims to let one feel the surface of an object. Textured elements appear to be smaller and more densely packed when the distance increases and they become farther away. Designers could use texture that mimics something in real life as a reference to create a sense of depth, such as, grass or water.

Cast shadows

A shadow cast between two elements, objects or shapes gives a perception of relative distance between the two. Drop shadows are perhaps the most common way a designer adds depth to a design. Reflections can also be utilised in a similar way since they appear on a different surface.

When the shadow is smaller, darker, firm, and also nearer to the object casting it, the object appears nearer to the surface casting the shadow. By making the shadow larger and lighter and placing it away from the object casting it, designers can increase the depth. By blurring the edges of the shadow, the depth can be personified.

Just like in the below website design, the designer casted the shadow of the objects in such a way that it appears to be lifted from the ground.

However, in this website design, it is evident that the objects are in proximity to the surface.

Location on the design

When elements are seen higher up on the design, they are usually perceived to be farther away. This has to do with our surroundings and how humans have been conditioned.

Consider the world around you. What’s above is sun, moon, sky, clouds and they are farther away from what’s down here – ground, sea, grass, and yourself.

Naturally, humans in their surroundings have a 3-dimensional experience with the things they see down here (ground, sea, grass) and those are the things they are physically connected with, the things that are closer.

The clouds, the sky, the stars, those things we see above are also further away from us.

Just like in the design below, by placing the elements lower in the frame, the elements appear to be nearer than the computer that is located on top.

Summary

Understanding depth gives designers more control over the hierarchy of their design elements as varied elements are placed at different depths.

Every picture, image, or design divides itself into figure and ground. The greater the depth, greater is the distance between figure and ground, and the foreground element becomes visual.

Since the website is only 2-dimensional, the designer imparts a sense of depth through visual depth cues such as: Occlusion (overlapping objects), Size and Shape, Texture, Cast shadows and Location on the Design.

These cues in their own way are unique and communicate depth.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

In the last few articles we looked at zero and one dimensional design elements like white space, dots, and lines. In this blog we will understand what a culmination of lines would result to: Forms.

A form is a positive element placed on the page as opposed to a negative element which is the space. Everything in a design is either form or space, positive or negative, figure or ground. These forms are two-dimensional. The concrete version of forms’ surfaces, or planes is known as shapes.

Shapes are two-dimensional figures that have recognizable boundaries with a combination of attributes.

Planes, surfaces or shapes have a higher tendency to be perceived as dots than lines. The larger the surface, the more its dot-like characteristics become secondary to its contour and size. Shapes can still be perceived as dots if the space around them is large enough and elements are small.

However, as the dot grows larger, its size and contours dominate and it is perceived as a shape

Hence, the shape can be a result of negative space.

The more active the contour, the more dynamic the shape appears to be.

Did you notice how the contour of the shape on the right demands more attention than the simple circular contour of the shape on the left?.

Shapes are more than just practical and constructive tools. Their structure is what allows the designer to communicate visually. Along with the other elements of design, shapes allow designers to convey important information and emotions in a nonverbal way. They also aid with:

• Organising information by connection and separation
• symbolising different ideas
• Creating movement, depth, and texture
• Conveying mood and emotions
• Leading the user’s eyes from one element to another

Types of shapes

We group shapes under two main types:

Geometric Shapes – These shapes have regular contours and can be drawn using a ruler or compass. Simple or complex, these shapes can produce a feeling of order or control. Circles, polygons, squares, and triangles are all examples of geometric shapes.

Organic Shapes – Organic shapes have irregular and complex contours. These can be drawn free hand or resemble shapes found in nature. The variation in structure makes them appear more like objects in nature, that are not regular as geometric shapes.

A subtype of Organic shape is:

Abstract Shape – These are simplified styles of versions of organic shapes. Abstract shapes are a depiction of real things without being an exact representation of it. The icons we see in our web designs, phones and in street signs are a great representative of this type. Icons and Typographic glyphs are examples of abstract shapes

Meaning of Shapes

Square and Rectangles

While shapes are building blocks of our visual world, squares and rectangles are literal blocks. They express stability, consistency, loyalty, firmness, and safety. In most cases squares and rectangles create a sense of balance and honesty, thus making them the most commonly used geometric pattern in website designing.

They are generally not attention getters, though they can attract more attention when tilted on their side and presented as a diagonal. Web pages are built of rectangles. Most elements are defined by a rectangle regardless of how they appear visually.

Squares and rectangles are commonly used for call to action buttons. Traditionally, the content is placed in rectangular shapes. They are commonly observed in navigation menus and buttons.

Circles

Circles are near opposites of squares, rectangles or triangles. Squares may seem strong as bricks, but circles are perceived to be light as bubbles or clouds. Their roundness with no smart edges implies movement and makes them appear to be friendly. Wonder why we see so many circles used as accessory shapes in graphics, designs or even infographics?

The reason behind this is that the circles are very powerful and noticeable. The spherical shape influences feelings of users and instantly grabs their attention.

In design, circles have varied use for varied purposes. Circles are often observed as shapes or background outlines for logos.

In websites, they are mostly used for buttons or small icons or call to action.

Triangles

Triangles have two meanings depending on their shape: stable or unstable. When pointing up they may represent stability and power, however, when pointing downwards they indicate instability or decline. In general, triangles denote firmness, strength, power, and mostly imply motion and action.

Triangles are usually used in web-designing as a navigational or directional tool.

It is vital to understand that shapes signal visual elements. In a design or layout, when we place shapes together we create a seamless relationship between them. Be it simple or complex, this relationship can trigger feelings, convey important messages, engage users and emphasise a portion or layout and create movement.

When the designer groups/moves the shapes closer or further apart, they are applying the Gestalt principle :Proximity

In a design, geometric and organic shapes can combine together to create numerous design elements that we use to communicate. Brand logos are a good example of this.

Here, some of the logos are made with geometric shapes and some with organic shapes or some with a combination of both. Notice that proximity is the key defining factor in this. If we were to move some shapes farther away in the logo, they would have an entirely different look and meaning.

Shape psychology works best when it is subliminal. According to Levanier (2021) “People don’t usually look at shapes and consciously think of words like ‘stable’ or ‘dynamic.’ It is more about the unspoken feeling that shapes create.” Considering this, a designer can tactfully employ shapes by:

i) Using shapes that simplify decision making

Users are often faced with decision fatigue when presented with various choices on the internet. Although it is great to have a variety of options, it can get quite exhausting to compare and research about products or services.

Why not design a website that aims at taking that pressure off users? A designer can use geometric shapes to take the channel the user’s attention towards:

• Plans that offer the greatest values
• Most popular products amongst shoppers
• Products with special properties like eco-friendliness, no added preservatives etc.

ii) Use images with geometric figures to direct user’s attention

A designer can do more than pairing the geometric shapes and figures. They can select images for the layout that contain geometric lines and figures that would further subconsciously direct their attention on the page.

iii) Make the website more alive by using different planes

When designing websites for experiences and activities, a flat design may not convey what you intend on selling and prove to be non-engaging.

By placing key elements on different planes and giving them a 3-d feel, the site and the experience it sells will create a sense of excitement and adventure.

Summary

Shape is what makes up the foundation of a website layout. The purpose of a website design is to stimulate its users and enhance the user experience. Using geometric shapes in accordance with their symbolic meaning can have a great impact on the user’s subconscious mind. When used precisely, shapes can build attention grabbing and responsive websites that would make the user come back.

Understanding the feelings and concepts behind shapes can help the designers pick the best shapes for the web design and stay true to the brand’s visual identity. It is not necessary to crowd the design with many shapes, designers can minimally use shapes and yet enhance user experience. It is about the arrangement of shapes that determines the visual outcome. Designers must consider how the shapes interact with each other to communicate the intended message.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

Line

A line is a series of adjoining dots. Just like points, lines are also abstract. Line can be considered as a two-dimensional shape in which one dimension is larger than the other. When one dimension dominates, it appears to be a line.

Some of its characteristics are:

i) Just like the fundamental characteristic of a dot is attracting attention, the underlying characteristic of a line is to connect or unite. This connection can be visible or invisible. Confused? Let me explain this to you by giving an example.

When we place two dots on a page, they seem to have a connection and we tend to subconsciously imagine a line between them regardless of it being present or not.

ii) Lines are dynamic and they lead somewhere. Another defining characteristic of a line is movement and direction. This characteristic helps the designer to control the eye movement through composition. User’s eyes seek the endpoints of a line even if the endpoints are located outside the layout.

If the endpoints are located outside the layout, the sense of movement in the line is increased. When one endpoint is located inside, the direction is no longer infinite and it becomes specific to that point. Hence, the tension between these two endpoints increases.

iii) Lines can separate as well as connect content. When a line is perpendicular to an invisible line, it may emphasize the separation of objects. The line may act as a barrier.

Lines are not limited to only being straight. They can be angled or curved. A line travels in a curve-like structure around a fixed point; eventually connecting the starting and ending point, thus forming a circle. A circle is nothing but a line that thickens to fill the negative space.

Relationship between Lines

When two lines join, an angle is created between them. The joint or the meeting point of the two lines becomes a starting point to move in either of the directions along the 2 different lines. Multiple joints lead to a perception of altered direction, just like a zig zag pattern.

When the angle between the line is acute (less than 90 degrees) the movement is perceived as quick and rapid. In contrast, when the angle between the lines is obtuse in nature (greater than 90 degrees and less than 180 degrees), the movement is perceived as gradual.

The convergence of two lines increases the effect on its direction. The eyes cannot resist following converging lines to the point at which they converge. These lines give perspective and add depth to the layout

Separating lines focus on attention, identity of each line and the interval between them. Rhythm is created by varying the interval or varying the size of the line. A designer can also create depth by varying the thickness or weight of the line or by changing the interval between them. Lines with less proximity have more tension and draw the user’s attention easily. Lines further apart carry less tension and blend into the background.

Lines with weight when placed together create a thin space between them. This could create a figure/ground relationship where that space is perceived as a figure and the thick lines as ground.

Why to use lines in Website Designing?

Lines are the building blocks of a design that communicate emotion and information. A designer can use them to:

i) Organize website elements and content by dividing sections of a page or layout. A designer can group the sections that are similar to each other and vice versa.

ii) Make a statement by utilizing different sizes and textures. A designer could also use thick or dashed lines to draw the user’s attention towards coupons and discounts.

iii) Guide the eyes and provide movement by using wavy lines or varying thickness.

Types of Lines

Horizontal Lines

The term ‘horizontal’ gets its name from being parallel to the horizon and is associated with the earth-bound products and ideas. Horizontal lines are subtle and generally create relaxation or a calming mood. They cannot fall over and are indicative of stability and security.

In web designing, horizontal lines are known for their ability to organize content. When you observe grids or gridded layouts, horizontal lines balance and organize the elements.

Vertical Lines

Vertical lines are perpendicular to horizontal lines. They appear to be more rigid because of their standing-up-like appearance.

Vertical lines accentuate height, create a mood of grandeur or spirituality, and are implicative of stability. A great example of vertical lines usage is in the churches and cathedrals where there are long vertical pillars perpendicular to the ceiling that guide the eyes upwards.

In website designing, vertical lines can act as borders, stop and guide eye movement, draw the user’s attention and differentiate between important and unimportant parts of the website. They also tend to create a perception of length and indicate the user that there is more content to unfold.

Diagonal Lines

Diagonal lines are unbalanced and help to create movement and direction. These lines, unlike vertical and horizontal lines, are unstable and do not lay down or stand in a restful position. They are in motion and create a sense of tension and excitement simply by adjusting the angle of the lines – the steeper, the faster.

In website designing, diagonal backgrounds and slanting lines give an off-centre appearance to the design. It gives a skewed like appearance that draws the user’s eyes across the whole composition. It also creates natural breaks in the webpage content and gives a gridless appearance to the layout.

Curved Lines

Curved lines create a feeling of familiarity and comfort and suggest relaxation. They are sensual, elegant and turn gradually between endpoints.

The user’s eyes follow a curved line at a slower and more relaxed pace than any other type of line. They express fluidity and flexibility depending on the activity of the curve.

Using lines in Website Designing

A designer may use lines in the design when they want to leverage the fundamental characteristics like movement, connection, and separation. These characteristics help to organize the information and elements by becoming a structural glue that holds the design together. The borders around an element or an object help to separate them from other elements and groups.

A designer can utilize lines when they want to draw the user’s attention towards a specific information or button. This can be done by employing movement and leading the user to identify what lies at the endpoint.

Conclusively, a designer can :

• Use lines when they want to define space in some way
• Use lines to connect two or more elements on webpage
• Use a line to distinguish and provide a barrier between elements or content.
• Use lines to direct the user’s eyes through the design
• Use lines to lead to a focal point.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

1) Dots

Points are the simplest elements of a visual design. However, by definition, we cannot actually draw a point since to see it, one would require it to have dimensions.

What we can draw is a dot! In fact, dots are the building blocks of any other design. (Add image)

When asked to imagine a dot, what comes to your mind first?

A figure that is circular in nature?

While we often think of dots as circular in nature, they are not. A dot could be of any shape or form regardless of its size. Any mark could be perceived as a dot (or line) or a series of dots. Dots are points of focused attention. They are the focal points in our composition. They anchor themselves in the space and provide a reference point to the other forms around it.

Dots establish relationships with the space around them. The two most important of these are:

● Proportion – As a dot increases in size, we begin to perceive them as shapes, however, they still retain their fundamental dot-like qualities and characteristics. A square placed in the whitespace is still a dot. It still attracts visual attention which is a dot’s defining characteristic.

● Position – Once placed on a page, dots create symmetry or asymmetry. When aligned in a particular position on the screen, they immediately start to form a composition. For example, Dots in the scale (right) and a single dot (left) creates an asymmetric composition through its position.

This observation turns more interesting when multiple dots are present. When two dots are placed in proximity, the emphasis is shifted from the space between them to the relationship that the dots share. The second dot following the first dot implies structure.

But, as the space between the dots decreases, the tension between them increases. However, when it approaches almost zero (a tiny bit of space that is still present), the space overpowers them and becomes much more important than the dots. The tiny space holds all the tension.

Wonder how our visual system suddenly emphasises space than the dots?

Eventually as the dots move closer and have minimal proximity, they are perceived as a single object. Rather than being perceived as two different circles, they are perceived as a single altogether different shape. This leads to the formation of a more complex shape than either do individually. This occurs because the new tension is based on the appearance of depth. The space that existed between them in 2-dimensions has now been moved to 3-dimension. This occurs because that is the only way we can perceive the overlapping dots.

They create a new figure-ground relationship where one dot is perceived as a figure (foreground) and the other is perceived as the ground (background).

When the dots are far apart and they are well spaced, the human visual system emphasises the structure that is created by them instead of the individual dots.

In combination, dots can form an endless variety of structures. They can become lines or curves when placed adjacent to each other or can be perceived as patterns or objects when combined and placed in a particular form that may imply both – movement and direction.

2) How to use dots in website designing?

Single Page websites are trending and exponentially increasing day by day. One way to navigate this type of design is by dot navigation. It entails a series of dots in the right or left sidebar that indicate the number of pages on the website.

Apart from navigation, dots as ellipsis (…) have been widely used to communicate vital information to the users. They are often used to initiate action and increase users’ engagement with the webpage. Let’s understand this by considering some examples

An ellipses adds visual prominence to the text field and draws attention of the user. It also aids in minimising the words and nudging the user to fill in the blank by entering their own words thus enhancing engagement.

With just about 10 seconds available for creating that visually appealing impression on site visitors, it is vital to pay attention to each individual graphic or textual element that needs to go into a website.

The fundamental characteristic of a dot draws the user’s attention. Whenever the designer wants a user to look in a particular direction, or they want to emphasise important information, a dot stands ready.

Designers have also utilised dots to create minimalistic designs and logos that eases the user to interpret the design / logos with slightest cognitive load and increase in engagement in pleasure after decoding the design / logo; since our minds tend to fill the gaps between the dots and perceive the structure as a whole.

Conclusion

While we often consider dots as being circular in nature, they could be of any shape or form regardless of its size. Any mark could be perceived as a dot. Dots are points of focused attention and designers can effectively use them to enhance user experience by:

• Leveraging dot navigation on single websites.
• Adding an ellipses to enhance the visual prominence and draw the user’s attention.
• Aligning the dots in such a way that guides the user’s eyes in the desired direction.
• Create minimalistic designs / logos by using dots that eases the user to interpret it by reducing the cognitive load.

Just like white space is a building block for abstract points, dots are an elementary unit for other website elements like lines, shapes, volume etc.

In the next blog, we will consider the easiest element to build from a dot- a line.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

White Space

Consider the below stated clothing stores to shop for apparels. Where do you think the user would be satisfied and have a pleasant shopping experience?

Consider the space inside each of the stores. Where do you think the products would be sold more easily with a better ability to capture user’s attention and provide them with a better shopping experience?

You’re right! The image on the left would provide a better user experience. It aids the consumer’s attention and decision making process since the environment is uncluttered and breathable.

Whitespace is a design element that refers to the empty space between pictures, paragraphs, icons, buttons and other elements on the webpage. In simple terms, it is that portion of the webpage that is usually left blank and untouched in order to make the page more readable and easier to interpret.

Apple effectively utilizes whitespace in order to garner attention and impacts sales. The way Apple advertises its product is an art in itself by using whitespace. No distractions at all.

Have you ever considered whitespace as ‘spaces between the design’? While that may be a prevalent line of thought, however, it is vital to understand that whitespace isn’t just a filler between the design elements.

As much as design is about shaping and organizing, it equally entails what fills the space. It is perhaps the most important design element.

“Whitespace is to be regarded as an active element, not a passive background.” – Jan Tschichold

In technical terms, designers refer to white space as ‘negative space’. This term does away with the usual misconception about white space: white space needs to be white in colour. It could be blue, brown, yellow, red or any colour. Even a pattern/texture/background image that fills the background could be a whitespace or negative space.

What does space do?

First and foremost, space contrasts non-space. Think about your favourite music track. Music is created by a contrast of sound/tune against silence. Different sounds occur at different intervals; and the blend of both creates a melody.

Music is ultimately a patterned blend between sound and silence. Visual spaces are the silence in the music. It connects elements by being sparse and separates elements by being vast.

When the designer masters the art of contrasting the space between elements, he/she can control the aspects of the design entailing:

• Direction
• Flow
• Rhythm
• Balance
• Motion

Apart from this, whitespace also impacts:

• Aesthetics of the website
• Improves focus of the users
• Leads to effective communication

“It helps us understand what we see because it separates information and helps create a hierarchy. Without the appropriate use of white space, one thing flows into another with no relief, ideas merge, and the message becomes confusing. When that happens, communication ceases, and the design fails in its purpose.” – Alvalyn Lundgren

Types of Whitespace

Typically, we divide white space in two types:

1. Micro Space

Micro white space entails the smaller gaps and buffers in between the content. Micro space can be found between:

• Words
• Paragraphs
• Navigation links
• Letters
• Images or content in a grid

The aim of micro white space is to improve the readability and legibility of the content.

2. Macro White Space

In contrast, micro white space is the space between major elements in a design. It separates the elements by appearing in abundance. This can be found –

• In the margins of the website
• Around CTA buttons
• Around images
• Encircling the logo
• Separating the main content from other content
• Between the sections of a page

Lets understand this better by doing a little exercise. Open a new tab in your desired browser and search for google.com. What’s the first thing you observe? I bet it was the brightly coloured Google logo right? Where was this logo placed? What was around the logo? How did your attention get drawn immediately at the centre of the webpage?

Google uses an abundance of macro white space to naturally draw the user’s attention towards the centre of the page where the minimalistic design resides. The purpose of the macro white space is to enhance the website layout and make it easier for the user to navigate. This also helps guide the user’s eyes in the desired direction.

Active White Space

Active white space refers to the empty areas intentionally added to a webpage to aguide user’s eyes down the page or through a funnel of conversion and reach a conclusion. It helps create structure and flow on the page while guiding the user through the content.Active white space is typically asymmetrical and leads the user from one part of the design to another.

For example, a coconut tree centered in the canvas leads to symmetrical and passive space

Passive White Space

This white space refers to the gaps that naturally occur in design. They will be there with or without the designer placing them and do not guide the users. It is a leftover byproduct and does not contribute to the meaningful whole. It exists because the positive elements do not consume that space.

Passive white space is usually symmetrical.

For example, coconut tree when placed off centre, it creates asymmetrical space making the composition more active.

Passive White Space

White spaces play a pivotal role in empowering the designers to communicate and focus on the features of the web page that actually need to stand out as vital aspects. They help create a welcoming layout, thereby inviting users to stay on the website for longer durations. Below stated are some ways that allow a designer to design a website that is capable of enhancing user experience and creating a lasting impression:

i. An increased level of comprehension

According to recent research, it has been found that white space between paragraphs in the right and left margins increases comprehension of the content by almost 20%. In addition, users find it easier to process and focus on well-spaced content.

To best use this concept, designers could also:

• Colour code the content and group information.
• Pictorial / graphical representation of long areas of text
• Abundant space in between texts and paragraphs.

ii. Highlight the Call to Action (CTA)

Users have an average level of attention. They cannot recall more than one or two highlighted items while skimming through a website. Whitespace around the Call to Action (CTA) buttons and highlighted items tends to increase their prominence.

White spaces around CTA gives it room to breathe in and drives the potential customers in the conversion funnel. If the marketers want to make a product stand out, they could add white space around the product name and/or the product image or CTAs like “Buy now”, “Add to Cart” button.

iii. Guide user’s eyes

Designers can do this by organizing the webpage’s content into no more than 15 points on a single page. Further, the designer can set the order of priority for those 15 points, for example:

• Logo
• Navigation bar
• Hero image or hero header
• Text or paragraph

While positioning the content, designers need to decide on where the micro and macro space would be, that is, where each piece of content or group of elements would be placed on the screen.

Conclusion

White space refers to the emptiness of a webpage but there’s a lot of meaning and purpose behind that emptiness.

Whitespace is undoubtedly a vivid element that allows the designer to meet the site’s objectives in the best possible manner. By understanding and incorporating micro and macro space in the website design, designers can not only make the website user friendly but also enhance attention and decision making of the clients.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]

We live in a sea of advertising. Potential clients literally drown in thousands of ads that come at them from all sides: while browsing through the internet, checking emails, reading the newspaper, listening to the radio, looking at the billboards while driving, or watching a movie.

Advertisers are constantly challenged with trying to comprehend how to make their advertisement stand out in the overstimulated digital world and grab the attention of their target audience.

In this era of loud advertising, how can an advertiser persuade his/her clients and create an impact through advertising? How can he get his potential clients to invest their time, energy and attention in grasping the message he is trying to convey through his advertisement?

In this blog, I will discuss some tactics to make your advertisement more attention seeking and impactful by incorporating:

• Symbols
• The Metaphor Tool
• How to choose a symbol to present the product?

1. Symbols

One way to do this is by employing symbols that are connected to the message of the advertisement where there is a physical fusion between the symbol and the product or service being promoted.

Nivea devised a straightforward graphic, that has a lot of significance, to promote their night cream. It presents a half-opened can, exposing the cream inside the can. The cream resembles a half-moon which symbolizes ‘night’.

The tabasco bottle here has been represented as a fire extinguisher that is attached with a nozzle, pin, pressure gauge etc. It depicts how this small bottle can be extremely hot and spicy.

In this advertisement, Starbucks attempted to promote their seasonal coffees. Triple Starbucks cups have been lined up in a row. One would perceive the cream on top as a Christmas tree thus conveying the festive atmosphere and making customers understand the particularity of a product.

Use of such symbolic system in advertising can offer the advertiser dual advantage:

• An advertisement based on a symbolic system will be sophisticated and thus require the viewer’s interpretation.
• Symbolic advertising creates an immediate cognitive effect. Since the advertisement relies on visually created connection between the symbol and the message, it is very effective

A symbol is a cognitive tool that simplifies the process of human information absorption, but at the same time, it also attempts to complicate and cloud the direct assimilation of objects and concepts. These symbols serve to economize a user’s mental storage space, so that it is easier to cope with the environmental stimulation.

Interestingly, previous studies have concluded that advertisements with complex layouts and interpretations result in a more positive attitude and attention than advertisements with a stand-alone image. Once the potential client decodes the message, it increases their sense of pleasure and decreases their tension, further leading to the enhancement of the client’s attitude. Hence, a positive ad occurs when the advertisement is innovative, and the client is required to invest higher cognitive efforts.

Fusion is the act of creating a strong bond between the symbol and the product, so that they are perceived as one. Ads like these create a connection (visual), fusion, between the symbol and the product. The deeper the fusion between the components of a symbol and the product, the more easily an advertisement is likely to be remembered in the specific context of the product being advertised.

The product itself is used to create the symbol, just like in –

Burger King communicates with its audience through a symbol during easter. To advertise that the burger chain is open on Easter, they turned their burger to look like an egg thus representing Easter Sunday egg hunting.

Researchers have also indicated that successful fusion is when the bond is created between the product, symbol and the chosen message in the mind of the viewer. Intuitively, this process would necessarily increase “memorability” of the product and its message.

This can be accomplished by using certain graphic tactics. One possibility is to design the image of the symbol by exchanging one of its components with the texture of the product or with a graphic element identified with the product. For example,

Studies have indicated that walnuts are good for the brain, hence representing a walnut as a brain, the advertisement draws attention and is more effective. It makes the advertisement more appealing, logical and raises awareness.

The Red Bull advertisement is one of the most recognized and well-known advertising campaigns. They had spent approximately 15 million dollars in their campaign. The metaphor is their tagline- “Gives you wings”, the vehicle that drives the brand and has been linked to humor by its consumers. Red Bull’s first target audience were those who have long working hours, go for long drives, or study for long hours. With extreme sports and associating the beverage with those activities, Red Bull is trying to raise brand power. The message creates the image of confidence, positivity and energy. It attempts to make them believe that they can handle anything by reinforcing the idea of giving them wings.

The new campaign of Heinz ketchup had devised the metaphor, “No-one grows ketchup like Heinz ” This attempts to create an image that Heinz is healthy with no added preservatives, just one ingredient – fresh tomatoes. Additionally, the structure of the bottle is in the form of cut tomatoes further indicating usage of real and fresh tomatoes. This award-winning campaign utilizes a metaphor that is strong, straightforward and easy to process. Unlike Redbull, which utilized humor to advertise, Heinz associates freshness of picked tomatoes with their brand.

2. The Metaphor Tool

Some symbols can be clear and simple, but sometimes, when designers want to make a strong impact and send the message in the most creative way, they can employ metaphors. Metaphor is a figure of speech that associates two dissimilar things based on a feature/characteristic they have in common. For example, an eagle and a car are two completely different things, but one feature that they have in common is speed.

Even though their physical appearance differs, it is vital to consider other modalities that cannot be perceived by our five senses. There are various subconscious elements that evoke emotions and influence the user’s buying decisions.

For instance, even though the car can be seen, felt and driven, there are other facets that determine how we perceive it, such as feelings of power, security, or freedom. These facets are not part of the actual structure of the car but they subconsciously draw the user’s attention to the vehicle.

Metaphors allow advertisers to deviate from what would be expected. Zaltman posits that metaphors play a critical role in cognition – ways of thinking, representing, and knowing. Potential users also get a chance to interpret the advertisement in their own way, which enhances interactivity and engagement.

For example,

Many automobile agencies include a horse in their logo. The symbol of a horse is indicative of power, strength, speed, agility and stamina. We can identify the logos of Ferrari, Porsche, Ford Mustang, Eicher, Pegaso, Kamaz and many other organization with the horse logo.

Nokia used the metaphor “Connecting people” to convey the image of connecting people with their phones instead of having a conversation. This not only taps into the conversational aspect but also considers emotional connection with the person that is enhanced by the phone’s value.

Pedigree, the dog food has a perfect shape and resembles that of a joystick. It also satisfies the dog’s need and motivates it to follow the owner’s instructions. Hence, presenting the product in such a way grabs attention.

3. How to choose a symbol to present the product?

The more closely connected a chosen symbol is to the message or tone of the product, the more impactful the advertisement will be. If the chosen symbol does not connect to the product represented but to an exterior component, the customer may not connect the advertisement with the specific brand. Hence, if the chosen message is “efficiency”, we can select a few cultural symbols that represent the value:

Efficiency

An ant

A super computer

Japanese people

A swiss clock

If the message is “resilience”, we can list:

Resilience

Helix

Plum blossom

Semicolon

Koi fish

If the message is “trust”, we can list:

Trust

Rope knots

Chain links

Wax seals

Keys

If the message is “growth”, we can list:

Wooden blocks

Spring

Arrows

Graphs

If the message is “cleanliness”, we can list:

Cleanliness

Snow

Colour white

Water flowing from spring

Transparency

1. MILLER’S LAW: ORIGINATION OF MAGICAL NUMBER 7

Ever wondered, when exposed to a long list of elements, you seem to remember only some of it? This is because humans cannot retain much information in their short-term memory. This essentially holds true when people are bombarded with multiple abstract or unusual pieces of information in rapid succession.

Short-term memory presents a special interest for website designers. To enhance the user experience and interaction, designers must minimise the user cognitive load and reduce distracting elements.

The human brain is not optimized for data memorization that web pages often demand. Many usability guidelines are dictated by cognitive limitations. One way to overcome this and provide a pleasant user experience is by utilising Miller’s law.

This law originates from a research paper published in 1956 by a cognitive psychologist Miller titled as ‘The Magical Number Seven Plus or Minus Two: Some limits on our capacity for processing information.’ The experiment purports that the number of elements a human mind can hold in working memory are 7 +- 2. Simply put, the human memory can typically hold five to nine strings of elements or words regardless of the amount of information in one stimulus or element.

2. Chunking

One of the crucial findings from Miller’s experiment was that the quantity of the information does not affect the memory as much as the number of information carrying chunks being memorized do. The term ‘chunks’ refers to a collection of familiar pieces of information that have been grouped together and stored in a person’s memory.

Miller’s experiment and his passion for memory span was not centred around the number 7, but on the concept of chunking and our ability to memorise information. Although there are factors that influence how many chunks a person can retain (familiarity with content, context, specific capacity), the key takeaway message is: short-term memory is limited, and the method of chunking helps us to retain information more effectively.

In the field of Website designing, chunking usually implies breaking content into small, distinct bits of information (chunks), in contrast to undifferentiated mass of atomic information items. When designers chunk content in a design, the content becomes easier to comprehend and remember.

Users can then effectively scan the content, identify the information that aligns with their goal, and utilise that content easily and quickly. By structuring the content into visually distinct units with clear hierarchy, designers align the content in accordance with how people evaluate and process web pages.

The simplest example of chunking can be found in how we separate debit card numbers by utilising the concept of chunking which would have otherwise been a long string of digits (significantly more than seven) hard to process and memorise.

Another commonly observed example is while browsing the web. Users are often exposed to an inevitably dreaded ‘wall of text’ that entails content with lack of formatting or hierarchy and exceeds the appropriate line length. This content is more difficult to process as it increases the cognitive load and may result in lower user engagement with unpleasant user experience.

When compared with the design alongside that has required formatting along with appropriate line lengths, the user experience is impacted drastically. The design is an improved version of the same content. Heading and subheading have been added to provide hierarchy, whitespace has been used wisely to break the content into processable sections, line length has been reduced to improve readability, keywords have been highlighted and underlined to provide contrast with the surrounding text.

This concept can also be leveraged to provide structure to information dense content. This not only makes the result more visually pleasing, but it also makes the content scannable. Users who are skimming the latest headlines can determine whether the article is worthy of their attention and can quickly scan through it.

Although being a vital concept in website designing, only chunking the content does not enhance user experience. Neuroscientists have identified various eye scanning techniques after conducting decades of research that have been known to impact the engagement with content on WebPages. Eye tracking is a significant tool for website designing that shows what areas of a webpage are grabbing the user’s attention and areas that are being ignored. This also helps us to understand how the user searches and grasps content.

3. The F-Shape Eye Scanning Pattern

Nielsen and Norman’s (2006) eye tracking research has elucidated that users read web page content in an F-shaped pattern, that is:

• Users first read the content in a horizontal movement, usually the first few lines on the upper part of the content area. This forms the F’s top line.
• Next, the users move down the page and hunt for keywords or points of interest. Once found, they read across forming the second horizontal line of F. This usually covers a shorter area than the previous movement.
• Finally, users attempt to scan the content’s left side in a vertical movement forming the F’s stem.

For example:

This type of scanning technique is utilised for content heavy pages like blogs or articles. This pattern can be incorporated by enhancing the first two paragraphs by highlighting headers, bolding subheaders and including bullet points and keywords.

Heatmaps generated after conducting research indicated that:

• The first two lines of the page receive more attention than other lines.
• The first few words on the left-hand side of each line of the text receive more fixations than the latter.

Researches have also indicated that the users may fixate on more words and read towards right again, thus forming an E. Interestingly, a recent line of research indicates that content in right-to-left languages like Arabic, users tend to read content in flipped a F-shaped pattern.

4. Z-Shape Eye Scanning Pattern

Another evidence based eye scanning technique is Z-shape scanning pattern. This pattern is applicable in almost every web interface since it includes almost all core elements like brand, hierarchy, structure, and call to action. Z-pattern is ideal for interfaces where call to action is the main motive. This usually applies to web pages that are not content heavy and leverage whitespace effectively. This scanning arrangement mimics the route for the visual system to travel from left to right in a zigzag pattern:

Users first scan from top left to top right either because of the menu bar or the subconscious habit of reading from left to right. This creates the horizontal line of the alphabet Z.

When the eye reaches towards the end, it shoots down and moves towards left again, perhaps because of the subconscious reading habit, creating an imaginary diagonal line.

User then repeats the horizontal search in the lower part of the webpage, again forming the lower horizontal line of Z.

For example:

When applied to web pages, the most important content can be placed along the top and bottom corners which visually connects them diagonally.

5. SUMMARY:

Grasping the user’s attention is an ever going battle a designer will face. Employing Miller’s law and applying the concept of chunking would not only help users to scan and memorize the content more easily but also increase engagement. Placing essential elements like call to action in the path of F-shape and Z-shape would also enhance the user experience and help users locate content effectively.

Designers Fight for the User’s Attention

Whether it is in packaging of a product, a print ad or a button on a webpage, a designer always faces the challenge to get noticed and grab the attention of the ever busy users. Understanding why certain design features grab more attention than others is important. In this article, we will discuss the idea of visual attention and possible ways to achieve it.

How Humans Decide Where to Look

Our visual system is now one of the best-understood processes of the brain, and neuroscientists have made a lot of progress in modelling and understanding what captures our attention. One of the striking findings is that we humans are attracted to contrast. Our eyes are drawn to things that are different from their surroundings.

Look at the examples below.

It is not only the color contrast which makes something noticeable but also patterns. Look at the example below-

How Our Brain Processes Visual Input

As the brain receives visual input through the eyes, it starts processing the input in two different ways:

The Bottom-Up Processing: The brain processes the raw visual elements such as colors, contours, shapes, contrasts, luminosity, movements, textures etc. It tries to decode the basic visual features before it can recognize what it actually is seeing. This processing is happening automatically, without any extra effort. Neuroscientists call this stage of visual processing as pre-attentive i.e., it occurs before we pay any focused attention to what we are looking at.

The Top-Down Processing: Once the brain decodes the basic features, it begins to categorize what it is seeing based on memory. For example, it may categorize the visual input as human, animal, insect, face, car etc. As soon as this information is processed, we begin to understand what we are seeing.

Though our brain can perform the above processing effortlessly and seamlessly, our eyes are designed to capture detailed input one at a time. Our eyes have a small field of high-definition (HD) vision, which is surrounded by a large field of low-definition (LD) vision. When we look at any object or design, our eyes make a series of quick movements to fill in the details of what we are seeing.

How the Brain Prioritizes What to Look at First

Given the brain can process visual inputs of a thing one at a time, the brain needs a quick and automatic way to prioritize what to look at first – to make the process efficient. Our brain has evolved to prioritize the things that move and the things that are different from their surroundings.

Motion always draws our attention.

The Visual Saliency Map

Given our brain needs to process a large number of inputs, in order to process these inputs efficiently, it first needs to produce a map to navigate through the sea of information – called visual saliency map. Saliency at a given location is determined primarily by how different this location is from its surroundings in color, orientation, motion, depth etc. This idea was first proposed by two neuroscientists- Christof Koch and Shimon Ullman, in the mid-1980s.

Our brain is continuously mapping the colors, shapes, shades, patterns etc. of our surroundings. These inputs then are passed on to our visual system that tells our eyes to focus on the area that is visually salient i.e. areas that look different from its surroundings – maybe because it is moving , has a contrasting color or appears brighter.

Items that are visually salient get noticed earlier, more often and for longer.

While movement is particularly attention-grabbing, in case of still visuals three features for saliency are most important: color, pattern and size. Other visual features can also affect saliency which includes: depth, shape, flicker and offset.

Designs and design elements can have high or low saliency, depending upon its surrounding context. For example, a bright red packaging will not pop out on the shelf which has many such packages surrounding it. Red may often be an eye-catching color but if you are just one of the many others – you are not distinctive or salient.

This explains why, using a design that is bright, moving or unusual doesn’t mean it will be salient or noticeable. The saliency depends upon the viewer’s saliency map.

Once we understand how the viewer is expected to map the design, we have a powerful tool in our arsenal. Let’s look at how we can apply this concept in website design.

Making Your Website Visually Salient

When people are making quick choices, or while they are somewhat distracted, making a visually salient design can increase the likelihood of getting their attention. The concept of saliency mapping can be used to design pages that gets the user to focus on things we want the user to look at.

A user’s visual entry point i.e; the point where the user will begin their browsing on the webpage – can be influenced by mapping the visual saliency of elements. For example, the navigation, or the key information can be made easier to find and focus, by making them more salient.

There are three ways to make a design element visually salient.

Colors: Bright, high luminescent and contrasting colors within design are more likely to make an element visually salient. In particular, more the edges of contrasting colors within the design, the more salient it is.

Size: Larger objects in a design are more likely to draw attention. It is also true for text/ fonts which are larger and bolder. Thinner and smaller fonts will be less salient compared to larger and thicker fonts.

Patterns: Patterns that stand out from their surroundings, shapes that are unique or areas of contrast where one shape overlaps with another are highly salient.

Also note that it is not the overall saliency of the design that counts, but also how wisely we use it in our design. A design with too many highly salient elements that are positioned away from each other could make a design confusing and complex. Focusing on the saliency of a couple of important elements is better than making the whole page salient.

Naturally our eyes gravitate towards the center of the screen. So making the element visually salient in the center can help deliver key information or help drive key action you want the user to take.

Design elements that create a sense of depth are also visually salient.

Design elements that create frames are also visually salient. We are quite used to looking inside frames to find information.

Finally, there are natural elements that in general are considered visually salient. Faces of both humans and animals are visually salient, especially when they display an emotion.

In Summary: Our visual attention is guided by both bottom-up (the visual features of what we see) and the top-down (our memories, expectations and goals) processes. As our brain can process only one area in detail, our brain needs to prioritize what it should process first. To do it efficiently and automatically our brain produces visual saliency maps. Items or design elements that are visually salient get looked at first, for longer and are more likely to grab our attention.

Follow our Linkedin Page To Get Regular Update: [ Myraah IO on LinkedIn ]