web design layout pattern

Web design layout pattern

http://jyaasa.comCopyright 2016. Jyaasa Technologies.

Hello ! I am Nikesh Suwal


Sr.Front End Engineer

Jyaasa Technologies


A hierarchy is essentially an order of items, goals, ideas, and/or needs.

Hierarchy in web design is centrally about influencing a user to understand and embrace the principal goals of a website and interact with the material in the ideal order to facilitate a smooth and pleasant experience with the website.

Visual hierarchy

Visual Hierarchy = Information Prioritization


A visual hierarchy instantly communicate to the users

What is this? (Utility)

How do I use it? (Usability)

Why should I care? (Desirability)


How we make sense of what we see

● We recognise similarities and differences. ● We look for patterns.● We create relationships between the things we see.


How do we establish hierarchy in layout web design?


F-pattern

F-pattern is one of the most common eye-scanning patterns when we talk about the block of contents. It follows the shape of the letter ‘F’ as it refers to the user first scanning a horizontal line across the top of the screen i.e. Left to right.


Heatmaps from user eyetracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn't attract any fixations.


General behavior pattern:

● Start in the upper left corner.● Read/scan the first (head)line of the text.● Scan down the left side of the column until you find something interesting.● Read the interesting thing more carefully.● Continue scanning down.

Why F-Pattern Works

F-Pattern works as it allows readers to scan naturally! This layout is natural & feels it comfortable as we do prefer the reading top to bottom & left to right. There is a myriad website in the realm of web application development that are using this pattern. Most of the advertisements rely heavily on F-layout as it drives user-engagement in more natural & comfortable manner.


Z-Pattern

The Z layout is a design understanding that attempts to get ahead of the user, abstracting any distraction and presenting encouraged action as quickly as possible.It tackles the 4 of the big principles of an effective design for branding, call-to-action, structure and hierarchy.


Best practices to keep in mind:

● Brand or Logo Recognition● Relevant Links Related to the Page, Company or

Product.● Information gathering – What is the immediate

benefit of this product or service?● Action – Allow for the visitor to take immediate

action related to the product being shown.

Let’s take a look at a few popular sites that maintain a “Z” layout.

Why Z-Pattern Works

However, Z-pattern does not need to any final words. Since, it controls four

major reasons for effective web designs as in:

● Hierarchy● Branding● A call-to-action● Structure

The pattern actually works as in the readers scan the same way as they

scan the book i.e. Top to bottom & left to right. The pattern urges simple

foundation as in you can add multiple call-to-actions, compress & extend

the height of the pattern and whatever you would like that makes sense.

References

https://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design--webdesign-687https://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design--webdesign-28

https://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design--webdesign-687



https://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design--webdesign-28



Thank you!

Any Queries?

facebook.com/nikesh.suwalgithub.com/nikeshsuwal

http://jyaasa.comCopyright 2015. Jyaasa Technologies. Copyright 2016. Jyaasa Technologies. http://jyaasa.com

web design layout pattern

Technology