Les outils de développement s'améliorent constamment en termes de convivialité et d'expérience utilisateur. C'est très pratique pour les concepteurs et les utilisateurs. Il n'est pas surprenant que les concepteurs de sites Web expérimentés essaient de rester dans l'air du temps et d'apprendre de nouveaux outils. Les auteurs de centaines de blogs et sites Web de design publient régulièrement de nouveaux articles, partagent leurs connaissances et proposent des conseils sur l'utilisation de nouveaux outils. Pour le concepteur, tout cela constitue une source d’informations très utile. Nous avons également sélectionné les derniers outils et sites Web pour les concepteurs.

Êtes-vous sûr d’avoir résolu tous les problèmes et d’être prêt à confier le projet à vos clients ?

UX Checklist est un examen professionnel de tous les aspects de l’expérience utilisateur. Vous pouvez effectuer un contrôle à n’importe quelle étape du projet, qu’il soit terminé ou non.

2. Police géniale

Font Awesome propose des icônes vectorielles évolutives que vous pouvez personnaliser instantanément en modifiant la taille, la couleur, l'ombre et tout ce que CSS peut faire.

3. Icônes parfaites

Perfect Icons est un outil simple pour créer des icônes de réseaux sociaux quelle que soit la résolution de l'écran.

4. Bug des cadeaux

Freebiesbug dispose d'une énorme quantité de ressources de conception Web utiles, y compris diverses ressources dédiées aux modèles, à l'interface utilisateur et aux plugins.

5. Points

Sur le site Web Pttrns, les concepteurs trouveront des modèles de sites Web pour appareils mobiles, des ressources sur UIKit et des éléments d'interface utilisateur.

6. Sélecteur de couleurs d'interface utilisateur plate

Flat UI Color Picker est un excellent choix si vous avez besoin d’une palette de couleurs et que vous souhaitez créer une conception d’interface utilisateur plate complètement unique.

7. Technologie et tout

Tech&All a rassemblé tout ce que vous devez savoir sur la conception Web, le code, les modèles, la conception visuelle, les UIKits, les éléments d'interface utilisateur et le développement d'une bonne navigation sur le site.

8. Inspiration du site

En quête d'inspiration ? Vous ne savez pas comment utiliser les sites Web ? Site Inspire sera votre assistant pour résoudre ces problèmes. Le matériel sur le site peut être filtré par catégories, plates-formes et styles.

Quelle conception d’interface utilisateur considérez-vous comme bonne ? Sur le site GoodUI, vous trouverez de nombreuses informations et conseils utiles.

Lors de la conception de l'interface d'applications ou de sites Web, il est utile de prendre en compte l'expérience existante d'autres spécialistes et les meilleures options pour résoudre les problèmes typiques. Cela vous permet d’éviter des erreurs inutiles et d’obtenir de bons retours de vos utilisateurs. Dans la section À propos, nous avons publié quelques notes sur ce sujet : par exemple, il y a eu une revue de 20 ressources de, ainsi que divers articles sur le menu hamburger, l'historique du développement des boutons sur les sites Web, etc.

Aujourd'hui, nous allons examiner un service similaire Modèles d'interface utilisateur, qui est une sorte de bibliothèque de modèles de conception standard et peut être utile pour la conception de l'interface utilisateur.

L'auteur de la ressource est le développeur Web danois Anders Toxboe, qui l'a lancée en 2007. L'idée principale du projet est de rassembler en un seul endroit toutes les solutions aux problèmes classiques et aux tâches de création d'interfaces. Ceci est mis en œuvre à travers une sélection d'exemples + une description détaillée des différentes méthodes avec des explications sur ce qui est le mieux et pourquoi il faut utiliser l'une ou l'autre approche.

Le projet UI Patterns contient plusieurs fonctions/sections :

