SlideShare a Scribd company logo

A developer who knows how to design by Audrey Hacq

Idean France
Idean France
Idean FranceIdean France

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.

A developer who knows how to design by Audrey Hacq

1 of 33
Download to read offline
A Developer Who Knows How to Design
The 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.

Recommended

Le management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en TLe management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en TGuillaume Abel
 
Product design and development
Product design and developmentProduct design and development
Product design and developmentKishor Tayade
 
Graphic Design Essentials by Rahul KULKARNI.
Graphic Design Essentials by Rahul KULKARNI.Graphic Design Essentials by Rahul KULKARNI.
Graphic Design Essentials by Rahul KULKARNI.Rahul KULKARNI
 
Elementos del diseño gráfico
Elementos del diseño gráficoElementos del diseño gráfico
Elementos del diseño gráficoScarlett López
 
UX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience CloudUX & UI Design behind SDL’s Customer Experience Cloud
UX & UI Design behind SDL’s Customer Experience CloudPhilipp Engel
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui designShweta Joshi
 
Engineering drawing (drafting instruments) lesson 2
Engineering drawing (drafting instruments) lesson 2Engineering drawing (drafting instruments) lesson 2
Engineering drawing (drafting instruments) lesson 2hermiraguilar
 
UI UX and Graphic Design
UI UX and Graphic DesignUI UX and Graphic Design
UI UX and Graphic Designgecop2
 

More Related Content

What's hot

UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyJoan Lumanauw
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeMadhuri Garg
 
Survey camp report main (2nd) Part
Survey camp report main (2nd) PartSurvey camp report main (2nd) Part
Survey camp report main (2nd) PartBishnuBhandari12
 
Isometric drawings
Isometric drawingsIsometric drawings
Isometric drawingsdean dundas
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It WorksAciron Consulting
 
Typecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseTypecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseDigital Surgeons
 
Graphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspirationGraphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspirationShahria Hossain
 
Design Thinking Awareness
Design Thinking AwarenessDesign Thinking Awareness
Design Thinking AwarenessFred Vanborre
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaRoshan Karunarathna
 
Elementos básicos del diseño, audiovisual
Elementos básicos del diseño, audiovisualElementos básicos del diseño, audiovisual
Elementos básicos del diseño, audiovisualGloria Torres de León
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentationaayush_jain_87
 
Diseño Trididimensional
Diseño TrididimensionalDiseño Trididimensional
Diseño TrididimensionalAmbrosete
 
An Introduction To Graphic Design
An Introduction To Graphic DesignAn Introduction To Graphic Design
An Introduction To Graphic DesignNegeri Pelangi
 
How to design - Graphic design theory
How to design - Graphic design theoryHow to design - Graphic design theory
How to design - Graphic design theoryAbanoub Hanna
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"MITAcademy1
 

What's hot (18)

UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual Hierarchy
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
 
Survey camp report main (2nd) Part
Survey camp report main (2nd) PartSurvey camp report main (2nd) Part
Survey camp report main (2nd) Part
 
Isometric drawings
Isometric drawingsIsometric drawings
Isometric drawings
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
Typecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseTypecurious: A Typography Crash Course
Typecurious: A Typography Crash Course
 
Graphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspirationGraphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspiration
 
Design Thinking Awareness
Design Thinking AwarenessDesign Thinking Awareness
Design Thinking Awareness
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
 
Elementos básicos del diseño, audiovisual
Elementos básicos del diseño, audiovisualElementos básicos del diseño, audiovisual
Elementos básicos del diseño, audiovisual
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
Diseño Trididimensional
Diseño TrididimensionalDiseño Trididimensional
Diseño Trididimensional
 
An Introduction To Graphic Design
An Introduction To Graphic DesignAn Introduction To Graphic Design
An Introduction To Graphic Design
 
Typography
TypographyTypography
Typography
 
Poster Designing
Poster Designing Poster Designing
Poster Designing
 
How to design - Graphic design theory
How to design - Graphic design theoryHow to design - Graphic design theory
How to design - Graphic design theory
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"
 
Ux & ui
Ux & uiUx & ui
Ux & ui
 

Viewers also liked

UI Design Trends for 2017
UI Design Trends for 2017UI Design Trends for 2017
UI Design Trends for 2017Idean France
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqIdean France
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Idean France
 
The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016Idean France
 
