Design like a developer (with Sketch) - Axel Sigurdsson | Lord.

1. Design like a developer
Quelles méthodes adopter pour faciliter la collaboration
entre designer & développeur
Axel Sigurdsson

2. 🎉
Les applications
Adobe Illustrator
Vectoriel
Illustration
Web design
Adobe Photoshop
Pixels
Retouche photo
Web design
Sketch
Vectoriel
Web design
UX/UI design
Quel outil utiliser pour dessiner une app ?
Adobe Experience Design
Vectoriel
UX/UI Desin
Prototyping

3. Nouveau standard
Ciblé (Web / app)
Nombreux plugins
Communauté
Ressources
Partage (prototyping)
Pourquoi Sketch ?
1
2
3
4
5
6

4. Sketch & developers
2 environnements différents
Sketch Xcode
💘

5. Penser en blocks
Grouper les éléments de
l’écran pour hiérarchiser le
contenu.
Créer des symboles.
Créer des styles
Créer une palette de couleurs
cohérente.
Créer des styles de texte.
Réutiliser les ressources.
AaDesign like a developer
Tout dessiner
Dessiner tous les cas de figure.
Erreur / Pas de réseau /
Notifications …
Dessiner pour tous les écrans.
Something has gone wrong!
Field Label
Filled with text

6. Penser en blocks
Adopter une grille

7. Penser en blocks
Grouper les éléments en zones
List itemFloating items List

8. Penser en blocks
Créer une liste
List separator tip :

9. Penser en blocks
Créer des symboles

10. Créer des styles
Palette de couleurs
Brand Primary
Brand Secondary
Black
Accent 1 (Success)
Accent 2(Warning)
Accent 3 (Danger)
1
2
3
4
5
6

11. Créer des styles
Styles de texte
Small 2Small 2Small 2Small 2Small 2Small 2Small 2
SmallSmallSmallSmallSmallSmallSmall
Caption 2Caption 2Caption 2Caption 2Caption 2Caption 2Caption 2
CaptionCaptionCaptionCaptionCaptionCaptionCaption
Body 2Body 2Body 2Body 2Body 2Body 2Body 2
BodyBodyBodyBodyBodyBodyBody
Subheader 2Subheader 2Subheader 2Subheader 2Subheader 2Subheader 2Subheader 2
SubheaderSubheaderSubheaderSubheaderSubheaderSubheaderSubheader
Title 2Title 2Title 2Title 2Title 2Title 2Title 2
TitleTitleTitleTitleTitleTitleTitle
Headline 2Headline 2Headline 2Headline 2Headline 2Headline 2Headline 2
HeadlineHeadlineHeadlineHeadlineHeadlineHeadlineHeadline
Display 2Display 2Display 2Display 2Display 2Display 2Display 2
DisplayDisplayDisplayDisplayDisplayDisplayDisplay
Black Active
Normal Normal
Accent 1 Accent 2 Accent 3
Normal Normal NormalSecondary Disabled

12. H1
Display 2
Roboto-Bold / 36 px / 54 px Leading / #0F2E33
H2
Display
Roboto-Regular / 36 px / 54 px Leading / #0F2E33
H3
Headline 2
Roboto-Medium / 24 px / 36 px Leading / #0F2E33
H4
Headline
Roboto-Regular / 24 px / 36 px Leading / #0F2E33
H5
Title 2
Roboto-Medium / 20 px / 32 px Leading / #0F2E33
H6
Title
Roboto-Regular / 20 px / 32 px Leading / #0F2E33
Créer une librairie
Assembler toutes les ressources
Black
#0F2E33
rgba(15, 46, 51, 1)
Primary
#8EB1C7
rgba(142, 177, 199, 1)
Accent 3
#EF767A
rgba(239, 118, 122, 1)
Accent 2
#F7EE7F
rgba(247, 238, 127, 1)
Accent 1
#5FDD9D
rgba(95, 221, 157, 1)
Aa Zz
Roboto-Regular
Aa Zz
Roboto-Medium
Aa Zz
Roboto-Bold

13. Tout dessiner
Dessiner tous les scénarios
Hint Text...Hint Text...
Field Label
Hint Text...
Field Label
Field Label
Filled with text
Field Label
Hint Text...
Field Label
Filled with text
Field Label
Hint Text...
Something has gone wrong!
Field Label
Filled with text
Field Label
Filled with text
Field Label
Hint Text...
DisabledFocused/ActiveHoverNormal

14. Merci
Axel Sigurdsson
www.callmelord.com
#