• Modèles de conception - directement une bibliothèque de modèles d'interface.
• Captures d'écran - une archive de toutes les captures d'écran de l'interface utilisateur (près de 16 000).
• Blog (malheureusement, il y a très peu de publications et elles sont rarement publiées).
• UI Patterns Weekly - une sélection de liens vers des articles utiles sur le sujet (mis à jour régulièrement).
• Newsletter avec cours gratuits.
• Possibilité d'ajouter vos propres captures d'écran des interfaces.
• Fonctionnalités éducatives payantes - les développeurs enseignent un cours en ligne sur la création d'un design efficace du point de vue de la psychologie et divers outils pour influencer les actions des utilisateurs. En plus de cela, le site vend un jeu de cartes avec différents modèles de comportement, qui peuvent être utiles en conception.

Nous sommes plus intéressés par les deux premiers points, nous les considérerons donc.

Modèles de conception d'interface utilisateur

En règle générale, des options de mise en œuvre similaires sont utilisées pour résoudre les mêmes problèmes. Si vous regardez la sélection, vous verrez que presque toutes les « fonctions » traditionnelles du design (recherche, boutons, cases à cocher) ont le même principe de fonctionnement. De même, des solutions plus complexes utilisent une approche standardisée. Le service UI Patterns contient les modèles de conception les plus récents.

Ils sont répartis en plusieurs catégories :

• onglets ;
• menu;
• contenu;
• formulaires (d'ailleurs, nous vous recommandons de lire sur l'amélioration) ;
• tableaux;
• des photos;
• formatage des données ;
• sociale;
• magasins;
• recherche, etc

Choisissons, par exemple, le menu Fil d'Ariane, et sur la page correspondante vous verrez une discussion détaillée du problème :

Ces informations aideront les concepteurs et planificateurs débutants à comprendre pourquoi l’élément actuel a été inventé et quel problème il permet de résoudre. Il existe également une description des options de mise en œuvre de cette fonctionnalité, leur justification, des conseils de mise en œuvre + des captures d'écran. Au fait, nous avons pris quelques photos d'ici pour un article. De plus, il y a des commentaires sur la page où vous pouvez discuter du message et poser des questions.

Modèles de conception convaincants

Dans cette section, vous trouverez également des modèles d'interface dits motivants (persuasifs). Cela inclut des éléments qui influencent les actions et les perceptions des utilisateurs, leur permettent de s'impliquer dans un travail plus actif sur le site, les poussent à prendre certaines décisions, etc.

L'exemple le plus simple est l'ajout de « mécanismes de jeu » à un site Web/une application, lorsque les utilisateurs peuvent recevoir des réalisations (badges) tout en travaillant ou ouvrir de nouveaux niveaux avec des capacités plus avancées. Tous ces éléments sont très utiles pour une interaction efficace et interactive avec votre public.

Bibliothèque de captures d'écran de l'interface

Contrairement à la section précédente, il n'y a pas de description supplémentaire du problème considéré dans les archives d'images, ce ne sont que des captures d'écran. Ils sont divisés en catégories et sujets, et disposent d’outils supplémentaires. Choisissons par exemple des galeries :

Dans les filtres, vous pouvez définir la couleur, le domaine ou même utiliser le formulaire de recherche. Lorsque vous accédez à la page de capture d’écran, vous la verrez dans sa taille d’origine.

Total. De manière générale, le service UI Patterns sera un excellent assistant pour tous les designers : débutants et professionnels. La sélection de modèles de conception d'interface est vraiment bonne - en plus de 16 000 illustrations, il existe une analyse détaillée de diverses tâches UX/UI avec des conseils, des options de mise en œuvre, etc.

Si vous connaissez des projets similaires, merci de laisser des liens dans les commentaires.

Aujourd'hui, je partagerai mon expérience dans le développement de documentation graphique pour les lignes directrices. Cela s'est avéré être ma deuxième mission pour Viline. Et si vous ne vous souvenez pas de la première partie, j'ai repensé la page du cours vidéo. Dans cet article, je décrirai le processus de développement du style de tous les éléments et des différents états. Je vais imaginer et formuler quelques règles pour rendre l'interface équilibrée et accessible, en tenant compte du public...

