10 illustrations numériques de guides de conception et de style d'entreprises populaires telles qu'Apple, Google et Starbucks

Si vous vous êtes déjà demandé comment les concepteurs d'Apple ont défini chaque aspect mineur d'iOS lorsqu'ils ont fini par le construire, alors vous êtes peut-être au bon endroit.

L'innovation technologique étant en constante évolution, la conception de sites Web continue de se formaliser. Les concepteurs et les développeurs d'Internet doivent créer un code capable de se traduire de manière transparente d'un ordinateur portable à un appareil mobile, de faciliter la compréhension de la navigation sur le site et d'innover dans d'autres fonctionnalités du site Web - ce sont tous des facteurs que les entreprises standardisent dans les guides de conception numérique.

Les guides de conception électroniques sont devenus plus pratiques pour l'image générale et la mémorisation d'une marque sur le net car ils ont établi les attentes et les références pour l'écran d'affichage Web de l'entreprise. Ils sont particulièrement vitaux pour les sites Web et les produits qui doivent offrir aux utilisateurs des épreuves de premier ordre.

Dans cette présentation, nous allons plonger dans les détails des guides de type numérique et vous montrer des illustrations impressionnantes d'entreprises bien connues qui les ont correctement complétées.

Ce style d'information sur la mode doit être considéré comme un manuel qui définit les critères de style et de design pour l'existence numérique d'une entreprise. Son objectif principal est de produire un type de style universel pour le nom de la marque et d'assurer une certaine régularité sur tous les canaux et supports, l'endroit où vous construisez votre marque, la palette de couleurs, la typographie, les suggestions d'images, etc.

Contrairement aux guides de mode des fabricants qui encapsulent le logo d'une entreprise, l'affirmation de sa mission, les personnalités des acheteurs et le ton de la voix, la conception de sites Web et les guides de style sont centrés sur la présentation numérique comme UX/UI.

Mais, en tant que designer UX moi-même, j'ai généralement été curieux, que pouvez-vous trouver dans les guides de mode numérique de fournisseurs influents comme Apple, Google et Starbucks ?

Sentez-le ou non, de nombreux fournisseurs rendent ces informations accessibles au public – ils ne les rendent tout simplement pas faciles à trouver. Donc, chaque fois que je tombe sur un single, je le mets en signet. Voici quelques-uns des plus beaux que j'ai trouvés de manière si significative.

Exemples de guides de style numériques brillants

1. AppleiOS

Le guide de conception et de style d'Apple est particulièrement intéressant car il explique comment concevoir un système de fonctionnement complet. Monterey, l'une des versions les plus récentes d'OS X d'Apple, possède une interface utilisateur plus simplifiée que son prédécesseur, Yosemite. Apple démontre cette distinction subtile mais palpable avec de très bonnes comparaisons graphiques, puis poursuit en discutant de la logique qui sous-tend chaque facette solitaire de la disposition du système en cours d'exécution. Cela vous donne une fenêtre sur l'esprit des concepteurs.

2. Google : mise en page des documents

Google a été le pionnier d'une mode de design et de style identifiée comme la structure du produit, qui existe comme un hybride entre le design et le style skeuomorphes (dégradés, textures, éléments doux) et le style plat (simple, coloré, géométrique). aspects liés à chaque conception et conception de style, tout en évitant les négatifs.

Étant donné que Google travaille sur le style de produit depuis quelques décennies maintenant, vous avez probablement déjà interagi avec lui au quotidien – l'application Google Calendar, n'importe qui ? Ce manuel de conception et de style détaille exactement ce qu'est la conception de matériaux et comment Google l'utilise. Et je dois dire que c'est, de loin, l'un des meilleurs guides de type que j'ai jamais rencontré.

3. Starbucks

Ce n'est que l'un des guides de conception et de style les plus minimalistes que j'ai consultés - et pourtant, il contient une tonne de faits pratiques. Il met l'accent sur le code et vous pouvez expliquer qu'il a été construit par des constructeurs, pour des constructeurs. Il manque des éléments liés au nom de la marque, il fait donc la distinction entre un manuel de conception de site Web et une bibliothèque de codes.

4. Atlassian

