Ce qu'il faut pour faire un grand site de design graphique

En tant que graphiste, vous êtes censé avoir un bon site web, ce qui est nul si vous êtes plus enclin au sens artistique qu'au technique, et vous n'avez pas le genre d'argent nécessaire pour engager un très bon développeur web professionnel. T'aider.

Même si vous vous sentez incapable de coder une page Web, vous ne devez absolument pas utiliser un modèle de site Web générique pour mettre en valeur vos capacités de conception graphique. Ce qu'un modèle crie littéralement à votre auditoire est une série d'adjectifs peu complémentaires tels que:

  • Paresseux!
  • Sans imagination!
  • Non créatif!
  • Sans originalité!

Ce ne sont pas des mots que tout graphiste devrait vouloir associer à eux-mêmes. Ainsi, quoi que vous fassiez, n’avez jamais un site Web qui ressemble trop à celui de quelqu'un d’autre et n’utilisez surtout pas les modèles couramment disponibles, ni même une présentation similaire, car il ya de très bonnes chances que les gens les aient déjà vus auparavant. cela fera une différence dans le nombre de clients que vous obtiendrez sur votre site.

Si vous avez un site du tout? Oui, en effet vous devriez. Un site Web peut vous permettre d’obtenir un travail inattendu, et vous aide lorsque vous vous adressez à quelqu'un, car vous pouvez le renvoyer sur votre site. De plus, si vous ne les référez pas à votre site, ils se demanderont pourquoi, car tous les autres concepteurs à qui ils ont parlé avaient un site Web.

Dans cet article, nous allons examiner certaines des choses que vous pouvez faire pour vous assurer que votre site Web se démarque du reste. Et ne vous inquiétez pas si vous "n'aimez pas bien les ordinateurs", car je vais vous expliquer comment faire des choses vraiment difficiles, le plus simplement possible.

1. Assurez-vous que votre conception est en quelque sorte pertinente pour qui vous êtes et ce que vous êtes

Cela sera vrai si vous êtes un opérateur isolé ou un membre d'une équipe de professionnels travaillant ensemble en tant que studio. Votre site Web doit être sur vous et sur votre identité ou votre image, et il doit être créé pour votre public. La raison pour laquelle l'accent est mis sur ces mots particuliers est que les gens oublient souvent ce que le site Web est censé être et à qui il est destiné. Le «pour et sur» est une partie très importante de la décision de conception, peut-être même la plus importante.

Voici un exemple de site qui réussit:

Alors, pourquoi est-ce la bonne approche? Eh bien, pour commencer, il me dit qui il est (Rodrigo Breckenfeld), ce qu’il fait (graphisme et développement front-end) et pourquoi je devrais être intéressé par lui (il développe des visuels simples et communicatifs + des interfaces conviviales (sic) et d'autres choses).

Nous savons qu'il est brésilien, nous pouvons donc ignorer l'erreur de grammaire accidentelle. Il n'a pas dit qu'il était un écrivain, il a dit qu'il était un designer. Ce qui est important, c’est qu’il me dise la plupart de ce que j’ai besoin de savoir, et il me le dit visuellement, mais pas sans mots.

Je ne peux pas souligner à quel point c'est important. Ne créez jamais un site Web entièrement basé sur des images (du moins pas si vous le créez vous-même ou si vous souhaitez qu'il fasse partie de votre portefeuille). Des designers aériens et paresseux poussent les sites Web basés sur des carrousels sur des décideurs en entreprise qui ne connaissent pas mieux, mais vous, en tant que concepteur actuel, devriez en savoir plus.

Voici un exemple de site qui fait exactement le contraire de ce que je conseille:

Pourquoi est-ce que je crois que c'est la mauvaise approche? Parce que je ne peux pas dire en un coup d'œil qui ils sont, ce qu'ils font ou pourquoi je devrais m'intéresser à eux. Pour obtenir le premier indice, je dois regarder au bas de la page, toujours le pire endroit où mettre tout ce qui doit être remarqué. Tout de suite, on me donne une mauvaise impression de cette entreprise. Oui, ils sont créatifs et un peu différents, mais ils me rendent les choses difficiles en me obligeant à regarder autour de la conception pour trouver des informations.

