Grids and Visual hierarchy for developers

copyright outsystems @ all rights reserved


Agenda

• Grids

• Visual Hierarchy

• Highly Usable Apps


Agenda

• Grids




Highly Usable Apps

What is it?


Highly Usable Apps

1. Easy to learn

2. Easy to use

3. Appropriate look & feel


Highly Usable Apps


Highly Usable Apps

What is not?


Highly Usable Apps


Agenda

• Grids




Visual Hierarchy

What is it?


Visual Hierarchy

Order in which the human eye perceives the information

presented

mind


Visual Hierarchy

The brain disassociates objects from

one another based in their

physical characteristics


Visual Hierarchy

size


Visual Hierarchy


Visual Hierarchy

color

size


Visual Hierarchy


Visual Hierarchy

color

size

contrast


Visual Hierarchy


Visual Hierarchy

color

size

contrast

alignment


Visual Hierarchy


Visual Hierarchy

color

size

contrast

aligment

density and whitespace


Visual Hierarchy


Visual Hierarchy

The brain tries to organize

what is sees

through known patterns


Visual Hierarchy

Layouts should be created

in order to be

processed hierarchically


Visual Hierarchy

header

navigation

main content secondary

content

footer

1st plane on visual hierarchy

is set by conventions


Visual Hierarchy

header

navigation

main content secondary

content

footer

If you’re looking for content,

then you focus on this section

and forget the rest


Visual Hierarchy

main content

If you’re looking for content,

then you focus on this section

and forget the rest


Visual Hierarchy

Next plane on visual hierarchy

provides a set of clusters of information


Visual Hierarchy

20px

20px

20px

10px 10px

10px

5px

5px

Best if distance multiples are

used from plane to plane

20px 10 px 5px

As you drill down from plane

to plane, the distance

between objects shrinks

Always work with symmetry

be consistent in distances

and margins


Visual Hierarchy


Visual Hierarchy

Each section has too many objects. Objects in each section are not closer to each other than to other sections


There’s still

something missing…


Agenda

• Grids




Grids

What are Grids?


Grids

Collection of columns,

gutters and intersecting rows,

at regular intervals.


Grids

But before we continue,

some History!


Grids

Grids have been in use

since Middle Ages


Grids

In the 1950’s the

International Typographic Style

(aka Swiss Style), was created


Grids

The Swiss Style promotes:

Objectivity

Cleanliness

Readability


Grids

Forms the basis of a modular and

systematic approach to the layout, making

the design process quicker, and ensuring

visual consistency between pages


Grids

Row

Column

Gutter

Module

Spacial zone


Grids

Examples






Grids

How to use them

in the Agile Platform?



Grids

More examples







Final Thoughts


Grids

Nevermind pixels,

work with modules


Visual Hierarchy


High Usable Apps

No longer optional

but a mandatory


Happy Gridding!

Thank you!


Questions?

Grids and Visual hierarchy for developers

Design

rest copyright outsystems

margins copyright outsystems

mind copyright outsystems

visual hierarchy order

visual hierarchy layouts

visual hierarchy main

px best

distance multiples