Théories et principes du webdesign

Bonjour tout le monde :) Désolé pour ce tutoriel un peu atypique, mais comme pas mal de gens ici font des thèmes, et certains du webdesigns, je me suis dit qu'un loooong court théorique pourrait être utile et efficace.

Pas de logicieil particulier, bien que certains solutions que je vais proposer soient principalement axées sur Photoshop.

Dans ce tutoriel, je vais essayer de parler du webdesign le plus largement possible, de fournir toutes les clés à un débutant pour s'en sortir, et certaines parties seront en spoiler, pour les plus confirmés, des anecdotes, des chose à savoir si on veut aller plus loin !

Tout le monde est prêt ? Dans ce cas on peut y aller :)


Webdesign, kezako ?
Avant de commencer à parler de webdesign, il me parait utile de faire un récapitulatif de ce que c'est réellement : c'est la mise en avant d'un contenu textuel principalement. Mine de rien, on a déjà abordé pas mal de choses en une seule phrase ! Donc notre webdesign design va nous servir à montrer ce que l'on a à dire de la meilleure façon.

Un webdesign tel que je l'aborde pour le moment, ce n'est qu'une image faites dans votre logiciel de création d'images, rien de plus. Un webdesign est donc une enveloppe visuelle.

Entre pratique et esthétique
Un webdesign peut se "juger" sur 2 critères différents : sa qualité et son éfficacité. Autrement dit, un webdesign peut être efficace mais moche, ou beau mais inefficace. Nous allons donc aborder au cours de ce tuto des façon de s'approcher au mieux d'un bon résultat selon ces deux critères !

Le Webdesign n'est pas de l'art !
Phrase qui en a déjà fait bondir plus d'un ! J'explique... L'art par définition se suffit à lui même, c'est à dire qu'une oeuvre d'art n'a pas besoin d'une raison d'exister, le fait qu'elle soit art le justifie. Le webdesign est, comme nous l'avons défini tout à l'heure la mise en avant du contenu. Le webdesign ne peut pas exister sans contenu puisqu'il existe pour le contenu. Ne se suffisant pas à lui même, le Webdesign n'est par définition pas de l'art.

L'avantage de savoir ça, c'est qu'on va utiliser des règles, des lois et des conventions, comme en Math :) mais non partez pas, promis y'aura rien de compliqué !

Les sciences du webdesign
Soyons clair, faire un design reste un exercice créatif et artistique, bien que le design en lui même ne soit pas de l'art. Néanmoins, nous pouvons nous appuyer sur des règles qui nous facilitent le travail !

Spoiler:

Appliquer des règles en webdesign ne doit pas être senti comme une contrainte, en effet, elles peuvent presque toutes être transgréssées. Les appliquer nous permet tout simplement d'utiliser notre imagination pour la partie réellement créative, et laisser aux règles le soin de gérer ce qui l'est moins ! Pour une fois, nous allons profiter des règles !

Cargaison de liens avant de commencer !
L'idéal, c'est un mix de ce que nous connaissons de meilleur dans un domaine donné... Autrement dit, plus vous verrez de designs, et plus votre idéal en la matière sera fourni et étoffé... Même si la pratique compte, la recherche et la curiosité comptent pour beaucoup !

C'est pourquoi je vais vous donner une petite fournée de liens, la plupart en anglais vers des "showcase" de designs. A ces endroits sont regroupés les meilleurs design selon leur auteurs respectifs !

Spoiler:

Ces mots sont les plus fréquents, si vous en rencontrez d'autres n'hésitez pas !

Voila enfin les liens :

http://www.designmeltdown.com/ : une Bible ! les designs sont classés par style, un très grand nombre de designs présentés, très important, à voir !

http://www.scrnshots.com/explore : site de partage de screenshots, grande qualité !

Spoiler:

Commençons !
La première chose à faire : c'est choisir la taille du document. Selon la norme actuelle, il est convenu qu'une page web doit faire 960px de large. Nous allons donc choisir 1000px de large, pour "voir" un peu les côtés. Pour ce qui est de la hauteur, je prend en générale 1200px de haut, ce qui me permet d'avoir de la place quand je créé, et je redécoupe si je n'utilise pas tout. Bref, pour la taille du document, l'idéal, c'est 1000*1200px !

