Web design layout pattern

1. Web design layout
pattern
http://jyaasa.comCopyright 2016. Jyaasa Technologies.

2. Hello !
I am Nikesh Suwal
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Sr.Front End Engineer
Jyaasa Technologies

3. http://jyaasa.comCopyright 2016. 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

4. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
A visual hierarchy instantly communicate to the users
What is this? (Utility)
How do I use it? (Usability)
Why should I care? (Desirability)

5. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
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.

6. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
How do we establish hierarchy in layout web design?

7. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
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.

8. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
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.

9. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
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.

10. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
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.

11. http://jyaasa.comCopyright 2016. Jyaasa Technologies.
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.

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

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

15. References
https://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-d
esign--webdesign-687
https://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-d
esign--webdesign-28

16. Thank you!
Any Queries?
facebook.com/nikesh.suwal
github.com/nikeshsuwal
http://jyaasa.comCopyright 2015. Jyaasa Technologies.Copyright 2016. Jyaasa Technologies. http://jyaasa.com