A Developer Who Knows How to DesignThe basics of page layout

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

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

What is the purpose of good page layout?

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

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

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.

The basics to be understood

Grids

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.

Alignment

Alignment

Text which is not aligned

with the rest of the

layout will be harder to

read.

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.

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

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

Margins

Button Button

Margins

A layout without margins

would look “crowded” and

“tight”.

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.

Spaces (rule of proximity)

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?

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.

Hierarchies

Typographic hierarchy

For reasons relating to ease of

reading, it is important to have

well defined hierarchical

relationships between titles,

subtitles and paragraphs.

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

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

The developer’s check list

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…)

The 7 error game

Find the 7 errors

Mockup Screen to be accepted

Solution

Mockup Screen to be accepted

Aligned or centered?

Space (margin)

Alignment

Alignment

Spaces (proximity rule)

Spaces (proximity rule)

Space (margin)

Conclusion

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

www.backelite.com

01 73 00 28 00

Document écrit par : Audrey Hacq