Au fait, si vous utilisez Figma, je recommande de prêter attention à notre systèmes de conception prêts à l'emploi. Ils aident les indépendants à réaliser plus de commandes par mois, permettent aux programmeurs de créer eux-mêmes de belles applications et les chefs d'équipe « exécutent » des sprints plus rapidement en utilisant des systèmes de conception prêts à l'emploi pour le travail d'équipe.

Et si vous avez un projet sérieux, alors notre équipe est prête à déployer un système de conception au sein de l'organisation basé sur nos développements et à l'adapter à des tâches spécifiques à l'aide de Figma. Web/ordinateur de bureau et tout mobile. Nous connaissons également React / React Native. Écrivez à T : @kamushken

Dans le premier chapitre, j'ai oublié de mentionner qu'il fallait agir en fonction de la palette de couleurs approuvée. La tâche n’était pas d’inventer et de proposer de nouvelles couleurs. Pour sélectionner une couleur, j'utilise parfois Adobe Color CC (autorisation requise) ou ColorScheme.ru. J'insère le code de la couleur principale, puis je sélectionne les nuances pour celle-ci dans différents modes : analogique, monochrome, triade, etc. Des contrastes très forts et harmonieux peuvent être sélectionnés, par exemple en mode triade. Ce que je veux dire, c'est que j'avais un endroit où obtenir une portée plus optimale, mais je n'avais pas de tels souhaits.

J'avais également des questions sur la police Open Sans utilisée dans la version actuelle du site. Cela semble de plus en plus rare dans le monde de tous les jours. Désormais d'actualité : Helvetica, Lato, Source Sans Pro, Roboto, etc... Mais il s'avère que cette problématique était en train d'être repensée par les marketeurs.

Je réserve tout de suite : vous ne verrez pas ici de photos colorées et tendances avec des designs qui sautent au sommet sur behance ou dribbble. Je doute un peu que les femmes puissent rester longtemps sur un site conçu dans un tel style. Il s’agit du public principal et je tiendrai compte de ce facteur. Mais néanmoins, j'essaierai d'améliorer l'ensemble dans la mesure où le cadre fixé par le client et mon expérience me le permettent.

Lignes directrices

Les lignes directrices sont un ensemble de règles et/ou de recommandations visant à façonner l’apparence d’un produit. Ils sont formés par le concepteur et décrits de manière claire pour les développeurs. D'une part, c'est une condamnation à mort pour le premier, parce que... à l'avenir, de nouvelles sections du produit pourront être visualisées sans designer, en s'appuyant sur un document graphique. En revanche, de nos jours, compléter le travail d'un concepteur d'interface avec une telle documentation est déjà un incontournable, désormais la barre est assez haute. Ainsi, les lignes directrices sont des recommandations sur : les couleurs, les polices, les éléments, les états, l'iconographie, les tailles et les retraits.

Je vous rappelle que le public principal du produit web dans mon cas est constitué par les jeunes ou les futures mamans. Je dois m'en tenir aux : couleurs approuvées par le client ; la police qu'il considère optimale pour son public ; rayon d'arrondi des coins des éléments. Ce dernier est nécessaire pour que les éléments ne paraissent pas trop « pointus » ou « anguleux » aux yeux du beau sexe.

1/15 : Police Circé

Nouvelle importante de la part de l'équipe marketing au début : nous nous éloignons d'Open Sans et utilisons Circé comme police principale.

Description de la police

Circé est un grotesque géométrique avec un visage humain et de nombreux ajouts agréables. La police se compose de 6 styles de graisses différentes, de fin à extra gras. La police doit son nom à la fois aux formes géométriques et au processus de création, devenus un divertissement de masse, et à son caractère particulier, quelque peu dangereux. Alors que les formes de base de Circé sont un sans empattement géométrique assez calme avec quelques touches humanistes, des formes et des ornements alternatifs peuvent complètement changer le caractère d'une police. D'une part, le concepteur peut profiter d'une variété de formes sans précédent dans l'alphabet cyrillique, mais, d'autre part, la seule limite à toute cette diversité est le goût et le bon sens de l'utilisateur, de sorte que dans une certaine mesure, la police devient dangereuse pour lui, comme une sorcière Circé pour les marins odysséens. La composition de symboles super étendue de Circé, qui comprend à la fois des signes pour la plupart des langues européennes basés sur l'alphabet latin et cyrillique, ainsi qu'un grand nombre de variantes alternatives et de variantes avec des fioritures, est organisée en ensembles stylistiques qui vous permettent de rapidement, changez facilement et de manière flexible le caractère de l’ensemble. La police convient aussi bien aux types de texte assez petits qu'aux grandes tailles, par exemple dans les titres de magazines, les affiches, etc. Créatrice - Alexandra Korolkova. La police a été publiée par ParaType en 2011.

