Design like a developer
0 j'aime4,645 vues
Le document aborde l'importance de la collaboration entre designers et développeurs en proposant des méthodes et outils tels que Sketch et Adobe XD. Il souligne la nécessité de structurer les éléments d'interface en blocs, de créer des styles cohérents et de penser à tous les scénarios utilisateurs. Enfin, il recommande de rassembler toutes les ressources dans une librairie pour une utilisation efficace.
Design like a developer
- 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