Share
Si vous êtes comme moi, vous conviendrez avec moi que la phase de conception initiale d'un projet peut prendre beaucoup de temps, être source de frustration et répondre rarement aux attentes des clients lors de la première réunion d'approbation. Et s'il y avait une meilleure façon d'aborder les choses? Avec Style Tiles, le dernier né du bloc de la méthodologie de conception, il y a.
Certains disent que la création de maquettes complètes pour des projets de conception Web dans Photoshop est en train de mourir, voire carrément morte. D'autres disent que concevoir dans le navigateur n'est pas ce qu'il est censé être. Mais sommes-nous tous en train de prendre de l'avance sur nous-mêmes? Peut-être que ce n'est pas l'outil que nous devrions examiner, mais la façon dont nous concevons un nouveau site et gérons le processus d'approbation des clients..
Dans ce didacticiel, nous allons examiner de plus près Style Tiles - une nouvelle façon de penser les étapes de conception initiales, une approche de conception inventée et conçue par l'inimitable Samantha Warren. Nous allons examiner ce qu’ils sont, pourquoi vous devriez les utiliser et vous expliquer le processus de création et d’implantation d’une tuile de style pour votre prochain projet..
[Les carreaux de style vous permettent de]… Présenter aux clients des choix d’interface sans investir dans plusieurs maquettes Photoshop. - Samantha Warren
Prêt à en apprendre plus? Commençons.
Dans sa forme la plus simple, une mosaïque de styles est une collection d'une seule page d'éléments communs, notamment des couleurs, une typographie, des textures, des motifs et des caractéristiques de conception. Lorsqu'un concepteur d'intérieur peut présenter à son client un tableau d'ambiance comprenant des éclats de peinture, des tissus et des coupures de magazines, le concepteur de sites Web progressif peut présenter à ses parties prenantes un ensemble de carreaux de style..
Il est important de se rappeler que Style Tiles n’est pas une représentation littérale de l’aspect du site. Au lieu de cela, ils aident à définir l'ambiance, le ton et le "feeling" d'un site en fonction de ce que vous avez appris du client lors de vos réunions de lancement initiales..
Une autre chose à garder à l'esprit est que l'approche Style Tile n'est pas un cadre, un processus défini ou même un outil. Au lieu de cela, Style Tiles s’articule autour d’un ensemble de directives, de techniques et d’approches qui vous permettent de vous concentrer sur ce qui est vraiment important dans la conception (du moins dans les premières étapes d’un nouveau projet). Commencez par télécharger un modèle psd pour vous aider à démarrer, mais n'hésitez pas à adapter vos styles à votre propre flux de travail et à votre esthétique créative..
Jetons un coup d'oeil à quelques exemples pour vous montrer comment les tuiles de style peuvent être présentées. J'ai inversé l'ingénierie de deux sites pour vous montrer ce que leurs tuiles de style pourrait ont ressemblé aux phases initiales de conception:
Cette tuile de style est basée sur le site Tuts + Premium récemment réaménagé.
Comme vous pouvez le constater, l’essence du site Tuts + Premium a été bien capturée dans cette tuile de styles. Nous avons soigneusement défini certains des éléments de conception de la section de présentation orange principale du site, ainsi que la convivialité et la présentation des articles de blog (c'est-à-dire les tutoriels)..
Il est important de noter que la vignette de style n'étant pas présentée pour une taille d'écran, une orientation ou même autre chose que le format "numérique", il est facile d'imaginer à quoi le site ressemblerait sur n'importe quel appareil, du bureau à la tablette en passant par le smartphone..
Pour vous amuser un peu, voici mon interprétation de ce à quoi le site http://styletil.es pourrait ressembler au stade de la conception initiale:
Portez une attention particulière à la section adjectif de cette tuile de style. L'ensemble des couleurs, des sélections de typographie et des textures de conception est en quelque sorte lié à ces adjectifs, garantissant la cohérence de Style Tile en termes de design, de ton et de message de la marque..
Jetons un coup d'oeil à quelques-unes des similitudes communes de ces deux tuiles de style:
Comme je l'ai déjà mentionné, les carreaux de style ne suivent pas un format fixe. En fait, vous pouvez inclure à peu près n'importe quoi, à condition que cela soit fondamental pour le concept. Par exemple, vous pouvez choisir de supprimer la section "boutons" et de la remplacer par un lecteur vidéo personnalisé, un widget avec une description ou des éléments de formulaire..
En résumé, capturez la direction générale du site dans votre tuile de style, mais n'hésitez pas à faire travailler vos muscles créatifs..
Les carreaux de style ne sont pas simplement une autre approche fade-besty-best-practice-si-vous-avez-le-temps-nécessaire pour collecter la poussière au bas de votre boîte à outils Web. Lorsqu'ils sont correctement implémentés, ils présentent un certain nombre d'avantages assez impressionnants pour vous et le client:
Plus que tout, Style Tiles simplifie la phase de conception initiale et le processus d'approbation client..
Présenter aux clients une maquette de conception complète après la première réunion risque de faire rater la forêt pour les arbres. Au lieu que le client s’accroche à de petites fonctionnalités de conception ("hmmm… je pense que les boutons sociaux doivent être un peu plus" poppier ""), les clients peuvent parler en toute confiance de la manière dont la direction générale de la conception reflète leurs objectifs ("J'aime comment ces couleurs donnent un sentiment de confiance, ce qui est parfait pour mon widget Acme ").
N'oubliez pas que nos clients ne sont généralement pas des designers, mais qu'ils savent souvent ce qu'ils aiment, même si ce n'est qu'en termes généraux. Les tuiles de style sont un outil idéal pour permettre aux non-initiés de parler de la conception dans son ensemble sans se heurter à des dizaines d'éléments de conception individuels, ce qui peut rapidement devenir déroutant et accablant..
Les maquettes au pixel près prennent du temps. Temps réél. Heures et heures de temps.
Vous devez non seulement prendre en compte tous ces coûts dans votre facture finale, mais si vous créez trois compositions distinctes, ce sont deux tiers de votre temps qui passent directement dans le dossier "Ressources non utilisées" de votre disque dur - sans parler de deux autres. les tiers de l'argent du client pour cette partie de la facture finale vont également en fumée.
En revanche, avec Style Tiles, il est très rapide d’itérer différentes versions et d’apporter des modifications rapides. Utiliser des tuiles de style signifie que vous pouvez rationaliser le processus de conception, conserver l’élan acquis dès les premières étapes du projet et répondre aux demandes de modification en quelques minutes au lieu de plusieurs heures..
Pour mettre cela en perspective, les deux exemples de tuiles de style ci-dessus me prenaient environ 20 minutes chacun (et auraient pris 15 minutes chacun si j'avais mieux pu nommer mes couches au fur et à mesure)..
Je ne parle que d'expérience - chaque concepteur est différent - mais si vous créez trois modèles distincts de Photoshop, il n'est pas rare d'en créer un parfait, celui qui est assez bon et celui qui est Assez moyen, et loin de votre meilleur travail. Vous présentez les trois au client, en essayant de les vendre sur votre design phare, et ils choisissent invariablement le design qui vous plait le moins… et maintenant vous êtes en train de coder un site dont vous n'êtes pas fier et qui n'est pas fier. t dans le meilleur intérêt du client, soit.
Même si vous créez trois compositions parfaites que vous seriez fier de coder, il est facile de devenir créatif. Les tuiles de style vous permettent d'expérimenter rapidement différents concepts de conception et offrent de véritables alternatives de conception au client en fonction de ses besoins définis..
Bon, disons que vous n'utilisez pas Style Tiles et que vous avez choisi de présenter au client un ensemble de compositions complètes..
Que leur présentez-vous? Une version de bureau large de 960px? Qu'en est-il d'une version iPad? N'oubliez pas non plus une version iPhone. Oh, mais assurez-vous de vous adresser également à Kindles, Blackberry et aux plus de 500 appareils Android mobiles qui ont été produits ces dernières années. Et qu’en est-il de la question "Comment cela va-t-il ressembler à mon Palm Pilot préféré que j’ai depuis que Bush est président?"
Les carreaux de style n'impliquent pas de dimensions ni d'appareil; seulement que la conception sera numérique. - Samantha Warren
Le Web est actuellement accessible de centaines de façons, chaque appareil ayant son propre ensemble de points d'arrêt, de bizarreries et de fonctionnalités..
Une meilleure façon d'aborder la phase de conception initiale du projet consiste à supprimer complètement le dispositif de l'équation. La grande chose à propos de Style Tiles est qu'ils sont complètement agnostiques..
Bien sûr, vous devrez indiquer comment le site Web réagira et / ou s’adaptera à différents appareils plus tard dans le projet, mais dans les phases initiales, il est tout simplement déroutant de mélanger l’établissement d’une orientation de conception globale avec la fonctionnalité finale du site..
Maintenant que vous avez appris ce que sont les carreaux de style et que vous êtes convaincus de leur utilité comme alternative aux compositions complètes, je suis sûr que vous êtes prêt à ouvrir Photoshop et à créer votre première vignette de style..
Whoa là-bas, cow-boy. Calmez-vous! Bien avant de commencer à utiliser des pixels, nous devons identifier les besoins et les objectifs du client et les traduire en concepts nous permettant de prendre des décisions de conception éclairées..
Le processus en quatre étapes pour créer une tuile de style est le suivant:
Confus? Ne sois pas. Regardons chaque étape en détail.
Que vous vous asseyiez en personne avec votre client, que vous lui parliez sur Skype ou que vous utilisiez le courrier électronique, vous devrez toujours passer du temps et des efforts en temps réel pour apprendre à connaître leur entreprise et les objectifs de leur site Web. Si vous ne le faites pas, vous vous engagez dans une voie sombre et effrayante d'hypothèses et de conjectures qui garantiront presque toujours un résultat final infructueux et un client mécontent..
Ce processus de découverte va bien au-delà de leur demander leurs couleurs préférées et les autres sites Web qu’ils aiment sur le net. Bien que nous puissions facilement avoir un didacticiel complet sur le questionnement efficace des clients, voici quelques stratégies de découverte pour vous aider à démarrer:
Tout le monde aime parler de ce qui est important pour eux…
Une fois qu'un client parle de son entreprise, vous aurez souvent du mal à le convaincre de s'arrêter. En fait, à ce stade, plus ils parlent de leur entreprise, mieux ce sera pour le résultat final..
Voici quelques questions initiales pour inciter votre client à parler de son entreprise:
Une fois que vous avez résolu quelques questions de base et que vous comprenez mieux leur entreprise, il est temps d'approfondir un peu votre réflexion, d'identifier les besoins de votre client et de sélectionner quelques concepts clés qui vous aideront à créer. une direction de conception dans la prochaine étape.
Bien que les gens trouvent souvent difficile de traduire des concepts et des sentiments abstraits en déclarations, les gens aiment parler en métaphores - à condition de poser les bonnes questions..
Voici quelques questions que vous pouvez demander pour vous aider à démarrer:
Une fois que vous êtes au cœur du projet du client, il est temps d'établir un ton de base pour la conception globale..
Il existe différentes façons de procéder, mais une approche efficace consiste à demander au client de remplir un sondage interactif. Avec un peu de créativité HTML, CSS et Javascript, vous pouvez créer un ensemble de curseurs permettant au client de positionner sa marque entre plusieurs dichotomies:
En regardant cet exemple, je pense déjà à un design amusant et coloré d'inspiration rétro pour notre client fictif. Quels concepts de design vous viennent instantanément à l'esprit quand vous voyez cela?
Une fois que nous avons interrogé notre client, il est temps de résumer l'essentiel de son projet, de son produit et de ses besoins pour son site Web. Le but de cette partie du processus est de définir une sélection de mots descriptifs qui rempliront la section "Adjectifs" de notre mosaïque de styles..
Jetons un coup d'oeil à un exemple. Voici quelques déclarations que notre client fictif vous a dites pendant la phase de découverte:
A partir de ces affirmations, votre travail consiste à identifier un seul adjectif décrivant le message clé de ce qu’ils vous ont dit..
Voici quatre adjectifs que nous pourrions utiliser pour résumer les affirmations ci-dessus, en allant au cœur de ce que le client est vraiment nous disant:
Maintenant que nous avons défini cet ensemble d'adjectifs, nous sommes à un point où nous pouvons réellement commencer à traduire des mots en design. Bien que vous ayez une interprétation légèrement différente de celle des adjectifs ci-dessus, il est fort probable que nos conceptions partagent des éléments communs - ou au moins, nous serions capables de nous expliquer pourquoi nous avons fait les choix que nous avons faits..
Phew! Tout a parlé? Bonne nouvelle: nous avons fait le gros du travail, maintenant nous avons du plaisir. Une fois la phase de découverte réduite à quatre à six adjectifs à la dynamite, il est temps de créer votre première mosaïque de styles..
Rendez-vous sur http://styletil.es et téléchargez le modèle Photoshop (ou créez le vôtre).
Les prochaines étapes sont complètement à vous. Faire preuve de créativité! Je suppose que vous maîtrisez déjà assez bien Photoshop. Par conséquent, je ne vous expliquerai pas chaque étape (le modèle Photoshop est très facile à personnaliser), mais l’idée principale est de créer une gamme d’éléments de conception. (couleurs, textures, boutons, typographie, etc.) qui correspondent aux adjectifs auxquels vous êtes arrivé à l'étape précédente.
Vous souhaitez approfondir la création d'un jeu de couleurs et choisir des combinaisons de typographie pour votre mosaïque de styles (et bien plus encore)? Voici quelques articles Webdesigntuts + que vous pourrez relire:
Une fois que vous avez créé votre première tuile de style, il est temps de nettoyer l'ardoise et de la parcourir. Il n’existe pas de nombre précis de versions à créer, mais trois à quatre styles pour chaque projet constituent probablement un bon équilibre entre l’exploration de concepts de design indépendants suffisants et le fait de ne pas surcharger vos clients avec trop d’options..
N'oubliez pas que vos adjectifs peuvent être les mêmes pour chaque style, mais ils peuvent également être différents, en particulier si vous avez eu du mal à répondre aux besoins de vos clients ou s'ils vous ont présenté différentes alternatives à explorer. stade de questionnement.
Par exemple, à partir des questions de découverte de la deuxième étape, nous avons peut-être élaboré trois ensembles d'adjectifs distincts, tous similaires, mais suffisamment différents pour adopter des approches différentes pour la conception de notre client fictif:
Comme vous pouvez le constater, ces trois ensembles d’adjectifs pourraient tous donner lieu à une conception très différente. C’est là que les carreaux de style prennent tout leur sens. Avec quelques changements rapides de couleur et de typographie, vous pouvez facilement créer trois itérations complètement différentes en très peu de temps..
Assurez-vous que votre client sait à quoi s'attendre
Maintenant que vous avez créé votre ensemble de styles, il est temps de les présenter à votre client. Comme à chaque étape de ce processus, vous devez mettre en œuvre un certain nombre de stratégies pour vous assurer d'obtenir les meilleurs résultats et pour que votre client soit confiant dans les étapes suivantes du projet..
Votre client ne doit pas s’attendre à ce que vous présentiez une maquette de conception complète uniquement pour vous permettre de sortir vos carreaux de style. À la fin de la phase d’interrogation, montrez à votre client des exemples d’autres tuiles de style que vous avez créées et expliquez leur utilité pour définir la direction de la conception du site..
Assurez-vous que votre client sait ce que vous allez lui montrer avant la réunion de présentation.!
Préparer la présentation sur PhotoDune Laissez votre client parler librement de vos concepts de conception, mais veillez à ne pas les laisser se débrouiller trop facilement. Encouragez vos clients à développer leurs déclarations. Avec un peu de questionnement efficace, nous pouvons transformer des déclarations vides en déclarations exceptionnelles:
Rappelez-vous que même si vous concevez des sites Web toute la journée, il est très probable que votre client n’aura pas eu beaucoup d’expérience antérieure. Soyez patient, aidez votre client à clarifier ses déclarations, aidez-le à faire des déclarations valables, mais ne faites jamais de suppositions fondées sur les réactions générales et spontanées de votre client à votre travail..
Les tuiles de style sont une meilleure alternative aux compositions complètes de conception dans les premières étapes du projet (c.-à-d. Pendant le processus d'approbation du client), mais selon la façon dont vous aimez travailler, une maquette complète peut être la prochaine étape du projet, si c'est le cas. une partie de votre flux de travail établi.
Maintenant que vous avez défini l'orientation de la conception et que le client a signé l'une de vos versions de tuile de style, vous pouvez être sûr que votre composition sera plus proche des attentes de votre client que si vous vous lanciez directement dans Photoshop. après la réunion initiale. Non seulement la maquette sera-t-elle plus proche de la réalité, il ne sera pas non plus nécessaire de créer plusieurs itérations de la conception - ce travail a déjà été effectué avec nos carreaux de style.
Selon votre approche du travail de votre client, voici des exemples parfaitement viables de flux de travaux pour le reste du projet:
Merci de rester avec moi et d'avoir tout lu sur le quoi, le comment et le pourquoi de Style Tiles - J'espère que vous avez aimé apprendre à leur sujet autant que j'ai aimé écrire pour vous les présenter.!
Les tuiles de style constituent un moyen révolutionnaire d'aborder le processus de conception et vous aident, ainsi que votre client, à donner une direction claire au site Web, même à partir du projet le plus compliqué et le plus compliqué..
Quelles sont vos pensées? Utiliserez-vous Style Tiles dans votre prochain projet? Nous aimerions entendre vos pensées dans les commentaires!
Accentsconagua