Les dossiers sont assez pratiques. assez instinctifs pour les développeurs dans l'âme, les graphistes ont tendances à ne pas les utiliser. Regrouper vos calques est assez important pour un design, le nombre de calques peut vite devenir enorme, si tous les calques qui s'occupent d'une même partie sont ensemble ce sera beaucoup plus simple à reprendre plus tard ou à gérer.

Le fond
Le fond d'un design doit être assez sobre, il n'y a pas de contenu, pas la peine d'embrouiller le visiteur avec des zones Flash, etc etc, un simple dégradé convient la plupart du temps.

On retrouve différentes méthodes pour agrémenter les fonds, comme les textures, les photos, les vectos, etc etc, mais c'est plus complexe à gérer.

Spoiler:

Header/Logo
Le Header et/ou le logo doivent être en haut du design. Une convention veut que le logo ou le nom du site soient sur la gauche.

Votre logo doit être visible et repérable facilement, mais faire un logo mériterait tout un tutoriel tant c'est une tache complète et complexe !

Rien de plus pour cette zone du design.

Navigation
A ne pas confondre avec Menu, la navigation perme de se ballader sur le site, le menu permet d'accéder à des actions/otpions.

On retrouve 2 styles pour la navigation : horizontale ou verticale (et la version hybride). Le plus courant reste la navigation horizontale : les liens sont les uns à côté des autres.

Pour que votre navigation soit correcte, veillez à ce que les liens soit différenciables, espacez les suffisament, voire mettez un séparateur entre chacun d'entre eux.

Il est utile de signaler quel lien on survole en changeant la couleur du texte, du fond du bouton ou les 2 en même temps, évitez les animations, changements de forme ou autre modifications trop complexes, une navigation dit être simple, un visiteur perdu ne reste pas longtemps !

Spoiler:

Le Menu
Comme je l'ai dit, le menu sert à accéder de façon direct à des sous parties otpions ou actions du site. En général celui ci se met sur le côté, généralement à gauche par convention, mais vous pouvez aussi le diviser des 2 côtés du design ou autre !

Là encore, pensez à montrer à votre utilisateur ou il se trouve, ou il va cliquer etc etc, plus il sait ce qu'il fait et moins il échoue !

Le Footer
A la base, le Footer est la ligne tout en bas avec le copyright et l'url du site, et d'autres infos... Rien de bien complexe à ce sujet !

Spoiler:

Le Contenu
Le meilleur élément pour la fin. Le "bloc" qui encadre le contenu est appellé le corps du design. C'est dans celui ci que le texte et les images du site sont affichées.

Pour ne pas surcharger d'un coup, je vais parler seulement du positionnement pour le moment et aborder le reste plus tard, étant donné que ça peut s'appliquer à toutes les parties !

Une erreur fréquente de débutant est de ne pas mettre de texte ou d'image dans un design. Pour présenter un design le mieux possible, il doit paraitre vivant, mettez y donc du texte, des images, de la vie ! De plus, le design sert au développeur, comment va-t-il choisir la couleur des liens, du textes etc si vous ne l'avez pas fait ? Il va improviser, et un développeur qui improvise, ça fini souvent mal !

Vous pouvez vous aider du Lorem Ipsum (www.lipsum.com) pour faire vos remplissages de textes !

Spoiler:

Et bien nous en avons fini pour les bases, c'est déjà bien non ?

C'est déjà bien mais ça n'est pas tout. On va maintenant parler des règles générales, notament pour le contenu, mais pas seulement. Ces règles vous permettent de vérifier ou de trouver la bonne solution à un problème. Ensuite nous parlerons des outils à notre disposition, et après nous conclurons... enfin je conclurai !

La notion de Contraste
Quand on parle du contraste d'un élément, il s'agit de la différence entre son fond et lui même. Avant d'expliquer : 9 - 2 = 7... Ici, le contraste de 9 serait don 7 puisque son fond vaut 2... Pas clair ?

Nous avons un élément, par exemple un bouton noir sur fond blanc. Le contraste, c'est la différence entre le noir et le blanc, l'élément et ce qui est "sous" lui. Entre noir et blanc, le contraste est maximal, mais c'est rare qu'il le soit autant, cepedant le contraste d'un élément fait qu'on le vera ou non, le couleur ne joue pas réellement !

Si vous voulez que quelque chose visible, contrastez le, mais ne faites pas forcément flasher le tout, le contraste suffit à démarquer une zone sur une autre !

