Share
Dans cet article, je vais vous montrer une série de vingt maquettes d'écran pour un projet du monde réel sur lequel j'ai travaillé: la refonte et la sortie prochaine de notre galerie de conception et d'inspiration FaveUp. J'expliquerai en partie le pourquoi et le comment de la conception, comment j'utilise des simulacres de conception pour définir une application Web, ainsi que des remarques générales sur la conception. Le nouveau site que nous appelons Creattica Inspire est en cours de développement par notre équipe de développement de crack à Melbourne et sortira dans les tubes interweb lors de l’une de nos premières versions en 2009..
Ce post est le jour 6 de notre session de conception Web. Sessions créatives "Session Day 5Session Day 7"Creattica Inspire est en réalité une reconstruction d'un site existant appelé FaveUp, une galerie de logos, de cartes de visite et de sites Web. Pour être honnête, FaveUp est un site qui réussit malgré tout. Il a été construit il y a un an par un sous-traitant et ce n'est pas très bien fait - tous ceux qui se sont rendus sur le site sauront que c'est assez buggé. En ce qui concerne le design, il présente également de véritables problèmes: un "logo" étrange, une interface qui tourne mal sur certaines pages, un système de notation stupide que vous pouvez tromper très facilement, et qui est peut-être pire qu’il est plutôt moche. Dans l’ensemble, c’est ce que j’aime appeler affectueusement "un tas de fesses géant".
Néanmoins, le site contient quelques éléments qui semblent bien fonctionner, le principal étant qu’il se concentre vraiment sur le contenu. Lorsque vous faites défiler une page, vous obtenez conception après conception, et pas grand chose d’autre. C'est simple et clair, et cela compte beaucoup pour rendre un site utilisable. Voici à quoi ressemble le site FaveUp actuel:
Nous sommes donc en train de reconstruire le système à partir de zéro et d'importer tout l'ancien contenu. Le nouveau site sera situé sur inspire.creattica.com et fera partie de la suite de sites et de services de création que nous développons sur Creattica.com. Il y a quelques semaines, j'ai donc entrepris de redéfinir FaveUp et en même temps de concevoir un look pour Creattica. Le résultat final est ces maquettes dont je vais discuter:
Les écrans sont un ensemble de maquettes construites en HTML destinées à représenter tous les écrans clés du site. Le développeur de ce projet, Erin, les fusionne maintenant dans la base de code, puis nous le mettrons à jour et le modifierons dans le produit final..
Donc, ce que j'ai fait ci-dessous est d'utiliser ce design comme un moyen de parler de mes propres processus et pensées personnels, liés à un projet du monde réel. J'espère que vous trouverez les notes utiles!
Reconcevoir un site peut être un processus délicat, car vous devez faire face au poids des attentes, à la résistance des utilisateurs face aux changements et au spectre toujours présent que vous pourriez faire un pas en arrière. D'après mon expérience, le succès d'une refonte réussie consiste à préserver l'aspect général d'un site et à intégrer certaines des caractéristiques de l'ancien design dans le nouveau.
En gardant cette impression, vous vous assurez de la continuité du site et que les utilisateurs se sentent toujours familiarisés avec le nouveau site. La préservation de la convivialité d'un site ne signifie pas nécessairement que le nouveau site doit être identique. Cette transition de FaveUp à Creattica Inspire est très différente! Cependant, il y a un certain nombre de choses qui gardent le lien:
Maintenant, vous pouvez bien sûr revoir la conception et modifier totalement la disposition des éléments de la page, ou réviser les pages clés du site, ou passer à un nouveau style de conception. Cependant, pour une refonte réussie, je pense que vous ne pouvez pas tout faire en même temps. Si vous souhaitez déplacer les éléments de la page, gardez le design et l’aspect similaire. Si vous voulez changer totalement le design, alors au moins le positionnement doit rester sensiblement le même.
Si vous ne conservez pas certaines choses de la même façon, vous perdrez toute continuité et ce sera presque comme lancer un site à partir de zéro. Il y a des moments où cela est nécessaire (a.k.a. l'ancien site était nul) mais dans la plupart des cas, lorsqu'un site est populaire, il est préférable de conserver une certaine continuité..
Cennydd Bowles, concepteur d’Ace UX, a publié un article intéressant sur la réaction des utilisateurs aux modifications de conception, dans lequel il mentionne les cinq étapes de la réaction des utilisateurs: déni, colère, négociation, dépression et acceptation..
Un site que j'ai redessiné trois fois est Psdtuts + lui-même. Si vous regardez l’image ci-dessous où vous pouvez voir les quatre motifs l’un après l’autre, vous verrez qu’elle se présente comme suit:
À chaque étape, quelque chose a changé de manière significative (sauf peut-être la dernière étape), mais certaines choses sont toujours restées les mêmes. Lorsque nous sommes passés du site HTML ordinaire à un blog WordPress, la palette de couleurs et les éléments de conception sont restés les mêmes. Lorsque nous sommes passés du design WordPress marron au design blanc, l'emplacement de tout est resté le même - c'est d'ailleurs l'étape la plus controversée :-)
Lorsque vous concevez un site majeur, vous devez penser à la construction, mais cela est particulièrement vrai avec une refonte. Étant donné que nous avons un ensemble de données assez volumineux à conserver (toutes les soumissions des utilisateurs), il est vraiment important de comprendre comment vous allez migrer vers le nouveau design le plus simplement possible..
Pour FaveUp> Creattica Inspire, l'un des principaux problèmes est de ne plus avoir une image par conception, mais deux, une liste et une en détail. Sur la page détaillée, vous pouvez voir comment je n'ai pas eu d'image trop grande (un centre simple avec un arrière-plan sombre fait l'affaire).
Une bonne conception Web devrait guider l'œil du spectateur à travers l'écran. Cela est possible car différents éléments de la page peuvent avoir une priorité visuelle différente en fonction de leur taille, de leur forme, de leur couleur et de leur position. Vous trouverez ci-dessous quelques écrans sur lesquels j'ai essayé de montrer le chemin que je suis. espérant le regard du spectateur prendra…
Andy Rutledge a rédigé un article fantastique sur l'orientation de l'écran avec des exemples impressionnants. Lisez le ici: Concevoir une visite guidée.
Concevoir un site riche en informations est très différent du travail sur un site léger. Quand il n'y a pas beaucoup de contenu, vous pouvez vous déchaîner avec votre conception et, dans une certaine mesure, laisser le design dominer le contenu, ce qui est acceptable. Un bon exemple de site léger est un portefeuille personnel dans lequel même un look très élaboré (regardez le look Design Design attrayant, par exemple) fonctionne toujours bien et le site est facile à comprendre et à parcourir..
D'autre part, un site riche en contenu est un autre type de poisson. En règle générale, plus le contenu et les informations d'une page sont nombreux, plus votre conception doit être sous-estimée. La raison en est que, avec beaucoup de contenu sur une page, une conception complète ne fera que gêner et dérouter le spectateur. Il est difficile de digérer beaucoup d’informations à la fois et d’ajouter une conception très lourde à la combinaison et vous risquez de submerger les gens..
Une deuxième raison tout aussi importante pour revenir sur le design est de rester concentré sur le contenu lui-même. Sur le site Inspire, les téléspectateurs sont censés regarder une galerie de design. Si le design de la galerie elle-même est vraiment stylisé et agressif, cela nuirait au contenu et affaiblirait l'ensemble du site. C'est pourquoi, si vous vous rendez dans une galerie d'art, vous ne verrez que des murs blancs et lisses. Pouvez-vous imaginer s'ils avaient du papier peint garrish et des lumières décoratives partout??
Les sites contenant beaucoup de contenu sont bien sûr les médias et les portails. Si vous regardez Washington Post, MSN, Yahoo, NYTimes, vous remarquerez que la conception de chacun d'eux est en retrait et est souvent relativement simple..
Bien qu'un site riche en informations ne nécessite pas de visuels lourds, il reste encore beaucoup de travail à faire. Lorsque vous travaillez sur ce type de site, vous devez vous assurer que votre interface est parfaitement propre et utilisable. Sur le site Inspire, j'ai essayé de garder la navigation très claire, d'utiliser beaucoup d'espace et d'utiliser des couches de noir, de rouge, de gris et de blanc pour délimiter différentes sections de l'interface..
Une des choses que nous faisons beaucoup chez Envato est de créer des familles de sites Web. Nous avons la famille TUTS, les Marketplaces, et nous travaillons maintenant sur cette famille de sites Creattica. Cela m'a apporté beaucoup d'expérience dans la création de conceptions pouvant être réutilisées sur plusieurs sites pour créer un look unifié. Voici certaines choses que j'ai apprises:
Lorsque nous avons lancé le premier sous-site de Creattica, il y a quelques mois - Creattica Daily - Je n'avais bêtement planifié rien. Au lieu de cela, je viens de concevoir un design de blog soigné et de lancer le site sans penser à ce que je ferais pour les autres sites. Comme vous pouvez le constater à partir de ce look Creattica Inspire, il me fallait recommencer à zéro. L'ancien look est maintenant en vente sur ThemeForest en tant que thème WordPress. Ce n'est donc pas un gaspillage total, mais il est néanmoins avantageux de penser à l'avenir et de concevoir un look qui convienne à plusieurs sites..
Faire en sorte qu'une seule conception fonctionne sur quelques sous-sites nécessite au moins un élément de sous-marque. Sur Creattica et TUTS, il s’agit de couleur, sur les marchés, c’est une combinaison de couleur et de thème logo / animal. Quoi que vous choisissiez, il doit y avoir quelque chose qui différencie les sites lorsque vous basculez entre eux..
Maintenir une famille de sites représente beaucoup de travail, il est donc intéressant de préserver la cohérence de la conception. Cela signifie non seulement que les utilisateurs se familiarisent très bien avec l'atmosphère des sites, mais que, sur le plan pratique, cela signifie également que vous n'avez pas à faire autant de travail.!
Avant de commencer un projet comme celui-ci, je prends toujours un peu de temps pour surfer. En plus de rendre mon travail beaucoup plus agréable, j'ai généralement deux objectifs en tête:
Alors, quelle est l'inspiration derrière Creattica Inspire? C'est un petit site appelé CNN! J'examinais CNN et sa gestion d'une telle quantité d'informations et de tant de sous-sites. J'ai décidé que j'aimais deux choses à propos du site: la disposition générale et l'idée de cases blanches sur fond gris clair..
Les deux modèles ont-ils le même aspect? Pas vraiment. Pouvez-vous voir la ressemblance maintenant que je l'ai signalé? Probablement - d'autant plus qu'ils utilisent tous les deux le rouge! Est-ce une mauvaise chose à faire? Je ne suis pas sûr. Je pense qu'il est faux de prétendre que je travaille en vase clos et que je suis en train d'inventer de nouvelles idées.
J'imagine que ma propre conception est qu'il est acceptable de s'inspirer d'autres designers. En fait, je pense qu'il est impossible de ne pas le faire. Ce n'est pas correct de copier des dessins directement. Donc, par conséquent, si vous êtes inspiré par un autre design, il est essentiel de le personnaliser et de le laisser évoluer au point de le rendre si peu ressemblant..
Quelle est votre opinion? L'inspiration est-elle correcte? Quand tombe-t-il dans l'immitation? Est mon exemple trop loin ou OK?
Un projet tel que Creattica Inspire est intéressant car il implique bien plus que la création d’un site HTML ou même l’apparition d’un produit CMS tel que WordPress. Il est suffisamment volumineux pour impliquer des problèmes de développement, plusieurs niveaux d’accès et diverses fonctionnalités. Voici certaines de mes réflexions sur le travail sur une application Web:
Sur de grands projets comme Inspire ou FlashDen, il est inutile d'essayer de penser à tous les écrans présents ou futurs sur le site. Faites-moi confiance quand je dis qu'il y a des pages que vous allez négliger, ou de nouvelles fonctionnalités auxquelles personne n'a pensé pour le moment, qui devront être intégrées au design plus tard dans sa vie..
Un plan bien meilleur consiste à concevoir une structure de type flexible et modulaire. La conception d'Inspire est conçue de manière à ce qu'une nouvelle page puisse être facilement construite en regroupant quelques-unes de ces cases blanches, en ajoutant un nouvel élément de menu ou d'élément de sous-menu et en utilisant des éléments de conception standard tels que des mini-galeries ou des zones de commentaire utilisateur. Il faudra peut-être un peu plus de design à l'avenir, mais créer une nouvelle page ou une nouvelle fonctionnalité ne va certainement pas altérer la mise en page.!
Presque toutes les applications Web impliquent une sorte d'administration. Dans le cas d’Inspire, nous devons pouvoir approuver de nouvelles conceptions, modifier des éléments, etc. Auparavant, je concevais toujours une zone d'administration spéciale pour des fonctionnalités comme celle-ci, un peu comme WordPress possède ce tableau de bord WP-Admin. Bien que dans certains cas, avoir une zone d'administration soit une bonne idée, dans de nombreuses situations, il est préférable d'utiliser l'administration en ligne..
L’administration en ligne signifie qu’il faut ajouter des fonctionnalités supplémentaires à la conception standard classique qui n’apparaît que lorsque l’utilisateur est un administrateur. Ainsi, par exemple, dans Inspire, lorsqu'un utilisateur est un administrateur, il obtiendra quelques fonctionnalités supplémentaires sur des pages normales. Par exemple, ils peuvent rechercher sur le site comme une personne ordinaire, puis modifier les éléments qu’ils trouvent..
La raison pour laquelle l'administration en ligne est préférable ici est que nous sommes déjà en train de créer un ensemble de moyens de navigation sur le site, tels que la recherche et le balisage, ainsi qu'un excellent moyen de visualiser le contenu du site. Par conséquent, pourquoi redéfinir et reconstruire tout cela à nouveau dans un administrateur surface. Avec la gestion en ligne, un utilisateur peut vous envoyer un lien vers un élément et, au lieu de le relire dans la zone d'administration, vous pouvez le modifier directement sur une page..
Sur certains emplois, vous servirez à la fois de concepteur Web et de chef de projet. Dans mon cas, c'est à cause de mon travail chez Envato, mais même dans le cadre d'un travail client régulier, vous pouvez éventuellement commander et développer un projet pour le compte de votre client. Dans des situations comme celles-ci, vous devrez informer un développeur ou une équipe de développeurs pour construire réellement le projet sur lequel vous travaillez..
Il existe différentes façons de briefer et de travailler avec un développeur sur un projet. Beaucoup d'entre eux dépendent de la taille et de la portée d'un projet. Pour un projet de petite envergure comme celui-ci, voici ce que je faire:
De plus, du point de vue de la conception Web, ces 20 écrans prennent en compte à peu près tous les principaux types de mise en page du site..
J'ai tendance à penser que les véritables conceptions illustrent mieux les fonctionnalités que les structures filaires - mais c'est assez discutable.
Théoriquement, vous pouvez spécifier un projet entier à l'aide de scénarios utilisateur. Il existe de nombreux ouvrages sur le développement logiciel et Web à ce sujet. Je vous recommande de lire la section Interface utilisateur de JoelOnSoftware pour les programmeurs, même si vous êtes un concepteur et non un programmeur.!
Le point de ces étapes est la suivante:
Voilà donc mon processus approximatif pour informer un développeur. Que faire? Et si vous êtes vous-même développeur, y a-t-il quelque chose que je devrais faire mieux??
Pour un traitement plus approfondi du briefing d'un développeur, vous pouvez consulter la rubrique Comment créer une application Web sur ReadWriteWeb. Vous pouvez également parler à votre propre équipe de développement pour savoir ce dont elle a besoin et ce qu'elle souhaite..
Je pense que la conception de sites Web est un travail tellement formidable, c'est parce qu'il comporte de nombreuses facettes différentes. Dans cet article, j'ai essayé de montrer comment un seul travail de conception de site Web peut impliquer toutes sortes de compétences et de problèmes - de l'inspiration de la conception au travail avec les développeurs, du plaisir des utilisateurs lors d'une refonte à la planification de l'administration d'un site. Bien sûr que c'est difficile, mais c'est ce qui le rend si bon!
Quant à Creattica Inspire, nous devrions le voir faire ses débuts au début de 2009 (je ne peux pas croire que nous sommes sur le point de commencer!) Et vous entendrez parler du lancement ici même sur Psdtuts+!
Ce post est le jour 6 de notre session de conception Web. Sessions créatives "Session Day 5Session Day 7"
Accentsconagua