Share
Ce que vous allez créerLe développement guidé par les guides de style offre une approche extrêmement flexible de la conception Web moderne. Dans ce didacticiel, je vais vous expliquer comment concevoir un kit d'interface utilisateur, tout en vous expliquant comment prendre une décision qui garantira la cohérence et la réutilisation de notre kit d'interface utilisateur..
Pour pouvoir suivre, vous aurez besoin des éléments suivants (disponibles gratuitement):
Ouvrez Photoshop et commencez par créer un nouveau document (Fichier> Nouveau… ) en utilisant les paramètres indiqués ci-dessous. Vous êtes libre d'utiliser une toile de toutes les dimensions que vous préférez - le Web n'est pas une largeur fixe, après tout.
Définissons des guides afin que notre kit d'interface utilisateur soit organisé et aligné. Je n'utilise pas toujours une grille, mais la définition de contraintes assurera la propreté et la cohérence. Aller à Voir> Nouveau guide… et définir des lignes directrices. Je choisis généralement 1000 pixels comme largeur de départ pour un site Web, alors maintenons notre kit d'interface utilisateur dans ces dimensions..
Remarque: Instructions utilisées pour ce tutoriel: vertical à 100px, 600px et 1100px.
Pointe: Vous pouvez également utiliser le plugin GuideGuide Photoshop pour rendre ce processus encore plus rapide..
En nous conformant à l'étiquette de Photoshop, nous allons garder les choses organisées et faciles à naviguer et à modifier. Dans un environnement de travail, ce kit d'interface utilisateur doit être utilisé à plusieurs reprises comme point de référence et ressource de développement. Vous devez donc le garder organisé (les développeurs vous en remercieront). Créons six groupes de calques nommés Typographie, Boutons, Formulaires, Avatars, Images et Couleurs.
Pour créer des groupes, allez à Couche> Nouveau> Groupe… et donnez à chacun un titre comme mentionné. Pour créer rapidement un groupe, cliquez simplement sur l'icône..
Comme le dit si bien Oliver Reichenstein "Le Web Design est une typographie à 95%", vous devez donc le faire correctement. Tout d'abord, nous devons créer l'environnement idéal pour notre type. un fond neutre et agréable à l'oeil. Le fond et la typographie doivent conserver des niveaux de contraste raisonnables pour être lisibles. Pour ce tutoriel, utilisons un gris clair discret - une couleur neutre mais suffisamment forte pour conférer une personnalité à votre application. J'ai mis la couleur de premier plan sur # e9eeef et frapper Alt + Retour arrière pour le fond.
Ouvrez le Typographie groupe, choisissez le Outil de type horizontal (T) et sélectionnez le Open Sans Police de caractère. Open Sans est une police de caractères moderne qui se décline en plusieurs graisses et se présente sous un aspect professionnel et accueillant. Il est assez élégant pour les titres, mais également suffisamment pratique pour être affiché sur le Web..
Open Sans a beaucoup de variantes, donc pour ce kit d’interface utilisateur, je n’utiliserai qu’une seule police. N'oubliez pas que vous devez faire attention si vous utilisez plus de deux polices différentes pour vos projets, car les choses peuvent devenir rapidement compliquées..
J'ai mis la couleur de premier plan en noir # 000000 puis en utilisant le Outil de type horizontal (T) et le mentionné précédemment Open Sans police avec Lumière option et 55px size est entré dans le titre de la section. Nous utiliserons les mêmes titres de taille et de style pour les titres futurs afin de préserver la cohérence..
Nous devons maintenant établir une hiérarchie pour notre typographie. Consultez cet article Comment établir une échelle typographique modulaire par Ian Yates pour mieux comprendre la science et l'importance de la typographie Web.
HTML(HyperText Markup Language) a de nombreuses balises différentes qui aident les navigateurs à interpréter le contenu d'une page. Beaucoup de ces balises sont spécifiquement utilisées pour la typographie Web, telles que , , etc. Ceux-ci décrivent les titres, être le plus important. Après cela il y a un balise utilisée pour les paragraphes. Sans entrer plus dans les détails concernant HTML, nous allons définir l'aspect de ces éléments..
En utilisant le Outil de type horizontal (T) entrez trois titres. J'ai utilisé Open Sans (Light) 55px pour h1, 44px pour h2 et 32px pour h3 en laissant un écart de 30px entre eux. L'espacement est une autre chose importante à garder à l'esprit. Laissez suffisamment d'espace pour que votre type soit facilement lisible et ait un aspect équilibré.
Remarque: J'ai utilisé Ordinaire poids pour le h3. Comme le type devient plus petit le Lumière variante peut devenir moins lisible.
Pendant que nous avons défini les titres, passons à la copie du contenu réel. Examinez toutes les variantes possibles de la copie et affichez-la dans votre kit d'interface utilisateur afin que les développeurs puissent mettre en œuvre ce que vous avez prévu. Pensez à un style de titre à l'intérieur du paragraphe, à des styles gras et italique, ainsi qu'à des liens..
Pour la couleur de la copie principale, j’ai choisi le gris # 838383, pour le titre noir # 000000 et bleu # 006ee3 pour la couleur du lien.
Le titre sera nettement plus sombre que la copie principale, ce qui lui donnera un impact plus important. La couleur du contenu principal doit être relaxante et facile à lire. Enfin, assurez-vous de choisir une couleur différente pour vos liens afin que les utilisateurs sachent qu’ils sont cliquables..
Remarque: Définir le titre et la police de lien sur Semibold poids pour les faire paraître plus gros et plus important.
Les boutons sont très importants pour les projets Web. Ce sont des liens simples ou des formulaires soumis la plupart du temps, mais ils peuvent également servir de fonction d'appel à l'action (CTA) en guidant les internautes à travers la page, en prenant des décisions plus rapidement. Il est essentiel de définir une apparence cohérente pour les boutons afin que l'utilisateur les connaisse dans l'application..
Minimiser le Typographie groupe en cliquant sur la petite flèche à côté du nom du groupe et ouvrez le Boutons groupe. Après cela, créez de nouvelles directives verticales pour diviser notre zone de contenu en trois zones égales avec un intervalle de 35 pixels. Aller à Voir> Nouveau guide… et réglez les repères verticaux suivants: 410px, 445px, 755px et 790px. C’est là que nous placerons nos boutons pour que tous soient égaux et cohérents.
Revenez à la Typographie groupe, trouvez le calque de titre de section et dupliquez-le en cliquant sur CMD + J, puis déplacez-le vers Boutons groupe et changez-le en "boutons".
Après cela, entrez trois titres d'états de bouton: Normal, Survol et Actif. Placez-les à gauche de nos trois sections égales, en gardant à l'esprit l'écart de 35 pixels entre les première, deuxième et troisième zones..
Maintenant, réglez la couleur de premier plan sur le bleu précédemment utilisé # 006ee3 et créez un nouveau groupe appelé Primaire Normal. Puis prenez un Outil Rectangle Arrondi (U), ensemble Rayon à 3px et dessinez un rectangle arrondi de la taille de 310x44px. Placez-le entre les deux premières lignes directrices sous le titre "Normal". Pour finaliser le bouton, écrivez du texte dessus en blanc. #ffffff il est donc clairement lisible.
Maintenant, dupliquez le Bouton primaire groupe en cliquant CMD + J sur le groupe et renommer ces groupes à Vol stationnaire primaire et Actif primaire. Après avoir placé ces nouveaux groupes dans les deux sections, nous avons créé des titres avant.
Qu'est-ce que flotter et actif moyen, vous pouvez demander? Survolez décrit l'état d'un bouton une fois que vous avez déplacé le curseur de votre souris dessus, nous devons donc illustrer quelques retours à partir du bouton. Un lien devient actif lorsque vous cliquez dessus.
Pour le style en vol stationnaire et les états actifs des boutons, nous les assombrissons simplement. Créez un nouveau calque au-dessus de la forme du bouton et remplissez-le de noir # 000000. Après cela maintenez Alt et placez la souris sur le calque jusqu'à ce que vous voyiez une petite icône en forme de flèche - relâchez-le pour créer un Masque d'écrêtage. Enfin réduire le calque Opacité à 10%.
Remarque: pour l'état actif du bouton augmenter couche noire de Opacité à 20%.
À présent, dupliquez tous les groupes de boutons précédents et changez leurs titres et leur couleur en secondaire. Nous définirons les couleurs des kits d’interface utilisateur plus loin dans ce didacticiel; pour l’instant, il vous suffit de choisir une couleur et de remplacer le bleu précédent. J'ai utilisé le vert # 36c265.
Les formulaires constituent un élément très important de l'application Web, car ils permettent aux utilisateurs de saisir des informations et d'interagir avec l'application. Nous allons concevoir des formulaires de base afin que les développeurs puissent s’en tenir au même style et conserver la cohérence du design..
Minimiser le Boutons groupe et ouvrir le Formes groupe. Encore une fois, dupliquez le titre de la section du groupe précédent et renommez-le "Formulaires". Nous allons créer des types de base de formulaire, y compris la saisie de texte, le champ du mot de passe, la liste déroulante ou le champ de sélection et le champ d'envoi (un simple bouton)..
Lors de la conception des formulaires, la clarté et la familiarité sont les facteurs clés. N'essayez pas de réinventer la roue. Créer un nouveau groupe et l'appeler prénom. Puis choisissez un Outil de type horizontal (T) et entrez une étiquette de champ de saisie; dans mon cas, il s’agit du "Prénom" utilisant le même format de 18 pixels noir # 000000 Open Sans (Regular) Police de caractère.
Maintenant, dupliquez l’un des calques de forme de bouton et déplacez-le dans le prénom groupe. Après cela changer la couleur de fond en blanc #ffffff et ajoutez un gris 1px # d5d5d5 course intérieure. Enfin, placez un exemple du texte saisi dans le rectangle blanc arrondi. Pour mon exemple, j'ai utilisé 16px Open Sans (Regular) et la couleur grise # 838383 tel qu'utilisé précédemment pour le corps du texte.
Créez d'autres champs de saisie avec des titres en dupliquant simplement le premier champ de saisie. Traditionnellement, pour le champ Mot de passe, utilisez des • points ou des astérisques *. Un exemple de champs supplémentaires est présenté ci-dessous..
Dupliquer CMD + J l’un des groupes de boutons, déplacez-le dans le Formes groupe et placez-le sous les champs de saisie récemment créés. Encore une fois, il est important de rester cohérent et de réutiliser les éléments créés précédemment.
Dans ce tutoriel, nous nous en tenons à une interface utilisateur très basique qui pourrait servir à une application Web très simple. Créons maintenant un autre type de champ de saisie. la .
Dupliquez un des groupes de champs d’entrée et placez-le entre les troisième et quatrième repères verticaux, assurez-vous de tout aligner. Modifiez la valeur comme vous le souhaitez et ajoutez une simple icône de flèche pour indiquer qu'il s'agit d'un champ déroulant. Vous pouvez trouver des icônes de flèche sur Iconfinder.
Pour faciliter le travail des développeurs, assurez-vous à nouveau d'inclure un état actif. Pensez à quoi ressemblera la liste déroulante lorsque l'utilisateur cliquera dessus. C'est un travail de designer de guider le développeur pour créer une expérience cohérente et unifiée.
Dupliquez le groupe déroulant récemment créé. En utilisant le Outil de sélection directe (A) cliquez sur un coin de forme pour voir les points de bord puis, en maintenant enfoncé Décalage, sélectionnez les quatre points du bas et appuyez sur vers le bas quelques fois pour étendre la forme. Cette technique garde votre vecteur de forme et garde les coins intacts.
Après cela, il vous suffit de dupliquer les sélections possibles et d’en placer certaines en dessous de la première. Utiliser un Outil Ligne (U) 1px dans Poids faire des séparateurs simples et finalement changer la couleur de la flèche à celle utilisée pour les boutons. Cela aidera à indiquer que le champ est actif.
Nous allons maintenant créer un scénario de message d'erreur simple, par exemple si quelqu'un a saisi un mot de passe trop faible.
Dupliquer CMD + J le champ de mot de passe créé précédemment et placez-le sous les champs déroulants. Après cela, changez la bordure du champ en rouge subtile (j’ai utilisé # eb8686) et le fond d'un rouge grisâtre # e9dde3. Enfin, choisissez un rouge plus fort # b63131 et entrez un simple message d'erreur.
Ça y est avec les formes! J'ai couvert les bases mais c'est suffisant pour commencer à concevoir des formulaires plus complexes.
Les avatars sont presque la norme dans toutes les applications Web de nos jours, il est donc pratique de disposer de visuels pour faciliter la communication et l'identification des utilisateurs..
Réduisez au minimum les groupes inutiles et ouvrez le groupe Avatars. Choisissez le Outil Ellipse (U) et en maintenant Décalage, dessinez un cercle de 80x80px. Rendez-vous sur uifaces.com et choisissez une image. Copiez-le et collez-le au-dessus du cercle récemment créé. Maintenez Alt et placez la souris sur la vignette de l’image jusqu’à ce que vous voyiez une petite flèche, puis relâchez la souris pour créer un Masque d'écrêtage.
Il est important de réfléchir à la manière dont les avatars seront utilisés et d'inclure des tailles différentes pour les développeurs. Par exemple, les plus grandes images d'avatar peuvent être utilisées sur la page de profil et les plus petites dans la section commentaires..
Il suffit de dupliquer l'avatar et de le réduire CMD + T, tenir Décalage clé afin de garder les proportions.
Nous devrions vraiment inclure un échantillon de la façon dont les images seront affichées dans notre application. Je vais mettre une seule image à l'intérieur du rectangle arrondi pour montrer que les images doivent avoir des coins arrondis.
Choisissez le Outil Rectangle Arrondi (U) et tracez une forme de rectangle entre les repères verticaux au-dessous du Avatars groupe. Après avoir choisi une image, j’en ai utilisé une de unsplash.com, redimensionner si nécessaire avec CMD + T et créer un Masque d'écrêtage.
Enfin, nous allons couvrir les couleurs. Une palette de couleurs unie est cruciale et vous devriez vérifier la théorie des couleurs afin de mieux comprendre la signification et l'importance des couleurs que vous utilisez. Nous choisissons de choisir les couleurs à la fin du processus, car nous avons maintenant une bonne idée de l'élément à styler..
Ouvrez le Couleurs groupe et choisissez l’une des couleurs que vous avez utilisées pour les boutons en tant que couleur de premier plan. Après cela, en utilisant un Outil Rectangle Arrondi (U) dessine un rectangle. Puis choisissez un Outil de type horizontal (T) et notez le titre de la couleur, ou son utilisation, par exemple. "Couleur primaire" et fournissez les codes de couleur HEX, RVB ou tout autre format requis. Créer un nouveau groupe, lui donner un nom de couleur et y insérer tous les calques.
Maintenant, simplement dupliquer CMD + J le groupe de couleurs et créez autant de nuanciers que nécessaire. Habituellement, il est préférable de s'en tenir à quatre ou cinq couleurs, car plus de couleurs peuvent rendre les choses en désordre. Découvrez Kuler et COLOURlovers pour des palettes de couleurs incroyables, une source d'inspiration.
Pour ce tutoriel, vous avez utilisé les couleurs "primaires" et "secondaires", une couleur pour le corps du texte et une autre pour les titres, ainsi que le blanc pour les arrière-plans de saisie. Tout cela est montré ci-dessous.
Donc là vous l'avez. Guide de style de l'interface utilisateur d'une application Web simple. J'espère que vous avez appris et compris les bases de la création d'un guide de style, pourquoi certaines décisions ont été prises et en quoi elles sont bénéfiques pour le projet..
Si vous avez des questions ou rencontrez des difficultés, n'hésitez pas à me contacter dans la section commentaires.!
Accentsconagua