Néanmoins, un design avec trop de contraste est illisible, il faut donc gérer, certaines parties contrastées, d'autres plus en retrait et jongler avec tout ça pour garder un équilibre !

Le contraste des textes est très important, vous mettez en avant du contenu, alors celui ci ce doit d'être lisible, voir très lisible !)

Spoiler:

Les liens
Les liens sont la base du web : une page redirige toujours vers plusieurs autres, mais quel intérêt si le visiteur ne repère pas les liens ? Aucun, c'est pourquoi on utilise plueirus procédés pour mettre en avant les liens dans le texte : couleur différentes/contraste plus fort que le reste du texte/soulignement on peut utiliser toutes ou certaines de ces méthodes en même temps, au choix, néanmoins le soulignement est un standard.

L'idée de "hover" c'est ce qu'il se produit quand on passe la souris sur le lien. Ceci est assez dur à reproduire dans le design, mais il est toujours intéressant de prévoir comment le lien va devenir quand on passera la souris dessu !

Les bordures
Une bordure, c'est bien entendu ce qui encadre un bloc de contenu ou autre. c'est assez dur à gérer quand on débute, ils sont soit inexistants, soit trop visibles. un bord doit être fait avec beaucoup de tact, il faut trouver une couleur qui se voit à l'écran, mais qui ne soit pas omniprésente, le bord ne compte pas tant que ça au final.

Certaisn aiment les bords avec des dégradés, etc etc... Certes ça peut faire joli, mais c'est ouvent horrible à coder, et ça ne fait pas réel, personne ne les utilise réellement. Et puis bon, si vous n'avez rien de mieux à montrer que des jolies bordures, ne faites pas de design !

Voilà les principaux défauts que l'on peut retrouver chez les débutants et qui sont facilement corrigeables !

Ensuite, les outils ! le Webdesign et ses acteurs font le web et l'utilisent, des outils se sont donc créé pour eux, en voici une petite séléction :

http://www.pictaculous.com/ : vous donne une schéma de couleur correspondant à votre image, assez pratique :)

http://fr-fr.colourlovers.com/lover/HammHetfield : ma page chez ColourLovers, juste pour la pub >.<, vous y trouverez (sur le site en général, pas ma page hein) des outils pratiques pour gérer vos couleurs et vos chémas de couleurs, bientot indispensable !

http://www.e-loader.net/ : un excellent hébergeur d'image français, mieux que la plupart actuellement, propose de nombreux outils, un hébergement gratuit biensur, sans inscription et sans pub, le plus rapide je trouve !

Conclusion

Ouch 2h de tutoriel, j'ai la tête en compote là... Enfin bref, je pense avoir retracé à peu prés toutes les questions qui peuvent traverser l'esprit d'un débutant et vous avoir mis en garde au sujet des erreurs fréquentes. La clé est de pratiquer et d'observer, et dans l'idéal de conserver, j'en suis à mon 3ème dossier de collection de designs, 200 chacuns, ceux que je préfère, et je les regarde souvent, ça m'influence et ça m'aide !

Une pratique fréquente est souhaitée, et les tutoriels ou on vous guide pas à pas ne vous aident pas vraiment ne l'oubliez pas...

Sur ce, bon designs, n'hésitez pas à me faire part de vos questions/suggestions pour ce tutoriel !

Woah, C'est du tuto *o*
Etant débutant dans les webdesgins, je pense que ça m'aiderai vraiment.
Tuto vraiment complet, rien de plus à dire si ce n'est qu'un grand bravo ^^

>> http://www.webdesignerwall.com/
Magnifique à en pleurer xD

Merci... Pas beaucoup de commentaires pour le moment, mais si il sert de temps en temps c'est cool :)

Waouh, t'as du courage Ham', tu le sais ça? o.o

Ecrire tout ça... Woah x)
M'enfin, franchement merci beaucoup, c'est évident que le jour où j'essayerais les webdesigns je serais aux anges de pouvoir lire ce tuto ^^

complet, bien rédigé... très bon tutoriel quoi! Arigato gosaimazu ^^

Kochira koso, dozo yoroshiku !

Oui je me doute que les commentaires ne viennent pas en 7h, mais j'ai vu les vues defiler, et pas un seul commentaire, c'était frustrant au début, mais le tuto est long, et puis y'a pas forcément de résultat instantannée, donc je me doute que ça va prendre du temps avant qu'il soit commenté !

