Raconter l'histoire de la conception graphique

Cradions un récit convaincant à partir d'un composant d'interface utilisateur de croquis. Nous disséquerons ses éléments - couleurs, typographie, dimensions - et les traduire dans une histoire pour divers publics: visuel, auditif, tactile. Le but? Une expérience engageante, facilement comprise et mémorable. La clarté et la cohérence sont primordiales.

Mon collègue, Katie, a sélectionné un composant d'interface utilisateur. Je vais l'annoter (nos principaux outils sont SCSS, Twig et Craft, mais la langue des modèles n'est pas critique), et elle fournira des commentaires. Idéalement, j'obtiendrai la plupart des détails, avec quelques erreurs pour illustrer comment les informations peuvent être perdues pendant le transfert.

Dans le développement frontal de l'étiquette blanche ou du cadre, la priorité est la flexibilité et l'adaptabilité. Le contenu et le style sont maintenus en grande partie agnostiques (dans les limites du produit) car la destination et le but ultimes du code sont inconnus. Cependant, ma récente transition vers une agence de conception Web a renversé cet objectif. Ici, l'accent est mis sur les conceptions sur mesure et hautement sur mesure profondément intégrées aux besoins spécifiques du client et à son public cible.

Collaborer en étroite collaboration avec un graphiste comme Katie, travaillant avec une interface utilisateur méticuleusement conçue et parfaite, plutôt que des wireframes ou des récits initiaux, est une courbe d'apprentissage. Pourtant, j'apporte des compétences précieuses à la table: conception de documents .

Conception de documents - Élaboration du Web sémantique avec accessibilité à son cœur. Insportez-vous à la conception graphique comme un système de communication. Nous traduisons le but sous-jacent des couleurs, de la typographie et de la mise en page en un DOM accessible, linéaire et navigable. C'est HTML, clair et simple. Pourtant, étonnamment, ce principe fondamental est souvent négligé.

Katie a fourni un fichier de croquis débordant de planches artistiques et de spécifications de conception claires. Mon analyse révèle six ou sept composants en utilisant un paradigme de carte similaire:

• Une carte présente des métadonnées sur une page de site.
• Il contient une image / média et des métadonnées (un objet multimédia).
• Il est affiché dans un groupe d'objets similaires.
• Ce groupe est systématiquement dactylographié (aucun mélange de résultats de recherche, d'articles de presse et de classes).
• Chaque objet a un lien de page unique et aucune autre action.
• Chaque objet comprend un appel à l'action (par exemple, "livre").
• Éléments facultatifs: temps, catégories, badges.
• Éléments requis: médias, titre, lien.

La carte est l'élément de navigation principal. Les utilisateurs traversent les voies guidées, en sélectionnant parmi les ensembles de cartes en fonction des pages de niveau supérieur ("What's ON" "Classes"). Ce n'est pas interactif, mais plutôt un guide, une carte indexe menant les utilisateurs à leur destination - dans ce cas, l'achat d'un billet d'exposition.

Considérez cette analogie: décrire un dépliant du spectacle au téléphone. Vous ne récitez pas le texte textuellement, en commençant par des détails non pertinents. Vous ne décririez pas non plus de couleurs et de polices. Vous transmettez les informations essentielles: "C'est le plus grand showman , mardi à 19h30, Odeon sur Oxford Street, près du tramway." C'est l'essence de la conception de documents.

Compter, groupe et nom

Structions chaque carte dans un élément de liste. Nous avons besoin d'un groupe dénombrable, que nous présenterons avec un titre (<h3></h3> ). Cela permet aux utilisateurs du lecteur d'écran de:

1. Identifiez la liste dans la vue d'ensembles.
2. Voir le nombre d'articles à l'avance.
3. Accédez à l'élément / carte de liste suivante.
4. Sautez le groupe et passez à la page suivante (la pagination est le point de repère étiqueté suivant).

---

============================================================================================================================. =============================================================================================================================. ============================================================================================================================. =============================================================================================================================. ============================================================================================================================. =============================================================================================================================. =============================================================================================================================. =============================================================================================================================.

Ancre

Chaque carte sera enveloppée dans un élément d'ancrage (<a></a> ). Cela priorise le lien, permettant aux utilisateurs de cliquer immédiatement lors de l'identification de la carte pertinente. Bien qu'une grande zone cliquable soit bénéfique, elle ne devrait pas devenir un piège à convivialité. La généreuse gouttière de la carte fournit un espacement suffisant pour minimiser les clics accidentels.

Titre

Le titre de spectacle sera un titre (<h3></h3> ), reflétant sa proéminence visuelle. Les utilisateurs qui scannent rapidement les en-têtes localiseront facilement ces informations clés. L'image précédera la rubrique; Étant donné que les descriptions d'images ne sont pas disponibles via l'API, l'attribut alt sera laissé vide.

Maintenant pour les métadonnées:

• Badge
• Date / heure
• Catégories

Badge

Le badge met en évidence des informations spécifiques au lieu. Bien que son avantage utilisateur ne soit pas immédiatement apparent, son accent visuel mérite l'inclusion. Pour éviter qu'il ne soit manqué lors de la navigation non visuelle, je le placerai directement après le titre, d'abord ou du dernier accessibilité cohérente. Au lieu de<abbr></abbr> , Je vais utiliser du texte brut car la couleur de la marque sert d'indicateur clair de la propriété du lieu.

<p> Présentation du HAC</p>

L'insigne est spécifique à l'organisation, distinctif clairement des événements internes de ceux hébergés par des organisations externes.

Date / heure

Les dates sont cruciales et seront placées dans un<h4></h4> élément, facilitant le balayage rapide pour des dates ou des heures spécifiques. Le<time></time> L'élément garantit une interprétation appropriée de la date / temps par les technologies d'assistance.

Catégories / balises

Les catégories suivent le badge et la date, reflétant leur dé-priorité visuelle. Nous évitons la répétition en plaçant des informations spécifiques avant des informations plus générales. Une étiquette simple précède la liste des catégories pour plus de clarté. L'espacement à code dur empêche le garbod même de compression de texte.

<p> Catégories: {% pour la catégorie dans les catégories.all ()%} {{catégorie}} {% Si pas Loop.last%} / {% endif%} {% endfor%}</p>

Le codage couleur des catégories primaires est géré dans CSS, car il s'agit d'un signal non verbal qui ne nécessite pas de description verbale. La catégorie principale est placée en premier, mais pas explicitement étiquetée, car le filtre de catégorie préexistant fournit une méthode de sélection plus efficace.

Action

L'appel à l'action («livre», «en savoir plus») est conçu comme une portée, placée en dernier pour signaler la fin de la carte. Cela garantit qu'aucune donnée ne suit l'action.

Conclusion

Ce balisage hiérarchise les données de comptage, de regroupement et de dénomination, permettant une interaction linéaire et non linéaire. La page est compréhensible lors de la lecture séquentiellement ou en parties, facilitant une navigation efficace.

Les commentaires de Katie

Katie Parry, designer: Excellent article! Le<time></time> La manipulation des éléments est particulièrement intelligente. Cependant, les utilisateurs de technologies d'assistance reçoivent des informations dans un ordre prédéterminé. Sans filtrage, trouver des événements spécifiques (par exemple, événements de danse) nécessite de naviguer dans le titre, le badge, les dates et les catégories, ce qui peut être lourd. Ce n'est pas une erreur de codage, mais une limitation du paradigme Web actuel. Quelque chose à considérer pour les améliorations futures.

Mon processus de conception commence souvent par des cartes d'événements, même avant d'établir une typographie à l'échelle du site. Visuellement, ces cartes doivent:

• Ressemblent à une liste pour une utilisation intuitive.
• Fournissez suffisamment d'informations pour l'évaluation des intérêts des utilisateurs (image, titre, date, lien).
• Incluez un appel à l'action claire (lien).
• Être facilement scannable.

La scannabilité visuelle est réalisée par le placement cohérent des types d'informations et une hiérarchie visuelle claire. La typographie et l'espacement sont essentiels. Les titres sont très importants; Les dates sont systématiquement stylisées mais distinctes des titres; Les catégories ont un style différent. L'espacement de l'échantillon de code nécessite un ajustement pour une numérabilité optimale.

Les utilisateurs recherchent différentes informations. Certains parcourent généralement; D'autres recherchent des événements ou des catégories spécifiques. Les cartes doivent s'adapter à ce comportement diversifié. Bien qu'il existe des conventions, la conception des cartes varie à l'autre.

Un équilibre doit être trouvé entre les interfaces familières et l'originalité spécifique au client. Les polices de caractères personnalisées et les palettes de couleurs contribuent, mais la découverte des utilisateurs est cruciale. Je recherche des clients et leur public (sites de révision, médias sociaux) pour découvrir les informations influençant la conception. L'implication accrue des développeurs dans cette phase de découverte serait bénéfique. Actuellement, j'utilise des notes de croquis étendues et parfois des feuilles de calcul pour définir les fonctionnalités. Un populateur de données serait idéal!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!