copyright outsystems @ all rights reserved
copyright outsystems @ all rights reserved
Agenda
• Grids
• Visual Hierarchy
• Highly Usable Apps
copyright outsystems @ all rights reserved
Agenda
• Grids
• Visual Hierarchy
• Highly Usable Apps
copyright outsystems @ all rights reserved
Highly Usable Apps
What is it?
copyright outsystems @ all rights reserved
Highly Usable Apps
1. Easy to learn
2. Easy to use
3. Appropriate look & feel
copyright outsystems @ all rights reserved
Highly Usable Apps
copyright outsystems @ all rights reserved
Highly Usable Apps
What is not?
copyright outsystems @ all rights reserved
Highly Usable Apps
copyright outsystems @ all rights reserved
Agenda
• Grids
• Visual Hierarchy
• Highly Usable Apps
copyright outsystems @ all rights reserved
Visual Hierarchy
What is it?
copyright outsystems @ all rights reserved
Visual Hierarchy
Order in which the human eye perceives the information
presented
mind
copyright outsystems @ all rights reserved
Visual Hierarchy
The brain disassociates objects from
one another based in their
physical characteristics
copyright outsystems @ all rights reserved
Visual Hierarchy
size
copyright outsystems @ all rights reserved
Visual Hierarchy
copyright outsystems @ all rights reserved
Visual Hierarchy
color
size
copyright outsystems @ all rights reserved
Visual Hierarchy
copyright outsystems @ all rights reserved
Visual Hierarchy
color
size
contrast
copyright outsystems @ all rights reserved
Visual Hierarchy
copyright outsystems @ all rights reserved
Visual Hierarchy
color
size
contrast
alignment
copyright outsystems @ all rights reserved
Visual Hierarchy
copyright outsystems @ all rights reserved
Visual Hierarchy
color
size
contrast
aligment
density and whitespace
copyright outsystems @ all rights reserved
Visual Hierarchy
copyright outsystems @ all rights reserved
Visual Hierarchy
The brain tries to organize
what is sees
through known patterns
copyright outsystems @ all rights reserved
Visual Hierarchy
Layouts should be created
in order to be
processed hierarchically
copyright outsystems @ all rights reserved
Visual Hierarchy
header
navigation
main content secondary
content
footer
1st plane on visual hierarchy
is set by conventions
copyright outsystems @ all rights reserved
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
copyright outsystems @ all rights reserved
Visual Hierarchy
main content
If you’re looking for content,
then you focus on this section
and forget the rest
copyright outsystems @ all rights reserved
Visual Hierarchy
Next plane on visual hierarchy
provides a set of clusters of information
copyright outsystems @ all rights reserved
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
copyright outsystems @ all rights reserved
Visual Hierarchy
copyright outsystems @ all rights reserved
Visual Hierarchy
Each section has too many objects. Objects in each section are not closer to each other than to other sections
copyright outsystems @ all rights reserved
There’s still
something missing…
copyright outsystems @ all rights reserved
Agenda
• Grids
• Visual Hierarchy
• Highly Usable Apps
copyright outsystems @ all rights reserved
Grids
What are Grids?
copyright outsystems @ all rights reserved
Grids
Collection of columns,
gutters and intersecting rows,
at regular intervals.
copyright outsystems @ all rights reserved
Grids
But before we continue,
some History!
copyright outsystems @ all rights reserved
Grids
Grids have been in use
since Middle Ages
copyright outsystems @ all rights reserved
Grids
In the 1950’s the
International Typographic Style
(aka Swiss Style), was created
copyright outsystems @ all rights reserved
Grids
The Swiss Style promotes:
Objectivity
Cleanliness
Readability
copyright outsystems @ all rights reserved
Grids
Forms the basis of a modular and
systematic approach to the layout, making
the design process quicker, and ensuring
visual consistency between pages
copyright outsystems @ all rights reserved
Grids
Row
Column
Gutter
Module
Spacial zone
copyright outsystems @ all rights reserved
Grids
Examples
copyright outsystems @ all rights reserved
copyright outsystems @ all rights reserved
copyright outsystems @ all rights reserved
copyright outsystems @ all rights reserved
copyright outsystems @ all rights reserved
Grids
How to use them
in the Agile Platform?
copyright outsystems @ all rights reserved
copyright outsystems @ all rights reserved
Grids
More examples
copyright outsystems @ all rights reserved
copyright outsystems @ all rights reserved
copyright outsystems @ all rights reserved
copyright outsystems @ all rights reserved
copyright outsystems @ all rights reserved
copyright outsystems @ all rights reserved
Final Thoughts
copyright outsystems @ all rights reserved
Grids
Nevermind pixels,
work with modules
copyright outsystems @ all rights reserved
Visual Hierarchy
copyright outsystems @ all rights reserved
High Usable Apps
No longer optional
but a mandatory
copyright outsystems @ all rights reserved
Happy Gridding!
Thank you!
copyright outsystems @ all rights reserved
Questions?