Merci pour vos commentaires, je suis dispo si besoin est :)

merci pour le tuto :)

De rien, n'hésitez pas à poser des questions ou demander des précisions !

Bon tuto^^ ça manque d'illustration, ce qui est dommage pour les débutants car il est souvent plus facile de comprendre en visualisant. Cependant le contenu est très bien, les conseils sont bons !

1000 px de large c'est pour le plus petit écran en fait... perso je prends d'avantage, tout en limitant l'important à 980 environ (en gros pour que ça soit correct en 1024x768 mais que les personnes qui ont un écran plus grand puissent également avoir un fond qui "comble" le vide (puisque pas de design extensible pour moi pour le moment^^).

Pour le "lorem ipsum", c'est peut-être pas du Latin mais ce n'est pas seulement inventé... ou alors ils sont tombés pile poil XD car pas mal de mot existent en Latin... me semble-t-il.

Merci en tout cas pour ce partage de connaissance ! (et désolé du retard de réponse, je n'avais pas vu ce tuto...).

Je me suis pas étendu sur l'origine du Lorem Ipsum, il y a des tas de choses à raconter à ce sujet, si ça intéresse quelqu'un, je peux développer... Enfin bref ce n'est pas le Latin tel qu'on le connait actuellement c'est une version plus ancienne, mais l'important, c'est surtout que les phrases n'ont pas de sens, du moins pour la plupart, sauf certaines, reprises dans des pièces de théatres qui étaient cachées dans le livre, des dédicasses ou des feitnes de l'auteur, allez savoir !

Pour les illustration, à l'occasion j'en rajouterai, mais une bonne partie des explications assez simple il me semble.

Pour ce qui est de la taille du document, je pense que le fond reste un élément suffisament secondaire pour ne pas être abordé quand on débute, donc 1000px de large ça suffit dans ce cas là. Ensuite c'est vrai qu'il m'arrive de refaire un fond plus large pour les grands écrans, ayant 1900px à remplir, je vois un peu le vide créé !

Merci pour le tuto, vraiment bien expliqué.

Merci :)

Pour le Lorem Ipsum ils parlent de Latin modifié sur Wiki^^ ce qui expliquerait qu'il y ait des mots existant et d'autres pas.

Ha quel tutoriel intéressant
Je peux prendre note d'assez bien de conseils finalement pour pouvoir m'exercer.
Merci également pour les sites, ils proposent de nombreux designs qui posent à inspiration !

Bonjour,


tu as eu du courage à réunir et réécrire toutes ses informations, cela dit je ne prendrais pas au mot tous les conseils listés dans ces théories qui me semblent presque dépassées. Les normes sur les placements de logotypes, les menus et les footers évoluent très vite et ce que tu cites là est presque complètement dépassé. Je ne dis pas que c'est faux bien entendu.

Les menus et navigations sont désormais complètement mélangés la navigation hybride est devenue une norme, tout comme les contenus scrollables. Un site qui ne peut pas bouger devient "ringard". Les footers se remplissent désormais d'un contenu qui sort de sa fonction d'origine, on y retrouve un ensemble de liens inter-site et hors site.

Une chose importante passe au travers de tes explications, sur la qualité d'un webdesign s'appuie aussi le poids et l'optimisation des images. Les connexions ont beau monter en rapidité, les images peuvent se permettre d'être plus lourdes mais pas trop, car si les connexions accélèrent, les internautes aussi. Alors qu'avant nous naviguions de page en page, aujourd'hui il n'est pas rare que lancer 5 voire 8 pages en même temps. Pour ce qui est de l'optimisation, la réflexion sur les placements et la maîtrise du CSS sont indispensables.


Concernant la partie sur le contraste, là aussi les tendances se fusionnent. Les contrastes sont de moins en moins présents et ont tendance à s'effacer sur les webdesign les mieux travaillés. Un fondu de fond et de forme pour montrer une parfaite maîtrise du code. Le contraste qui restera le plus marqué sera celui du texte.


Pour revenir sur les normes W3C, tu as parler d'aller en transgression contre ces règles. J'espère avoir mal compris, car ces normes deviendrons un impératif pour valider un site web tant en HTML, en CSS ou en PHP. D'ici quelques années tous les navigateurs seront appuyés sur ces normes, si votre site ne les respecte pas, il ne s'affichera pas, tout simplement.