Sirikit par Julien Coudsi
Sirikit par Julien CoudsiSirikit par Julien Coudsi
Sirikit par Julien CoudsiIdean France
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineIdean France
 
The top 9 Tech trends for 2016
The top 9 Tech trends for 2016The top 9 Tech trends for 2016
The top 9 Tech trends for 2016Idean France
 
10 user experience trends in 2015
10 user experience trends in 201510 user experience trends in 2015
10 user experience trends in 2015Idean France
 
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...Idean France
 
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Idean France
 
How to design forms that deliver a great user experience
How to design forms that deliver a great user experienceHow to design forms that deliver a great user experience
How to design forms that deliver a great user experienceIdean France
 
Boost the ROI of your digital presence
Boost the ROI of your digital presenceBoost the ROI of your digital presence
Boost the ROI of your digital presenceIdean France
 
Backelite digital agency presentation_English
Backelite digital agency presentation_EnglishBackelite digital agency presentation_English
Backelite digital agency presentation_EnglishIdean France
 
The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016Idean France
 
Career Paths of User Experience
Career Paths of User ExperienceCareer Paths of User Experience
Career Paths of User ExperiencePatrick Neeman
 
Etude Deloitte sur les usages Mobile des Français en 2014
Etude Deloitte sur les usages Mobile des Français en 2014Etude Deloitte sur les usages Mobile des Français en 2014
Etude Deloitte sur les usages Mobile des Français en 2014servicesmobiles.fr
 
L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoTUX REPUBLIC
 
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...Carine Lallemand
 
Luxe & e-Commerce quelle Expérience Utilisateur?
Luxe & e-Commerce quelle Expérience Utilisateur?Luxe & e-Commerce quelle Expérience Utilisateur?
Luxe & e-Commerce quelle Expérience Utilisateur?Frederic_Veidig
 
Cocoaheads Montpellier Meetup : 3D Touch for iOS
Cocoaheads Montpellier Meetup : 3D Touch for iOSCocoaheads Montpellier Meetup : 3D Touch for iOS
Cocoaheads Montpellier Meetup : 3D Touch for iOSIdean France
 

Viewers also liked (20)

UI Design Trends for 2017
UI Design Trends for 2017UI Design Trends for 2017
UI Design Trends for 2017
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey Hacq
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017
 
The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016The top 10 UI Design Trends for 2016
The top 10 UI Design Trends for 2016
 
Sirikit par Julien Coudsi
Sirikit par Julien CoudsiSirikit par Julien Coudsi
Sirikit par Julien Coudsi
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas Fontaine
 
The top 9 Tech trends for 2016
The top 9 Tech trends for 2016The top 9 Tech trends for 2016
The top 9 Tech trends for 2016
 
10 user experience trends in 2015
10 user experience trends in 201510 user experience trends in 2015
10 user experience trends in 2015
 
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
 
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
 
How to design forms that deliver a great user experience
How to design forms that deliver a great user experienceHow to design forms that deliver a great user experience
How to design forms that deliver a great user experience
 
Boost the ROI of your digital presence
Boost the ROI of your digital presenceBoost the ROI of your digital presence
Boost the ROI of your digital presence
 
Backelite digital agency presentation_English
Backelite digital agency presentation_EnglishBackelite digital agency presentation_English
Backelite digital agency presentation_English
 
The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016
 
Career Paths of User Experience
Career Paths of User ExperienceCareer Paths of User Experience
Career Paths of User Experience
 
Etude Deloitte sur les usages Mobile des Français en 2014
Etude Deloitte sur les usages Mobile des Français en 2014Etude Deloitte sur les usages Mobile des Français en 2014
Etude Deloitte sur les usages Mobile des Français en 2014
 
L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoT
 
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
 
Luxe & e-Commerce quelle Expérience Utilisateur?
Luxe & e-Commerce quelle Expérience Utilisateur?Luxe & e-Commerce quelle Expérience Utilisateur?
Luxe & e-Commerce quelle Expérience Utilisateur?
 
Cocoaheads Montpellier Meetup : 3D Touch for iOS
Cocoaheads Montpellier Meetup : 3D Touch for iOSCocoaheads Montpellier Meetup : 3D Touch for iOS
Cocoaheads Montpellier Meetup : 3D Touch for iOS
 

Similar to A developer who knows how to design by Audrey Hacq