Pour le dire avec vos propres mots : la police n’est pas conventionnelle pour le Web, son style est plus proche de la typographie, elle a un « son littéraire ». Ce sont purement mes associations. Si l'on compare Open Sans et Circé, ce dernier est légèrement supérieur en densité


OK, la nouvelle police est approuvée. Recommandations des spécialistes du marketing pour les coins arrondis : utilisez un rayon de 6 px. D'accord, j'en tiendrai compte ! (d'ailleurs, c'est un souhait assez rare dans ma pratique). Vous pouvez commencer à travailler sur tous les éléments.

2/15 : Couleurs

La palette au centre est le schéma reçu du client. Schéma de couleurs à gauche : j'ai un peu éclairci le vert (nous en aurons besoin pour les onovers) et je l'ai placé à côté du blanc. De cette façon, vous pouvez imaginer à peu près à quoi ressemblera une conception de carte typique. Les nuances de droite sont un exemple de rendu du vert à côté du noir contrasté. Il n’y avait pas de nécessité urgente pour un tel usage ; c’était plutôt un souci de variété. Le fond général du site et de ce kit ui reste #EFEFEF (gris clair), cela évitera un fort contraste sur les appareils mobiles.

15/03 : Typographie

Ce sont des lignes directrices pour l'utilisation de la dimension de texte. J'ai dessiné un paragraphe de texte et y ai inséré une citation. J'ai réalisé plusieurs types de titres. Et ajout de listes régulières et numérotées. Un exemple de barre de défilement est également ici, il a été ajouté plus tard. En fait, ces règles textuelles ne doivent pas nécessairement être rigides. Si vous devez écrire un paragraphe de texte dans une petite police de 14 pixels, oui, s'il vous plaît. L'essentiel est de maintenir la proportionnalité du texte. Par exemple, un paragraphe de texte en petits caractères semblerait étrange avec un gros titre « Table des matières ».

15/04 : Liens

Rien de nouveau ni d'extraordinaire. De manière générale, la couleur des liens reste controversée. Ma position est la suivante : si le dessin utilise des nuances de couleur bleue ou cyan comme référence, vous pouvez vous passer du soulignement. Si vous utilisez votre propre couleur, personnellement, j'utilise toujours une police de soulignement soulignée. Il s’agit en quelque sorte d’une norme non officielle et l’utilisateur se rend vite compte que ce texte est cliquable. Plus tard, d'ailleurs, les spécialistes du marketing ont changé la couleur des liens en orange. Cela ne me dérangeait pas, l'essentiel est que les liens restent soulignés.

5/15 : Boutons

Dans cette section, nous devons prendre en compte tous les états possibles des boutons et les parcourir. Je divise les types de boutons en primaires « primaires » et secondaires « secondaires » (ou comme on les appelle aussi bouton fantôme). Logiquement, le bouton principal mène à une action prioritaire, et le bouton secondaire mène à une action que l'on attend moins de la part de l'utilisateur. Manipulation de conception à nouveau. Voici un exemple d'une telle utilisation :

