Les carreaux de style offrent un moyen frais et productif d'aborder le processus de conception. Ils vous permettent d'affiner et de vous concentrer sur la personnalité et l'humeur d'un projet sans vous soucier de décisions de mise en page spécifiques.
Aujourd'hui, nous allons vous montrer exactement ce que sont les carreaux de style, pourquoi vous devriez les utiliser et comment les intégrer à votre processus de conception. Suivez-le et vous pourriez changer votre façon de concevoir pour toujours.
Quels sont les carreaux de style?
Les tuiles de style sont un moyen de développer l'identité visuelle d'un site indépendamment de la logistique complexe qui entre en jeu lorsque vous essayez réellement de développer une maquette à part entière. L'idée vient de Samantha Warren, une designer et blogueuse extrêmement talentueuse chez Badass Ideas.
Plutôt que de tourner autour du pot, passons directement à quoi ressemble une tuile de style. C'est difficile à décrire, voici donc un exemple tiré du site Web Style Tiles.
Si vous êtes motivé par la conception visuelle, vous devriez immédiatement être en mesure de voir l’utilité de cet outil. C'est à la fois remarquablement simple et incroyablement utile. De nombreuses décisions importantes ont été prises ici concernant la typographie, la couleur, le style des boutons, etc. Si nous construisions un site Web à partir de ce tableau, nous aurions une bonne idée de l’orientation visuelle à suivre.
La face cachée des wireframes
Le site Web Style Tiles les décrit comme un élément intermédiaire entre un tableau d'humeur trop vague et une maquette complète trop précise. Personnellement, je pense à eux un peu différemment: en tant que revers des structures filaires.
Pensez-y, votre objectif avec les structures filaires est de vous concentrer sur une disposition dépourvue de style. Vous pensez simplement à la structure d'une page, aux rapports de taille entre les éléments, etc. L'utilisation d'une structure filaire simplifiée vous permet de développer rapidement de nombreuses idées car vous n'êtes pas distrait par des éléments tels que les couleurs, les ombres, etc. motifs, polices et images.
Une tuile de style est l'opposé de cela, ce qui signifie qu'elle fournit un complément parfait à ce processus. Ici, vous pouvez abandonner les notions de mise en page et vous concentrer complètement sur ce que l’on pourrait considérer comme la "sensation de marque". ces décisions de conception spécifiques qui donnent au site une identité unique.
Trois raisons d'utiliser des carreaux de style
Maintenant que vous avez une bonne idée de ce que sont les carreaux de style, examinons certaines des principales raisons pour lesquelles vous devriez envisager de les incorporer à votre flux de travail.
Développement visuel rapide des idées
La première raison pour laquelle les carreaux de style sont excellents est que vous devriez pouvoir en éliminer plusieurs en un laps de temps relativement court. Des maquettes complètes peuvent prendre des heures, voire des jours, à produire, mais ces planches sont simplement de petits goûts du plus grand dessein et ne devraient vous prendre qu'une fraction du temps.
Cela signifie que vous pouvez facilement créer de trois à cinq idées uniques pour la personnalité de votre site, puis choisir celle qui fonctionne le mieux ou mélanger et assortir les éléments de chacune.
Les commentaires des clients sont plus faciles à intégrer
Lorsque vous avez passé une semaine à développer le premier regard d’un projet sur un client et qu’il vous renvoie à la planche à dessin, cela peut être une expérience décourageante. Tout le temps et les efforts que vous avez consacrés au projet ont été éliminés en une seule réunion et vous êtes revenu à la case départ.
Avec Style Tiles, vous pouvez inclure votre client dans le processus de conception à un stade précoce. Montrez quelques carreaux différents pour qu'ils aient immédiatement une idée de ce qui se passe et qu'ils adoreront probablement l'occasion d'intervenir et de donner leur avis.
À ce stade, il est incroyablement facile de faire de petites modifications ou même des changements globaux à grande échelle sans avoir l'impression de perdre la moitié de votre temps et de votre budget.
Parfait pour un flux de travail réactif
Alors que la conception Web réactive devient de plus en plus populaire, les concepteurs sont obligés de repenser leurs flux de travail. Développer des compositions statiques pour une conception qui s'adapte continuellement est une entreprise difficile et peut-être même sans fruit.
En guise d'alternative, Style Tiles vous permet de définir l'apparence de vos éléments sans vous soucier des dimensions spécifiques de l'appareil ou des points de rupture. Une fois que vous avez compris, vous pouvez ensuite les connecter à une grille réactive.
Faisons-en un
Les discussions sont peu coûteuses. Voyons si nous pouvons réellement utiliser ce processus pour trouver quelque chose de précieux. Si vous voulez recommencer à zéro, c'est parfait. Mais si vous cherchez un bon point de départ, veillez à télécharger le modèle gratuit sur le site Web Style Tiles. Voici à quoi ça ressemble:
Comme vous pouvez le constater, plusieurs éléments sont en place pour vous aider à vous faire une idée de la disposition générale ainsi que des types d’éléments auxquels vous devriez penser à cette phase du processus de conception. Notez qu'il existe un conseil très important dans le coin inférieur droit de ce modèle: "Soyez créatif, n'utilisez pas ce modèle tel quel!"
Il est tentant de simplement utiliser ce que vous avez reçu ici, mais ne laissez pas cet outil altérer votre créativité, il est en fait destiné à l'améliorer.
Comme exemple de projet, créons une tuile de style pour mon lieu de burrito préféré: Chipotle. Nous prétendons qu'ils n'ont pas de site ou comptent sur nous pour créer un nouveau look.
Logo
La première étape consiste à inclure un logo. Dès le départ, nous avons besoin de modifier le modèle pour nos propres besoins. Le logo ci-dessus est rectangulaire et le logo Chipotle est rond. Heureusement, le modèle PSD est très bien organisé, il est donc assez facile pour moi d’éteindre tous les éléments d’en-tête et de placer notre logo rond.
Contexte
Il n'y a pas d'ordre à suivre pour mettre à jour les éléments, il suffit de rebondir d'un morceau à l'autre au fur et à mesure que les idées vous parviennent. La suite logique pour moi était le fond. Comme Chipotle est un restaurant de style sud-ouest, j'ai donné à l'arrière-plan une sorte de sensation de vieux monde.
Nous ne sommes qu'en deux étapes et nous avons déjà eu un impact considérable sur le modèle. Nous pouvons clairement voir que la charte graphique prend forme à mesure que la personnalité de la marque se fait jour.
Couleurs
Maintenant que nous avons un logo et un fond en place, nous pouvons commencer à voir une identité de couleur. Je profiterai de la zone de couleur existante pour l’étendre en une palette complète.
Typographie
Après les couleurs, je continue de sauter et d’atterrir sur la typographie. J'aime beaucoup le fait que le modèle ne vous donne pas seulement la possibilité de définir un type d'exemple, mais qu'il comporte également de petites étiquettes vous permettant de noter les polices que vous utilisez.
Le produit fini
En avançant, je continuais simplement à itérer et à peaufiner jusqu'à arriver à quelque chose que je pourrais considérer comme une tuile finie. En cours de route, j’ai conseillé de changer le modèle et de reformuler la mise en page tout en conservant les sections que j’ai trouvées utiles. Voici ce que je suis venu avec:
Comme vous pouvez le constater, c'est loin du modèle d'origine. J'ai utilisé le PSD fourni comme point de départ pour mes idées, pas comme une béquille. J'ai maintenant une base solide pour commencer lorsque je commence à fusionner la mise en page et le style en un produit fini.
Conclusion: une bouffée d'air frais
Dernièrement, j'ai été assez attiré par les nouveaux mots à la mode brillants tels que CSS3, HTML5 et responsive design. En conséquence, je n’ai pas vraiment creusé dans le pur design depuis un moment et explorer l’utilité de Style Tiles n’était que le rappel que j’avais besoin de savoir que c’est là que réside ma véritable passion.
J'aimais absolument avoir la liberté de développer un style visuel sans me soucier de savoir si la page d'accueil devait être une mise en page à trois ou quatre colonnes. C'est assez rafraîchissant de pouvoir se concentrer sur des parties spécifiques du processus de conception sans être intimidé ou distrait par la plus grande portée de l'ensemble du projet.
Un grand merci à Samantha Warren pour avoir partagé son processus et son modèle de départ. Je pense que les carreaux de style vont devenir une partie très importante de mon processus à partir de maintenant.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez. Utilisez-vous des ambiances, des structures filaires ou tout autre outil similaire dans votre processus de conception? L'introduction des carreaux de style améliorerait-elle votre façon de travailler? Nous voulons savoir!
Image filaire fournie par Joe Crawford.