design like a developer
TRANSCRIPT
Design like a developerQuelles méthodes adopter pour faciliter la collaboration
entre designer & développeur
Axel Sigurdsson
🎉
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
Nouveau standard
Ciblé (Web / app)
Nombreux plugins
Communauté
Ressources
Partage (prototyping)
Pourquoi Sketch ?
1
2
3
4
5
6
Sketch & developers2 environnements différents
Sketch Xcode
💘
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
Penser en blocksAdopter une grille
Penser en blocksGrouper les éléments en zones
List itemFloating items List
Penser en blocksCréer une liste
List separator tip :
Penser en blocksCréer des symboles
Créer des stylesPalette de couleurs
Brand Primary
Brand Secondary
Black
Accent 1 (Success)
Accent 2(Warning)
Accent 3 (Danger)
1
2
3
4
5
6
Créer des stylesStyles de texte
Small 2 Small 2 Small 2Small 2Small 2Small 2Small 2SmallSmallSmallSmallSmallSmallSmall
Caption 2Caption 2Caption 2Caption 2Caption 2Caption 2 Caption 2Caption Caption CaptionCaptionCaptionCaptionCaption
Body 2Body 2Body 2Body 2Body 2Body 2Body 2BodyBodyBodyBodyBodyBodyBody
Subheader 2Subheader 2Subheader 2Subheader 2Subheader 2Subheader 2Subheader 2SubheaderSubheaderSubheaderSubheaderSubheaderSubheaderSubheader
Title 2Title 2Title 2Title 2Title 2Title 2Title 2TitleTitleTitleTitleTitle TitleTitle
Headline 2Headline 2Headline 2Headline 2Headline 2Headline 2Headline 2HeadlineHeadlineHeadlineHeadlineHeadlineHeadlineHeadline
Display 2Display 2Display 2Display 2Display 2Display 2Display 2DisplayDisplayDisplayDisplayDisplayDisplayDisplay
Black Active
Normal Normal
Accent 1 Accent 2 Accent 3
Normal Normal NormalSecondary Disabled
H1
Display 2Roboto-Bold / 36 px / 54 px Leading / #0F2E33
H2
DisplayRoboto-Regular / 36 px / 54 px Leading / #0F2E33
H3
Headline 2Roboto-Medium / 24 px / 36 px Leading / #0F2E33
H4
HeadlineRoboto-Regular / 24 px / 36 px Leading / #0F2E33
H5
Title 2Roboto-Medium / 20 px / 32 px Leading / #0F2E33
H6
TitleRoboto-Regular / 20 px / 32 px Leading / #0F2E33
Paragraph
Check Box - Off
Roboto-Regular / 16 px / 24 px Leading / #000000
Text style
Subheader 2
Roboto-Medium / 16 px / 24 px Leading / #0F2E33
Text style
Subheader
Roboto-Regular / 16 px / 24 px Leading / #0F2E33
Text styleBody
Roboto-Regular / 14 px / 20 px Leading / #0F2E33
Text styleBody 2
Roboto-Medium / 14 px / 20 px Leading / #0F2E33
Text styleCaption 2
Roboto-Medium / 12 px / 18 px Leading / #0F2E33
Text styleCaption
Roboto-Regular / 12 px / 18 px Leading / #0F2E33
Text styleSmall
Roboto-Regular / 10 px / 16 px Leading / #0F2E33
Text styleSmall 2
Roboto-Medium / 10 px / 16 px Leading / #0F2E33
Créer une librairieAssembler toutes les ressources
Black#0F2E33rgba(15, 46, 51, 1)
Primary#8EB1C7rgba(142, 177, 199, 1)
Accent 3#EF767Argba(239, 118, 122, 1)
Accent 2#F7EE7Frgba(247, 238, 127, 1)
Accent 1#5FDD9Drgba(95, 221, 157, 1)
Aa ZzRoboto-Regular
Aa ZzRoboto-Medium
Aa ZzRoboto-Bold
Tout dessinerDessiner 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