De nos jours, les théories de Google Material Design sont activement utilisées dans le design, c'est pourquoi de nombreux boutons commencent à ressembler à nouveau à des boutons. Une certaine physique du monde réel a commencé à être appliquée à la conception d’interfaces. Le bouton a normalement une petite ombre ; lorsque vous survolez la souris, l'ombre devient plus grande et plus floue - le bouton « monte » plus haut ; lorsqu'on clique dessus, cette ombre disparaît, simulant le « pressage » du bouton. C’est la pseudo-tridimensionnalité qui relie un peu plus le design au monde réel. Pour autant que je me souvienne, cela vient des directives des applications Smart TV, où les utilisateurs sont assis à une certaine distance du téléviseur et où l'utilisation d'ombres visibles avec un facteur de flou élevé est vitale. Cela permet de percevoir beaucoup plus facilement ce qui se passe.

15/06 : Saisie de texte

Si l’on se réfère à nouveau à GMD, on constate que la tendance est à utiliser de tels intrants :

On le retrouve de plus en plus dans les produits web. Si vous préférez Android, êtes compétent ou travaillez dans le domaine informatique, alors avec de telles entrées, vous êtes comme un « poisson dans l'eau ». Mais pour le public féminin, qui préfère principalement l'iPhone, un style aussi ascétique pour les éléments de saisie de texte est plutôt pénible. J'ai essayé de trouver un juste milieu et proposé une conception dans laquelle l'entrée reste toujours une entrée, mais a également des racines GMD :

Tout formulaire de saisie en bas a une ombre soulignée de 1 px sans flou. Lorsque vous passez la souris, elle devient verte ; lorsque vous cliquez dessus, il s'épaissit et devient vert, démontrant l'état en action. L'icône en forme de crayon à droite est une tentative expérimentale visant à ajouter une « clarté excessive ». Dans certains cas, cette icône peut rehausser le sens : la saisie habituelle est un crayon ; saisie de recherche - loupe ; saisie du mot de passe - icône de verrouillage, par exemple ; et ainsi de suite. Un exemple sera vers la fin de cet article.

15/07 : listes déroulantes

Leurs principes de réponse suivent les mêmes principes que les entrées. Lorsque vous passez la souris, la couleur de l'icône et le soulignement changent. Lorsque vous développez la liste déroulante, une ombre plus volumineuse apparaît, « élevant » toujours l'élément plus haut dans le plan. Si vous abordez la question avec l’attention voulue, vous devriez alors penser à l’état élargi. L'icône est inversée, la ligne active est mise en évidence en gras et, au survol, nous teintons l'arrière-plan avec une légère nuance de la couleur verte principale.

8/15 : Curseurs

Tout est extrêmement transparent chez eux. Je n’invente rien de nouveau ici, le composant standard est conçu par analogie en accord avec les guides : polices, couleurs et dimensions. Le curseur peut être déplacé soit en faisant glisser la souris, soit en cliquant sur une valeur numérique, par exemple lorsqu'il vous est demandé d'indiquer l'âge de l'enfant « de » et « jusqu'à ».

15/09 : Onglets/onglets

« - Oui, tout est clair, allez-y !

15/10 : Éléments de sélection

Ici j'ai regroupé tous les éléments restants : sélection d'états (filtrage supplémentaire), commutateurs, cases à cocher et boutons radio. Pour les deux derniers, il s'agit simplement d'un rappel aux développeurs que la visibilité de la sélection est renforcée par un texte intensif. Bon, pour le reste, il me semble que tout est évident.

15/11 : Tableau

J'ai également complété le kit avec un exemple de tableau. Tout est standard, je n'utilise qu'un style général similaire. Bien entendu, le tableau est plus utile si les spécifications d’indentation sont données. Soit dit en passant, vous en saurez davantage à la fin du chapitre.

15/12 : Iconographie

Recommandations et exemples d'utilisation des icônes. Je crois que l'iconographie intense et proéminente de GMD a contrecarré l'évolution de l'iconographie. Il était une fois des pixels, puis des convexes, quelque part entre les deux, les contours d'iOS sont devenus une tendance, et un style plat coloré a brièvement clignoté à proximité (vous vous souvenez quand une pseudo-ombre sans fin s'étirait en biais par rapport à l'objet ?). Et puis Google est venu et m'a dit comment faire. Et sans devenir trop lyrique, je n’utilise que les icônes GMD ces derniers temps pour leur polyvalence et leurs performances. Vous pouvez prendre de nombreuses métaphores auprès de concepteurs d'icônes indépendants (gratuitement, ils donnent toutes les tailles, png/svg/zip, indice : c'est pratique de faire un clic droit et de télécharger la taille souhaitée). Je pense que les icônes intenses sont plus compréhensibles et visibles (et il devrait y avoir une référence aux panneaux de signalisation).

