Flux de travail pour une conception Web moderne → Idéation, création de fils, maquettes et prototypes.

1. Introduction: Avec la conception Web réactive, la conception Web adoptive et des centaines d'applications de conception en ligne, beaucoup de choses ont changé avec le processus de conception Web au cours des dernières années. Designers, ils Sketch, ils Wireframe, ils Prototype, ils collaborent même avec leurs développeurs, ils génèrent même des guides de style en ligne pour leurs développeurs. Nous allons couvrir tout ce processus moderne de conception Web au cours de ce cours alors laissez-moi vous montrer ce que nous allons couvrir dans ce cours en détail. Dans ce cours, nous allons concevoir un projet de site web réactif à partir de zéro, ce qui impliquera l'obtention d'informations de clients, l'étude des mémoires de conception, Ideation ou au moins des croquis, Wireframing, puis Mockup ou web design pour grands, moyens ou petits écrans ainsi que la configuration et le calcul des grilles, et enfin, nous créerons des spécifications et des guides de style pour nos développeurs. A la fin des flux et des interactions, nous allons construire un prototype simple en utilisant InVision App. Je vais également vous montrer quelques approches et cadres de conception comme Atomic Design, la conception avec l'approche Content-first, Responsive Web Design Considérations et Designing for Developers. Les outils que nous utiliserons au cours de ce processus sont maquettes Balsamiq pour créer des trames filaires. Ensuite, Adobe Photoshop pour créer votre web design ou maquettes pour les grands, moyens et petits écrans. Ensuite, nous allons utiliser Zeplin pour créer des guides de style en ligne pour les développeurs, et à la fin nous allons créer un prototype simple avec l'application InVision. Maintenant, quels problèmes je vais résoudre pendant ce cours ? Comment entrer dans l'esprit de votre client, et où obtenir des inspirations de conception pour commencer votre conception, et comment calculer votre grille pour différentes tailles d'écran, et comment configurer des guides pour différentes tailles d'écran, dois-je besoin de contenu avant de concevoir, et mon design peut-il être facilement converti en code, quelles sont les dernières approches efficaces en matière de design web réactif ? Je vais répondre à toutes ces questions pendant ce cours. Ce cours n'est pas destiné aux débutants dans Photoshop. Si vous étiez un débutant, vous devriez regarder mes autres cours de conception d'interface utilisateur. Salut, je suis Ahsan [inaudible] et je conçois interfaces utilisateur depuis huit ans et je suis un freelance. Si vous voulez apprendre mon processus de création de superbes designs web et de design web réactif en utilisant des tableaux d'art et comment vous allez créer un site web convivial cool, alors vous devriez suivre ce cours. Voyons à l'intérieur de ce cours. 2. Ce que nous aborderons dans ce cours: Maintenant, laissez-moi vous montrer un peu en profondeur ce que nous allons couvrir dans ce cours. En fin de compte, nous allons essentiellement concevoir ce site web réactif pour tablettes, mobiles et vues de bureau ainsi que création de leurs grilles que vous pouvez voir ici, il est quadrillage de quatre colonnes. Ensuite, nous avons huit colonnes grille pour tablette. Laisse-moi te montrer. Nous avons une grille de 12 colonnes pour notre bureau. Autre que cela, nous allons également créer cette documentation en ligne droite. Vous pouvez voir ici l'espacement et les spécifications de nos développeurs. Parallèlement à cela, nous allons également développer notre guide de style de l'interface utilisateur. Vous pouvez voir ici toutes les couleurs, dégradés, topographie, motifs, iconographie, éléments de formulaire, éléments d'interface utilisateur, tout ce que nous allons concevoir en utilisant le guide de style. Au cours de notre processus de conception, nous allons créer plus de planches. Vous pouvez voir ici, j'ai créé un tableau de plus ici. Ensuite, nous allons créer un guide de style à la fin, ce qui est sera en utilisant Zeplin. Vous pouvez voir ici tout le code, couleurs, les ombres, et tout le textile généré ici. Ensuite, nous allons également créer un prototype pour les flux ou animations montrant à vos développeurs que c'est ce que je voulais dire. Vous pouvez voir ici comment cette barre de navigation sort et s'estompe. Peu de concepts de conception que je vais couvrir sont la conception atomique. Vous pouvez voir ici comment nous allons concevoir en utilisant la chimie des atomes, des molécules, des organismes, des modèles et des pages. Nous allons également concevoir en utilisant ce système de grille 8 points, qui est emprunté à Google Material Design et je vais vous montrer comment nous allons utiliser cette échelle de 8 points système de grille dans nos conceptions. partie de la partie que nous allons couvrir est de UX, qui va être notre idée ou notre esquisse et obtenir des détails de vos clients et comment nous allons obtenir des croquis initiaux de notre client, comment nous allons concevoir des filaires, et comment nous allons traduire nos filaires en maquettes. Comment nous allons livrer ces maquettes dans des style, puis des guides de style codés pour nos développeurs à la fin. Si vous avez des suggestions sur ce cours, vous pouvez me demander directement, vous pouvez m' envoyer un message, vous pouvez poser toutes les questions que vous aimez. Si vous êtes resté quelque part ou si vous voulez ajouter une leçon ou que vous voulez plus de détails sur ce sujet, faites-le moi savoir que je vais vous aider. Commençons. 3. Requriements du cours: Commençons maintenant par ce dont nous aurons besoin pour ce cours. On va avoir besoin de deux choses. L' un est votre niveau de compétence et le second est le logiciel comme Photoshop. Nous avons besoin de la dernière version de Photoshop CC en ce moment c'est 2017. Je ne sais pas quand vous allez acheter ce cours. Ça pourrait être 2018 ou autre chose. La dernière version de Photoshop, vous pouvez télécharger la version d'essai de Photoshop ou vous pouvez acheter leur photographie, package CC mensuel emballé. N' essayez pas d'aller pour une seule application, nous avons juste besoin d'un paquet de photographie mensuel. C' est juste pour $10 par mois. Maintenant, en termes de compétence, ce que nous allons avoir besoin, c'est que nous allons avoir besoin au moins des compétences que j'ai écrites dans mon cours de conception d'interface utilisateur dans Photoshop. Vous pouvez voir sur cet écran en ce moment. Vous devez au moins savoir comment vous allez configurer Photoshop pour la conception de l'interface utilisateur, comment utiliser Photoshop, comment configurer des touches de raccourci personnalisées et comment installer des extensions, des ressources, des scripts, tout. Je pense que les deux ou trois premières sections, vous devez savoir comment faire ces choses avant de commencer ce cours. Aussi, si vous êtes inquiet au sujet des combinaisons de typographie, vous devez suivre mon cours de typographie de type pour vos designers. Je ne vais pas vous montrer tous les trucs et astuces, comment j'ai sélectionné le faux pour ce design. Ce cours couvrira spécifiquement toutes les étapes et le processus d'un concepteur web moderne, de son processus de conception jusqu'à sa manipulation aux développeurs. Même nous allons produire certains des guides de codage et de style dans ce cours. Il y a beaucoup d'informations dans ce cours. Ne ratez pas ça, et commençons. 4. Extensions Photoshop dont nous avons besoin: Avant de commencer avec notre conception web réactive Photoshop et notre workflow de conception web moderne, je vais vous montrer et partager avec vous quelques-uns des plug-ins et des scripts dont nous aurons besoin pendant ce cours. Jetons un coup d'oeil à eux et je vais vous montrer les gratuits et les payants. Maintenant, à partir de maintenant, je ne vais pas vous expliquer tout ce que je sais que vous êtes expert, au moins en gestion de Photoshop. Si vous n'êtes pas un expert, vous devriez voir mes quelques autres cours, qui sont la conception de l'interface utilisateur dans Photoshop et la typographie pour les combinaisons typographiques et le choix de la police et de la police appropriées pour votre projet. Commençons, je vais vous montrer la plupart du temps, les libres et les plus importants dont nous aurons besoin pendant tout ce cours. Voyons ce que nous avons. Maintenant, le premier plugin que je vais vous montrer est ce UberFaces pour montrer les icônes d'avatar et les visages des gens. Vous pouvez apporter différentes photos dans Photoshop pour la plupart des photos portrait et les avatars dans votre conception d'interface utilisateur. Similaire est celui-ci, c'est fondamentalement un randomuser.me. Ils ont l'extension Photoshop, vous pouvez télécharger le dernier. Ensuite, nous avons cette encre. Nous allons générer des spécifications pour nos développeurs, vous pouvez voir cet exemple ici, la hauteur et la largeur des éléments et aussi la force. Donc vous pouvez voir ici, ça va montrer la force ici. Alors nous allons avoir besoin de ce Gridify. C' est vraiment le plug-in le plus nécessaire pendant mon cours. Tu as vraiment besoin de celui-là. Ensuite, vous pouvez également installer cette police Awesome PS. Parfois, nous avons besoin de quelques icônes de la bibliothèque Font Awesome, qui est essentiellement pour les développeurs et bootstrap. Quatre autres que je vais mentionner ici sont les plugins dont nous n'avons pas vraiment besoin, mais ils sont géniaux. L' un d'eux est ce guide. Cela coûte 10$ et c'est l'un des meilleurs que j'ai vu pour la présentation de vos notes et de vos guides. Ensuite, nous avons ce Subtil Patterns pour apporter un motif différent dans Photoshop. Ensuite, nous avons le CSS Hat 2 pour l'amener et l'utiliser pour différents CSS. Générer instantanément des couleurs CSS, des dégradés pour vos calques et éléments Photoshop. Ensuite, pour encore une fois, les spécifications du développeur, vous pouvez voir que c'est un autre. Ceux-ci sont appelés spécifications de ligne rouge, vous pouvez voir ici. La plupart de nos développeurs ont besoin de savoir quelles sont les distances entre les différents éléments du haut et quelles sont les largeurs et les hauteurs de ces éléments comme les boutons. Donc c'est l'un d'entre eux, mais c'est un peu coûteux. On va utiliser ce jeu gratuit, Ink. Essayez d'abord de donner à mes étudiants les plugins gratuits parce que je pense, vous ne devriez pas dépenser trop pour acheter des plugins s'il y a une bonne alternative gratuite. Peu d'autres plugins, celui-ci exporte également les calques Photoshop, mais nous allons utiliser Photoshop panneau d'exportation à la place, donc peut-être si vous aimez celui-ci ou si vous concevez pour iOS ou Apple, alors vous pouvez extraire 2X ou 3X sortie pour les écrans de rétine, alors nous avons peu de plugins comme celui-ci. C' est Renamy, et c'est pour les fichiers SVG, exportant des fichiers SVG, principalement pour les icônes. Ensuite, vous exportez les icônes SVG, elles vont se développer et se contracter facilement, ce sont des formes vectorielles. En HTML et en programmation, ils vont vraiment aider vos développeurs plutôt que d'exporter des fichiers PNG. Ensuite, nous avons encore quelques choses que je vais vous montrer. Maintenant, pour la partie installation des plugins, je vais vous montrer quelques-uns des articles que vous devez connaître. Donc, si vous n'avez pas vu mon cours précédent, conception de l' interface utilisateur dans Photoshop, vous avez vraiment besoin de le voir ou de le prendre. Vous allez trouver le code de réduction pour mes autres cours à la fin de ce cours, donc si vous devez le suivre avant de suivre ce cours, vous devriez le suivre. Dans ce cours, je vous ai montré l'ensemble du processus d'installation de différents plugins Photoshop CC dans Mac ou même le système d'exploitation Windows, et comment vous allez utiliser ce programme d'installation ZXP pour installer différents plugins dans Photoshop CC 2017, et aussi comment vous allez l'installer manuellement. Je vais partager ces deux liens la plupart du temps, essayer de lire les instructions de n'importe quel plugin que vous téléchargez parce que j'ai vu beaucoup de mes étudiants qui me posent des questions et quand je leur dis, « Avez-vous lu le fichier readme ou instructions d'installation ? » Puis ils disent : « Oh, j'ai oublié de le lire. Je ne suis pas en mesure de l'installer. Maintenant, je l'ai installé. » Avant de me contacter ou de me poser des questions, essayez de lire attentivement le guide d'installation et suivez les étapes. Ce sont tous les plugins dont nous allons avoir besoin, je vais répéter à la fin à nouveau. Les quatre ou cinq plugins dont nous avons vraiment besoin sont ce plugin Uber, UberFaces. Soit vous pouvez utiliser UberFaces ou ce générateur d'utilisateurs aléatoires. J' aime ce UberFaces plus. Ensuite, nous avons vraiment besoin de cette encre, et aussi de cette Gridify, et de cette Font Awesome Photoshop. Si vous pouvez en avoir d'autres, c'est à vous de décider, mais je ne recommande pas de dépenser trop pour eux. Passons maintenant à la leçon suivante où je vais vous montrer mon interface de configuration Photoshop. Je vais aller avec beaucoup de vitesse parce que toutes ces choses que j'ai discutées dans mon cours Photoshop conception d'interface utilisateur, qui est pour les bases et les utilisateurs professionnels ou même experts, alors passons à la leçon suivante. 5. Comment organiser un projet de conception Web: Dans cette leçon, nous allons parler de l'organisation des dossiers. Beaucoup de designers que j'ai vu, ils essaient normalement d'organiser leur PSD dans différents dossiers et tout est dispersé, ils ne localisent pas les polices ou les actifs utilisés. Donc, en fin de compte, c'est un très gros gâchis si vous travaillez avec une équipe, une équipe de développement ou un chef de projet, vous devez être très bon pour organiser vos affaires. Permettez-moi de vous montrer comment j'organise normalement mes PSD et actifs et différents fichiers. abord, nous allons créer un dossier avec le nom du projet, comme Wstudio Design ou vous pouvez également le nommer avec le nom d'un client, et vous pouvez également créer plusieurs projets dans un dossier client unique. Donc, si vous obtenez beaucoup de travail à partir d'un seul client, vous pouvez créer le nom du client, puis créer plusieurs dossiers de projets. Alors nommez-les, vous pouvez également marquer la date. Donc c'est comme 2017, donc je sais que je l'ai fait en décembre 2017 ou novembre 2017. Vous mémorisez cela à la fin si vous avez besoin de le trouver, vous pouvez facilement le trouver que je l'ai fait en 2017. Maintenant, voici un exemple de la façon dont je vais nommer le dossier d'un client. Voici le nom de mon client et à l'intérieur que j'ai un projet de conception de ce client et si je vais à l'intérieur de ce projet de conception, vous pouvez voir qu'il y a différents dossiers, le contenu du site, le contenu écrit, le texte et la copie, Je vais le garder dehors. Aussi ce guide de style américain que nous allons créer à la fin, en ce moment, vous n'avez pas besoin de vous inquiéter à ce sujet, juste vous allez garder ces deux à l'extérieur. Ensuite, le filaire, trouver le dossier pour les filaires, vous pouvez voir ici j'ai un filaire. Ensuite, nous avons tous les PSD avec leurs aperçus, alors assurez-vous de toujours créer un aperçu de chaque fichier que vous concevez parce que parfois en regardant juste les développeurs de noms ou peut-être les gestionnaires de projets, ils ne vont pas obtenir ce que ce est tout au sujet. Donc juste en voyant son petit aperçu, ils savent que c'est le grand design. Aussi, vous pouvez voir que je les ai nommés landingpage_lg, lg signifie grand, la plupart des développeurs connaissent ce terme, mais quand même s'ils ne connaissent pas ce terme, vous allez générer un aperçu et ils vont voir le et sachez instantanément que ce fichier est moyen pour un écran moyen ou grand écran ou petit écran. Maintenant, dans l'inspiration, il est fondamentalement votre planche d'humeur ou les inspirations, vous pouvez voir ici j'ai beaucoup, vous pouvez voir comment j'ai eu des inspirations de différentes photos et images, vous pouvez voir ici j'ai pris les photos du site si comme, je prends des captures d'écran. Vous pouvez voir ici, voici un autre thème ou tableau d'humeur, je vais parler beaucoup de planche d'humeur et nous allons en créer un en ligne afin que nous puissions collaborer avec d'autres designers ou peut-être des développeurs ou des gestionnaires de projet. C' est ainsi que vous allez organiser tous vos dossiers et vos actifs. Dans le dossier assets, nous allons garder toutes nos polices ainsi que les images stock que nous allons utiliser pendant notre projet. Donc, la prochaine fois, je ne veux pas voir final, final finit par foiré organisation de dossier si vous concevez pour un client. Donc, tous mes étudiants, je veux juste m'assurer que vous savez comment organiser vos dossiers de conception, peut-être que d'autres designers pourraient le faire différemment, mais je pense que je le fais comme ça. Donc ce sont les inspirations, PSD est la finale, PSD est avec des aperçus, filaires. Aussi avec des aperçus, je pense que j'ai oublié l'aperçu ici. Ensuite, le contenu du site, guide de style de l' interface utilisateur, les inspirations et les ressources. Il y a encore une chose que vous pouvez créer ici, peut-être que vous pouvez créer un document de spécifications, peut-être un dossier de spécifications pour vos développeurs. Maintenant, dans ce dossier, nous allons garder le document en ligne rouge, laissez-moi vous montrer le document en ligne rouge. Copions ça d'ici et je vais le coller. Donc c'est notre document en ligne rouge, nous allons le partager dans un autre dossier, comme vous pouvez le voir ici, nous avons montré les distances et les tailles de nos boutons et toutes les autres choses différentes. Donc, ce sont les spécifications de distances et peut-être que nous pouvons déplacer notre guide de style d'interface utilisateur dans la spécification comme ça. Je pense que c'est tout, c' est ainsi que vous pouvez obtenir une bonne organisation de dossiers pour vos projets de conception. Passons donc à la leçon suivante. 6. Organiser vos couches de PSD et vos groupes: Dans cette leçon, je vais parler de l'organisation vos couches Photoshop en groupes et de la façon dont vous allez les nommer correctement, sorte que vos développeurs ou d'autres membres de l'équipe ou d'autres concepteurs, chaque fois qu'ils ouvrent votre fichier PSD, ils savent ce que signifie ce dossier ou ce groupe ou cette convention de dénomination signifie. Commençons. Maintenant, vous pouvez voir sur la droite dans mon panneau de calques, laissez-moi juste le rendre un peu plus grand. Je vais augmenter la taille des vignettes en ce moment. Maintenant, si vous regardez cela dans le panneau Calques, vous pouvez voir en haut, sont essentiellement les spécifications annotées par Ink. Je vais nommer ça des spécifications, quelque chose comme ça. Alors que les développeurs savent que ce sont les spécifications. Vous pouvez les cacher ou vous pouvez les montrer. Vous pouvez voir ici dans les lignes rouges ici, si j'essaie de les cacher, vous pouvez voir qu'ils sont cachés et montrés. Donc ce sont les spécifications. Ensuite, la prochaine sera Grid. Il y a deux grilles, grille verticale et horizontale. Vous pouvez voir ceci est la grille de colonne, vous pouvez voir ici, 1200 pixels de large et ceci est la grille verticale. Il est préférable que vous les nommez comme une grille verticale à 8 points, quelque chose comme ça. En outre, vous pouvez utiliser quelque chose comme 1200 pixels, 10 pixels, marge, avec la gouttière de 30 pixels. Donc, le développeur sait que c'est le système de grille que vous avez utilisé. Maintenant aller de l'avant, vous pouvez voir que nous avons en-tête en haut, alors nous avons, si j'ai essayé de le cacher, vous pouvez voir toute cette zone de héros et la zone d'en-tête est cachée. À l'intérieur de cet en-tête, j'en ai un, qui s'appelle le contenu. Donc, vous pouvez voir tout mon texte et mes boutons sont sur ce contenu. Si vous allez à cette navigation et logo, il est une section supérieure, puis ce fond vidéo, il est dans un autre groupe. Vous pouvez également déplacer ce calque dans le calque d'arrière-plan vidéo comme ça. C' est un pâté de maisons ici zone vidéo. C' est ainsi que vous allez aligner et organiser l'ensemble de votre contenu dans différents dossiers et sections. Ensuite, nous avons la section suivante, qui est ce processus sur les jalons de chaque projet que nous prenons, la section 1. Maintenant, si vous cliquez sur une icône, vous pouvez voir ici, J'ai ce dossier appelé étapes. Toutes les quatre étapes sont à l'intérieur de cela et ils ont leurs dossiers séparés avec leurs icônes, comme vous pouvez le voir, étape 1 icône. Donc, la plupart du temps, les développeurs utilisent des conventions de nommage avec des tirets ou des traits de soulignement. Essayez donc de les utiliser, utilisez des lettres minuscules, étape 1 icône, ou étape 2 icône, étape 1 icône ou étape 2 icône, étape 3 icône. Vous pouvez voir par ici. Il en va de même pour les boutons. Donc, si je clique sur ce bouton, vous pouvez voir que j'ai nommé ce bouton entier, btn-main. Fondamentalement btn est pour le bouton et c'est principal. Ne vous inquiétez pas de cette couche, mais la plupart du temps votre dossier doit être nommé correctement, il s' agit donc d'un groupe. Maintenant, passons à quelques autres choses. Maintenant, vous pouvez voir au pied de page, nous avons ce pied de page à la fin et vous pouvez les cacher ou les montrer comme vous le souhaitez. Une chose de plus parfois, peut-être exprès, je peux faire un clic droit ici et donner un peu de couleur à cela, comme c'est orange ou peut-être que je veux donner une couleur rouge à cet en-tête ou peut-être que je veux donner la couleur rouge à ce et aucune couleur à tous. Cette couleur rouge signifie qu'il s'agit d'un dégradé et qu'il est verrouillé et que le développeur ou l'un des concepteurs qui vont travailler dessus, ils peuvent immédiatement savoir que ce calque est fondamentalement verrouillé. Aussi, si vous voulez l'arrière-plan comme celui-ci, vous pouvez utiliser quelque chose comme celui-ci ou vous pouvez ajouter un nouveau calque comme celui-ci, couleur unie et l'utiliser pour l'arrière-plan, je vais le nommer bg. Il est facile de changer de couleur à tout moment. Je peux le rendre gris ou n'importe quelle couleur que j'aime. Voici donc comment vous allez organiser l'ensemble de votre en-tête de document section 1, section 2, section 3, section 4 et pied de page. Pour créer tous ces dossiers, j'ai l'action enregistrée ici, donc je vais le montrer dans la prochaine vidéo quand nous allons commencer à les concevoir. moment, le but principal de cette conférence est que la façon dont vous allez organiser vos couches de sorte que les développeurs ou d'autres concepteurs ou d'autres membres de l'équipe, ils peuvent facilement comprendre ce que vous avez conçu. Passons à la leçon suivante. 7. Faire des conventions de noms avec des développeurs: Maintenant, j'ai quelques conseils supplémentaires sur le nom de vos couches correctement. Maintenant, si vous regardez l'un des éléments comme ces boutons ou menus déroulants, ce qui est cliquable ou a une interaction dessus, il y aura deux ou trois états supplémentaires pour cela. Si j'ai ce bouton que vous pouvez voir ici, il a deux états. L' un est ceci, et l'autre est l'état stationnaire ou actif. Je vais les nommer très correctement. La même chose est l'histoire avec ce bouton obtenir un devis, j'ai deux versions de celui-ci. L' un est ce bouton fantôme. Lorsque l'utilisateur va passer le curseur dessus, il va être libre comme ceci. Maintenant, quand vous allez nommer les couches de groupes de cette interaction, vous allez être très prudent. En ce moment, vous pouvez voir ici que j'ai bouton-guillemet fantôme. Ensuite, ce bouton va être rempli et avec un trait de soulignement que j'ai indiqué ici, c'est le vol stationnaire et l'état actif. Donc, il va être stationnaire et état actif pour les deux états, il va être comme ça. Maintenant, sur les appareils mobiles, plupart du temps, il n'y a pas d'état de vol stationnaire parce que le toucher va être essentiellement l'état actif. Lorsque quelqu'un essaie de toucher le bouton, n'importe quel bouton de votre site Web, sur un écran mobile, il n'y a pas de survol sur un écran mobile alors gardez cela à l'esprit. Si vous planifiez une animation ou quoi que ce soit ou une interaction, ajustez avec l'ensemble et un autre pour l'actif, alors vous êtes dans une mauvaise position. Alors réfléchis bien. Votre bouton aura à la fois des états actifs et survolés identiques car sur appareils mobiles il n'y a pas d'état de survol. Vous ne pouvez donc pas survoler une icône ou un élément sur votre, n'importe quel bouton sur votre écran mobile. Maintenant, si vous regardez ce bouton, je vais vous montrer comment je l'ai renommé. Donc, vous allez ajouter l'état actif de survol, et puis c'est l'étape simple. Vous pouvez également ajouter l'état normal ici comme cette normale à la fin juste pour indiquer clairement que vos développeurs comprennent que ce qu'il va être. Assurez-vous donc que pour toutes les icônes, même si ces icônes ont des interactions sur le vol stationnaire ou quelque chose comme ça, vous allez ajouter un autre groupe et le renommer en fonction de son état. C' est la bande principale. Comme vous pouvez le voir ici, c'est essentiellement le vol stationnaire ou l'état actif. Vous pouvez voir que je l'ai mentionné ici designer surbrillance hover. Donc, c'est l'élément mis en surbrillance ou l'utilisateur se concentre en ce moment ici. C' est donc la bande que je voulais vous donner pour nommer vos calques et boutons ou listes déroulantes qui sont interactives et les nommer correctement afin que vos développeurs sachent que cela va être un changement de couleur ou un changement d'état. Passons maintenant à la leçon suivante. 8. Qu'est-ce un bon briefing de design ?: Maintenant, chaque fois que vous commencez un projet de conception, qu'il s'agisse d'un design web, d'un logo ou d'une application, la première chose que vous allez obtenir de votre client est le descriptif de conception. Maintenant, il y a deux types de clients. Celui qui peut créer un très beau dossier de design et d'autres qui vont juste dire, nous avons besoin d'un site web. Dans ce cas, vous allez obtenir les informations de votre client, que je vais traiter dans la prochaine leçon. moment, dans cette leçon, je vais vous montrer des exemples, des exemples réels de plus de trois ou quatre slips design et quels sont les détails que vous pouvez obtenir avec eux alors commençons. Maintenant, voici notre mémoire de design du concours 99designs.com web design. J' ai ouvert ce concours qui est essentiellement en cours d'exécution en ce moment, site Web élégant pour les produits parentaux intelligents. Maintenant, si vous allez dans ce bref onglet, j'ai ouvert celui-ci. Il y a peu de sections. Renseignements généraux de cette organisation. Ensuite, nous avons des styles visuels personnalisés. Ensuite, nous avons des détails sur le contenu ; quel sera le contenu de votre conception ou de votre page, et ce que vous devez éviter. Ensuite, nous avons d'autres informations comme d'autres notes, vous pouvez voir il y a toutes les différentes pièces jointes et logos et photos de marque, images que vous pouvez voir ici. Ce sont de très belles images prises sur fond blanc. Il y a aussi des produits livrables. Ce sont essentiellement pour le concours que les fichiers finaux seront dans celui-ci [inaudible] Maintenant, parlons d'eux un par un. Les renseignements généraux porteront sur ce qu'est l'organisation ? Quel est leur public cible, ce soit pour les parents, que ce soit pour les personnes âgées, que ce soit pour les conseillers financiers ou autre. Vous devez lire tout cela attentivement. Alors, quelle est l'industrie de cette organisation ? Que ce soit une industrie de la mode, l' industrie de la technologie, et puis nous avons un site Web existant. La plupart du temps, normalement, notes de conception ont des sites Web existants et vous devez reconcevoir ce site Web ou vous devez en créer un meilleur. Ensuite, nous avons ces styles visuels, donc il n'y a rien ici spécifié ce client dans le style, mais il y a beaucoup de sites Web inspirants. De ces sites Web inspirants, vous allez obtenir beaucoup de planche d'humeur ou vous pouvez dire que ce dont votre client a vraiment besoin. A propos de chaque site, il a spécifié qu'il cherche quelque chose comme ça. Puis il aime la propreté de ce site. Ensuite, c'est dans la tendance, à la mode, projet propre, image minimale du produit, élégant. Ce sont les styles qu'il cherche. Pour chaque site web ou site d'inspiration que votre client vous envoie, même si vous lui demandez un bref, alors mentionnez toujours ce qu'il aime à ce sujet. N' obtenez pas seulement deux ou trois URL, des URL de site Web qui ne vont pas vous aider du tout. Demandez à votre client, qu'aimez-vous de ce site web ? Quelle est la partie spécifique que vous aimez à propos de ce site Web ? Prenez cela dans votre esprit et prenez des captures d'écran de ces sites Web. Ce que je fais c'est que j'ouvre ces sites Web inspirants et je prends la capture d'écran en utilisant ce plugin que j'ai, ce plugin Firefox. Je crois que ça s'appelle Shot. Je ne me souviens pas de son nom, mais je vais partager l'URL pour cela. Il y a beaucoup de bons qui peuvent prendre des captures d'écran aussi, parfois je crée juste un fichier PDF de ce bref et l'enregistrer dans un dossier. Passons aux détails du contenu. Maintenant, les détails du contenu seront ce qu'est cette page et ce que le contenu de cette page, les en-têtes et tout le reste. Vous pouvez voir qu'il a moins de description, mais peut-être dans les pièces jointes, vous trouverez le contenu du discours. Maintenant, ce qu'il faut éviter, ce sont les choses que vous devez éviter. Maintenant, ici, il n'a rien spécifié, mais j'ai vu beaucoup d'autres mémoires où le développeur ou le chef de projet ou le client, ils demandent normalement d'éviter telle ou telle chose. Maintenant, dans l'autre, vous pouvez voir qu'il y a beaucoup d'actifs de conception dans la pièce jointe. En outre, le client vous a dit le thème de votre design, c'est très important. Il devrait être deux ou trois mots comme élégant, ludique, intelligent, créatif, haut de gamme, tendance et premium. Ce sont les thèmes ou les tendances du design que vous allez chercher. Ce sont toutes les images du produit, téléchargez-les et enregistrez-les dans le dossier des actifs dont je vous ai parlé. C' est ainsi que vous allez interpréter n'importe quel mémoire de conception. Vous devez chercher quels sont les thèmes qu'il recherche. Tendance, haut de gamme, créatif, ludique, intelligent. Vous pouvez voir qu'il a une touche de sac à couches premium ou tout ce qu'il est. Laissez-moi vous montrer un autre exemple. Maintenant, voici un autre exemple que j'ai sauvé. Il pourrait s'agir d'un ancien projet de 99designs. Nom de l'organisation, description de l'organisation et public cible. C' est très important. Vous devez demander à l'un de vos clients, si votre client ne vous donne pas de mémoire de conception, vous pouvez créer un document Word ou n'importe quelle question, répondre au PDF, et assurez-vous que votre client répond à toutes ces questions, alors faites un basé sur cela. Je vais partager le modèle avec vous, alors ne vous inquiétez pas, vous pouvez le télécharger à partir d'ici. Maintenant, vous pouvez voir l'industrie, le site Web existant, nombre de pages, la description de la page, style, l'idée de thème, ce qu'il faut éviter. Vous pouvez voir que ce client a donné très moins d'informations donc ce n'est pas un très bon mémoire de conception, mais je pense que cela peut fonctionner avec ce site Web inspirant ; vous pouvez voir que le client mentionne ce qu'il aime sur ce site Web. Il y a d'autres notes, système de gestion de contenu, et la pièce jointe de leur logo. Assurez-vous que chaque fois que vous recevez un mémoire de conception de votre client, vous devez obtenir les directives de conception ou le logo ou l'image de marque de cette entreprise. Vous pouvez voir ici qu'il a déjà un site Web, vous devez donc le reconcevoir. Vous pouvez obtenir le logo à partir de là. Mais il est préférable que vous obteniez le logo au format Adobe Illustrator ou une image transparente au format PNG. Permettez-moi de vous montrer un autre exemple, ceci est un mémoire très détaillé sur un site web, TraderPlaza, vous avez peut-être vu mon design sur [inaudible] pour ce site Web. Maintenant, vous pouvez voir que c'est très long. Vous devez le lire très attentivement. Vous pouvez voir qu'il a montré des informations importantes, objectif principal de la page d'accueil, styles visuels. Il a également mis en évidence quelque chose en rouge. Ensuite, ils ont quelques sites Web inspirants listés ici ; aussi les choses qu'ils aiment à ce sujet, les détails du contenu. Il est très spécifique dans les détails du contenu. Vous pouvez voir la navigation en haut de gauche à droite, le logo, deux liens et la liste déroulante de la langue. Il a un contenu très spécifique. Vous pouvez voir ici, même il montre ce que vous allez écrire dans l'en-tête 1 et l' en-tête 2 dans votre zone d'image d'en-tête. Vous pouvez voir d'autres choses qu'ils veulent sur le formulaire et d'autres contenus. Laissez-moi vous montrer un autre exemple. C' est l'application Web. Il est appelé Ripenn, donc la conception de la page d'accueil de l'application. Il y a des objectifs UX. Quels sont les principaux objectifs, ce que les utilisateurs vont accomplir avec ce design ou avec cette application. Ce sont les actifs de conception nécessaires. Ensuite, ils ont la nouvelle page d'accueil. Ils ont expliqué tout ce qui est nécessaire sur cette application web. Ensuite, cette partie New Seed et il y a cette partie Stream Page, Stream Page Count. Si vous avez quelque chose comme ça d'une application web, vous devez comprendre comment cela fonctionne. C' est le but de cette conception, sinon, vous auriez besoin de poser des questions à vos clients que de quoi il s'agit. Parfois, avec les notes de conception, ce que vous allez obtenir, vous allez obtenir ces aperçus par défaut des pages que vous devez redessiner, quelque chose comme ça donc vous devez les garder avec vous. Il s'agit de slips design et de la façon dont vous allez les interpréter. Si vos clients ne vous ont pas donné de bref de conception éléments de conception ou de ressources de conception comme leur logo, leurs images de produit, c'est le moment où vous allez les obtenir auprès de votre client. C' est la première étape. J' espère maintenant que vous comprenez beaucoup sur les mémoires de design et quels sont leurs formats. Passons à la leçon suivante. 9. Obtenir des idées initiales et des ébauches early: tâche la plus difficile pour tout concepteur est d'entrer dans la tête de leurs clients. C' est la tâche la plus difficile. Maintenant, la meilleure façon d'entrer dans la tête de votre client, et ce dont vos clients ont vraiment besoin est de les laisser esquisser leurs propres idées. Donnez-leur du papier. Si vous pouvez aller chez vos clients, donnez-leur du papier et laissez-les dessiner ce dont vous avez besoin, ce que vous voulez dans l'en-tête et la première section de votre site Web, deuxième section, la troisième section et le pied de page. Cela va vous aider à faire et à ne pas faire de votre filaire ou de votre design web. Maintenant, ne vous concentrez pas trop sur ces mises en page ou ces esquisses de vos clients. Vous allez les améliorer plus tard. Permettez-moi de vous montrer quelques exemples de croquis de clients. Maintenant, vous voyez l'un des croquis du client. Vous pouvez voir qu'ils peuvent être très rudes et qu'ils n'ont pas trop de détails. Assurez-vous que tout ce que votre client écrit, il doit être lisible afin que vous puissiez voir plus tard ce que vos clients ont vraiment écrit à ce sujet, parce que parfois vous allez oublier ce que vous avez discuté avec votre client ou ce qu'il est. Si vous êtes sur un site distant et que vous les avez reçus de votre e-mail, alors vous allez avoir des problèmes si vous ne pouvez pas lire son écriture manuscrite. Maintenant, laissez-moi vous montrer quelques exemples supplémentaires. Voici quelques exemples supplémentaires. Vous pouvez voir celui du milieu et celui de gauche. Ceux-ci viennent de certains de mes clients, et vous pouvez voir que le milieu a un très gros problème que je ne peux pas lire très bien. Élever votre, c'est quoi ce mot ? Score. Je pense que la carte de crédit, vous pouvez économiser autant de votre vie. C' est donc très lourd. Je ne peux pas lire ce qu'il est écrit ici. C' est un très mauvais exemple, alors assurez-vous que votre client écrit quelque chose de très lisible et lisible. Vous pouvez facilement le lire et le comprendre. Sur le côté gauche, encore une fois, le même problème est qu'il y a des choses que je peux comprendre, mais la qualité de l'image est très faible. Aussi, vous pouvez voir ces notations, je ne peux pas lire ce qui est écrit ici. Batterie de message ou je ne sais pas ce que c'est. J' ai donc eu ce niveau 1, niveau 2, niveau 3, niveau 4, mais je ne sais pas quelles sont les annotations ici. Qu' est-ce que cette barre de croquis ou quoi que ce soit ? Ce sont donc les problèmes que vous pouvez obtenir avec ces esquisses client. Alors soyez conscient, assurez-vous de convaincre votre client qu' il vous plaît dessiner ou écrire des choses lisibles comme vous pouvez voir ici dans le bon exemple. C' est une image agrandie d'un croquis client, mais je pense qu'il est très lisible. Je l'ai obtenu à partir d'un site web en ligne, googlé, donc ce n'est pas le mien. Donc c'est la vidéo et c'est la boîte de réflexion ou quoi que ce soit. Ensuite, nous avons des plans, de l'aide ici. C' est donc très concis et très bien écrit. Vous pouvez le lire facilement. Donc, vos esquisses de clients devraient être de cette façon. Vous pouvez également aider votre client, peut-être leur montrer quelques exemples, leur envoyer quelques exemples des croquis, et leur laisser dessiner les siens. De cette façon, ils savent que c'est le résultat final qu'ils vont obtenir. Maintenant, une fois que vous obtenez tous les croquis, l'étape suivante sera affichée dans la vidéo suivante. Passons donc à la vidéo suivante. 10. Questions à poser à votre client avant chaque projet de conception Web: Maintenant, à ce stade, nous avons déjà reçu les croquis de notre client. Le moment est venu d'aller de l'avant et d'obtenir plus d'informations sur la conception et le projet que vous allez faire pour votre client. Il y a deux séries de questions que je vais poser. La première concerne l'entreprise elle-même et ses concurrents, et la seconde concerne ses utilisateurs finaux ou clients. Maintenant les questions sur son entreprise, les affaires de votre client. La première est comment décrivez-vous vous-même votre entreprise ? S' il s'agit d'une seule personne ou d'une personnalité, si je crée un site web sur une figure sociale ou une personnalité sociale, alors ils se décriront que je suis expert enthousiaste ou peut-être que je suis un sport expert ou je suis un blogueur ou quelque chose comme ça. Mais si c'est une entreprise, alors ils vont la décrire comme nous le faisons avec ce genre de vente et nos ventes mensuelles sont la suivante. Donc tout sur leurs affaires, qu' ils vendent quelque chose de proche ou quelque chose comme ça. Deuxièmement, quel est l'objectif principal de votre site Web ? C' est très important. Votre client doit penser à un seul objectif ici. Cela montrera que quel est le but de votre design. Vous allez avoir une bonne idée de cette réponse. Maintenant, le troisième est, quel problème vous voulez résoudre avec cette conception ? C' est très crucial. Maintenant, vous devez savoir à quel problème votre client est confronté. C' est le point de base où vous voulez le frapper vraiment dur pour obtenir de l'argent bon. Quoi qu'ils écrivent ici, ça va être très bon pour toi. Le quatrième est, qui sont vos concurrents, et ajouter les liens du site Web. C' est vraiment crucial. Vous devez voir ce que font les concurrents, quelle mesure leur entreprise se vend, quelle est la structure de leurs sites Web ? Quelles couleurs ils utilisent ? Comment ils ont présenté leurs pages d'apprentissage, quels sont les en-têtes ou les déclencheurs de conversion qu'ils utilisent là-bas ? Il y a beaucoup d'informations que vous pouvez obtenir des concurrents. Ensuite, nous avons la dernière question qui est, avez-vous le contenu prêt pour votre site Web ? Il s'agit de votre client et de son site Web. Vous devez avoir le logo et le contenu du texte prêts avant de commencer à concevoir. Sinon, ça va faire beaucoup de mal à la fin. Parfois, lorsque vous avez le texte, et si vous n'avez pas le texte, toute la structure de votre dessin peut être modifiée. Comme si vous allez mettre quatre ou cinq lignes dans la zone d'en-tête ou de héros de votre site Web, et lorsque votre client vous donne le contenu réel, ils vous donnent une ou deux lignes. Donc, il va vraiment changer votre design. Vous devez le reconcevoir ou le remplacer ou le modifier beaucoup. Obtenez le logo et les lignes directrices de la marque. S' ils ont des directives de marque, comment utiliser leur logo ou les choses et le contenu du texte, ou le contenu de leur page, comme des images, des en-têtes de texte, tout. Donc, vous devez obtenir cela prêt avant d'entrer dans la conception. Maintenant, la deuxième série de questions concerne les utilisateurs et les clients. La première question sera, quelles sont les caractéristiques démographiques de vos clients ou utilisateurs ? Quel est leur âge ? Quelle est leur échelle salariale ou peut-être quelle est leur authenticité ? Qu' il s'agisse de jeunes femmes ou de personnes âgées ou quelque chose comme ça. Cela déclenche que, vous allez viser votre design vers la femme, et quel peut être votre jeu de couleurs pourrait changer sur cette information. Démographie peut changer votre conception et la forme de votre conception. Maintenant, la septième question est, quelle impression vous voulez donner à vos utilisateurs quand ils voient votre site Web pour la première fois ? C' est vraiment important. Ce sont les directives de conception ou les mots-clés de conception. Je les appelle des mots-clés de conception comme le site doit être fiable, ou peut-être qu'il devrait montrer un peu de plaisir ou de créativité, ou peut-être qu'il est très sérieux ou audacieux. Ce sont donc les thèmes. Ils vont vraiment vous aider à choisir votre typographie, vos polices, peut-être vos couleurs, peut-être la rondeur de vos boutons. Maintenant, la huitième et dernière question, quelles informations vos utilisateurs chercheront sur votre site web ? C' est vraiment important. Qu' ils recherchent des coupons de réduction ou qu'ils recherchent la meilleure offre, qu'ils veuillent télécharger un fichier PDF ou le registre de l'eau ou qu'ils veulent s'abonner. C' est la fonction principale de votre site Web. Ceci met fin à ce questionnaire. Je vais partager ce questionnaire avec vous au format PDF et au format Word. Vous pouvez le donner à vos clients et l'utiliser comme vous le souhaitez. Si vous voulez y ajouter d'autres questions, vous pouvez ajouter d'autres questions. Mais c'est ainsi que vous allez obtenir de bonnes informations avant de commencer votre conception. Passons donc à la leçon suivante. 11. Utiliser le modèle de collecte de contenu pour le contenu de site Web: Maintenant, laissez-moi vous montrer comment vous voulez que le contenu de votre client soit dans le format. Permettez-moi de vous montrer le format que j'utilise pour que mon client remplisse son contenu. Donc, ici, nous avons la navigation supérieure et il a des liens vers notre ascenseur de marque, Études de cas, Contactez-nous, Obtenir un devis. Donc, s'ils ont quelque chose qu'ils doivent spécifier comme faire ou ne pas faire, ils peuvent spécifier en rouge dans la ligne suivante. Ensuite, nous avons le titre, puis nous avons le sous-titre, le premier paragraphe et ensuite nous avons, vous pouvez voir ici les boutons. C' est ainsi que vous allez tout exposer, Section 1. C' est donc très important. Tout devrait être dans différentes sections. Vous pouvez voir que c'était notre navigation en haut de l'en-tête et les titres. Ensuite, nous avons la première section, nous avons des jalons. C' est notre rubrique principale, et c'est notre sous-rubrique. Vous pouvez voir que c'est une notation que j'utilise. Cette première ligne, puis il y a deux tirets pour la deuxième ligne qui va être sous-titre. Vous pouvez également utiliser le même format ou la même chose comme ça, encore et encore, mais je l'aime simple. Ici, nous avons les étapes de processus un, deux, trois, quatre, leurs détails. Ensuite, nous avons la section 2, puis la section 3. Notre équipe principale est spéciale, nous sommes un sac plein de sorciers numériques, des images avec des titres ici. C' est essentiellement le document qui va façonner notre conception. C' est tout le contenu écrit, vous en avez peut-être beaucoup, mais en ce moment, c'est celui que j'ai utilisé pour mon design W Studio, que vous allez faire à l'avenir. C' est la section pour ou vous pouvez aussi l'appeler ici pied de page, quelque chose comme ça. Laissez-nous pour vous prêt à aller plus loin. Donc c'est le bouton, consultez au téléphone ou dites-nous ce que vous voulez. Liens sociaux, bureau de fantaisie, adresse de bureau, email et numéro de téléphone. C' est ainsi que vous voulez obtenir tout le contenu de votre client. dehors de cela, vous avez aussi besoin de logos et les images que vous avez utilisées comme cette image que j'ai utilisée, c'est essentiellement l'image de stock, mais vous voulez les images des membres de l'équipe d'origine de votre site Web ou de leurs clients ou tout ce qu'ils ont. Alors obtenez les images, le logo, avant de commencer à concevoir. Il s'agit du contenu dont vous avez besoin pour obtenir de votre client. S' ils ont des images de produit, ils vont vous donner les images du produit. Un autre conseil est que parfois ces images de produit peuvent avoir besoin d' une certaine retouche ou qu'elles doivent être modifiées. Donc vous pouvez facturer un supplément pour cela, mais maintenant, j'ai ces images qui sont déjà éditées et qui sont sur le fond blanc, donc je n'ai pas besoin d'être éditées. Gardez cela à l'esprit, parfois cela peut changer la date limite ou l'heure du projet. Si vous obtenez le contenu, vous pouvez informer votre client que maintenant cela va prendre quelques jours supplémentaires parce j'ai besoin de modifier toutes ces images que vous m'avez données parce qu'elles sont sur un fond rouge ou quelque chose comme ça. Gardez toutes ces choses à l'esprit, utilisez ce modèle. Je vais partager ce modèle avec vous. Passons donc à la leçon suivante. 12. Planches d'ambiance pour la conception Web: Aujourd'hui, je vais parler de Mood-Boards. Maintenant, pourquoi les mood-boards sont-ils importants dans tout projet de conception ? Parce qu'ils vont façonner la direction, l'équipe ou le style de ce projet. Les planches d'humeur sont juste une collection de quelques images, textes ou coupures ou même différentes captures d'écran de différentes parties de sites Web, même des images portrait de différents modèles ou quelque chose comme ça, ou même n'importe quelle photographie à l'extérieur. Même si vous avez pris une photo de votre classe ou quelque chose comme ça juste pour obtenir l'idée ou le thème du style de ce design. Il peut s'agir de couleurs, familles de polices ou de types ou de textes que vous aimez, même si vous aimez certaines icônes d'un site Web, il suffit de couper cela. C' est essentiellement pour définir votre thème et le style de votre design. Maintenant, j'ai utilisé cet outil en ligne, il s'appelle N-I-I-C-E.C-O, niice.co. C' est vraiment cool. Il crée une planche d'humeur, une planche d'humeur en ligne. Il y a différents styles que vous pouvez choisir. Il y a différents styles et options, vous pouvez télécharger votre logo et d'autres choses donc je n'en ai pas besoin. Je change juste le titre et le sous-titre, et il y a aussi des options que vous pouvez exporter. Dans le compte libre, il me reste trois exportations. Je peux l'exporter sous forme de PDF, et aussi de fichier Zip pour toutes les images. Aussi, je peux partager cela avec le lien de téléchargement e-mail, lien privé, mot de passe Dropbox, de sorte que vous pouvez le partager avec n' importe qui ou vous pouvez l'exporter et l'envoyer à n'importe qui. L' essentiel est que vous pouvez également ajouter des gens à ce tableau, vous pouvez ajouter vos équipes de développeurs ou un autre concepteur avec lequel vous travaillez, vous pouvez l'ajouter ici. Maintenant, le but principal est que vous allez définir le thème de votre design. Vous pouvez voir dans cette conception, je vais utiliser une police comme celle-ci. J' ai donc besoin d'une police très audacieuse, très épaisse, très courbée et audacieuse et sans empattement comme celle-ci, j'aime celle-ci. Alors aussi j'aime celui-ci, ce sont les icônes que j'ai aimé. J' ai aimé deux icônes de couleurs, icônes de ligne. Cela pourrait être une bonne source d'inspiration pour nos fonctionnalités ou la zone des étapes de processus. Aussi, vous pouvez voir ici nous avons un autre échantillon pour le texte ou la typographie. Ensuite, vous pouvez voir ici, encore une fois, nous avons le style, les couleurs, typographie, vous pouvez voir les gris, les usages des gris et des violets que je l'ai pris d'ici. Ensuite, nous avons une autre inspiration que j'ai recueilli ici, vous pouvez voir cette Expériences utilisateur Inspiré par les gens. Ce paragraphe, ce bouton, vous pouvez voir l'ombre, les couleurs, les lumières autour d'elle, nous pouvons l'étendre, agrandir comme ça. Donc, vous pouvez le voir clairement. Vous pouvez alter ou cliquer sur cette option pour réduire la taille. Ce sont différentes images que j'ai collectées ou les clips de texte, ou différentes captures d'écran que j'ai recueillies pour obtenir le thème et la direction de notre conception. Si vous regardez celui-ci, vous pouvez voir comment cette image est découpée à l'intérieur de cette boîte en bas. C' est l'idée que j'ai prise dans ce domaine, cette planche d'inspiration et je l'ai utilisée dans notre section équipe, où j'ai montré les images de notre équipe debout. Ce sont toutes les choses et les thèmes, couleurs et les idées de texte et de topographie, même les idées de mise en page. J' ai utilisé certaines des idées de mise en page de ceux-ci. En outre, vous pouvez voir cette image ont superposition de noir. Donc superposition très noire et superposition gris-noir, j'ai aimé. J' ai utilisé une superposition violette, semblable à celle-ci. Aussi l'arrangement du contenu ici, je l'aime vraiment. Ici, nous avons l'adresse, ici nous avons nos liens sociaux. C' est la meilleure façon de créer votre équipe de conception. D' autres peuvent également ajouter des images ou quelque chose comme ça ici. Si vous cliquez sur ce « Plus Sign », vous pouvez télécharger des images, vous pouvez ajouter une vidéo, vous pouvez ajouter du texte et vous pouvez ajouter des sous-tableaux si vous avez plusieurs tableaux, comme deux ou trois. En ce moment, je n'ai vraiment pas besoin de plus que ces quelques uns. J' aime vraiment ceux-là et je n'ai besoin que de ces deux-là, commencer mon design. Même si vous pouvez ajouter votre logo ici, s'il est déjà conçu, vous pouvez l'ajouter ici, afin qu'ils puissent correspondre au style avec tout cela. C' est tout à propos des humeurs. Si vous concevez sans un tableau d'humeur, il vous manque quelque chose. Vous pouvez créer des tableaux d'humeur en ligne ou vous pouvez avoir juste un dossier avec rempli de toutes ces images pour obtenir l'inspiration. Normalement, je crée un dossier sur mon disque dur. J' utilise cet outil peut être il y a quelques jours, je l'ai vraiment aimé. Mais quand même, je préférerai mon propre disque dur si je travaille seul. Si vous travaillez en équipe, cet outil est une bénédiction. Il y a une version gratuite et aussi une version pro, ce moment j'utilise la version gratuite et c'est assez pour moi. Il s'agit de planches d'humeur. Passons à la leçon suivante. 13. Phase d'idée (au moins 3 mises en page en page): La première étape dans n'importe quel type de conception est l'idéation. Maintenant, l'idée signifie que vous allez obtenir quelques croquis grossiers de votre idée et l'obtenir sur le papier très rapidement. Au moins, je suppose que vous avez besoin d'au moins trois dessins. Tout d'abord, commencez par la première conception, puis un autre. Peut-être que vous pouvez ajouter jusqu'à six mises en page comme ça. Parfois les équipes de conception, elles viennent avec plus de 20 ou peut-être 30 mises en page ou croquis différents dans cette phase d'idéation. Vous pouvez voir ici, j'ai les croquis initiaux, quatre croquis différents, quatre mises en page différentes pour la même page que nous avons conçue. Maintenant, sur le côté gauche, si vous pouvez voir par ici, nous avons le logo sur le côté gauche et la navigation et le bouton par ici. Une chose que vous devez garder à l'esprit que dans votre phase d'idéation ou dans cette section, vous n'allez pas utiliser de mots. Vous pouvez voir ici, les boutons sont juste des boîtes pleines remplies de marqueur noir ou d'encre, et les lignes ici sont juste les lignes ondulées pour le texte ici. C' est juste une vidéo que ça ici, ce sera une vidéo ici. Ensuite, ce sont quatre icônes, vous pouvez voir ici. Encore une fois, le texte vague quatre textes. Ensuite, voici quelques images ou portraits d'équipes. C' est juste la mise en page. Vous pouvez voir ici, je suis juste exposer mon contenu sur cette page très rapidement. Maintenant, c'est la disposition centrale pour l'en-tête supérieur. Maintenant, dans cette section, vous pouvez voir ici, j'ai complètement changé la mise en page. Je place la vidéo ici et le texte et le bouton ici. Ensuite, les quatre étapes, je les utilise dans l'icône de l'étape ou l'image ici, les détails ici. Icône pas ici, détails par ici. C' est ainsi que je change la mise en page de la première itération ici. Ensuite, vous pouvez voir dans cette section pour notre équipe, vous pouvez voir les images sont totalement changées. Ici, nous avions des formes ovales, et [inaudible] sur le [inaudible] maintenant qui nous avons la moitié du corps de l'image ou la moitié du corps de notre équipe. Puis en bas, vous pouvez voir que j'ai une carte et un emplacement. Nous pouvons également ajouter le numéro de téléphone ici. Ensuite, sur le côté droit, j'ai un formulaire à contacter ou peut-être commencer un formulaire de devis. Puis en bas, j'ai quelques lignes ici et des liens sociaux. Tout ici est illustré de la manière la plus simple. Vous n'allez pas élaborer ici l'annotation et l'élaboration vont être dans la phase filaire. Donc, une fois que vous allez décider de ces quatre options ou cinq options ou six options, vous allez finaliser l'une d'entre elles et vous allez construire filaire dessus. Vous pouvez voir ici, nous avons une autre mise en page. J' ai en fait mélangé deux pages. J' ai donc essayé de le mettre ici, mais vous pouvez voir que la section 3 est un peu mal alignée parce que j'ai utilisé la page suivante. Vous pouvez voir par ici. Maintenant, ici, nous avons une autre mise en page. Ici, nous avons deux vidéos ici, et nous avons notre texte et notre bouton ici. En outre, vous pouvez voir le long de la vidéo, nous avons un texte ou peut-être un témoignage de notre client, alors nous avons totalement différent ici 1, 2, 3 est le processus et ici je montre les membres de mon équipe qui sont responsables de cette pas. Ensuite, nous avons, encore une fois, quelques images de membres de l'équipe ou peut-être je pense que ce sont quelques témoignages de clients supplémentaires avec le processus ou peut-être que nous pouvons en avoir un ou deux. C' est donc l'idée que j'ai utilisée dans le design final. Nous avons eu deux témoignages de clients ici. Maintenant, vous pouvez voir dans la dernière, cette disposition historiquement centralisée un et deux, et c'est presque la même chose ici. Celui-ci est totalement différent pour la carte du pied de page et le formulaire de contact. Alors celui-ci est totalement différent. Nous avons un bouton et un texte ici, et nous avons des offres récentes ou quelque chose de nouveau ici qui est peut-être des tweets récents ou quelque chose comme ça, ou des liens de projets récents. Ensuite, nous avons cette barre sociale ici et nous avons peu de liens et de textes ici. C' est ainsi que vous allez exposer quelques idées d'idées initiales et croquis sur votre conception. Il s'agit également d'une phase de conception de l'expérience utilisateur. Je pense donc que nous allons aborder certaines des phases de conception de l'expérience utilisateur dans ce cours. Je pense que c'est beaucoup d'idées. Passons maintenant à la phase filaire. 14. Introduction à des maquettes Balsamiq: Maintenant, nous allons utiliser Balsamiq Mockups pour concevoir notre maquette pour cet exercice, pour ce design. Il s'agit essentiellement d'une prochaine étape de notre phase d'idéation. Maintenant, je vais utiliser Balsamiq Mockups. Je vais vous donner une partie de l'introduction de ce logiciel. Il est très facile à utiliser, donc ne vous inquiétez pas à ce sujet. Vous pouvez télécharger sa version d'évaluation pendant 30 jours. Aussi, si vous pouvez l'acheter, je pense que ça vaut la peine si vous dessinez beaucoup de filaires. Si vous ne voulez pas l'acheter, vous pouvez utiliser même Photoshop. Vous pouvez télécharger ces kits pour les kits filaires. Vous pouvez voir ici, il y en a beaucoup, vous pouvez voir, ou vous pouvez créer votre propre. Ce n'est pas une grosse affaire. Maintenant, l'avantage d'utiliser Balsamiq est qu'il utilise un style très sommaire. Donc, l'utilisateur final, nos clients, si vous leur présentez votre filaire, ils ne seront pas confus que c'est la conception finale. Le deuxième avantage est qu'il a beaucoup d'extensions. Vous pouvez voir, vous pouvez charger beaucoup d'autres maquettes de design comme vous pouvez voir ici. Il existe différentes bibliothèques pour prendre en charge la conception iOS ou Android. Même vous pouvez voir, eh bien, les modèles Apple Watch. Ensuite, nous avons beaucoup de grands modèles comme celui-ci, Bootstrap. Si vos développeurs utilisent Bootstrap, alors vous pouvez tout de suite aller de l'avant et filtrer ensemble de votre conception en utilisant cette bibliothèque d'amorçage. En outre, il existe des modèles pour UX Design. Nous n'avons pas besoin d'eux en ce moment, Cas d' utilisation et autres projets. Donc, il y a beaucoup de grande bibliothèque de symboles qui est libre à utiliser. Vous pouvez le charger. Je vais vous montrer comment on va le charger. Ce sont essentiellement des fichiers BML. Vous pouvez voir, ou si vous cliquez avec le bouton droit sur « Télécharger BMML ». Si vous cliquez ici, Télécharger BMML, vous allez télécharger ce fichier et nous allons charger dans notre Balsamiq Mockup pour charger ce fichier. Maintenant, passons à la fenêtre de Balsamiq Mockups, et je vais juste vous donner l'aperçu de la façon d'utiliser cette application. Voici l'écran de Balsamiq Mockups. Vous pouvez voir ici, ici nous avons un nouvel outil de projet Balsamiq. Vous pouvez double-cliquer et changer le nom en Wstudio. Je vais le renommer. Sur le côté gauche, vous pouvez voir ici nos maquettes. Il pourrait y avoir une, deux, trois ou quatre trames filaires. C'est à vous de décider. Ensuite, sur le côté droit, nous avons des informations sur le projet. Si vous voulez cliquer et décrire quelque chose ici, vous pouvez donner quelques informations à vos concepteurs ou autre, vos développeurs, d'autres membres de l'équipe. Ensuite, il y en a deux autres, croquis, et vous pouvez voir ici, mode esquisse est quelque chose comme ça. Nous avons cet iPhone ici, donc vous pouvez voir qu'il est un peu grossier. Ce n'est pas parfaitement rond. Si je passe à filaire, vous pouvez voir qu'il a changé de forme. C' est un peu plus précis. Donc, c'est à vous de décider lequel vous voulez utiliser. C'est un peu plus propre. Peu importe lequel vous utilisez. Je vais, maintenant, supprimer ça. Donc, renommons ceci en page de destination. Voici notre page de destination. Je vais juste vous familiariser avec cette interface en ce moment. Je ne vais rien créer ici. Maintenant, en haut, vous pouvez voir ici, nous avons tous les actifs. Les ressources sont essentiellement les fichiers que vous pouvez importer. Par exemple, si vous souhaitez utiliser des images dans vos maquettes, vous pouvez les importer ici, en accédant à ce Projet, Importer, Actifs. De la même manière, vous pouvez importer les bibliothèques de symboles BMML. J' ai ce iOSControls.BMML. Je peux sélectionner ce fichier et l'ouvrir, et il va être Symbols Library, vous pouvez voir ici. Où je peux le trouver, si je vais à ce symboles suisses, vous pouvez voir que j'ai chargé beaucoup de grilles bootstrap, cette alerte iOS7, mais comme vous pouvez le voir ici. Ce sont des contrôles IOS7. Vous pouvez voir qu'il s'agit d'un contrôle à bascule. Ce sont les contrôles qui n'étaient pas par défaut, présents dans ce logiciel et je les ai chargés à partir de cela. Maintenant, laissez-moi vous montrer quels autres contrôles il a. Vous pouvez aller à Assets, vous pouvez aller à Big où nous avons des graphiques, des images, et quelques autres choses. Ensuite, vous pouvez aller à Boutons. Il y a beaucoup de boutons, interrupteurs marche/arrêt, boutons de pas numériques, et beaucoup d'autres contrôles. Vous pouvez également aller en commun. Il y a icône, nom d'icône, images, liens, étiquettes. En outre, vous pouvez aller à Containers, où nous allons utiliser cette fenêtre de navigateur. Vous pouvez voir ici pour notre conception filaire, formulaires d' arrière-plan pour le contrôle des formulaires, icônes. Nous avons une bibliothèque complète d'icônes Font Awesome par ici. Ensuite, nous avons des contrôles iOS. Vous pouvez voir par ici. Ensuite, nous avons des contrôles de mise en page comme le jeu de champs, barres de boutons, les accordéons, les sitemaps, les barres de tâches. Ensuite, on a Mockup. Quelles sont les commandes que nous allons donner. Peut-être sur le côté de n'importe quelle partie d'un filaire. Ensuite, nous avons des médias où nous avons des images, webcam, lecteur vidéo. Donc si vous ne trouvez aucun symbole, écrivez ici comme bu. Je vais écrire pour les boutons, et vous pouvez voir qu'il y a beaucoup de boutons. bouton, bouton, barre, bouton cercle, boutons multilignes, bouton pointu. Il y a aussi quelques icônes commençant par B. Donc si j'écris bug, vous pouvez voir ici, nous avons une icône ici, ce qui est un bug. Voici comment vous utilisez cet ajout rapide. C' est un outil très utile ici. Aussi, si vous allez au symbole, ce sont les symboles que j'ai chargés. J' ai téléchargé le fichier BML, et j'ai importé quelques bibliothèques BML comme Bootstrap et iOS7 contrôles ici. Maintenant, aussi, vous pouvez aller à des textes quand vous devez écrire un titre, une étiquette, ou quelque chose comme ça. Donc ce sont tous les textes importés, chapelure, bloc de texte. Vous pouvez utiliser quelque chose comme ceci s'il n'y a pas de contenu ou si vous voulez une idée très sommaire de votre mise en page. Voici toute l'introduction de votre interface Balsamiq Mockup. Vous pouvez ajouter de nouvelles maquettes ici. Vous pouvez dupliquer celui-ci en cliquant avec le bouton droit sur cette flèche, renommez-le dupliqué. Vous pouvez également créer des versions alternatives pour la même maquette ou filaire que vous concevez. En outre, il y a plus de contrôles. Vous pouvez voir si j'essaie de créer quelque chose, laissez-moi juste mettre quelques choses ici. J' ai ceci et j'ai cette image, et je veux les aligner. Si ce n'est pas aligné, je vais les sélectionner tous les deux avec Shift. Si vous ne voyez rien ici, vous pouvez cliquer sur celui-ci, Panneau d'information. Ce sont les contrôles pour les aligner. Je peux les aligner au milieu, ou je peux les aligner à gauche, ou je peux les aligner comme ça, au centre vertical. C' est ainsi que nous l'alignons. Si nous allons l'aligner par rapport à un conteneur, comme j'ai cette fenêtre de navigateur, donc je vais le déplacer en arrière en cliquant avec le bouton droit de la souris et Envoyer à Retour. Par exemple, quelque chose comme ça et je vais faire un clic droit et le verrouiller. Donc, il ne va pas se déplacer nulle part. Ne le déverrouillons pas et je vais les déplacer tous les deux. Créer un groupe, Contrôle G ou Commande G pour créer un groupe, et je vais déplacer ce groupe avec ceci, donc je vais l'aligner comme ça. Aussi, si vous faites glisser quelque chose comme ça, vous pouvez voir ici nous avons un guide intelligent. Cela montre que c'est le milieu. C' est le coin gauche par ici, quelque chose comme ça. Si nous cliquons ici, vous pouvez voir, vous pouvez également mettre quelques barres de défilement ici. Modifiez l'arrière-plan. Tout sur ce contrôle, les propriétés de n'importe quel contrôle vont être ici ; taille, position, superposition, extra, etc. Il y a peu de contrôles comme je pense Copier Coller, peut-être Groupe, Ungroup. Je n'ai rien utilisé d'ici. J' utilise simplement mon clavier parce qu'il s'agit de raccourcis clavier très explicites. Tu peux t'enfermer ici. La plupart du temps, ce que je fais est que je verrouille cet écran du navigateur afin qu'il ne bouge pas et ne place pas mes objets par rapport à cela. C' est ainsi que nous allons utiliser ces Maquettes Balsamiq. Il est très facile à utiliser. Je pense avoir beaucoup expliqué. Une fois que vous commencez à l'explorer, vous allez vraiment adorer cet outil. Passons à la leçon suivante où nous allons réellement concevoir notre filaire. 15. Wireframing dans des maquettes Balsamiq partie 1: Dans cette leçon, nous allons concevoir ce filaire pour notre projet web design studio W et nous allons utiliser des maquettes Balsamiq. J' ai donné une introduction, et pendant cette leçon, je vais vous montrer quelques-unes des touches de raccourci que je vais utiliser beaucoup de temps. Commençons. Nous allons créer un nouveau projet, ou nous allons ouvrir un projet que nous avons sauvé la dernière fois. C' est notre studio W, il est juste vide et nous avons créé une maquette. Si vous n'avez pas de maquette ici, vous pouvez cliquer sur ce signe Plus et créer une nouvelle maquette ici ou Control N ou Command N pour une nouvelle maquette. La première chose que nous allons faire, c'est que nous allons avoir un conteneur ici, qui va être notre navigateur. Notre fenêtre de navigateur, rendons un peu plus large au moins 900 pixels ou peut-être un peu plus de 900. Comme ça. De plus, nous allons l'étendre un peu plus, peut-être 1 500 ou quelque chose comme ça ici. Je pense que ça suffit. Si nous voulons l'étendre davantage, nous allons l'étendre davantage. Maintenant, nous allons cliquer avec le bouton droit de la souris et nous allons verrouiller ce navigateur Web. Maintenant, notre page Web de base du navigateur Web est corrigée ici. La première chose que nous allons obtenir, c'est les médias, qui seront notre image ou notre logo ici. Vous pouvez également utiliser celui-ci ou celui-ci, c'est pour vous. Je vais utiliser cette image, je vais le nommer logo. Notre logo va être ici, puis nous allons utiliser notre navigation. Voyons quelle navigation nous avons ici, peut-être une barre de liens comme ça. C' est notre barre de liens, et je vais les renommer peut-être en design web. Pour que cela soit couronné de succès, nous allons utiliser notre document Word ou vous pouvez voir le contenu de notre page, Web Design Brand Uplift. Nous l'avons renommé dans le design original, donc c'est la tournée, qui nous sommes, ou ici nous avons eu des études de cas, contact, et obtenir un devis. Nous allons placer ces quatre liens ici, copions-les d'ici. Ce document Word, copiez-les d'ici, et je vais le coller ici. Ils sont tous séparés par une virgule, je vais utiliser la même syntaxe qu'ils ont utilisée. Il suffit de mettre une virgule ici comme ça, et notre navigation est terminée. Il y a un autre bouton ici, qui est Obtenir une citation. Je vais cliquer sur le bouton ici, je vais faire glisser un bouton ici, double-cliquer, et nous allons obtenir un devis. Nous avons notre bouton ici, et nous avons notre logo et tout mis en place. Maintenant, nous avons ensuite les éléments d'en-tête, sous-titre, notre image ou notre vidéo ici. Pour le lecteur vidéo, je vais faire glisser ce lecteur vidéo ici. Déplaçons ce lecteur vidéo ici comme ça. Ne vous inquiétez pas du design ou du design final, c'est juste un filaire. Il suffit de placer les éléments qui seront là pour que notre client voit et juge que cet élément ne manque pas ici. Je vais me lever l'icône de jeu ici, on va le déplacer comme ça. Maintenant, pour le titre, nous allons retourner à notre document Word, copier ceci dans notre texte, où est notre texte ? Ici, nous avons du texte, ou où est le titre ? Sous-titre, un gros titre. Nous allons traîner ce gros titre, placer ça ici et nous allons le traîner comme ça. Est-ce que ça va être multi-ligne ? Voyons voir dans ce panneau. Taille automatique, et nous n'avons pas, je pense que multi-ligne ici. Nous allons utiliser un texte multi-lignes ici comme ceci. Nous avons du texte multi-lignes, enlevons-le, quelque chose comme ça. Nous allons augmenter la taille à 40, ce qui était notre taille des manchettes, plaçons quelque chose comme ça. Nous avons notre titre ici. Maintenant, pour les sous-titres, sous-titres, nous allons utiliser ceci, voyons quel est notre sous-titre, sous-titre ou notre premier paragraphe. Je vais l'utiliser comme ça. Maintenant, gardez à l'esprit que même si vous placez ces choses comme ça à la fin, peut-être que dans le design nous pourrions les remplacer ici. Ce n'est pas un problème de placement ou de conception, c'est juste que notre contenu sera dans cette partie et dans cette zone ou je ne manque aucun contenu crucial ici, juste pour être sûr et être sur la même ligne ou la même page avec votre client. Ceux-ci sont très cruciaux, supprimons et je vais utiliser à nouveau la touche Alt ou Option pour faire une copie, tout comme Photoshop, et je vais mettre quelque chose ici comme ça, et nous allons utiliser peut-être 28, Non, je pense que 20 suffiront. Nous avons notre sous-titre ici, ne vous inquiétez pas de l'alignement, nous ne sommes pas inquiets pour la conception en ce moment, nous voulons juste nos éléments ici, premier paragraphe, nous devons être très rapides dans ce domaine. Je viens de mettre quelques textes ici, paragraphe, nous avons paragraphe, et c'est notre paragraphe ici. Maintenant, nous avons besoin d'un bouton pour commencer, bouton ici, nous avons un bouton Démarrer, donc nous allons cliquer dessus, Get Started Now. Il y a deux choses, vous pouvez redimensionner ces boutons, vous pouvez également leur donner des couleurs si vous le souhaitez. Normalement, je suggère que les couleurs ne devraient pas être données, peut-être si votre client ne comprend pas et si c'est un bouton ou non, vous pouvez le mettre en évidence quelque chose comme ça. Cela signifie que c'est un bouton et c'est très mis en évidence ici. Maintenant, notre en-tête est presque terminé, déplacons ceci un peu vers le bas, comme ceci, et aussi celui-ci ici. Maintenant, notre en-tête est terminé, créons une ligne horizontale ou une règle H qu'il est appelé. Je vais obtenir une ligne ici pour m'assurer que cette section est terminée, donc nous allons passer à la section suivante. 16. Wireframing dans des maquettes Balsamiq partie 2: Maintenant, ce que nous allons faire est de copier celui-ci et celui-ci parce que notre prochaine section a aussi un titre et un sous-titre comme ça. Voyons quelle est la sous-position ou la rubrique. Jalons, je vais sauter certaines sections de cette vidéo avec beaucoup de cette vidéo avec beaucoup de rapidité parce qu'elles sont la même tâche que nous avons fait encore et encore. Ne vous inquiétez pas si je le fais très vite. Je vais l'aligner au centre. Peut-être quelque chose comme ça. Maintenant, c'est au centre. Contrôle C, Contrôle V. Je pense que j'ai fait des copies supplémentaires donc je vais aussi lui donner l'alignement central, quelque chose comme ça. Maintenant, nous avons notre chemin par ici. Maintenant, nous avons les étapes 1, 2, 3, 4 et ils vont avoir quelques icônes. Je vais aller aux icônes. Vous pouvez placer quelques icônes, sauter, vous perdez votre temps ici en sélectionnant des icônes. Ce que je vais faire, c'est aller à Media. Je vais donner un nom d'icône comme, prénom a été d'évaluer votre conception d'entreprise pour vos utilisateurs. Évaluez votre entreprise, quelque chose comme ça. Ensuite, nous avons un texte en dessous. Ce sera un texte comme celui-ci. Je vais te donner un pourboire ici. Contrôle C, Contrôle V. Il va être au milieu comme ça, un peu court. Peut-être que tu peux changer la couleur en gris terne pour quelque chose comme ça. Maintenant, ce que nous allons faire c'est nous allons le regrouper, contrôler ou commander G, et en appuyant sur Option, nous allons faire 1, 2, 3, 4 copies. Nous avons déjà fait les quatre exemplaires. C' est ainsi que vous allez créer même dans vos designs. C' est une très bonne méthode. Créer un élément qui va être répété encore et encore. Rendez-le parfait, puis répétez-le. Ici, nous avons la deuxième option. Je vais sauter ça avec rapidité, parce que ça va être une tâche répétitive. Vous devez double-cliquer pour entrer dans n'importe quel groupe. Vous pouvez également cliquer avec le bouton droit et le dissocier. Où est le détachement ? C' est fondamentalement ceci. En outre, vous pouvez cliquer sur ce dégrouper. Je pense que c'est Commande Shift Control G ou Command Shift G, pour dégrouper. Ils sont faciles à éditer comme ça. Sinon, vous devez double-cliquer dessus pour entrer dans le symbole. Maintenant, je vais encore accélérer ma vidéo. Je vais les regrouper. Alignez-les à nouveau parce que certains d'entre eux sont mal alignés. Je vais cliquer sur les deux pour les aligner à nouveau, comme ça. Si vous pensez que quelque chose n'est pas aligné, assurez-vous de l'aligner comme ceci. Tous ont été alignés. Maintenant, je vais faire des ajustements. Peut-être que je vais les sélectionner tous comme ça. Ce n'est pas un groupe. Commande G ou Contrôle G. Maintenant, nous allons sélectionner tous les groupes et nous allons cliquer. Je pense que c'était celle-là, oui, celui-là. Il les a alignés tous horizontalement au milieu comme ceci avec la même distance de chaque côté. Maintenant, ils sont alignés beaucoup mieux. Option Alt. Je le tiens et je le fais glisser pour en faire une autre copie. Maintenant, nous allons passer à une autre section qui est notre équipe, je suppose. Oui, nous avons notre équipe. Vous pouvez également montrer vos réalisations ou quelque chose comme ça. Mais je vais sauter cette section. Notre équipe est spéciale. Nous sommes pleins de ça. Je vais copier la commande C ou le contrôle C, contrôle ou la commande V. Maintenant, nous allons avoir des images par ici comme des coups de tête ou quelque chose comme ça. Dans les médias, nous avons cette webcam, qui ressemble à ce dont nous avons besoin ici. On en a un ici comme ça, et on peut avoir des textos ici. Peut-être un lien ou juste un texte. Nous pouvons utiliser ce sous-titre ou peut-être du texte. Voici le nom avec le titre. Il s'appelle John Doe. Nous ne devrions pas nous inquiéter beaucoup du texte qui est très petit. Nous avons ici un texte qui était un texte volumineux. Ici, nous pourrions avoir juste une ligne ou un titre ou une étiquette ou quelque chose comme ça. Alors ne vous inquiétez pas pour ça. Je vais le mettre ici et je vais le dupliquer et écrire son nom comme Internet. Peut-être sur Internet Marketter, quelque chose comme ça. Je vais rapidement dupliquer tout cela. Alignez-les en premier. J' appuie sur la touche Maj pour faire plusieurs sélections. Alors je vais les aligner comme ça. Regroupez-le, sélectionnez-les tous, Commande G. Nous avons un groupe ici. Il va être aligné avec le groupe supérieur ici, Alt ou Option touche 1, 2, 3. Maintenant, je vais les aligner rapidement avec cet alignement horizontal. Vous pouvez voir que nous avons fait notre équipe. Encore une fois, nous avons besoin d'une règle horizontale. Donc, nous allons le dupliquer comme ça. Maintenant, nous avons quelques problèmes d'espace ici. Déverrouillez le navigateur, et le rendre un peu plus grand comme ça. Encore une fois verrouillez-le pour ne pas vous tromper en le déplaçant par erreur. Encore une fois, nous avons besoin d'un titre ici et d'un sous-titre. Faisons un peu de taille. Commande C, commande V. Nous avons un paragraphe ici. Pour notre paragraphe, nous allons utiliser ce texte ici. Ce sont les notations que vous pouvez utiliser. Vous pouvez voir votre couleur de cheveux rouge. A l'intérieur de cela, le texte sera de couleurs rouges. Donc, si vous voulez utiliser quelque chose comme ça, vous pouvez l'utiliser, mais je veux juste utiliser un texte et un paragraphe simples, donc nous ne devrions pas nous inquiéter à ce sujet maintenant. Je vais sélectionner ceci, double-cliquer, coller ici, centrer l'aligner et comme ça. Maintenant, nous avons deux boutons par ici. Ajoutons quelques boutons ou peut-être que nous pouvons copier le même bouton. Commande C, et commande B. Déplaçons le vers le bas comme ça. Je le traîne. Donc nous avons deux boutons, je pense obtenir un devis ou je pense que la consultation gratuite. Donc on a deux boutons par ici. Nous avons des textes ici, ce qui va être un label, je suppose. Mettons des textes comme, citation gratuite, je ne me souviens pas de ce qu'on a mis ici. Ici aussi, nous avons des numéros de téléphone 0800-333-555. Il va donc être aligné avec cela. Maintenant, nous avons presque la forme de notre page principale. Ajoutons l'adresse ici, qui est celle-ci, commande contrôle C. Ajoutons du texte ici, qui va être ceci. Voyons ce qu'on avait. Le paragraphe est en gras. Nous devons ajouter des astérisques pour le rendre gras. Donc j'utilise un astérisque devant ces lignes. Donc, nous avons celui-ci en gras. Donc, c'est fait. Déplacez nos liens ici, qui seront nos liens sociaux. Écrivons sur Facebook. Donc, ce sera le lien Facebook. Ensuite, nous avons besoin d'une place Twitter. Ensuite, nous avons besoin d'un Instagram ou LinkedIn. Peut-être que je pense à LinkedIn. Maintenant, vous pouvez également cliquer sur tous, rendre l'espace entre eux constant, et nous allons les regrouper, contrôler G de commande G. Déplaçons comme ça. Nous avons donc notre filaire initial prêt. Nous n'avons pas besoin de nous soucier beaucoup de comment il va être regardé, quand il est finalisé conception. Nous avons juste besoin des éléments pour être sur cette page. Donc, en ce moment, vous pouvez voir qu'il n'est pas au milieu. Aussi celui-là, ça doit être au milieu comme ça. Donc, nous avons un problème ici. Vous pouvez également sélectionner l'ensemble du groupe comme ceci, et les déplacer. Il n'a pas besoin d'être parfait en pixel, mais je pense qu'il devrait avoir une certaine forme. Donc, pour avoir l'idée de comment ça va ressembler. Je pense qu'on a manqué quelque chose ici. Aussi, je pense que nous avons ajouté deux commentaires d'utilisateurs ici. Cela peut être ajouté dans la phase de conception. Donc, si vous voulez l'ajouter ici, vous pouvez ajouter aux commentaires des utilisateurs ici. Où est notre mise en page ? Je suppose que tu te moques. Ainsi, nous pouvons également utiliser des frais généraux maquettes, nous pouvons ajouter les commentaires des clients dans ce domaine. Je vais le bouger comme ça. Je vais créer ceci, et le déplacer ici comme ça. Il est donc logique que nous pointons sur cette section. C' est ainsi que vous annotez votre design. Vous pouvez également créer des versions alternatives où vous modifiez votre mise en page ou votre conception peut être une maquette de plus pour la même et l'envoyer à votre client. J' utilise aussi ces supports bouclés, peut-être la vidéo de votre client en utilisant votre produit, quelque chose comme ça. Donc, je continue à ajouter ces annotations ici pour assurer que votre client ou désolé votre client, comprendre ce que je voulais dire, puis nous allons l'exporter vers PNG. Nous allons exporter tout ça à la PNG et nous allons l'envoyer à notre client. Voyons à quoi ressemblera notre PNG. Donc, nous avons la page de destination PNG. C' est notre filaire et vous devriez en être fier. Nous avons utilisé la plupart des techniques de conception de l'expérience utilisateur. Assurez-vous d'annoter pour expliquer vos idées et quelque chose comme ça. Dans la phase suivante, nous allons concevoir à l'aide de ce filaire et créer une phase de haute fidélité ou de conception visuelle de votre page de destination. Passons donc à la leçon suivante. 17. Cadre de conception atomique: Aujourd'hui, nous allons parler d'un cadre de conception appelé Atomic Design. Ce cadre de conception a été proposé par Brad Frost. Je pense que c'est la voie à suivre en ce moment ces derniers temps où nos applications web et nos applications mobiles, ils ont 50 écrans. Ensuite, vous avez besoin d'un framework pour contrôler votre conception. Pourquoi je vais y toucher, parce que c'est un cours de conception un peu avancé. Nous allons voir ce qu'est réellement Atomic Design, et sur la base de cela, nous allons construire notre guide de conception d'interface utilisateur dans la prochaine leçon. Qu' est-ce que la conception atomique ? conception atomique en gros, elle a été tirée de l'idée de la chimie où nous avons des atomes, des molécules et des organismes. Maintenant, ce qu'il fait, c'est qu'il existe cinq types de différents niveaux de dessins. Nous divisons nos éléments de conception en cinq niveaux. Atomes, est la forme la plus simple molécules. Puis différents éléments de conception qu'ils combinent pour créer des molécules. Puis différentes molécules combinées pour créer des organismes. Nous avons rassemblé différents organismes, et ils créent des modèles qui peuvent être transformés en pages avec l'ajout d'un contenu dans celui-ci. Voyons quelques-uns des exemples de ce billet de blog. Vous pouvez voir ici, ici nous avons des atomes, molécules, des organismes, des modèles et des pages. Maintenant, les atomes sont vous pouvez voir les blocs de construction, très simple dans les éléments d'interface Web comme l'étiquette de n'importe quel champ, puis champ d'entrée comme le bouton. Ce sont tous des atomes. Ensuite, nous avons des molécules. Vous pouvez voir que nous combinons ces trois atomes pour créer une barre de recherche. Cela va effectuer une seule tâche. Une molécule va effectuer une seule tâche. Pourtant, ils sont très simples. Ils n'ont pas de fonctions complexes ou ils ne sont pas très complexes. Ensuite, les organismes. Maintenant, les organismes vont entrer dans une forme quelconque de la conception. Comme vous pouvez voir votre en-tête ou il l'appelle tête de masse de n'importe quel élément de conception. Je l'appelle l'en-tête et la navigation. Vous pouvez voir cette barre d'en-tête ou cette barre de navigation. Il a le logo, puis il a la navigation, tous les liens. Ensuite, il a une barre de recherche ou peut-être qu'il peut également avoir des liens sociaux. Ça va être un organisme. Nous avons une molécule ici, une molécule par ici, et une molécule par ici, qui sera notre logo et notre lien ou peut-être un atome. Fondamentalement, nous combinons différentes molécules pour créer et concevoir l'élément. On l'appellera des organismes. Pourquoi nous avons besoin de toute cette méthodologie, et de tout ce cadre pour contrôler notre conception ? Si vous concevez une très grande application, et que nous avons cet en-tête dans toutes les pages différentes, et peut-être que nous avons des en-têtes différents dans quelques pages, donc cela va tout contrôler. Nous savons que cet élément de conception ou ce modèle de conception ou organisme est pour cette page, et celui-ci est pour cette page. Vous pouvez voir ici quelques autres exemples comme celui-ci est la barre supérieure Yahoo. Ensuite, nous avons Tumblr, puis nous avons le CNN, et Facebook, et Google. Vous pouvez tout lire à ce sujet si vous le voulez. Il y a aussi un livre de Brad Frost sur ce sujet. Si vous voulez aller plus en détail, je pense que vous pouvez aller de l'avant, et commander son livre, qui est de 10$, je suppose. Maintenant, les modèles vont essentiellement combiner différents organismes. Normalement, les modèles seront comme un filaire. Ils ne vont pas remplir le contenu réel de la page. ce moment, nous avons créé différents organismes, ou vous pouvez les appeler modèles de conception. Nous sommes en train de construire une bibliothèque de design. On peut choisir un bloc ici, et mettre le second bloc, donc c'est fondamentalement un autre organisme. Ensuite, nous avons peu d'organismes, vous pouvez voir par ici. Ici, nous avons un billet de blog. C' est un autre organisme. Ensuite, nous avons la liste, liste des images, c'est un autre organisme. Ensuite, nous avons ce paragraphe et la description de la vidéo pour cette vidéo, c'est un autre organisme. C' est ainsi que nous créons un modèle. Maintenant, les modèles vont essentiellement nous aider à construire notre conception très rapidement. Pourquoi ? Si vous avez conçu un blog WordPress ou un site WordPress que vous savez, que les pages de blog et les pages de post de blog, ils sont différents de la page principale de votre site Web. Nous allons concevoir un modèle pour la page principale. Ensuite, pour la deuxième page, nous allons juste obtenir cet organisme, et le placer en haut de l'autre pour créer une autre page. Ce sera très facile si nous avons cadre intégré à suivre le long des lignes directrices de conception. Il s'agit essentiellement d'un cadre de conception. Nous allons l'utiliser dans l'élaboration de lignes directrices de conception de l'interface utilisateur. C' est un très bon cadre. Je voulais vraiment que vous alliez là-dedans. Maintenant, il y a une autre façon de créer la même approche. Peu de gens, ce qu'ils font est qu'ils utilisent ces modèles, et ils les utilisent comme un modèle en niveaux de gris. Ils continuent à l'améliorer et à y ajouter des détails jusqu'à la conception finale. Vous pouvez voir ici, il a montré que le studio Pittsburgh suit un processus similaire où les étoiles de design, gris et la mise en page moins. Ils essaient normalement d'augmenter sa complexité et sa fidélité. La fidélité est essentiellement la précision ou la proximité du produit réel. Si c'est un filaire et qu'il n'a pas de contenu, juste des lignes comme celle-ci, c'est une faible fidélité. On n'a pas de textos ici. Vous pouvez voir ici, une fois que nous commencerons à mettre du texte et quelques détails, ce sera une fidélité moyenne. Les maquettes, maquettes colorées que nous créons dans Photoshop, c' ce qu'on appelle la haute fidélité. Pages. Maintenant, les pages sont les mêmes qu'un modèle, c'est juste qu'elles ont le contenu réel. Vous pouvez voir ici, ils ont commencé à ajouter du contenu dans cela, comme des images. Donc le vrai contenu ici. C' est du vrai contenu, c'est pourquoi il apparaît ici. Les pages vont être le plus haut niveau de fidélité, que je viens de vous décrire, qu'ils sont fondamentalement les maquettes. C' est le Design Atomique. Vous pouvez lire ce post. Je vais partager le lien vers ça. Aussi, ils en ont un autre, je pense que c'est aussi une explication plus ici. Je vais partager les deux liens avec vous. Vous pouvez le lire. C' est très nécessaire. Je pense que vous avez l'idée d'Atomic Design et pourquoi je l'ai suivie dans mes designs. Passons à la leçon suivante pour créer des directives de conception de l'interface utilisateur. 18. Système de grille en 8 points: Aujourd'hui, nous allons parler d'un cadre de conception appelé système de grille à 8 points. C' est essentiellement le système de grille, vous pouvez l'appliquer au système de grille verticale et aux systèmes de grille horizontale aussi. Maintenant, si vous ne savez pas ce que sont les systèmes de grille verticaux et horizontaux, vous devez voir ma typographie de cours pour les concepteurs d'interface utilisateur. J' ai beaucoup expliqué sur les systèmes de grille et rythme vertical et beaucoup d'autres éléments de conception liés aux grilles. Le système de grille à 8 points est populaire en raison de la conception des matériaux. conception matérielle de Google est basée sur le système de grille 8 points et vous pouvez également l'appeler système de grille 8 pixels. Je vais expliquer avec quelques exemples ce qui est réellement système de grille de 8 pixels et comment nous pouvons l'appliquer dans notre conception Web ou toute conception d'interface utilisateur. Permettez-moi de l'expliquer avec un exemple de fichier Photoshop. Je vais ouvrir un nouveau fichier. Je vais prendre la largeur est de 1 280 et la hauteur sera de 2 400, 1 280 est je pense standard pour une grille Bootstrap, donc je vais le créer. Nous avons ce dossier. Maintenant, ce que je vais faire, c'est que je vais créer un système de grille à 8 pixels ou 8 points ou une mise en page de guide dessus. Vous pouvez accéder à une nouvelle mise en page de guide. Nous allons utiliser 12 colonnes et gouttière. Maintenant, à l'intérieur de la gouttière, assurez-vous que tout ce que vous utilisez dans vos mesures sera le multiple de huit. Vous pouvez voir ici j'ai gouttière est égal à 24 pixels, ce qui est à nouveau le multiple de huit. Vous pouvez également utiliser 16 si vous voulez, c'est à vous de décider. Maintenant, dans les lignes pour le rythme vertical, vous pouvez utiliser la hauteur pour être de 48 pixels, ou vous pouvez utiliser 16 pixels, ou vous pouvez utiliser huit pixels. C' est à vous de décider. Dans mon exercice de conception, j'ai utilisé la superposition de patron de la grille verticale de 8 pixels. Si vous allez avec 48, vous aurez plus d'espace et je pense qu'il est plus facile d' aligner peut-être et vous pouvez également utiliser 32, c'est à vous de choisir. C' est ainsi que nous allons créer un système de grille à 8 points. Maintenant, laissez-moi vous expliquer avec quelques boutons. Par exemple, si j'essaie de créer un bouton, vous pouvez voir ici, il va vraiment aller parfaitement bien à l'intérieur de cette grille, et sa taille sera égale au multiple de huit. Si je vais à ce panneau d'informations et si je Contrôle clique sur ce calque, vous pouvez voir ici 200 par 48 pixels. Fondamentalement, il est multiple de huit, donc 48 est un multiple de huit. Vous pouvez également utiliser quelque chose de similaire ici, peut-être 196 ou quelque chose comme ça, qui est aussi un multiple de huit. Mais je pense que la plupart du temps cette hauteur sera assez bonne pour compenser tous les éléments de conception. C' est ainsi que vous allez faire ces éléments de conception. Maintenant, d'autres paramètres que vous pouvez faire ici est d'aller aux préférences et guide les grilles et les tranches, et j'utilise 64 pixels de ligne de grille pour chaque, donc la division est quatre. Si nous divisons 64 par 4, ce sera 16 pixels. C' est fondamentalement une grille qui peut vous aider à créer votre, donc je vais activer la commande de la grille deux-points, coma, je pense que c'est une citation. Donc, commande citation, et vous pouvez voir que nous avons ceci. Maintenant, si nous essayons d'utiliser cette grille, qui est la grille de Photoshop, vous pouvez voir que vous pouvez concevoir un bouton qui est parfaitement à l'intérieur de la plage de ce système de grille à huit pixels. Laisse-moi te montrer ce que c'est. Il est 256 par 64. Ceux d'entre vous qui ont étudié l'informatique, vous savez déjà que nos ordinateurs et nos morsures et notre système entier sont basés sur huit, donc 32, 64, quelque chose comme ça. Cela fonctionne très bien lorsque vous concevez quelque chose. Laisse-moi cacher ça. Sur cette page, vous pouvez voir cela semble vraiment cool, très proportionnel. De même, vous pouvez utiliser l'échelle de type. Echelle de type, vous pouvez utiliser huit pixels, 16 pixels, 24 pixels. Alors vous pouvez avoir, créons quelque chose ici. Je vais utiliser 16 pixels. Les couleurs devraient être celle-là et nous allons taper quelque chose ici. C' est 16 pixels, c'est 32 pixels, c'est 24 pixels, et c'est 64 pixels. Changeons les tailles d'ici. Je vais utiliser 64 pour celui-là, 24 pour celui-ci, 32 pour celui-ci, et 16 pour celui-ci. Cette échelle va vraiment vous aider dans le design. Cela ne signifie pas que vous devez être trop fixe sur cette échelle de type. Vous pouvez également utiliser des marges et des paddings pour l'ajuster. Dans ma conception réelle, je n'utilise pas 64 ou 24 pixels, j'utilise 49 et 54 pixels, et j'utilise la marge et le rembourrage pour les adapter dans mon système de grille de 8 pixels. Il s'agit d'un système de grille de 8 pixels. Vous pouvez utiliser ce système de grille dans vos paddings, dans vos marges, dans vos presque tous les éléments de votre conception. Si vous avez une section, comme j'ai cette section par exemple, cette section ici, et j'ai une autre section. Changons cette couleur à autre chose pour que vous puissiez voir. J' ai cette section, et mon contenu commence à partir de cette zone. Par exemple, c'est mon contenu. C' est mon contenu, c'est ma section. Ce que nous allons faire, c'est que nous allons utiliser la hauteur de, par exemple, 96. Je vais m'en servir. C' est mon bloc d'envoi que j'ai utilisé pour définir le rembourrage supérieur et le rembourrage inférieur de mon contenu. Cela, vous pouvez également l'appeler marges. Ceux qui connaissent un peu de programmation ou connaissent le HTML, ils savent que cela peut être réalisé par des marges ou des paddings. Ça va être notre section. Par exemple, une section a une hauteur de 800 pixels ou autre. C' est notre contenu, et ce sont nos rembourrages en haut et en bas. Vous pouvez voir ici pourquoi j'utilise ce bloc de 64 pixels. Vous pouvez voir si je clique ici, il est 96, la hauteur est 96 parce que 96 est un multiple de huit. Nous aurons cette mise en page tout au long de notre conception. J' ai beaucoup expliqué sur ce rythme tout vertical dans ma typographie, donc si vous ne l'avez pas pris, je pense que vous devriez le voir, et vous obtiendrez beaucoup de choses sur les systèmes de grille et la conception modulaire et toute cette verticale des trucs rythmiques. Ce système de grille à 8 points ou 8 pixels est un nouveau concept. Beaucoup de concepteurs, même pour les applications mobiles qui utilisent des applications mobiles de conception, ils l'utilisent. Google Material Design l'utilise. Le design Android est basé sur ce système de grille 8 pixels ou 8 points. Je pense que c'est beaucoup sur le système de grille à 8 points. Passons à la prochaine leçon où nous allons concevoir les lignes directrices de l'interface utilisateur pour notre projet. 19. Typeface et sélection de couleurs: Dans cette leçon, je vais parler de la façon dont j'ai décidé la combinaison de polices et les combinaisons de couleurs pour ce projet. Ce que je fais en fait, c'est que j'expérimente normalement dans Illustrator pour les combinaisons de polices. Pourquoi ? Parce que dans Illustrator, les polices sont un peu très belles et elles ont de bonnes courbes, elles n'ont pas de bords pixélisés ou quelque chose comme ça. Donc, je peux voir plus purement ou de plus près ce qu' est le bord et ce que la police est, ou le ton de la police, ou le message de la police, la police transmet. J' ai donc essayé de nombreuses combinaisons de polices. Vous pouvez voir ici, Nunito Sans avec Nunito et Yorkten audacieux avec Nunito Sans et Orkney avec Corbert. Ensuite, nous avons Yorkten avec Nunito. J' ai aimé Yorkten la plupart du temps, donc je l'ai utilisé pour la rubrique. J' en ai juste la version audacieuse. Je crois que je l'ai eu sur un site premium. Ensuite, il y a une autre police que j'ai vraiment aimé, c'est cette Pier Sans. Donc c'était aussi très beau. Ce que j'ai fait, c'est que j'ai mis en évidence certains d'entre eux avec des couleurs différentes, ce que j'ai vraiment aimé. Vous pouvez voir ici, c'est une autre combinaison, mais pour moi, ce n'était pas très bon pour l'entreprise basée sur la technologie. Donc il y en a un autre que vous pouvez voir ici, Proba Pro et Serif72 Beta. Il y avait une autre police audacieuse que j'aimais vraiment. C' était Trueno, et c'était aussi la police libre. J' ai vraiment adoré, mais je pense qu'à la fin, j'ai été bâton pour celui-là. Je suis allé pour celle-là. Yorkten et Nunito Sans. Nunito Sans est essentiellement la police de police de Google. Ainsi, vous pouvez également utiliser ces deux, Nunito Sans et Nunito. Si vous n'avez pas ce Yorkten, je vais essayer de lier si je peux trouver son lien gratuit. Je vais essayer de trouver si c'est encore gratuit. Maintenant, c'est comme ça que je suis allé pour différentes combinaisons de polices et je continue à essayer. D' abord, je choisis deux ou trois polices pour cette rubrique. Fondamentalement le texte d'affichage ou le texte d'en-tête. Parce que je voulais quelque chose d'audacieux, puissant, fiable. Donc j'utilise celui-ci. Ensuite, pour le texte, j'utilise une police ou j'essaie de choisir une police qui est très lisible, même sur de petites tailles, et j'essaie de voir qu'elle correspond à ceci ou avec toute notre équipe. Donc, si nous avons une technologie créative ou un studio basé sur la technologie, il devrait correspondre à notre police de caractères. Notre police devrait donc transmettre le même message. Maintenant sur les couleurs. J' ai conçu ce logo pour cet exercice. J' ai essayé trois couleurs. C' est une couleur légèrement sarcelle avec le violet et le violet bleuâtre, essentiellement bleus et violets principalement et ils sont combinés pour former ce W-W. Je, encore une fois, utilise Nunito Sans, je suppose ou peut-être je pense Nunito. Je crois que j'utilise Nunito. Je ne m'en souviens pas. Donc Nunito j'utilise pour ce logo et je choisis les couleurs, les trois couleurs de ce logo dans mon thème principal, et nous utilisons essentiellement la variation de ce dégradé. C' est ainsi que j'ai choisi différentes polices et différentes combinaisons de polices, polices de caractères et combinaisons de couleurs. Dans la prochaine leçon, je vais vous montrer mon guide de design U-I et le modèle que j'ai utilisé et je vais vous donner un exercice pour en créer un vous-même, ok ? Vous pouvez voir par ici. Voici quelques autres combinaisons de couleurs que j'ai essayé. C' est un peu très pointu et très énergique. Je ne voulais pas transmettre ce message. C' est un peu, vous pouvez dire un produit vert ou peut-être vert. J' ai négligé cette couleur, donc j'utilise celle-ci. C' est ainsi que j'ai obtenu le schéma de couleurs et les correspondances de typographie et sélectionné mes polices de caractères. Passons à la leçon suivante. 20. Quels sont les guides de style UI ?: Dans cette leçon, nous allons couvrir le concept des guides de style de l'interface utilisateur, ou parfois appelés tuiles de style, et pourquoi avons-nous vraiment besoin d'eux. Ensuite, nous allons voir quels sont les modèles de conception ou les bibliothèques de modèles et quelles sont les autres grandes entreprises comme Yelp ou Salesforce, comment elles utilisent les guides de style pour aider leurs développeurs et concepteurs. En fait, la raison pour laquelle nous utilisons le guide de style est de rapprocher développement et vos designers sur la même page ou de les rapprocher. Donc, c'est en ce moment que le guide de style est construit avec Photoshop. Il existe des guides de style qui sont construits avec HTML et ils sont en ligne. Je vais vous montrer les exemples dans quelques minutes. Voyons d'abord quelques-uns des exemples, et comment j'ai créé ce guide de style d'interface utilisateur. J' utilise un modèle de Medialoot et c'est un très bon modèle de guide de style de l'interface utilisateur. n'y a pas de gradients dans son, mais je les ai ajoutés. Tout d'abord, nous allons définir toutes les couleurs que nous allons utiliser. Donc j'utilise peu de couleurs ici, différentes nuances de la même couleur. Vous pouvez voir ici, c'est notre couleur principale. C' est une autre ombre. C' est une nuance un peu plus claire. Maintenant, ce que j'ai utilisé est que j'utilise ce sélecteur de couleurs pour changer la saturation et la luminosité, pour obtenir quelques couleurs supplémentaires. Ensuite, nous avons ce gris clair. Ce gris clair est également plus proche de ce violet je pense. Ensuite, nous avons des gradients, puis nous avons la typographie. C' est l'échelle typographique que j'ai choisie. Je vais te montrer comment j'ai choisi ça dans une autre leçon. Ensuite, nous avons notre corps texte, notre hyperlien, comment le lien sera. Ensuite, nous avons les sections de boutons. Quelles sont les tailles des différents boutons ? Ce sont des styles différents ; normal, stationnaire, actif. Ce sont d'autres styles que nous pouvons utiliser pour le même bouton. Ensuite, nous avons l'iconographie, toutes les icônes que je vais utiliser, je vais les coller ici. Vous pouvez voir, ce sont les icônes que j'ai utilisées dans mon design. Ce sont des icônes personnalisées, je les achète à Creative Market. Donc c'est comme ça que je les ai eus. Je change leurs couleurs en fonction de mon thème. J' utilise le violet et cette couleur sarcelle pour obtenir ces icônes. Ensuite, nous avons nos éléments de forme. Maintenant, tout ce guide de style de l'interface utilisateur suit les règles de la conception atomique. Vous pouvez voir que nous sommes en train de définir nos atomes ici. Comme vous pouvez le voir, nous avons des boutons, des textiles, des dégradés, des couleurs, sont tous les atomes que nous allons utiliser pour construire notre design. Vous pouvez également voir ces éléments de formulaire. Ce sont aussi les atomes. Si vous les combinez, ils vont créer notre bibliothèque de modèles. Donc, la première étape est dans tous les processus de conception, si vous concevez un très grand site Web, une application web, ou peut-être une application web sociale, alors vous devez construire ce guide de style d'interface utilisateur. Il va vraiment vous aider dans le développement et dans votre processus de conception. Nous allons aligner votre développement et conception un peu plus près avec ce guide de style. Vous pouvez voir ici maintenant cela est appelé éléments de l'interface utilisateur, et c'est essentiellement nos molécules. Vous pouvez voir ici, c'est notre barre d'étape, barre de progression, alors c'est aussi la barre de progression de l'étape. Ce sont d'autres contrôles. Ce sont encore nos atomes. C' est encore une fois, cette conception de l'interface utilisateur. C' est notre article et il combine trois choses : notre paragraphe, nos titres et nos images ici. C' est donc une molécule dans la conception atomique. Vous pouvez l'avancer plus loin. Vous pouvez créer beaucoup de bibliothèques de modèles différentes pleines de celui-ci. Vous pouvez créer des fenêtres modales. Vous pouvez créer un formulaire à part entière, des messages d'erreur, pages d'erreur, des modèles, des pages différentes. C'est à vous de décider. Mais c'est le point de départ de toute conception. Si vous pouvez créer ceci, parfois quand je conçois, je crée d'abord la première conception, puis je construis ce guide de style d'interface utilisateur à partir de leur conception. Ainsi, vous pouvez aller de haut en bas, ou de bas en haut. C' est à vous de décider. Vous pouvez avancer ou inverser ; c'est votre propre technique. Mais parfois, je peux les changer quand je vois que la conception globale ne correspond pas à ceux-ci, donc je pourrais les changer. Ce sont tous les dégradés, toutes les couleurs que nous allons utiliser, et toute la typographie. Permettez-moi de vous montrer quelques autres exemples qui sont vraiment bons, vous pouvez les utiliser dans votre conception. Donc en voici un autre. C' est aussi un guide de style, et il a différentes sections. Vous pouvez voir ici la typographie. Ensuite, nous avons des boutons et des onglets, des icônes, formulaires, puis nous avons des graphiques, temp. Ce sont les palettes de couleurs. Vous pouvez utiliser une palette de couleurs pour la typographie, l'arrière-plan et les illustrations. Maintenant, c'est totalement différent, et je pense que c'était des carreaux de style Mindy Wagner, je pense que c'est le cas. Ceci est un autre guide de style, plan de travail, et il est de [inaudible], je pense. J' aime vraiment ce designer et je le suis beaucoup. Donc vous pouvez voir ici, il a différents plans de travail. L' un est mis en place avec des couleurs, l'autre avec la typographie. Vous pouvez voir ici, il y a tous les différents types. Vous pouvez voir comment il a montré cette cour ici. Ensuite, nous avons ce formulaire. Donc, tout ce qu'ils suivent est la même ligne directrice. J' aime vraiment celle-là parce qu'il a peu de choses en plus. Vous pouvez voir ici, si nous allons à ces couleurs, alors nous avons tout ce système de grille. Vous pouvez voir qu'il montre également la grille, 1080 pixels grille, et avec ces colonnes. Ensuite, vous pouvez voir ici nous avons des paramètres de police. Encore une chose, si vous pouvez ajouter la hauteur de ligne avec votre police, je pense que c'est la meilleure chose qu'un développeur puisse obtenir. Donc il est absent du mien par ici. Je peux également ajouter la hauteur de ligne ici. Mais nous allons créer quelque chose de similaire avec notre outil Zeplin. Donc, nous allons utiliser à la fin Zeplin pour créer un guide de style dans le codage. Pas ça, juste l'image. Ce sont des guides de style différents. J' aime vraiment cet outil unique, cela a beaucoup d'autres options. Vous pouvez voir ce sont les contrôles de formulaire, les motifs, et c'est le paragraphe, c'est la hauteur de ligne et tout. En outre, vous pouvez mettre un petit texte. Vous pouvez voir ici, ce sont des cas de petits textes, Montserrat 12 pixels, et la hauteur de ligne est de 18 pixels. C' est ainsi que vous allez concevoir un guide de style. Maintenant, laissez-moi vous montrer quelques-uns des exemples de guides de style en ligne que d'autres grandes entreprises géantes utilisent, et comment elles l'utilisent en construisant des bibliothèques de modèles et tout le reste. 21. Exemples de guides de style UI: ce moment, je vous montre les directives, directives typographiques de Salesforce, vous pouvez voir ici. Ce sont leurs lignes directrices, couleur, accessibilité, saisie de données, affichage des données, mise en page, mouvement, navigation. Vous pouvez voir ici, voici la ligne directrice typographique : Mince, légère, régulière, audacieuse. Quatre types de polices qu'ils utilisent. Ils ont leur propre police et vous pouvez voir en bas ce sont les paramètres qu'ils utilisent. Ensuite, vous pouvez également utiliser, voir ces icônes ici. Si vous accédez à Icônes, vous pouvez voir qu'il s'agit de la couleur et de l'icône différentes qu'ils utilisent. Ceci est un exemple de guide de style Salesforce ou peut-être la bibliothèque de motifs que vous pouvez voir. Ensuite, nous avons ces très beaux modèles mailchimp.com et ceux-ci sont vraiment grille. Ils ont leur système de grille montré ici, comment vous allez utiliser leur système de grille et aussi avec des exemples de code. Donc, c'est fondamentalement la fin ultime de votre guide de style. Vos codeurs vont développer ce système et c'est essentiellement le système de votre guide de style d'interface utilisateur conçu dans un format de codage. Ils vont utiliser ces éléments et ils vont les brancher ensemble dans le cadre de conception atomique pour créer des pages entières et des modèles. Vous pouvez voir ici nous avons des valeurs de pixel et aussi cette hauteur de ligne. La valeur du pixel, c'est la hauteur de la ligne, semi-gras que nous avons sous-titre et hauteur de la ligne. C' est ainsi qu'ils ont montré ces quelques autres exemples du code que vous pouvez utiliser. C' est vraiment génial. Vous pouvez également aller à ce Tables et voir comment leurs styles de tables sont, vous pouvez voir ici. Il y a un exemple en direct, un exemple codé, interactif. C' est donc la bibliothèque de modèles ultime que vous allez construire à partir de votre guide de style d'interface utilisateur. En outre, vous pouvez voir si vous allez à ce Code pour l'Amérique, vous pouvez voir qu'ils ont leur propre guide de style. Vous pouvez voir ce sont l'icône, tailles qu'ils utilisent, ces autres icônes. Si nous descendons, vous pouvez voir ce sont toutes les couleurs qu'ils utilisent : primaire, secondaire. C' est la mise en page qu'ils utilisent. C' est ainsi que vous allez créer un guide de style entier et ce que votre guide de style va faire, il va faire quelque chose de similaire à cela à la fin. Votre concepteur et vos développeurs, ils vont se réunir pour créer quelque chose comme ça. En fin de compte, c'est le système qui va faire avancer votre conception. C' est une application web très complexe ou quelque chose comme ça. Ce sont des guides de style différents. Ceci est un guide de style pour Yelp et je vais partager ces liens avec vous afin que vous puissiez vous familiariser avec ce guide de style et les bibliothèques de motifs et tous ces trucs et c'est vraiment leurs techniques modernes de conception, vous devriez donc vraiment vous familiariser avec eux. Passons à la leçon suivante. 22. Créons un guide de style: Dans cette leçon, je vais vous montrer comment j'ai créé mon Guide de style de l'interface utilisateur et où j'ai obtenu le modèle pour cela. J' ai obtenu le modèle du site medialoot.com et c'est un modèle gratuit que vous devez attribuer si vous le partagez quelque part. Nous le partageons maintenant. Je vous montre que j'utilise celui-là. Il y a peu de choses qui n'étaient pas présentes, comme vous pouvez le voir il y a trois couleurs, gris foncé, gris clair, et le bleu. Mais j'ai ajouté quelques couleurs ici. J' ai augmenté la taille de cette portion. Puis aussi, j'ai changé la typographie, taille des boutons, et peu de choses ici. Maintenant, je vais passer à ma vue Photoshop de ce fichier que j'ai créé. Ici, vous pouvez voir ceci est mon guide de style. Il y a peu de choses que je vais partager avec vous comme comment j'ai créé ou obtenu trois nuances de ces couleurs parce que beaucoup de gens, ils luttent normalement avec des schémas de couleurs. Maintenant, si je vais à ce gris foncé, si vous double-cliquez dessus, vous pouvez voir que c'est le gris foncé, mais ce n'est pas totalement gris, c'est un peu de couleur pourpre. Comment j'ai eu ces couleurs, ces couleurs sombres ? En fait, je commence avec cette couleur ici. Je vais ensuite faire quelque chose comme ça. Vous pouvez voir que cela va être dans cette couleur. La deuxième méthode que vous pouvez utiliser est, vous pouvez cliquer sur n'importe quelle couleur, et vous pouvez aller à cette luminosité, et la réduire à 20 pour cent. Aussi la saturation, réduisez-le à 20 pour cent. Vous pouvez voir que vous allez obtenir une couleur gris violacé très foncé. Encore une fois, vous pouvez vous déplacer dans cette direction si vous le souhaitez, à une large couleur à l'intérieur du gris. Il va obtenir une partie de ce violet et la plupart du noir. Ensuite aussi, vous pouvez voir ce gris clair est également totalement pas gris clair, il est incliné vers cette couleur bleue ici. Il est gris, blanc et bleu. Ce n'est pas totalement de couleur grise. Ensuite, nous avons ce bleu. Mes couleurs principales étaient un, deux et trois. J' ai obtenu toutes ces couleurs de ces trois couleurs. Celui-là, comment je l'ai eu ? J' ai changé la luminosité ou un peu de saturation, si vous voulez. Vous pouvez voir ici, nous avons la teinte 226. La teinte de cette couleur sera 226. C' est la même couleur que j'utilise, 226. Vous pouvez voir ce ne sont que les nuances et les différentes teintes, les différents tons de cette couleur. Fondamentalement, j'ajoute du blanc blanc ici à ceux-ci. Ici aussi, j'ai un changement de saturation ici. J' essaie de le saturer plus pour qu'il y ait plus de netteté. Vous pouvez essayer beaucoup de couleurs. Ce n'est pas très difficile si vous savez comment utiliser cette technique, saturation de la teinte et la luminosité. J' ai décrit cela dans mon UI Design in Photoshop Cours, qui est le cours le plus vendu dans la conception de l'interface utilisateur. Maintenant, en arrivant vers le gradient, notre gradient de base était celui-ci, puis j'ai créé celui-ci. J' ai enlevé une couleur d'ici, donc c'est du bleu à la couleur sarcelle. Ensuite, nous avons cette couleur pourpre foncé à sarcelle. Ce sont essentiellement les mêmes dégradés, c'est juste que j'ai essayé d'ajouter quelques nuances de la même couleur, peut-être une couleur terne, ou peut-être une couleur un peu plus vive pour créer ces dégradés. Maintenant, pour les développeurs, vous pouvez créer autant de couleurs, vous pouvez utiliser autant de couleurs dans les dégradés. Si vous êtes concepteur, vous devez savoir que votre développeur a juste besoin que les arrêts de couleur. Comme vous pouvez voir quoi ici, si je vais à cette superposition de dégradé, vous pouvez voir ici, si je double-clique dessus ou cliquez dessus, c' est les arrêts. Vous pouvez voir ici, c'est notre arrêt à zéro pour cent et nous avons l'arrêt ici, qui est à 100 pour cent. Ce qu'ils ont besoin, c'est que de quelle couleur vous utilisez à zéro pour cent ? Et à 50 pour cent ? Si vous avez utilisé trois couleurs, si vous en avez utilisé deux alors zéro et 100 pour cent sera plus que suffisant. En outre, il s'agit d'un gradient linéaire. La deuxième méthode est que vous pouvez simplement cliquer avec le bouton droit de la souris et copier CSS, et c'est tout. Vos développeurs vont juste avoir besoin du fichier CSS. Si je le colle ici, vous pouvez voir que c'est le dégradé déjà généré dans ce fichier CSS. Nous n'avons pas besoin de nous inquiéter beaucoup, c'est juste à des fins de présentation que vos développeurs savent que leur développement ou leur fichier HTML correspond à vos styles. Ensuite, nous avons cette typographie. Ici, j'ai cette échelle de visionneuse. Je vais y arriver un certain temps. J' ai également ajouté ce petit texte ici. C' est 16 pixels, et ce corps utilise 20 pixels, vous pouvez le voir ici, je l'ai mentionné ici. En outre, les rubriques ont 54, 36, 28, 24, 20, 20. Ceux d'entre vous qui ont regardé mon cours de typographie savent alors que je crée ces échelles de type. C' est essentiellement une échelle de type de base de 16 pixels, et j'ai utilisé 1,5 comme rapport de mise à l'échelle. Je vais vous montrer comment j'ai eu ça dans quelques minutes. En outre, vous pouvez voir ici ce sont différents styles de boutons. Encore une fois, j'utilise les mêmes dégradés en haut. Vous pouvez voir ce sont les dégradés que j'utilise à l'intérieur des boutons. Certaines des ombres que j'utilise, vous pouvez voir par ici, des ombres portées. J' utilise la couleur pourpre ombre portée, violet foncé, 30 pour cent, puis la distance, 20, taille. Je vais partager ce fichier avec vous, alors ne vous inquiétez pas que vous ne sachiez pas ce que sont ces styles. même, vous pouvez également dire à votre développeur que quelle est la rondeur de votre bord, huit pixels de vos boutons. Ce sont quelques autres styles. Vous pouvez voir que j'ai utilisé ces styles à différents endroits dans mon design. Ensuite, j'ai ces icônes. J' ai créé ces icônes. Je les ai tirés du fichier Illustrator. J' ai changé leur couleur et je l'ai collée. C' est un fichier vectoriel avec un objet intelligent ici. Si je double-clique dessus, ils vont être ouverts dans Illustrator. Nous avons ces champs de formulaire. Je viens de changer la bordure ou le trait de ces champs de formulaire pour obtenir cet effet. heure actuelle, nous nous concentrons sur la conception d'une page de destination, mais vous avez l'idée que vous pouvez créer plus de contrôles et de clients plus conçus comme la mise en page des publications, les articles et les citations, et beaucoup de d'autres choses. Je ne veux pas entrer dans les détails en ce moment. Je pense que ces quelques styles et ce guide de style est plus que suffisant pour nous. Commençons et commençons à préparer notre conception. 23. Échelle de caractères expliquée: Mais avant ça, laisse-moi expliquer comment j'ai eu ça. J' utilise une échelle de type très complexe ou très différente. Vous pouvez voir ici mon objet vectoriel s'est ouvert. Minimisons ça. Donc, j'utilise cette échelle de type, site d'échelle modulaire. Vous pouvez voir 16 pixel est ma base, 1.5. Donc 16 pixels, 24, 36, 54, ce sont les quatre tailles. Ensuite, pour les écrans mobiles et l'écran de la tablette, j'utilise 1.75. Donc c'est 49, 28. Ce sont quelques autres tailles que j'ai. Alors si je vais à 1.25, ce sont les tailles, 25, je peux les utiliser, 32 ou 31. Alors je peux utiliser 48 si je veux. Donc ce sont toutes les différences et plus de tailles que j'ai obtenu de la balance. Si vous voulez en savoir plus à ce sujet, vous devez voir mon cours de typographie. Là, j'ai expliqué pourquoi et comment nous obtenons ces échelles. Vous pouvez également utiliser ce style de typographie et l'échelle de la conception du matériau. Vous pouvez voir leurs styles de base sont 12, 14, 16, 20, 34, et vous pouvez également les utiliser. Donc, c'est vraiment génial si vous voulez les utiliser, nous allons les ajuster en utilisant des marges et des paddings. Je pense que j'ai expliqué tout cela dans le cours de typographie, mais quand même, si vous ne savez pas, nous allons les aligner en utilisant des marges et des paddings et tout le reste. C' est ainsi que j'ai construit mon guide de style d'interface utilisateur, je vais l'utiliser dans ma conception. La deuxième chose que vous pouvez faire est que vous pouvez voir en bas, j'ai ajouté toutes ces couleurs que je vais utiliser. En outre, si vous pouvez accéder aux Styles, tous mes styles de boutons sont enregistrés ici. Donc, si vous allez sur ce bouton et vous devriez savoir que comment enregistrer un style, nouveau style et il sera sauvegardé ici. Cela va vraiment accélérer notre travail parce que ce cours est plus axé sur le flux de travail et la façon dont je vais parvenir à un flux de travail rapide. Vous pouvez voir ici, tous mes boutons sont listés ici. Aussi, j'utilise ces bibliothèques, mais je pense qu'elles sont très désordonnées pour moi en ce moment. Donc, je vais rester avec Nuances et Styles maintenant. C' est ainsi que vous utilisez votre guide de style pour créer votre design et aligner votre design avec les développeurs. Passons à la leçon suivante. 24. Outils en ligne pour des calques de grille: Chaque fois que vous concevez quelque chose, il est vraiment important que vous planifiiez votre conception avec vos grades et guides et votre grille modulaire très soigneusement. Maintenant, dans la conception Web, les tailles les plus courantes lorsque vous commencez pour une conception de bureau, elles vont être de 1280 pixels. Donc aujourd'hui, je vais vous montrer les outils en ligne qui peuvent créer des grilles et des guides avec votre système de grille qui est beaucoup utilisé par les développeurs, qui est bootstrap et d'autres grands systèmes. Pour une taille de bureau, nous allons voir quels outils de grille sont utilisés normalement. Il y a quatre outils que je vais vous montrer dans cette leçon. L' un est ce grille.guide, et la taille que nous allons utiliser est cette 1 280 et 12 colonnes, et le plus grand ratio externe est fondamentalement sa marge. Donc, si vous voulez obtenir une marge à l'extérieur, vous pouvez le voir calculé que la marge n'est pas possible. Si vous passez à 1.0, il y a une certaine marge. Vous pouvez le voir dans cette zone de pêche rosé rouge, et le jaune est essentiellement notre taille de colonne. Donc, vous pouvez voir la largeur de la colonne est de 98, largeur de la gouttière est de huit, mais nous avons besoin de quelque chose de plus. Peut-être 20 pixels de largeur de gouttière est bon ou peut-être si vous concevez pour un site Web de mode, vous pourriez avoir besoin de très grands espaces alors vous pourriez avoir besoin de cet espace de gouttière 32 ou 44. Normalement, je pense que j'irais avec ces deux, 32 ou 20 pixels. Je pense que c'est plus que suffisant. Huit pixel est un peu plus petit. Vous pouvez également passer à 1,5. Vous pouvez voir si je veux passer à 1,5, il me montre quelques options comme pour la largeur de gouttière 4, 10, 16, 22. Maintenant, le truc cool, c'est que nous pouvons télécharger ce fichier PNG, et vous pouvez le voir ici. Il s'agit d'un fichier PNG et d'un sous-motif. Vous pouvez facilement l'importer dans Photoshop. Laissez-moi créer un nouveau fichier. Nouveau tableau d'art 1,280 largeur, 2,400 hauteur et je vais utiliser le tableau d'art. Vérifiez ceci, et créez simplement ceci. Donc nous avons notre tableau d'art par ici. Faites glisser ce guide et collez-le ici. Nous allons le dimensionner comme ça et vous pouvez voir qu' s'agit d'une représentation de grille de vos grilles et guides. Nous avons donc notre configuration de système de grille horizontale, colonnes ou la configuration du système de grille de colonne, et vous pouvez voir que nous avons ces marges et toutes ces autres choses mises en place. C' est ainsi que je crée les guides instantanément, plutôt que de les créer avec ces nouvelles mises en page de guide. C' est mieux parce que je les verrouille alors pour qu'ils ne bougent pas. Un autre qui est très similaire est celui-ci. Je l'ai utilisé beaucoup de temps, et le truc cool est que vous pouvez utiliser n'importe quelle taille. Si je vais concevoir pour une tablette, je vais utiliser 768, et peut-être que je peux réduire la largeur de la gouttière ou peut-être le garder même, peut-être 28, et maintenant je vais changer ce nombre de colonnes à huit. Supprimons les marges. C' est ainsi que vous créez vos systèmes de grille. Nous allons créer trois grilles différentes et les tailles que j'utilise est de 1 280. Donc, vous pouvez également utiliser 20 pixels ou peut-être 10 pixels ici et 12 ici, comme ceci. Changeons la taille. Si j'utilise des taux de gouttière de 24 pixels et des taux de marge de 10 pixels, vous pouvez voir que cela devient vert plutôt que rouge. Donc, nous utilisons plein 1,280 pixel. Assurez-vous donc que chaque fois que vous essayez de créer une grille, elle utilise toute la largeur. Si vous allez à cet outil, cela fait automatiquement tous les calculs, donc nous ne nous inquiétons pas à ce sujet. Vous pouvez aussi le laisser zéro, vous pouvez voir si nous le laissons zéro nous avons 16 et 28. Vous pouvez également utiliser celui-ci. Ce PNG est grille 28 largeur est également très impressionnant. Il est plus proche de 30 et bon espacement. Nous pouvons également utiliser ce 16. Donc n'importe lequel de ces deux-là, vous pouvez choisir. Ces deux-là sont géniaux. Maintenant, passons à cet outil de régulation. C' est aussi la même chose. La chose cool à ce sujet est si vous avez juste besoin de deux entrées largeur globale et colonnes. Donc, si vous entrez ces,