Design & Usability Basics
Design & Usability BasicsDesign & Usability Basics
Design & Usability Basicselmorandall
 
Costanoa Expert Series: What Business Leaders Should Know About Design- Order 1
Costanoa Expert Series: What Business Leaders Should Know About Design- Order 1Costanoa Expert Series: What Business Leaders Should Know About Design- Order 1
Costanoa Expert Series: What Business Leaders Should Know About Design- Order 1Costanoa Ventures
 
Mobile ui trends present future – meaningful mobile typography
Mobile ui trends present future  – meaningful mobile typographyMobile ui trends present future  – meaningful mobile typography
Mobile ui trends present future – meaningful mobile typographyHalil Eren Çelik
 
Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) wael gomaa
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website designRavi Bhadauria
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI DesignersRavi Bhadauria
 
Presentation Board Layout
Presentation Board Layout Presentation Board Layout
Presentation Board Layout NYCCTfab
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTREgroversimrans
 
Global Scope Final Report
Global Scope Final ReportGlobal Scope Final Report
Global Scope Final ReportKamil Mustaffa
 
5 principles of visual design in ux
5 principles of visual design in ux5 principles of visual design in ux
5 principles of visual design in uxBADELOHITHAKSHA
 
Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hatNeil Perlin
 
Intro to Responsive
Intro to ResponsiveIntro to Responsive
Intro to ResponsiveTom Elliott
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
 
Capturing and Retaining Users Interest
Capturing and Retaining Users InterestCapturing and Retaining Users Interest
Capturing and Retaining Users InterestLisa Colton
 
Designing With User In Mind
Designing With User In MindDesigning With User In Mind
Designing With User In Mindintuitiv.de
 
Dtp Basics And Design Rules Student Version
Dtp Basics And Design Rules  Student VersionDtp Basics And Design Rules  Student Version
Dtp Basics And Design Rules Student VersionSutinder Mann
 
Industrial Design Process Book Basics
Industrial Design Process Book BasicsIndustrial Design Process Book Basics
Industrial Design Process Book BasicsCarly Hagins
 
Week 202 design skills
Week 202 design skillsWeek 202 design skills
Week 202 design skillsSteve
 

Similar to A developer who knows how to design by Audrey Hacq (20)

Design & Usability Basics
Design & Usability BasicsDesign & Usability Basics
Design & Usability Basics
 
Costanoa Expert Series: What Business Leaders Should Know About Design- Order 1
Costanoa Expert Series: What Business Leaders Should Know About Design- Order 1Costanoa Expert Series: What Business Leaders Should Know About Design- Order 1
Costanoa Expert Series: What Business Leaders Should Know About Design- Order 1
 
Mobile ui trends present future – meaningful mobile typography
Mobile ui trends present future  – meaningful mobile typographyMobile ui trends present future  – meaningful mobile typography
Mobile ui trends present future – meaningful mobile typography
 
Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice)
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI Designers
 
Tdf responsive design101_v1
Tdf responsive design101_v1Tdf responsive design101_v1
Tdf responsive design101_v1
 
Presentation Board Layout
Presentation Board Layout Presentation Board Layout
Presentation Board Layout
 
DJNF 2015 Mobile Presentation
DJNF 2015 Mobile PresentationDJNF 2015 Mobile Presentation
DJNF 2015 Mobile Presentation
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTRE
 
Global Scope Final Report
Global Scope Final ReportGlobal Scope Final Report
Global Scope Final Report
 
5 principles of visual design in ux
5 principles of visual design in ux5 principles of visual design in ux
5 principles of visual design in ux
 
Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hat
 
Intro to Responsive
Intro to ResponsiveIntro to Responsive
Intro to Responsive
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
 
Capturing and Retaining Users Interest
Capturing and Retaining Users InterestCapturing and Retaining Users Interest
Capturing and Retaining Users Interest
 
Designing With User In Mind
Designing With User In MindDesigning With User In Mind
Designing With User In Mind
 
Dtp Basics And Design Rules Student Version
Dtp Basics And Design Rules  Student VersionDtp Basics And Design Rules  Student Version
Dtp Basics And Design Rules Student Version
 
Industrial Design Process Book Basics
Industrial Design Process Book BasicsIndustrial Design Process Book Basics
Industrial Design Process Book Basics
 
Week 202 design skills
Week 202 design skillsWeek 202 design skills
Week 202 design skills
 