Leur design est également occupé. Trop d'images font que l'esprit travaille plus fort, et c'est particulièrement le cas lorsque toutes les images ne sont pas apparentées les unes aux autres. Les gens aiment simplement que les choses se connectent, et quand ils ne le font pas, cela leur fait mal à l'aise et ça bouge. Lorsque quelque chose que nous regardons a du sens, cela nous rend plus à l'aise.

Le principal problème cependant est qu’il n’ya pas de mots où les mots sont nécessaires. Cela signifie que le site n'a pas de message et que rien ne peut vraiment m'attaquer à moins que je ne sache déjà qui ils sont ou que je trouve l'une des images tellement captivante qu'il me reste à en savoir plus à ce sujet. Et c'est dommage, car les photos sont vraiment excellentes. ELI est clairement excellent dans son travail (amélioration numérique des photos). Mais à mon avis, cela doit être communiqué plus efficacement que simplement en me montrant les résultats de leur travail.

Enfin, jetons un coup d’œil sur un site qui est tombé quelque part au milieu:

Lorsque vous accédez à ce site pour la première fois, vous êtes confronté à l’image légèrement troublante de ce type qui vous regarde en silence puis cligne des yeux très lentement. En fait, c'est très bien parce que beaucoup de gens seront curieux de savoir ce qui se passe et veulent en savoir plus. Bien que nous ne sachions rien de Michael à ce stade-ci, mis à part ce à quoi il ressemble, ça va. Vous pouvez suspendre la règle «d'un coup d'œil» si vous avez un bon point d'ancrage, et ce site en a.

En parcourant un peu la page, nous pouvons voir qu'il nous présente un message:

Génial. Nous savons maintenant qui il est, ce qu'il fait et pourquoi nous devrions nous intéresser à lui. Mais ici, nous pouvons voir l’importance d’utiliser non seulement des mots, mais aussi d’utiliser les bons mots de la bonne manière.

J'envisagerais certainement de faire appel à Michael en tant que développeur, mais l'un des défauts de son message est qu'il ne s'agit pas d'une communication très efficace. Cela me dit les mauvaises choses de la mauvaise façon, sans vraiment m'inspirer pour en savoir plus.

Désolé, Mike. C’est un site formidable, j’aime vraiment l’idée créative qui le sous-tend, mais il aurait été utile de faire appel à un rédacteur professionnel ou à un spécialiste en communication pour nous aider à trouver la bonne note pour l’avenir. Ne le prends pas mal. Ce mec est génial, il est génial… mais peut-être pas nécessairement en tant qu'écrivain. À vrai dire, écrire sur soi-même est l’une des tâches les plus difficiles à entreprendre. C’est pourquoi il serait parfois préférable de confier le travail à quelqu'un d’autre.

Exemple: ce n’est pas une mauvaise idée de mentionner l’école où vous êtes allé, mais l’Université Simon Fraser n’est pas assez connue pour que vous puissiez la raccourcir en «SFU», sauf si vous parlez à d’autres personnes qui y sont allées.

2. Se démarquer pour les bonnes raisons

Votre design doit être suffisamment différent et unique pour me décourager, mais il ne devrait pas être aussi décalé que je veux me faufiler à la rétine, juste pour me débarrasser de l'image le plus rapidement possible.

Le site Web que vous présentez fait partie de l'identité de votre marque, en tant qu'entreprise ou en tant qu'individu. Par conséquent, vous voulez vous assurer que l'histoire que vous racontez est bonne. Quand il est bien fait, le site internet suscite la curiosité sans créer de confusion. Vous devez équilibrer «unique» pour que cela s'arrête un peu de «fou».

Voici un exemple d'un gars qui semble l'obtenir:

