Share
Créons une 'barre d’administration statique' simple mais efficace dans Photoshop. Nous prendrons une sélection d’éléments d’interface utilisateur et concevrons leurs différents états, prêts à intégrer HTML et CSS..
Si vous utilisez WordPress depuis la v3.1, vous aurez sans doute remarqué la barre d'administration omniprésente qui apparaît sur le front-end lorsque vous êtes connecté.?
Un outil simple et utile qui vous permet de sauter directement dans l’administrateur sans - vous savez - aller au préalable à l’administrateur. Google est également un fan de la barre d'administration statique. cela s'intègre parfaitement à l'ensemble de l'application Web. Si vous utilisez GMail, Google Docs, Google +, vous aurez vu ceci:
Même le navigateur Chrome a parfois une barre d’outils similaire dans le pied de page.?
Et si vous visitez Themeforest, vous trouverez souvent des auteurs utilisant des barres statiques pour naviguer dans leurs aperçus de thème:
OK, alors maintenant nous savons de quoi nous parlons, réfléchissons maintenant à certains aspects de la conception que nous devons prendre en compte.
Assez parlé. Ouvrons Photoshop (ou n'hésitez pas à créer le vôtre dans Fireworks) et donnons le coup d'envoi?
Ouvrez un nouveau document, le mien 200x1000px, et ajoutez quelques guides pour définir votre barre d’outils (70px de haut), vos boutons (30px pixels centrés verticalement dans la barre), plus une marge gauche et droite de 20px.
Ajouter une texture aléatoire à l'arrière-plan principal, cela représente votre page Web et sera assis sous la barre. Ajoutez ensuite une forme (noire) avec une opacité de 85%. C’est la barre elle-même, et en lui donnant une légère transparence, on soulignera le fait qu’elle est «au-dessus» du contenu de la page Web..
Nous allons maintenant ajouter des éléments communs à la page. Il y aura quelques exemples, mais nous n’avons pas besoin de tout dessiner, du moment que nous prenons en compte tous les états de nos divers articles. Avec cela fait, le reste de la construction peut être fait dans le navigateur.
Lorsqu’il s’agit de construire notre barre d’administration, nous allons créer une vignette à l’aide de l’API Gravatar. Ceci sera présent pour montrer à l'utilisateur qu'ils sont connectés (cela peut sembler évident, mais c'est un rappel utile au cas où quelqu'un voudrait se déconnecter quand ils partiront.)
En attendant, j'ai saisi l'image gravatar par défaut, et nous allons l'utiliser comme un espace réservé.
Créez un rectangle arrondi (U), avec un rayon de bordure de 2px, entre les guides, comme indiqué ci-dessous. Maintenez la touche Maj enfoncée pendant que vous la faites glisser, limitant ainsi les dimensions au carré. Vous aurez fait un carré soigné de 30x30px. Placez la vignette au-dessus d'elle, cliquez dessus avec le bouton droit de la souris et sélectionnez "Créer un masque d'écrêtage"..
J'ai ajouté une ombre portée noire au calque de masque (double-cliquez sur le calque pour ouvrir les propriétés du calque) de 2 pixels directement vers le bas. Ce sera un état commun à beaucoup de nos éléments, que nous verrons plus tard.
Ajoutez du texte pour accueillir l'utilisateur (dans ce cas, Droid Serif Italic à 12px) et une étiquette plus neutre pour permettre à l'utilisateur de se déconnecter..
Lorsque vous dessinez des formes dans Photoshop, vous constaterez souvent que l'anti-aliasing (qui rend le tout chaud et flou) peut supprimer certains détails de votre travail. Montrons ceci maintenant en dessinant une forme carrée simple sur notre fond sombre.
C'est parfaitement précis, du moins c'est ce que vous pensez. Une fois que vous avez zoomé, vous pouvez clairement voir le flou le long de chacun des bords. En les supprimant, nous pouvons nettoyer notre image et atteindre la perfection des pixels. Faites une copie de la forme et placez-la à côté.
Très bien. Prenez maintenant l'outil de sélection directe (A) - la petite flèche blanche du curseur - et sélectionnez la forme. Commande et cliquez pour sélectionner deux nœuds le long d'un bord, puis déplacez-les vers l'intérieur jusqu'à ce que vous voyiez un bord parfaitement net..
Beaucoup mieux! Les vecteurs s'alignent précisément avec la grille de pixels. Répétez cette opération pour les trois autres bords en veillant à bien conserver les dimensions de l'objet..
OK, ça a l'air beaucoup mieux, mais la vraie différence devient claire quand on fait un zoom arrière sur les pixels réels?
Une différence délicate, mais significative. Gardez cela à l'esprit lorsque vous construirez les boutons au cours de ce tutoriel, et le résultat final en sera d'autant meilleur.
Évitez de nettoyer les bords égarés en activant d’abord "Aligner sur les pixels" dans les options de forme:
Merci encore à Jeff pour l'avoir signalé!
Nous avons déjà discuté des dimensions générales de nos boutons, il ne sera donc pas difficile de continuer et d'en construire quelques-uns. Nous allons maintenant examiner un exemple libre (non connecté à d'autres boutons) - le bouton de notification.
De la même manière que nous avons formé notre masque de gravatar, tracez un rectangle arrondi haut de 30 pixels autour d’un texte Arial simple de 12 pixels. Ce bouton va illustrer un état de survol, nous allons donc placer un trait bien visible autour du rectangle, lui donner une couleur de fond unie et (comme nous l'avons fait avec notre gravatar) appliquer une ombre portée pour donner au bouton une regard levé.
Une autre caractéristique courante de l’interface utilisateur est l’étiquette numérotée indiquant le nombre d’e-mails, notifications, mises à jour, etc. actifs. Vous les connaîtrez si vous utilisez un smartphone, un propriétaire de Mac, pensez-y - si vous avez déjà ouvert un navigateur, de quelque type que ce soit.?
Nous allons utiliser cette convention d'interface utilisateur et attribuer une étiquette numérique à notre bouton de notification. Nous allons utiliser une couleur plus frappante car l'idée derrière ceux-ci est d'attirer l'attention de l'utilisateur. Un texte Arial sombre et gras avec une ombre portée pâle, adossée à un subtil dégradé de jaune devrait faire l'affaire. Voici un rapide coup d'œil sur les paramètres de dégradé:
Encore une fois, il s’agit d’un petit rectangle arrondi, avec un rayon de 2 pixels sur les coins et une ombre portée subtile. Nous le placerons au-dessus de notre bouton, à droite. Soigné.
Après avoir créé notre bouton dans son état de survol, nous devrions maintenant traiter de l’état par défaut. Ce sera moins frappant - clair, mais discret. Copiez le bouton de notifications en veillant à conserver chacun de vos éléments dans un dossier propre, dans le panneau Calques. Modifiez le texte de l'étiquette (si vous le souhaitez), puis ternissez un peu la couleur. Faites la même chose pour la couleur de trait et supprimez l'ombre portée..
Dupliquer ce bouton, car nous allons également utiliser celui-ci pour montrer comment les éléments groupés apparaissent.
Lorsque nous avons une petite collection de boutons associés (boutons de navigation, par exemple), nous devrions faire savoir à l'utilisateur qu'il a affaire à un groupe, et pas simplement à une rangée d'éléments aléatoires. On peut utiliser proximité, une technique par laquelle l'unité dans la conception Web est réalisée. Nous plaçons des objets proches les uns des autres afin que leur relation soit indiquée visuellement.
Comme vous pouvez le constater, nous avons supprimé les coins arrondis où nos boutons se rencontrent. L'effet arrondi ne sera visible que sur les bords extérieurs des objets groupés. Dans un instant, nous ajouterons un autre bouton entre ces deux boutons pour accentuer l'effet.
Tout d’abord, regardons simplement comment nous supprimons les coins arrondis. Avec notre rectangle en surbrillance, sélectionnez l'outil Supprimer les points d'ancrage et supprimez les deux nœuds extérieurs de la courbe..
Ensuite, sélectionnez l’outil de conversion de point et convertissez les deux points restants en angles droits..
Bingo!
Après avoir supprimé les coins arrondis d’un côté de chacun des boutons, vous pouvez maintenant les coller ensemble..
Rien de tel qu’un ensemble d’icônes de qualité pour enseigner aux utilisateurs la forme la plus directe possible. Sur certains de nos boutons, nous allons utiliser des icônes au lieu de texte: elles ont fière allure et permettent de gagner de la place. Nous pouvons toujours utiliser les info-bulles pour vérifier à quoi sert chacune d’elles. Voici un exemple de deux boutons d’icônes, bout à bout dont l’un illustrant l’effet de survol:
Comme je l’ai dit cependant, nous n’utiliserons pas une seule image au cours de ce tutoriel (OK, mis à part la vignette de gravatar). À la place, récupérez la police de caractères Web Symbols de Just be Nice Studio. Comme c'est gentil.
C'est beau, et vient complet en format .otf (pour utiliser sur votre système) et un kit de polices Web pour l'implémentation dans vos pages Web avec @ font-face. Cela signifie que nous n’avons pas à utiliser d’image-objet ni de fichier image unique; nous pouvons simplement utiliser des caractères et appliquer cette police - brillant.
Dans ce cas, j'ai utilisé le U et S respectivement, mais nous pouvons couper et changer très facilement lorsque nous construisons. Nous pouvons même appliquer des effets en utilisant CSS, comme nous le ferions avec des polices normales, mais je devance moi ici? Pour l'instant, créez quelques boutons et utilisez certaines de ces superbes icônes..
De la même manière que nous avons travaillé, créez un champ de recherche. Il est identique aux boutons dans leur état par défaut (contour gris pâle, couleur de la police gris pâle, aucune ombre portée), à l'exception du fait qu'il n'a pas de fond uni.
Son bouton attenant Est-ce que Cependant, il utilise à nouveau l'un de nos caractères de symboles Web (L). Placez le tout contre le guide de droite, car nous allons le positionner dans le navigateur sur ce bord.
Je pensais que ce serait bien d’inclure un bouton supplémentaire qui attire supplémentaire attention, au cas où quelque chose - euh - extra - devrait être fait. Un bouton 'publier' ou 'fermer le cadre', par exemple.
Encore une fois, nous pouvons utiliser les icônes, en conservant les dimensions habituelles des boutons et les coins arrondis 2px. Cependant, cette fois-ci, nous utilisons le même dégradé de jaune que celui utilisé avec notre étiquette de numéro de notification, # f9d944 à # fee77f, avec un trait de # f9d944. L'icône est gris foncé # 292929, comme dans la notification, avec une ombre portée pâle..
Comme prévu, son état de survol aura une ombre portée sombre comme avec les autres boutons.
Nous approchons maintenant de son terme et avons presque couvert tous les états possibles de nos éléments d'interface utilisateur. Nous allons ajouter un bouton supplémentaire entre nos boutons Paramètres et Profil, cette fois pour servir de menu déroulant (notez l'absence complète de coins arrondis):
Dans la capture d'écran ci-dessus, le menu déroulant est visible. Par définition, le bouton est actif (ou survolé). Le bouton prend l'état approprié; trait en surbrillance, texte plus clair et ombre portée sombre. J'ai utilisé une autre icône de symboles Web () pour indiquer qu'il y a plus de contenu sous le bouton.
Le menu déroulant lui-même doit être associé visuellement au reste des éléments de l'interface utilisateur, mais doit se démarquer. Ce sera également au-dessus de tout contenu de page Web visible à ce moment. J'ai donc choisi d'en faire un simple rectangle blanc, avec une ombre portée:
L'arrière-plan clair le lie visuellement au bouton de menu survolé, et l'ombre permet de le distinguer de tout autre contenu. L'effet de survol mis en évidence sur le lien déroulant est simplement une teinte plus pâle du jaune que nous utilisons.
Il ne reste plus qu’un petit élément à traiter; l'info-bulle (rappelez-vous que nous avons mentionné cela?) Nous allons l'utiliser comme vérification au cas où les buts de nos boutons d'icônes ne seraient pas immédiatement clairs.
La capture d'écran ci-dessus montre ma première info-bulle - parfaitement claire, en principe, mais je me suis ensuite rendu compte que celle-ci était identique (du point le plus petit) au menu déroulant. Comme cela suggérerait qu'ils jouent en quelque sorte un rôle similaire, j'ai décidé qu'il valait mieux prendre un autre chemin. Ceci est une infobulle; il ne faut pas confondre pour autre chose.
La deuxième tentative est beaucoup plus réussie. C'est subtil par rapport à notre barre d'administration sombre, mais le texte très contrasté le rend très lisible. Tout ce dont vous avez besoin pour construire ce petit chiot est un rectangle noir (pas de coins arrondis cette fois, mais à vous de choisir). Avec votre première forme dessinée, dessinez-en une autre en vous assurant que l'outil Ajouter à la forme (+) est sélectionné. Cela liera vos deux formes en une seule forme, tout en conservant les vecteurs individuels pour l'édition:
Avec l'outil Sélection directe (A), vous pouvez sélectionner les points de la deuxième forme et les manipuler séparément. Redimensionnez-le comme bon vous semble et faites-le pivoter de 45 °. Vous allez vous retrouver avec quelque chose comme?
La fin de la route! J'espère que vous aurez créé une interface utilisateur qui satisfera à votre approbation. Dans le prochain tutoriel, nous verrons comment coder ce lot dans une barre d'administration statique conviviale, conviviale et conviviale pour le navigateur. Merci d'avoir lu, j'ai hâte d'entendre ce que vous en pensez dans les commentaires!
Accentsconagua