A balanced and understandable interface must follow certain basic page layout rules. This is the job of the designer, not of the developer. Yet, in order for a mockup to be put together correctly, (and therefore to avoid long and painful hours of revisions), it is vital that the designer and the developer understand each other and speak the same language. Read on for our guiding principles that will help developers better understand design.

1. A Developer Who Knows How to Design
The basics of page layout

2. A balanced and understandable interface
must follow certain basic page layout rules.
This is the job of the designer, not of the
developer.
Yet, in order for a mockup to be put together
correctly, (and therefore to avoid long and
painful hours of revisions), it is vital that the
designer and the developer understand
each other and speak the same language.
INTRODUCTION
©Gal Shir - Dribbble

3. 1. What is the purpose of good page layout?
2. The basics to be understood
3. The developer’s check list
4. The 7 error game
5. Conclusion
SUMMARY

4. What is the purpose of good page layout?

5. Page layout helps to understand the
screen
A balanced and well-ordered interface will
guide the user to what he or she must do
and what he or she came to look for.
Not just to “make it pretty”
“Design is not just what it looks like and
feels like. Design is how it works.”
Steve Jobs

6. “One remembers the quality much longer
than the price.”
Gucci
Improve the quality
The overall quality of a product is
hidden in its details.
The alignments, spaces, the visual
balance of a screen… are just as much
details that will allow us to guarantee the
general quality of the application.

7. Your role in all of this?
Developers
You are also responsible for the
user experience and the quality
of the application!
You are in touch with the finished product,
and it is your work that the user will have in
his or her hands.

8. The basics to be understood

9. Grids

10. Grids
Grids help structure the
screen.
The designer must share the
grid with the developer so
each can understand how the
other builds the screen.

11. Alignment

12. Alignment
Text which is not aligned
with the rest of the
layout will be harder to
read.

13. Alignment
Alignment forms a directing
line for the eye.
In order to verify if an
element is aligned with
another, the developer can
use a piece of paper placed
on the screen.

14. Aligned or centered?
“Aligned” text is text whose
axis of alignment is at the
left or the right.
Running text is most often
left-aligned because that
is most legible.
Left aligned – Axis of alignment

15. Aligned or centered?
The axis of alignment of a
“centered” text is therefore at
the center.
Centered text is often used
for highlighting or when the
text is associated with an
illustration, also centered.
Centered text – Axis of alignment
Your account is already associated
with a mobile device

16. Margins
Button Button

17. Margins
A layout without margins
would look “crowded” and
“tight”.

18. Margins
Margins (or white edges)
enable the layout to
“breathe” and makes the
text more legible.
Margins (padding) are often
equal top to bottom or left to
right.

19. Spaces (rule of proximity)

20. Spaces
When different elements are
too close to each other, the
eye is not able to associate
them with a group.
→ What price corresponds
to which shoe in this
example?

21. The spaces
Elements that go together
must have physical proximity.
Elements that form another
group must be well separated
from the others.
The developer must
understand the content of
what is included as well as the
large “visual blocks” of the
screen.

22. Hierarchies

23. Typographic hierarchy
For reasons relating to ease of
reading, it is important to have
well defined hierarchical
relationships between titles,
subtitles and paragraphs.

24. Upper- or lowercase?
Lowercase text is more
readable than uppercase text.
We therefore must avoid large
areas of uppercase text.
On the other hand, uppercase
letters are more visible. They
can be used for titles or very
short text strings to be
highlighted.
UPPERCASE
Lowercase

25. Dynamic elements
Each element must be
conceived in a “responsive”
manner by the designer as
well as the developer.
It is important to agree on
this behavior before and
during development.
Example 1 – iphone
6
Variable margins
Fixed margins
Stretchable areas
stretch stretchd
stretch

26. The developer’s check list

27. The developer’s check list
These are the 5 points to check:
- Before development (when one gets
familiar with the mockup)
- During development (when the screen is
done, check that these points have been
followed)
- After development (in the graphical
identity phase, for example)
Graphic identity
Alignment
(piece of paper method)
Margins
(padding/margin, white edges)
Centered or aligned
(page alignment axes)
Spaces
(title linked to the paragraph,
blocks spaced enough…)
Typographic hierarchy
(h1: Title, h2: subtitle
h3: paragraph…)

28. The 7 error game

29. Find the 7 errors
Mockup Screen to be accepted

30. Solution
Mockup Screen to be accepted
Aligned or centered?
Space (margin)
Alignment
Alignment
Spaces (proximity rule)
Spaces (proximity rule)
Space (margin)

31. Conclusion

32. We always work better when we
understand why we do things.
The designer must therefore take the time
to explain the page layout to the
developer and the developer on the other
hand must be curious about the page
layout rules.
One thing is certain: we win by working
together and understanding each other’s
jobs and constraints!
CONCLUSION
©Gal Shir - Dribbble

33. www.backelite.com
01 73 00 28 00
Document écrit par : Audrey Hacq