Maintenant, le site d'Ed est un peu old-school, mais ça va parce qu'Ed semble être un peu old-school lui-même, et il n'y a rien de mal à ça quand ça va. Idéalement, il serait préférable que la page s’étire un peu plus afin de mieux utiliser l’espace disponible à l’écran, ce qui ne semble pas être un design réactif. Cela ne ferait que lui profiter, cela n'enlève rien à son message car il ne prétend pas être un concepteur de sites Web. En fait, il explique très clairement qu'il n'en est pas un, car ce menu écrit au sommet contient des liens vers de nombreux types de travaux de conception, mais pas de conception de sites Web.

Ce qui soulève également un autre point, à savoir que l’utilisation de tous ces éléments écrits à la main, le style scrapbook sur du vieux papier, est en fait un moyen très intelligent de montrer visuellement qu’il est dans le style de la vieille école. Il va créer une police pour vous. Il concevra une affiche pour vous. Il sera peut-être même capable de faire des cartes de Noël vraiment géniales, mec. Mais il n'a pas pour objectif d'essayer de vous impressionner avec ce matériel high-tech sophistiqué. Ne pas dire qu'il ne pouvait pas le faire, juste qu'il n'en avait pas besoin.

Voici un autre site que j'ai vraiment apprécié, car c'est un saut audacieux loin du banal:

Malheureusement, ils ont décidé, pour quelque raison que ce soit, de mettre à jour la conception complète du site, alors que je pense que l'ancienne conception était assez bonne et constituait une excellente approche pour un couple marié travaillant ensemble dans une entreprise. Certes, ils ont peut-être été un peu trop auto-dévalorisants dans leurs descriptions d'eux-mêmes, mais c'est la méthode australienne. Pour eux, dans leur pays, c'est une approche susceptible de fonctionner.

L'interface du site est vraiment simple. Lorsque vous arrivez pour la première fois sur la page, une réplique de carte de visite vous est présentée:

Cela fonctionne parce que cela satisfait 2 de la critique «en un coup d’œil» de 3 (qui ils sont et ce qu’ils font). Il est assez évident que nous devrons faire défiler la page pour trouver la troisième chose, c'est pourquoi nous devrions nous en soucier. Comme je l'ai dit précédemment, vous pouvez assouplir un peu les règles si vous avez un bon crochet.

En descendant, vous voyez la section Mr & Mrs, qui nous donne leurs photos, leurs rôles individuels dans l'entreprise et un court texte de présentation de chacune d'elles, qui est juste assez verbeuse sans être ennuyeuse, et j'aime bien que ce soit relaté dans le première personne. Une chose si rare de nos jours, quand tout le monde se fait dire de ne pas le faire (ce qui est un conseil stupide, en passant). Des flèches indiquant où vous pouvez trouver plus d’informations se situent de part et d’autre de la page. C’est aussi un geste judicieux, car cela renforce le message selon lequel il existe deux moitiés distinctes.

En commençant par son côté, nous arrivons à une page propre, propre, avec un style visuel agréable et une typographie attrayante:

À partir de là, vous avez accès à son portfolio, à des informations autobiographiques plus détaillées, à son blog, à un guide de ses services et à des informations sur la manière de la contacter. Chacune de ces pages est un régal visuel que vous vous en doutez probablement.

La page sur M. Mealing, bien sûr, est supposée être en contraste, donc le jeu de couleurs est inversé de son côté. Jetons un coup d'œil à la page de Samuel:

Personnellement, j’ai été un peu moins satisfait de celui-ci, car son modèle était plus générique, mais il est toujours très bien présenté et les couleurs sont efficaces. Il n’est pas tout à fait intuitif que l’utilisateur passe la souris sur les badges pour révéler qu’ils représentent HTML, CSS et JavaScript. J'ai peut-être un esprit déviant, mais je pense que le JavaScript n'est pas évident du tout et ressemble en réalité à une sorte d'orifice. La page fait un bon travail en rassemblant beaucoup d’informations complexes dans un espace restreint, et c’est un moyen de communication efficace. Peut-être que dire que tu es "assez bon" n'est pas assez fort quand tu essayes de convaincre quelqu'un de te donner un job, cependant.