More from Idean France

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineIdean France
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Idean France
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsIdean France
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphiqueIdean France
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy GigonIdean France
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas FontaineIdean France
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Idean France
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Idean France
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléIdean France
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangIdean France
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David YangIdean France
 
Messages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineMessages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineIdean France
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}Idean France
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Idean France
 
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}Idean France
 
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutMeetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutIdean France
 
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Idean France
 
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...Idean France
 
Cocoaheads Montpellier Meetup : Comment gérer son onboarding
Cocoaheads Montpellier Meetup : Comment gérer son onboardingCocoaheads Montpellier Meetup : Comment gérer son onboarding
Cocoaheads Montpellier Meetup : Comment gérer son onboardingIdean France
 
Les 5 Tendances de la Performance Digitale en 2016
Les 5 Tendances de la Performance Digitale en 2016Les 5 Tendances de la Performance Digitale en 2016
Les 5 Tendances de la Performance Digitale en 2016Idean France
 

More from Idean France (20)

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a Machine
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outils
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy Gigon
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas Fontaine
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre Harlé
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David Yang
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David Yang
 
Messages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineMessages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas Fontaine
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}
 
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
 
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto LayoutMeetup CocoaHeads Montpellier : conférence sur l'Auto Layout
Meetup CocoaHeads Montpellier : conférence sur l'Auto Layout
 
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
Les Formulaires - Les bonnes pratiques pour une meilleure expérience utilisat...
 
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
 
Cocoaheads Montpellier Meetup : Comment gérer son onboarding
Cocoaheads Montpellier Meetup : Comment gérer son onboardingCocoaheads Montpellier Meetup : Comment gérer son onboarding
Cocoaheads Montpellier Meetup : Comment gérer son onboarding
 
Les 5 Tendances de la Performance Digitale en 2016
Les 5 Tendances de la Performance Digitale en 2016Les 5 Tendances de la Performance Digitale en 2016
Les 5 Tendances de la Performance Digitale en 2016
 

Recently uploaded

Before and After Wheelchair Accessible Whole Home Remodel.pptx
Before and After Wheelchair Accessible Whole Home Remodel.pptxBefore and After Wheelchair Accessible Whole Home Remodel.pptx
Before and After Wheelchair Accessible Whole Home Remodel.pptxleahlareaupci
 
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfaekhan1019
 
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptxAWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptxGopiNarahari1
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfLizShek
 
Gerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdfGerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdfLizShek
 
Presentation on "Gothic Architecher".pptx
Presentation on "Gothic Architecher".pptxPresentation on "Gothic Architecher".pptx
Presentation on "Gothic Architecher".pptxASHIQUR RAHMAN
 
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfssuser799b33
 
the bloomberg office headquarters in London.pptx
the bloomberg office headquarters in London.pptxthe bloomberg office headquarters in London.pptx
the bloomberg office headquarters in London.pptxumerufitti
 
Types of Drafting in Construction Projects
Types of Drafting in Construction ProjectsTypes of Drafting in Construction Projects
Types of Drafting in Construction ProjectsResDraft
 
fashion forecasting for levele 3.pdf
fashion forecasting for levele 3.pdffashion forecasting for levele 3.pdf
fashion forecasting for levele 3.pdfMezgebuTesfaye4
 
Black and Red Modern Guess The Movie Animated Game Presentation(1).pptx
Black and Red Modern Guess The Movie Animated Game Presentation(1).pptxBlack and Red Modern Guess The Movie Animated Game Presentation(1).pptx
Black and Red Modern Guess The Movie Animated Game Presentation(1).pptxklozinska
 
Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |CaydenIngman
 
Elevate Your Online Presence with Expert Web Design
Elevate Your Online Presence with Expert Web DesignElevate Your Online Presence with Expert Web Design
Elevate Your Online Presence with Expert Web DesignThe Fabcode IT Solutions LLP
 
Preposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese studentPreposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese studentThaoNguyenDang4
 
FW25-26 Women's Fashion Trend Book Peclers Paris
FW25-26 Women's Fashion Trend Book Peclers ParisFW25-26 Women's Fashion Trend Book Peclers Paris
FW25-26 Women's Fashion Trend Book Peclers ParisPeclers Paris
 
Options for Making Housing Affordable a distinct Reality
Options for Making Housing Affordable a distinct RealityOptions for Making Housing Affordable a distinct Reality
Options for Making Housing Affordable a distinct RealityJIT KUMAR GUPTA
 
