Le guide du concepteur Web sur les tuiles de style
Les tuiles de style sont une référence visuelle au langage de conception d'un site Web (ou à tout autre produit de conception). Ils aident à raconter une histoire à travers des polices, des collections de couleurs et de styles, et lorsqu'ils sont visualisés en combinaison avec des wireframes, des plans de site et d'autres éléments de l'interface utilisateur, ils définissent cette histoire d'une manière accessible et conviviale. Dans cet article, je vais vous expliquer comment tirer le meilleur parti de cette technique pratique.
01. Que contiennent les carreaux de style?
Une tuile de style réussie doit contenir des exemples d'éléments d'interface utilisateur, définir un jeu de couleurs, montrer comment les principes de la conception typographique seront utilisés et démontrer la relation entre la marque du client et la solution visuelle proposée. Par exemple, si un client a utilisé les mots «fiable» ou «fiable» pour décrire son entreprise, la vignette de style doit le représenter visuellement.
Surtout, les carreaux de style offrent un point de départ pour la discussion et la clarification des objectifs commerciaux et des préférences personnelles du client.
02. Quand utiliser les carreaux de style
Les tuiles de style offrent un point de départ flexible pour aider à définir à quoi ressemblera un site Web, d'une manière accessible que les clients peuvent comprendre. Considérez-les comme quelque chose entre Conseil d'humeur et une maquette - ils aident à définir et à communiquer comment un style visuel sera appliqué sur un site Web, y compris les interfaces utilisateur orientées bureau et mobile.
Vous pouvez les utiliser à la place des premières maquettes traditionnelles, générant des idées et des commentaires du client pour aider à éclairer l'approche de conception finale. Chez Samantha Warren Une liste à part article, elle décrit comment le processus de tuile de style aide à «démêler la passion derrière une marque, révélant des pépites de bonté descriptive tout en connectant le client au projet».
03. À quoi ressemblent les carreaux de style?
Il n'y a pas de manière définie pour vos carreaux de style. La clé est de ne pas les confondre avec des moodboards, qui sont insuffisants pour établir pleinement un langage visuel, tout en ne allant pas trop loin dans l'autre sens vers une maquette de conception complète.
Consultez les exemples ci-dessus de Phase2 Technology, créés tout en travaillant sur un nouveau site Web pour le site de la campagne Washington Examiner 2012.
04. Comment utiliser avec succès les tuiles de style
Une fois que vous avez compris les principes des carreaux de style, ils doivent s'intégrer parfaitement à votre processus de conception. En règle générale, ils seront générés plus tôt dans le cycle de vie de la conception que vous n'auriez pu créer vos premières maquettes, et par conséquent, ils vous permettront d'obtenir des commentaires plus tôt. Suivez les quatre étapes suivantes pour insérer des vignettes de style dans votre flux de travail:
Écoutez votre client
Rencontrez votre client au début de votre projet et recueillez autant d'informations pertinentes que possible. Certains concepteurs peuvent trouver plus facile de mener des entretiens individuels avec des parties prenantes, tandis que d'autres préfèrent une réunion de groupe; Faites ce qui vous convient le mieux. Assurez-vous de poser les mêmes questions fondamentales à tous les décideurs et parties prenantes clés.
Si cela vous aide, vous pouvez créer un questionnaire pour vos clients avant la première réunion de projet. Si vous avez du mal à savoir quelles questions vous devriez poser à votre client, le StyleTil.es site Web met en évidence certaines ressources utiles, y compris celles de Andy Rutledge et Kim Cullen .
Samantha Une liste à part Cet article permet également de définir quelques techniques de questionnement utiles pour tirer le meilleur parti de ces premières rencontres. Fondamentalement, vous devez rassembler des adjectifs pour décrire utilement l'histoire que vos clients souhaitent présenter sur leur site Web.
Utilisez un cadre de conception pour interpréter le brief
À l'aide des adjectifs que vous avez enregistrés à la première étape, créez un ensemble agrégé pour identifier les thèmes dans la langue des adjectifs. Appliquez ces thèmes à votre cadre de conception, en utilisant principes de conception tels que l'harmonie et l'unité pour faire des choix sur les éléments de conception et leur représentation visuelle de l'histoire. N'oubliez pas d'utiliser tout langage de marque, d'écriture manuscrite et visuel déjà en place pour aider à contextualiser le brief de conception et votre réponse.
Définir le langage visuel
À l'aide des informations que vous avez recueillies à l'étape 01 et de la sortie générée par votre interprétation à l'étape 02, déterminez les thèmes primordiaux et commencez à les faire correspondre avec des dispositifs stylistiques. Générez une vignette différente pour chaque interprétation visuelle que vous avez proposée. Les tuiles de style complétées vous permettront d'établir rapidement si vous êtes sur la même page que votre client du point de vue du langage visuel.
Le site Web styletil.es, créé par Samantha Warren, fournit un modèle PSD pratique pour vous Télécharger et utilisez-le comme point de départ pour la sortie de vos carreaux de style.
Itérer jusqu'à ce que le style soit convenu
Travaillez avec votre client pour apporter des modifications à la vignette de style. Étant donné que vous effectuez une itération en dehors du contexte de la mise en page finale du site Web, vous pouvez vous assurer que votre approche stylistique continue de refléter les objectifs commerciaux et les objectifs de conception.
05. Les carreaux de style devraient-ils remplacer les maquettes?
C'est une approche courante au début d'un projet de conception pour produire des maquettes de page, mais si vous vous êtes déjà retrouvé à devoir négocier un hybride - comprenant des éléments de deux maquettes ou plus et faisant des compromis sur l'approche de conception - vous ' Je serai familier avec la frustration que peut entraîner l'utilisation de maquettes au début du processus de conception.
Du point de vue du client, une maquette représente une solution de conception complète, mais comme c'est souvent la première fois qu'ils voient votre interprétation du brief de conception, il est compréhensible qu'ils identifient les éléments qu'ils aiment et les éléments qu'ils n'aiment pas. C'est aussi une conclusion naturelle que les commentaires que vous recevrez vous obligeront à rassembler des éléments disparates des différentes maquettes, menant à ce que Samantha Warren marque un Solution 'Franken-comp' .
Les maquettes peuvent sembler être un moyen simple et évident de définir comment un projet peut démarrer le processus de passage du brief de conception à l'achèvement. Mais les tuiles de style peuvent être une façon plus intelligente de faire les choses, d'obtenir des commentaires et de définir un langage visuel en collaboration avec votre client dès le début.
Cela peut aider à éviter le sentiment de frustration et de déception d'avoir à assembler une maquette finale à partir de pièces individuelles de composants complètement déconnectés, et aide à garder le client pleinement engagé et adhéré au processus de conception.
06. Où en savoir plus
- Les carreaux de style et leur fonctionnement - Un article A List Apart
- Aide-mémoire et modèle PSD gratuit pour les carreaux de style
- The Foundry: notre nouveau livrable responsive design: le prototype de style
Mots : Sam Hampton-Smith
Comme ça? Lisez-les!
- Libérer Pinceaux Photoshop chaque création doit avoir!
- Le meilleur Plugins Photoshop
- Le guide ultime pour concevoir le meilleurs logos
Qu'en penses-tu? Allez-vous essayer les carreaux de style ou vous en tenez-vous aux maquettes de page traditionnelles? Faites-nous part de vos opinions dans les commentaires ci-dessous ...