La suite de marchandises pour laquelle Atlassian modélise est gigantesque – donc, naturellement, ils ont un guide de mode gigantesque. Des éléments fondamentaux (comme la palette de couleurs et la typographie) aux composants (comme les tableaux et les info-bulles) en passant par une bibliothèque de modèles complète, ce guide contient à peu près tout ce sur quoi vous compteriez avec un produit de cette taille.

Peut-être le meilleur de tous, la raison d'être du manuel de type complet est résumée en 3 conditions trompeusement simples sur la page Web de la résidence.

5.Mozilla

Ce didacticiel de conception électronique concerne principalement l'image de marque et les communications. Mais avec Mozilla qui a récemment adopté une tactique de "confidentialité et d'ouverture du World Wide Web", il est étonnant de voir comment ils reproduisent cela dans leur conception.

La page d'accueil de Mozilla fait également une carrière fantastique en décrivant comment son UX / UI est censée être accessible aux hommes et aux femmes ayant une déficience visuelle ou un handicap - une chose inclusive et importante car le savoir-faire deviendra beaucoup plus révolutionnaire.

6. Tampon

La directive de type de tampon est petite et concise, probablement de la grille au moyen de modaux, le tout dans une seule position. C'est un rappel agréable que votre tutoriel de mode électronique n'a pas besoin d'être flashy s'il communique tous les points idéaux. Les entreprises à la recherche d'un point de départ peuvent prendre en compte les notes des facteurs de conception simplistes de Buffer et construire leur avoir à partir de là.

7. Japper

Si vous recherchez une instance fiable d'un guide de conception et de style de site Web, Yelp l'a obtenu. Non seulement il est complet, mais il explique sa procédure de conception atomique en tant que livre de cuisine et divise les composants du site Web en substances contribuant à un plat.

Ce détail a tout pour plaire : typographie, mise en page, variétés, conteneurs, navigation et extraits de code pour chaque pièce. Ils font un excellent travail pour expliquer ce qu'est à peu près chaque élément, où il doit vraiment être utilisé et comment il doit être exécuté.

8. GOV. Îles britanniques

Le site Web des solutions gouvernementales d'Angleterre a été souvent présenté comme l'exemple principal d'UX de qualité supérieure. Pourquoi? Pour la raison qu'il présente un style et une conception simples et rapides à utiliser qui accueillent trop d'informations et de faits.

Si vous êtes intéressé par ce qui peut constituer une mise en page nette et puissante (indice : cela commence généralement par l'utilisation de couleurs unies, la typographie et l'espacement), alors le manuel de type de GOV.UK mérite d'être examiné de près. Tout comme le site internet, c'est extrêmement très simple mais très instructif.

9. DeviantArt

Les nouvelles informations de style DeviantArt sont exclusives simplement parce qu'elles sont vraiment plus qu'une simple information - c'est une connaissance. Il raconte une histoire et s'appuie sur des visuels audacieux sur toute la largeur pour immerger la personne dans l'expertise émotionnelle de la marque DeviantArt. Cela étant dit, il s'agit strictement d'un guide de modèle de marque, donc seuls les produits comme la couleur et la typographie sont enduits.

10. Disques

Couleur, icônes, typographie et logo… Disqus fait court et doux avec ces informations. Mais tout peut être offert de manière assez agréable et organisée. Ce guide peut être utilisé comme un exemple fantastique pour «l'endroit où commencer» lors de la création d'une ligne directrice de style de votre part, car il touche tous les principes fondamentaux.

Influencé par l'expérience pour créer votre propre manuel ?

Maintenant, cela peut être votre interrupteur. En tirant parti d'un didacticiel de type électronique dans votre entreprise, vous pouvez communiquer le langage de conception de votre marque aux concepteurs internes, aux organisations, aux partenaires marketing et même aux clients.

Commencez par les facteurs fondamentaux standard (teinte, typographie, logo, imagerie), intégrez quelques recommandations d'utilisation ("faites et vous ne devriez pas"), et même intégrez certaines parties nettes si vous en avez besoin (modules, modèles, extraits de code. Utilisez des exemples d'autres fournisseurs pour apprendre des meilleurs.Votre main-d'œuvre établira des modèles réguliers en un rien de temps.