Share
Le rôle de Photoshop dans la conception Web devient de plus en plus modulaire. Au lieu de composer une mise en page parfaitement nette d'une page Web entière, il est peut-être plus judicieux de se concentrer sur les styles généraux, les combinaisons de couleurs et les éléments d'interface spécifiques. Aujourd’hui, nous examinerons de plus près la conception d’éléments d’interface utilisateur, en rassemblant notre propre kit d’interface utilisateur au cours du processus..
Avant de commencer à concevoir notre propre collection d'éléments d'interface utilisateur, jetons un coup d'œil à certains sites Web qui fonctionnent très bien avec leur interface. Il ne fait certainement pas de mal à trouver de l'inspiration!
Interface utilisateur de Flow Flow fait un excellent travail avec son interface utilisateur. C'est totalement propre, dynamique - et rien qu'en la regardant, vous savez instinctivement ce que vous faites et où aller. Remarquez la grande utilisation des couleurs et des icônes intégrées à l'application Web..
Interface utilisateur de Gumroad Gumroad a une super ambiance avec leur interface. Non seulement l'interface est amusante, elle permet également de présenter des informations de manière propre, concise et simple. Remarquez comment l'appel aux boutons d'action sort vraiment de la page.
Interface utilisateur de Squarespace Squarespace prend minimal et propre au prochain niveau. Sans l'utilisation de couleurs, l'interface permet toujours aux utilisateurs de naviguer facilement dans le tableau de bord. Notez que même s’il ya beaucoup de contenu, l’utilisation intelligente de l’ombrage rend tous ces chiffres moins intimidants..
L'interface utilisateur de GoSquared L'interface utilisateur de GoSquared montre que les applications Web à fort contenu peuvent également tirer parti d'un excellent design. Avec l'utilisation de modules, l'interface devient propre et cohérente. La grande utilisation des accents de couleurs ajoute également à l'interface utilisateur. Notez que ce type d’interface se prête bien à la personnalisation; les utilisateurs peuvent facilement déplacer, supprimer, ajouter ou modifier des modules.
Maintenant que nous avons examiné certaines interfaces utilisateur existantes, il est temps de nous en occuper nous-mêmes.!
Nous allons commencer par l'en-tête.
Comme nous l'avons vu précédemment, les couleurs sont très important lorsqu'il s'agit d'une application Web; un jeu de couleurs permet de définir l'atmosphère et facilite l'identification de l'application. Différentes couleurs provoquent également des ambiances ou des thèmes différents (par exemple, les couleurs ludiques de Gumroad suggèrent que l'application Web est sans stress et facile à utiliser), et elles peuvent être utilisées pour cibler différentes données démographiques (par exemple, lumineuses et dynamiques pour un public jeune, neutre et simple pour un public plus âgé).
N'oubliez pas qu'il est peut-être préférable de choisir une palette de couleurs modeste avec des couleurs faciles à regarder. Assurez-vous également que vous utilisez des contrastes et des nuances différentes, car cela permet de définir une hiérarchie visuelle et facilite le filtrage du contenu, comme illustré dans les exemples ci-dessus. Comme nous n'avons pas vraiment de but pour cette application, nous serons modestes et choisirons un jeu de couleurs sophistiqué bleu-gris:
Être unique en termes de style est important pour une application Web; tout comme les couleurs, le style est un moyen de rendre votre application reconnaissable et de se distinguer des autres. Aujourd'hui, nous nous concentrerons sur le moderne et le simple. Bien que les dégradés soient excellents en eux-mêmes, l’ajout de textures et de motifs peut faire ressortir les éléments et créer une expérience plus tactile. Pour obtenir cet effet, nous utiliserons un motif de bruit sur la barre de navigation et les boutons. Découvrez la différence:
Remarquez la différence que fait le bruit à gauche? Simple mais efficace! En plus des motifs, nous utiliserons des styles de calques pour ajuster les boutons de manière à ce qu'ils ne ressortent pas, mais que leurs états soient également identifiables. Dans l'image ci-dessus, vous pouvez clairement voir que le bouton 'Home' est actif.
Sans plus tarder, lancez Photoshop! Commencez par créer un nouveau fichier de 600 pixels de large et de 350 pixels de haut (paramètres Web par défaut). Créez un rectangle qui remplit la totalité de la zone de dessin et renommez le calque en "BG". Puisque nous avons maintenant un arrière-plan, supprimez le calque «Arrière-plan» par défaut. Ensuite, changez la couleur de remplissage en # dde3ec.
Créez maintenant une nouvelle forme de rectangle de 600 pixels de large et 70 pixels de haut et alignez-la sur le dessus de la grille. Ce sera la barre de navigation de notre application Web. Il est important de garder les dimensions à l'esprit lors de la conception. Dans ce cas, nous ne souhaitons pas une navigation trop volumineuse et intrusive pour le reste de l'application. 70px est donc idéal..
Remarque: Dans un navigateur, nous utilisons peut-être ems pour redimensionner nos éléments de page, mais lorsque nous utilisons Photoshop, nous devons nous en tenir aux pixels..
Renommez ce calque en 'Barre de navigation' et changez la couleur de remplissage en # 303844. Il est important de choisir une couleur contrastante pour votre élément de navigation et de le faire ressortir de l'arrière-plan. Dans ce cas, nous avons un fond bleu clair et une barre de navigation bleu-gris foncé. Verrouillez les positions des deux couches, juste pour qu'elles ne se déplacent pas accidentellement. Voici ce que vous devriez avoir à ce stade:
Avant de commencer à ajouter des styles à notre barre de navigation, nous allons simuler le motif de bruit que j'ai déjà mentionné..
Créez un nouveau fichier de 100 pixels de large et 100 pixels de haut (paramètres Web par défaut). Créez un nouveau calque, sélectionnez le canevas entier (cmd / ctrl + a) et remplissez-le avec n’importe quelle couleur (cmd / ctrl + retour arrière). Dans le menu, accédez à Filtre> Bruit> Ajouter du bruit. Définissez la quantité de bruit sur 400%, la distribution sur Uniform et assurez-vous que Monochromatique est sélectionné. Voici à quoi cela devrait ressembler:
Une fois que vous avez cela, allez dans menu, Edition> Définir un motif, nommez le motif 'Bruit' et cliquez sur 'Ok'. Maintenant, vous avez un motif de bruit que vous pouvez utiliser pour styler les éléments! Il existe de nombreuses ressources en ligne qui fournissent des modèles d'utilisation sur le Web - essayez de les expérimenter pour créer un look unique.!
Pour revenir à notre PSD d’interface d’application Web, accédez aux options de style de calque pour la «barre de navigation». En utilisant certains styles de calque, il est facile d’ajouter d’excellents effets à cette forme simple..
Nous allons commencer par ajouter un trait de 1px en dehors du calque, avec la couleur de remplissage # 000000 et l'opacité à 100%. Cela nous donnera une ligne de définition séparant l'élément de l'arrière-plan.
Ensuite, nous allons ajouter une ombre portée au calque: mode de fondu comme d'habitude, couleur comme # 000000, une opacité de 58%, un angle de 90 degrés, une distance de 1px, une largeur de 0px et une taille de 5px. Cette ombre portée donnera un bel effet en soulignant la barre de navigation et en la rendant plus visible..
Ensuite, nous allons ajouter une ombre intérieure: mode de fusion en tant que dodge linéaire (ajouter), couleur en tant que #ffffff, angle comme -90 degrés, distance comme 1px et étranglement et taille comme 0px. Cette ombre linéaire ajoute un effet 3D à la barre de navigation et ajoute un peu plus à la conception..
Notre barre de navigation a un aspect un peu plat (rien à redire là-dessus!), Mais ajoutons un dégradé: mode de fusion en superposition, opacité de 20%, dégradé du noir au blanc par défaut, style en linéaire et angle de 90 degrés . Pour aider notre dégradé, ajoutons le motif sur lequel nous travaillions précédemment: mode de fusion en tant que superposition et opacité de 1%. Voici ce que vous devriez avoir:
Maintenant que notre barre de navigation a fière allure, il est temps d'y ajouter quelques éléments. Le design des boutons est très important pour le design d'une interface - ils sont très utilisés et doivent être distinguables, fonctionnels et représentables de la marque..
Il est également important de faire la distinction entre les différents états des boutons - l’utilisateur a besoin d’un retour continu. Par conséquent, en modifiant légèrement les styles de calque, nous pouvons créer différents états. Nous allons commencer par créer le bouton actif.
Créez un nouveau calque "Bouton de navigation actif" avec une forme de rectangle arrondi: largeur de 100 pixels, hauteur de 40 pixels et rayon de bordure de 4 pixels. Encore une fois, les dimensions sont très importantes. La largeur et la hauteur du bouton dépendent de nombreux facteurs tels que les dimensions de leurs éléments parents, la quantité de texte et la taille du texte. Positionnez-le verticalement, par rapport à la barre de navigation et à 40 pixels de la gauche du canevas.
Définissez la couleur de remplissage sur # 90a2c3, l'opacité de remplissage à 25% et ouvrez les paramètres de style pour le calque. Encore une fois, créez un trait qui est 1px en dehors du calque, a une opacité de 100% et a une couleur de remplissage # 000000. Créez ensuite une lueur intérieure: mode de mélange normal, opacité de 13%, couleur de # 000000, starter de 0px et taille de 4px. Cette lueur intérieure nous donne l'effet "poussé".
Maintenant, pour l’ombre portée: mode de fusion normal, couleur de #ffffff, opacité de 10%, angle de 90 degrés et distance de 2px. Cette ombre portée ajoute à l'effet poussé.
Ajoutez ensuite un dégradé: mode de fusion normal, opacité de 6%, noir sur blanc par défaut, linéaire et un angle de 90 degrés. Comme nous l'avons fait avec la barre de navigation, ajoutez un motif de bruit avec superposition du mode de fusion et une opacité de 2%..
Le résultat est un bouton qui a une qualité intuitive. sans même regarder les autres états de bouton, un utilisateur peut immédiatement reconnaître que le texte de ce bouton fait référence à un contenu actif sur la page Web..
Le texte est également important sur un bouton; Gardez à l'esprit que cela nécessite une marge de manœuvre en fonction de la taille du bouton que vous choisissez ainsi que de la quantité de contenu que vous souhaitez afficher dans le bouton..
Créez un nouveau calque de texte nommé "Texte actif". Définissez la couleur sur # f3f5f9, Taille de police jusqu'à 12 pixels et famille de polices jusqu'à Helvetica Neue.
Remarque: Helvetica Neue est présent en tant que police système dans de nombreuses versions d’OS X, mais pas dans Windows. Vous préférerez peut-être utiliser Arial pour ce kit d'interface utilisateur, car il est plus largement disponible pour l'utilisateur final..
Ajoutez une ombre portée: mode de fusion en superposition, opacité de 35%, angle de -90 degrés, distance de 1 px et étendue et taille de 0px. Le texte sans-serif a maintenant l’air d’être inséré avec le bouton actif. Enfin, centrez le texte par rapport au bouton. Ici, nous avons un texte assez simple à l'intérieur du bouton, mais l'utilisation d'une couleur cohérente avec le thème et d'une simple ombre portée améliore le contenu et le rend beaucoup plus facile à lire..
Créons maintenant un bouton de style normal pour les éléments inactifs de la barre de navigation. Il est important de conserver le thème de l'état de l'autre bouton, mais également de modifier le style afin qu'il soit différent de l'état actif..
Dupliquez le calque "Bouton de navigation actif" en tant que "Bouton de navigation normal" et le calque de texte "Texte actif" en tant que "Texte normal". Pour que le bouton d'état normal ait un aspect différent, nous inverserons ce style et le styler de manière à ce qu'il apparaisse comme sorti de l'écran. Cela le distingue non seulement, mais indique également à l'utilisateur qu'il peut être sélectionné. Commencez par changer la couleur de remplissage du bouton en # c2dcff et remplir l'opacité de 5%.
Modifiez également l’ombre portée: mode de fusion normal, couleur comme # 000000 opacité de 10%, angle de 90 degrés, distance de 2px. Ensuite, changez l’ombre intérieure: mode de fusion normal, opacité de 25%, couleur comme #ffffff, distance de 1px. Ajoutez maintenant une lueur intérieure: mode de fusion de l’écran, opacité de 7%, couleur #ffffff et la taille de 3px. Enfin, définissez l’opacité du dégradé sur 13% et supprimez la superposition du motif. Le résultat sera un bouton un peu plus léger que la barre de navigation, se démarquant à l'aide de l'ombre portée et du trait..
La différenciation de la couleur et du style du texte est un autre moyen de rendre les états différents. Changez la couleur du texte en # e8ecf3 et l'ombre portée de sorte que l'opacité soit de 50% et l'angle de 90 degrés.
Au lieu de donner à l'utilisateur un ennuyeux bouton "Connexion" sur lequel cliquer, pourquoi ne pas changer les choses et créer une icône d'alimentation? Cela ajoutera quelque chose de créatif et unique à la conception, tout en permettant aux utilisateurs de distinguer rapidement le bouton de connexion de tout le reste. Commencez par dupliquer le calque «Bouton de navigation normal» sur «Connexion du bouton de navigation». Ajustez la taille de la forme afin qu’elle soit un carré arrondi de 40px par 40px. Vous pouvez le faire en utilisant l’outil de sélection directe, en sélectionnant les 4 points situés à droite du calque de forme et en les décalant vers la gauche afin que la largeur passe à 40px (décalage). + <). Use this method rather than transforming the shape layer, as that distorts the rounded edges.
Pour créer l'icône d'alimentation, créez une série de formes sur un calque nommé "Icône d'alimentation". Tout d’abord, créez un cercle de 16 pixels sur 16 pixels. Ensuite, soustrayez un cercle de 12px par 12px au centre du plus grand. Cela devrait vous donner un cercle de 16px par 16px de 2px d'épaisseur. Ensuite, soustrayez un carré de 6 pixels de large aligné en haut au centre du cercle. Enfin, ajoutez un rectangle de 2 pixels de large et de 8 pixels de haut, centré par rapport au carré soustrait et aligné 1 pixel au-dessus du point le plus haut du cercle..
À ce stade, vous devriez avoir un calque de forme avec l'icône d'alimentation. Changez la couleur de la forme de l'icône d'alimentation en #ffffff. Ouvrez les styles de calque et ajoutez une ombre portée: mode de fondu de superposition, couleur en tant que # 000000, angle de 90 degrés, distance de 1px et étendue et taille de 0px. Ajoutez ensuite un dégradé: mode de fusion normal, opacité de 10% et dégradé par défaut du noir au blanc.
Enfin, alignez l’icône du bouton de connexion sur le centre du bouton de connexion et alignez le bouton à 40 pixels de la droite du canevas. Voici comment la barre de navigation finalisée devrait apparaître:
Même si nous avons utilisé le même style pour ce bouton que pour l'autre, le remplacement du texte par une icône améliorait la conception générale..
Nous avons créé une base idéale pour l'interface utilisateur de notre application Web, mais nous n'avons jusqu'à présent conçu que des boutons et des arrière-plans. Essayons d'étendre l'interface utilisateur en ajoutant une interface de connexion par liste déroulante. Cela nous donnera l'occasion de créer des éléments de formulaire et des boutons conçus pour différents arrière-plans..
Commençons par créer un nouveau rectangle arrondi (rayon de bordure de 4 pixels comme auparavant) par souci de cohérence) d'une largeur de 300 pixels et d'une hauteur de 200 pixels, en le nommant 'Login Dropdown BG'. Ensuite, ajoutez un triangle de 14 pixels de large et 7 pixels de haut au calque 'Login Dropdown BG' et alignez-le à 13 pixels du coin supérieur droit du rectangle arrondi. Cela créera un effet d’info-bulle dans la liste déroulante et représentera une connexion entre le bouton de connexion situé au-dessus de celui-ci..
Lorsque nous changeons la couleur de la liste de connexion, descendez à #ffffff, cela ne se distingue pas exactement du fond de la toile. Pour en faire plus, nous ajouterons une ombre portée: mode de fusion normal, opacité de 25%, angle de 90 degrés, distance et étendue de 0px et taille de 4px. Cela donne une ombre subtile au menu déroulant, le rendant non seulement plus visible, mais donnant également l’effet qu’il plane sur l’arrière-plan. Si vous codiez cela, il pourrait être judicieux d’ajouter une courte animation à ajouter à l’effet flottant. Alignez cette forme de liste déroulante à 40 pixels de la droite de la zone de dessin et à 13 pixels du bas de la barre de navigation. Voici ce que nous avons jusqu'à présent:
Remarquez comment l'alignement de la liste déroulante est aligné avec le bouton? La cohérence avec la position et le rembourrage rend le nettoyeur plus facile à coder dans un conteneur.
Ajoutez maintenant un calque de texte avec le texte «Connectez-vous à votre compte ou créez-en un nouveau». Changez la taille de la police à 12px, la famille de polices à Helvetica Neue (Normal) et la couleur à # 92969b. Pour représenter un lien, changez la couleur du "créer un nouveau" en # 5c6f91.
En ce qui concerne le calque 'Login Dropdown BG', alignez le texte à 14 pixels de la gauche et 20 pixels du haut. Nous ne voulons pas que le texte se démarque trop, nous voulons que les utilisateurs se concentrent uniquement sur la connexion, raison pour laquelle une taille de police relativement petite et des couleurs plus claires est une bonne idée..
Il est important de se rappeler que notre champ de texte doit correspondre au thème de la conception, mais également suffisamment distinct pour que les utilisateurs puissent le reconnaître et le remplir. Créer un nouveau rectangle arrondi (rayon de la bordure 3px) de 270px large et 30px haut et nommez-le 'Champ de texte'. Notez qu'au lieu d'un rayon de 4px, nous utilisons un rayon de 3px pour le champ de texte. La raison en est que le champ de texte est dans la liste déroulante et il semblerait gênant si la taille du rayon était la même..
Changez la couleur de remplissage du calque en # f9fafc et ajoutez un trait de 1px en dehors de la forme qui est la couleur # d3d8e1 (Opacité 100%). Pour ajouter un peu de surbrillance au champ de texte, ajoutez une ombre interne: couleur de #ffffff, opacité de 100%, angle de -90 degrés, distance de 1px et étendue et taille de 0px. J'ai choisi de changer la couleur du champ de texte afin qu'il se démarque et ne se fonde pas dans l'arrière-plan du menu déroulant.
Ajoutez un calque de texte avec le texte 'Nom d'utilisateur' (taille de la police 12px, Helvetica Neue Regular, couleur de # 727d88) et alignez-le verticalement centré et décalé de 10 pixels vers la gauche par rapport au champ de texte. Alignez le champ de texte 14px à partir de la gauche du fond déroulant et 18px à partir du bas du calque de texte. Pour créer un champ de mot de passe, copiez simplement le calque de champ de texte et le calque de texte et alignez-le à 12 pixels du bas du premier calque de champ de texte. Voici ce que vous devriez avoir à ce stade:
Remarquez l’aspect naturel de la taille et de la position de tous les textes et champs de texte. vous ne voulez pas garder trop ou trop peu d'espace, mais juste assez pour que le contenu s'adapte confortablement.
Il est temps d'ajouter un bouton de connexion pour notre liste déroulante de formulaire, mais le bouton que nous avons créé pour la navigation ne correspondra pas exactement à la conception. En effet, nous avons affaire à un arrière-plan clair et les styles utilisés dans la barre de navigation ne se distinguent pas de l'arrière-plan blanc de la liste déroulante. Le contraste est très important pour une interface accessible.
Nous allons créer un style de bouton secondaire, pouvant être utilisé pour le contenu principal de l'application et fonctionnant également sur des arrière-plans clairs. Nous utiliserons un style similaire à partir des boutons de navigation pour styler le bouton de connexion, de sorte que notre style soit cohérent..
Commencez par créer une nouvelle forme de rectangle arrondi (rayon de bordure 3px) de 90px de haut, 35px de large et nommez-le 'Login Button'. Changez la couleur de remplissage en # a3b2cd et ajoutez un trait de 1px en dehors du calque de forme qui est la couleur # 7b8da4 (Opacité 100%). Ajoutez ensuite une couche de dégradé d'opacité de 25%, avec les couleurs par défaut noir à blanc. Enfin, ajoutez une ombre interne normale avec la couleur #ffffff, Opacité à 45%, angle de 90 degrés, distance de 1 pixels et étendue et taille de 0 pixels.
Pour le contenu textuel, créez un nouveau calque de texte (format 12px, Helvetica Neue Regular, couleur). #ffffff) avec le texte 'Login', et ajoutez une ombre portée: mode de fusion de la superposition, couleur # 000000, distance de 1px, et propagation et taille de 0px. Aligner le calque de texte au centre du bouton de connexion.
Tout comme le design de Gumroad, nous voulons que nos utilisateurs sachent exactement où cliquer après avoir entré leurs informations de connexion..
Voilà pour la conception de notre interface de base!
Après quelques couches et deux autres styles de couches, nous avons terminé la conception de la fondation de l'interface utilisateur de notre application Web! Avec ce que nous avons, vous pouvez avoir une idée du thème, du style, des couleurs et des éléments de l'interface utilisateur..
Avec tout le travail de fond que nous avons effectué, il est relativement simple de continuer à concevoir plus d'éléments. Nous avons défini le schéma de couleurs et le style de notre conception. Il vous suffit donc de créer davantage de formes et d’affiner les styles de couleurs / calques. En gros, une fois que vous avez les éléments de conception fondamentaux, vous pouvez disposer de modules importants à partir de votre application..
La meilleure partie de la création d’un «exemple» d’UI est qu’elle ne nécessite pas autant d’efforts que si vous deviez créer un ensemble complet d’UI. Supposons que vous ne soyez pas satisfait de la direction prise par l'interface utilisateur: il est préférable de vous éloigner d'une petite collection d'éléments plutôt que de jeter des heures de travail par les fenêtres. Cette approche de workflow vous permet également d'explorer différents thèmes d'interface utilisateur et de choisir celui qui convient le mieux à votre application..
Accentsconagua