Al-Aqsa Mosque History Thesis Defense by Slidesgo.pptx
Al-Aqsa Mosque History Thesis Defense by Slidesgo.pptxAl-Aqsa Mosque History Thesis Defense by Slidesgo.pptx
Al-Aqsa Mosque History Thesis Defense by Slidesgo.pptxBahaaRoshdy1
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfLizShek
 
Domesttu Company ProfileA company profile
Domesttu Company ProfileA company  profileDomesttu Company ProfileA company  profile
Domesttu Company ProfileA company profilezuluagencyeg
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfLizShek
 

Recently uploaded (20)

Before and After Wheelchair Accessible Whole Home Remodel.pptx
Before and After Wheelchair Accessible Whole Home Remodel.pptxBefore and After Wheelchair Accessible Whole Home Remodel.pptx
Before and After Wheelchair Accessible Whole Home Remodel.pptx
 
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdfASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
ASIF KHAN-LANDSCAPE-DESIGN PORTFOLIO 2024 f.pdf
 
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptxAWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
AWS-Architecture-Icons-Deck_For-Dark-BG_02062024.pptx
 
Mother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdfMother Courage and Her Children Layouts.pdf
Mother Courage and Her Children Layouts.pdf
 
Gerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdfGerald Freedman Theatre Rep Re-Circuit.pdf
Gerald Freedman Theatre Rep Re-Circuit.pdf
 
Presentation on "Gothic Architecher".pptx
Presentation on "Gothic Architecher".pptxPresentation on "Gothic Architecher".pptx
Presentation on "Gothic Architecher".pptx
 
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdfPAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
PAGE ONE PAGE TWO PAGE THREE PAGE FOUR.pdf
 
the bloomberg office headquarters in London.pptx
the bloomberg office headquarters in London.pptxthe bloomberg office headquarters in London.pptx
the bloomberg office headquarters in London.pptx
 
Types of Drafting in Construction Projects
Types of Drafting in Construction ProjectsTypes of Drafting in Construction Projects
Types of Drafting in Construction Projects
 
fashion forecasting for levele 3.pdf
fashion forecasting for levele 3.pdffashion forecasting for levele 3.pdf
fashion forecasting for levele 3.pdf
 
Black and Red Modern Guess The Movie Animated Game Presentation(1).pptx
Black and Red Modern Guess The Movie Animated Game Presentation(1).pptxBlack and Red Modern Guess The Movie Animated Game Presentation(1).pptx
Black and Red Modern Guess The Movie Animated Game Presentation(1).pptx
 
Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |Apparel Portfolio draft: Cayden Ingman |
Apparel Portfolio draft: Cayden Ingman |
 
Elevate Your Online Presence with Expert Web Design
Elevate Your Online Presence with Expert Web DesignElevate Your Online Presence with Expert Web Design
Elevate Your Online Presence with Expert Web Design
 
Preposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese studentPreposition for grade 12th Vietnamese student
Preposition for grade 12th Vietnamese student
 
FW25-26 Women's Fashion Trend Book Peclers Paris
FW25-26 Women's Fashion Trend Book Peclers ParisFW25-26 Women's Fashion Trend Book Peclers Paris
FW25-26 Women's Fashion Trend Book Peclers Paris
 
Options for Making Housing Affordable a distinct Reality
Options for Making Housing Affordable a distinct RealityOptions for Making Housing Affordable a distinct Reality
Options for Making Housing Affordable a distinct Reality
 
Al-Aqsa Mosque History Thesis Defense by Slidesgo.pptx
Al-Aqsa Mosque History Thesis Defense by Slidesgo.pptxAl-Aqsa Mosque History Thesis Defense by Slidesgo.pptx
Al-Aqsa Mosque History Thesis Defense by Slidesgo.pptx
 
Spoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdfSpoleto Festival23 Hang and Cable Layouts.pdf
Spoleto Festival23 Hang and Cable Layouts.pdf
 
Domesttu Company ProfileA company profile
Domesttu Company ProfileA company  profileDomesttu Company ProfileA company  profile
Domesttu Company ProfileA company profile
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdf
 

A developer who knows how to design by Audrey Hacq

  • 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
  • 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.
  • 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
  • 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.
  • 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
  • 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)
  • 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