Jacky, tu vises bien, les normes web actuelles ciblent un 960px de contenu en largeur. Sur une tendance à s'élargir bien évidemment. Cela dit, passé 1000px, il faut sérieusement penser à travailler sont contenu en colonnes pour reposer la lecture.


Il faut savoir qu'aujourd'hui, un site qui met plus de de 4s à se charger sera zappé par le plus grand nombre, un site sans interaction subira le même sort en 10s si le contenu n'est pas percutant et les sons (hors flash) sont complètement ringards.



Cordialement.

En même temps je m'adresse pas à des gens comme toi dans ce tutoriel... Ce que je veux dire, c'est que c'est pour débuter, c'est une entrée en la matière, alors je te le concède, certaines parties ne sont plus tout à fait actuelles, mais il me semble que c'est la façon la plus simple de les aborder quand on a jamais fait de webdesign...

Maintenant bon, j'ai pas trop envie dme justifier ou dme faire lyncher :s

Je le conçois, ne voyant aucune ligne de code c'est forcément une mise en bouche au webdesign.
Il ne faut pas mal prendre mon intervention, ce n'est pas forcément chose simple que de cerner le monde du web. Cela dit débuter ne veut pas forcément dire être naïf, et inversement. Il ne faut pas oublier qu'enseigner une chose inconnue à quelqu'un le rendra complètement attentif aux moindres mots que tu diras ou écriras. C'est à dire qu'à la moindre faute, ils l'accepteront comme une parole biblique. C'est pour cette raison que je donnais un second point de vue.


"En même temps je m'adresse pas à des gens comme toi dans ce tutoriel"


On se connait ?

Une bann webdesigner, et en formation jusqu'à 2010, tu as l'air de suivre une formation dans le milieu donc pas besoin de se connaitre pour savoir que tu en sais largement plus que les gens pour lesquels j'ai prévu ce tutoriel, et surement que moi ^^

Je le répète, j'ai vu ce petit cours comme une façon d'apprendre des "guideline" facile à comprendre et à suivre pour permettre de ne pas se planter sur ses premiers essais, en respectant toutes les règles qui sont là, et avec un peu de bon sens, on peut déjà faire quelque chose de potable !

Ensuite biensur avec le temps, il faut dépasser toutes ces règles mais je croyais que commencer par des choses simples et claires, quitte à ce qu'elles soient dépassées était la façon la plus "simple" d'aider quelqu'un à rentrer dans ce domaine qu'il ne connait pas

merci pour ton tutoriel qui est vraiment très complet même si certaines choses sont dépassés ( je me suis renseigné sur le sujet ) c'est un très bonne entrée en matière et ton tuto m'a donné envie de me lancer dans le WD, donc je te remercie fotement ^^ en espérant que tu nous ferras d'autres tutos comme ca

Déduction logique certes mais certains se permettent ces affichages sans fondement.

Et justement je suis en formation, j'ai encore à apprendre ^^

Bon courage pour la suite du tuto si tu souhaites approfondir. Sinon merci pour les débutants.
Un conseil rapide pour ceux qui souhaitent s'y former sérieusement, commencez vos demandes de formation très très tôt, les listes d'attente sont énormes.

Si tu fais la même formation que Riku, je comptais m'y prendre très très tôt, j'étais en terminale, je souhaitais arrêté, puisqu'ils réclament un niveau bac. Et il m'ont gentiment dit de retourner en cours... :/
Donc conseil a suivre pour ceux qui sont déjà sortit du scolaire "classique", ayant déjà un certain age. ;-)

Je ne suis pas exactement la même formation même si la mienne à les mêmes débouchés. Mais en effet, pour les formations d'Etat, très souvent le minimum requis est le Bac, cela dit ,dans mon organisme de formation le Bac n'est pas un minimum requis, il faut monter un dossier de parcours professionnel (passé et futur) qui sera analysé. C'est donc un choix par dossier, les profils les plus intéressants sont gardés, à savoir qu'il y a en règle général 1/7 dossiers qui passent. Mais ces centres de formations gratuits non géré par l'Etat sont très rare.

Mais de toute manière, le Bac est un minimum requis dans 95% des métiers, sortir du parcours scolaire sans ce diplôme c'est un danger pour votre avenir et une grande épreuve pour votre facteur chance.

class merci