Maintenant que nous avons couvert cela, il est temps de prendre en compte le fait que vous pouvez également vous démarquer pour les mauvaises raisons. Vous pouvez couper les choses un peu trop près de la ligne folle. Voici un exemple de ce à quoi cela ressemble quand vous poussez peut-être un peu trop loin:

Certes, certaines personnes vont probablement aimer cela, mais je pense que c'est trop différent. Ici, la seule façon de savoir qui ils sont est de voir ce badge au bas de la page, et en ce qui concerne ce qu’ils font ou pourquoi vous devriez les embaucher, ils ont vraiment l’impression qu’ils aiment gribouiller.

Au cas où ce ne serait pas évident (et ce ne serait pas le cas!), Vous devez cliquer sur le point rouge. Ensuite, il effectuera un zoom avant et jouera une animation pour vous, en fournissant plus de points à cliquer. Chaque fois que vous cliquez sur un point et que vous regardez l'animation courte qui en résulte, un lien devient disponible à côté du badge de la marque, ce qui vous permet d'inspecter le profil Facebook de l'un de leurs contributeurs.

Comme vous pouvez le constater, le site a remporté un prix. Il est clair que les juges ne tiennent pas compte de l’utilité réelle de l’information ni de la pertinence de cette information pour attirer des clients dans le cadre de ses critères d’évaluation.

3. Gardez vos messages simples

Simple, la communication est ce qui fonctionne le mieux. Faites bon usage de l'espace visuel et communiquez bien visuellement. Vous devez également utiliser des mots de manière efficace pour dire aux gens ce qu’ils doivent savoir de la manière la plus appropriée. Vous n'avez pas nécessairement besoin d'être bref, et il est parfois contre-productif d'être bref. Mais vous devez être clair.

Surtout, impressionnez les gens parce que vous êtes impressionnant, pas parce que vous essayez d’impressionner. Ce qui devrait arriver, c’est que le spectateur devrait être assis devant son ordinateur et sentir sa mâchoire s’émerveiller alors qu’il fixait l’écran et prononçait la ligne immortelle: «Waouh, c’est vraiment impressionnant! Où est mon téléphone? Je dois engager cette personne!

Si vous vous trompez, ils diront: «Ha! Regardez cet idiot, essayant de m'impressionner avec toutes ces absurdités hi-tech!

Et si vous vous trompez vraiment, ils vont dire: «Arrrgh! Ce site Web fou avec tous les grands graphismes stupides, JavaScript inutile et les animations Flash terribles a complètement submergé mon processeur. Maintenant, je vais devoir redémarrer!

Ne sois pas ce mec. Évitez également d’utiliser du jargon, à moins que vous ne vous attendiez à ce que le public le connaisse. Par exemple, l’abréviation «PHP» convient parfaitement. Il serait étrange de préciser les mots qu’il représente. Par contre, si vous utilisez les abréviations du mot «CTR» et «KPI» du mois, ne soyez pas surpris si vous perdez la moitié de votre public.

Un grand nombre de sites Web, en particulier ceux de la conception Web et du référencement, essaient d'utiliser un jargon professionnel de haut niveau qui ne fait qu'embrouiller les propriétaires de petites entreprises et qui vont se déconnecter. Ou, lorsqu'ils ne se déconnectent pas, ils deviennent ce client agaçant qui sait réellement de quoi vous parlez, même si vous ne le saviez pas quand vous avez écrit cette merde. Alors ne faites pas ça non plus, parce que rien de bon n'en sort jamais.

Respectez toujours votre public et traitez-le comme vous voudriez être traité. Ne leur parlez pas, mais évitez de créer de la confusion. Et si vous le pouvez, essayez de les atteindre sur le plan émotionnel ou de stimuler leur intellect, sans leur faire croire que vous êtes un imbécile. Après tout, la communication est autant un art qu'une science.

Avatar

Bogdan Rancea

Bogdan est un membre fondateur d’Inspired Mag, ayant accumulé près de 14 années d’expérience 6 au cours de cette période. Dans ses temps libres, il aime étudier la musique classique et explorer les arts visuels. Il est également obsédé par les fixies. Il possède déjà 5.