Apprenez à créer des fichiers préconçus qui faciliteront votre processus de travail en utilisant la méthodologie Atomic Design pour les interfaces d’applications et sites web
La règle principale des applications est de faciliter la vie de ses utilisateurs, cependant, en créer une à partir de zéro peut être un processus très compliqué. Par conséquent, les kits d'interface utilisateur, des ensembles d'éléments prêts à l'emploi dans la conception d'interfaces, sont une ressource vraiment utile.
Dans ce cours, vous apprendrez à créer des kits d'interface utilisateur pour des applications et des sites Web dans Sketch de la main du designer Migue, alias El Nodos. De plus, vous verrez comment les mettre à jour pour les réutiliser dans de futurs projets et rationaliser encore plus votre flux de travail. Donnez vie à des interfaces époustouflantes et créez des expériences inoubliables rapidement et facilement.
Qu'allez-vous apprendre dans ce cours en ligne ?
17 leçons & 21 vidéos téléchargées
Que ferons-nous pendant le cours
2 minutes, 25 secondes
Qu'est-ce qu'un kit d'interface utilisateur?
7 minutes, 52 secondes
Modèles et composants d'interface utilisateur dans Sketch
4 minutes, 57 secondes
Conception atomique
11 minutes, 18 secondes
Le projet
10 minutes, 16 secondes
Couleurs, police et grille
20 minutes, 13 secondes
Que comprend ce cours ?
Vous commencerez par apprendre à connaître votre enseignant et son parcours professionnel. En outre, il expliquera le projet sur lequel vous travaillerez tout au long du cours.
Ensuite, vous découvrirez ce qu'est un kit d'interface utilisateur et ce qui le différencie d'un système de conception. Vous verrez les modèles de conception d'interface et vous apprendrez à organiser vos fichiers selon la méthodologie utilisée par Migue.
Vous passerez en revue le projet sur lequel vous serez basé pour créer votre kit d'interface utilisateur et vous analyserez les composants à créer. Ensuite, vous définirez votre guide de style en regardant les couleurs, la police, le grilles (grille) et l'ensemble des icônes.
Vous agissez en créant d'abord les atomes, puis vous en combinerez certains pour créer les molécules et, enfin, vous créerez des écrans avec tous ces composants.
Dans la dernière unité, Migue vous montrera comment utiliser votre kit d'interface utilisateur dans Sketch en tant que bibliothèque et comment le maintenir à jour, en ajoutant de nouveaux composants si nécessaire.
Logiciels et outils recommandés pour ce cours
Quel est le projet du cours ?
Vous allez créer un kit d'interface utilisateur qui vous permettra de rationaliser votre travail lors de la création d'écrans pour votre application. Pendant le cours, vous travaillerez à partir d'une application musicale.
À qui s'adresse ce cours en ligne ?
Aux concepteurs qui souhaitent entrer dans le monde de la conception d'interfaces, aux concepteurs d'interface utilisateur, aux concepteurs d'interaction juniors et à toutes les personnes intéressées par la conception d'applications ou impliquées dans la conception de produits numériques.
Prérequis et matériel nécessaire
Une connaissance de base de Sketch est requise pour suivre ce cours.
En ce qui concerne le matériel, vous aurez besoin d'un ordinateur équipé de macOS Mojave ou supérieur et de la dernière version de Sketch installée (vous pouvez télécharger la version d'essai sur son site Web). Avoir un Wacom est un plus, mais ce n'est pas indispensable.
Avis
- il y a 1 an
El curso es una base para iniciar a trabajar con la metodología Atomic Design.
- il y a 3 ans
La neta no era lo que esperaba, pensé que el UI Kits te ayudaba a crear el diseño de la aplicación, pero ya lo tenia creado y solo agrupo los componentes, y también no me gusto el estilo en como hablaba, parecía que le faltaba el aire para pronunciar palabras, disculpen mi critica pero así lo percibí
- il y a 4 ans
Increible curso
- il y a 4 ans
Muy completo
- il y a 5 ans
El curso me ha parecido super claro y completo. El profesor da muchos detalles y es super dinamico para todo lo que explica en tan poco tiempo. Super recomendable.
Actuellement, il se concentre sur la création de systèmes et de modèles de conception évolutifs. En outre, il est le co-fondateur de la communauté SketchMX, où ils organisent régulièrement des rencontres pour la communauté de la conception de produits, auxquelles participent des designers, des développeurs, des rédacteurs ux, des concepteurs de produits et toute personne intéressée par la conception de produits numériques.
Contenu
- U1
introduction
- Présentation
- Les influences
- Que ferons-nous pendant le cours
- U2
Concepts et configuration de l'esquisse
- Qu'est-ce qu'un kit d'interface utilisateur?
- Modèles et composants d'interface utilisateur dans Sketch
- Conception atomique
- U3
Jeter les bases de notre kit d'interface utilisateur avec Sketch
- Le projet
- Couleurs, police et grille
- Couleurs, police et grille 2
- Jeu d'icônes
- U4
Pour créer des composants atomiques dans Sketch
- Création de composants: atomes
- Création de composants: Atomes 2
- Création de composants: molécules
- Construire des écrans avec des atomes et des molécules
- U5
Bibliothèques dans Sketch
- Kit d'interface utilisateur en tant que bibliothèque dans Sketch
- Ajoutez de nouveaux composants à notre kit d'interface utilisateur
- Présentez votre kit d'interface utilisateur
- PF
Projet final
- Création de kits d'interface utilisateur avec Sketch
Ce qu’il faut attendre d’un cours Domestika
Apprenez à votre rythme
Apprenez chez vous, sans horaires fixes et à votre rythme. C’est vous qui décidez de votre programme d’apprentissage.
Apprenez auprès de grands noms du secteur créatif
Apprenez les techniques et les méthodes les plus utiles auprès des meilleurs professionnels du secteur créatif.
Rencontrez des spécialistes reconnus
Dans chaque leçon, votre professeur vous transmettra ses connaissances avec enthousiasme, vous donnera des explications claires et vous fera bénéficier de son expertise.
Certificats
PLUSEn tant que membre Plus, vous recevrez pour chaque cours un certificat personnalisé signé par votre professeur. Partagez-le dans votre portfolio, sur les réseaux sociaux ou partout où vous le souhaitez.
Soyez aux premières loges
Profitez de vidéos de haute qualité pour ne manquer aucun détail. Grâce à un accès illimité, vous pourrez les regarder autant de fois que nécessaire pour perfectionner vos compétences.
Partagez vos connaissances et vos idées
Posez des questions, demandez des avis ou suggérez des solutions. Partagez votre expérience d’apprentissage avec les autres élèves de la communauté qui ont, comme vous, une passion pour la créativité.
Rejoignez une communauté créative internationale
Cette communauté réunit plus de huit millions de personnes des quatre coins du monde, curieuses et passionnées, avec cette même envie de développer et d’exprimer leur créativité.
Assistez à des cours de haute qualité
Domestika sélectionne les professeurs avec soin et produit chaque cours en interne afin de garantir une expérience d’apprentissage en ligne de qualité optimale.
Foire aux questions
Vous apprendrez à créer, organiser et documenter des systèmes de design visuel, des UI Kits et des composants réutilisables dans Sketch, en appliquant des méthodologies comme Atomic Design et les patterns Material Design pour applications mobiles et web.
Ce cours est de niveau intermédiaire, il est donc conseillé d’avoir des bases en design graphique digital ou une expérience préalable avec des outils comme Sketch ou Figma.
Vous aurez besoin d’un ordinateur avec Sketch installé (Mac uniquement), d’une connexion internet et de connaissances de base en design. Une familiarité avec les interfaces digitales et des notions d’ergonomie sont recommandées.
Atomic Design s’applique en divisant les composants en atomes, molécules et organismes, ce qui permet de créer des interfaces modulaires, évolutives et faciles à maintenir dans Sketch.
Oui, le cours vous guide pas à pas pour créer, organiser et réutiliser un UI Kit dans Sketch, centralisant composants, styles et éléments visuels pour applications mobiles ou web.
Oui, vous apprendrez à créer, documenter et gérer des systèmes de design visuel, incluant guides de style, palettes de couleurs, typographies et composants.
Oui, le cours vous montre comment vérifier le contraste des couleurs entre fond et texte, en appliquant des principes d’accessibilité pour améliorer la lisibilité et l’expérience utilisateur.