13/15 : Cartes

Il s'agit déjà d'une transition des éléments individuels travaillés vers leurs combinaisons. J'ai compilé plusieurs versions de cartes à utiliser sur le site, car... c’était une manière pertinente de présenter certaines informations et les préférences personnelles du client.

Mais je vous rappelle toujours qu'il n'est pas souhaitable d'en faire trop dans le design. Leur signification est mieux comprise en conjonction avec les spécifications :

Il n’existe pas de règles strictes pour déterminer la composition des cartes. Si vous suivez les dimensions d'indentation que j'ai indiquées, presque tout le monde aura l'air uniforme avec les directives développées.

14/15 : Connexion

En bonus, j'ai travaillé sur les popups de connexion/inscription et réalisé un layout avec un exemple d'utilisation. Ceci est plus nécessaire pour visualiser comment, à l'avenir, sans ma participation, un concepteur Web à plein temps du projet pourrait assembler n'importe quelle section du produit. Tout ce que vous avez à faire est de prendre des éléments prêts à l'emploi à la source et de les disposer exactement selon les spécifications.

15/15 : Spécifications

Ils se trouvent dans un groupe distinct dans le code source. Le groupe peut être rendu visible et les spécifications seront dessinées. Sans eux, ce kit d'interface utilisateur serait incomplet. Le respect des proportions de dimensions et d'indentations conduit à une interface équilibrée. Si je ne donne pas d’instructions à ce sujet, il y a un risque que cela se fasse différemment. Et puis je ne pourrai pas garantir une mise en œuvre de haute qualité.

Si vous préférez une grille de 8 pixels, il convient de considérer que tous les retraits sont des multiples de 8 ; si vous utilisez une grille de 10 pixels, comme dans mon cas, vous ne trouverez pas de distances de 13 ou 27 pixels entre les éléments de cette conception, tous les retraits seront un multiple de 10.

Il y a aussi des règles sur le nombre de couleurs et leurs nuances : je n'ai pas utilisé trop de nuances de gris par exemple - il n'y en avait pas plus de trois dans cet ensemble. Je suis sûr que c'est le mien règles d'interface plus facile pour les concepteurs et les développeurs. Bien qu'il existe des exceptions ici, si le système fournit un retour dans différents états, le rouge, le bleu, etc. peuvent être requis. pour améliorer la différence sémantique (par exemple, pour les notifications contextuelles).

Conclusion du chapitre

• La documentation graphique des directives est un langage visuel permettant aux développeurs de continuer à développer le produit et de ne pas impliquer à nouveau le concepteur.
• Un ensemble de lignes directrices peut être élaboré en tenant compte des objectifs du futur produit. Les polices, les couleurs et le style général peuvent prendre en compte les spécificités des futurs utilisateurs de la ressource/application.
• Pour optimiser l'interaction, les lignes directrices doivent contenir des recommandations sur les tailles et les indentations des éléments.
• Il est souhaitable, mais pas nécessaire, que l'ensemble comprenne également des exemples de solutions toutes faites. Il peut s'agir d'un panier d'achat, d'une page produit, d'un flux d'amis, de cartes, d'une page de destination, etc.
• L'approche moderne consiste à renvoyer au client non pas un fichier sketch/psd, mais plutôt du code html/css. Je suis passé complètement à Axure il y a quelque temps et il fait le travail assez efficacement.

En complément, je vous suggère de regarder comment d'autres collègues de l'atelier résolvent des problèmes similaires. C’est bien d’avoir quelqu’un à qui prendre exemple :

1. Jan Losert très cool, lui