Header
Partagez | 

Création d'un nouveau design, les bases

En ligne
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Agnïeszka

Directrice
Bons Points (BP) : 1612
Voir le profil de l'utilisateur

Message Sujet: Création d'un nouveau design, les bases   Mar 22 Mar - 13:14


Tutoriel

Bien commencer

Création d'un nouveau design





Coucou tout le monde,

Au fil de mes balades sur les forum, j'ai pu voir des tas et des tas de design. Certains étaient magnifiques, d'autres l'étaient moins et souvent, ce sont les mêmes erreurs qui reviennent. Celles-ci sont souvent faciles à éviter, je vous fais donc un petit tutoriel sur tous les éléments auxquels il faut penser pour faire un design.

Bien entendu, je ne suis pas une professionnelle, les éléments que je donne ici ont pour but de vous aider, il est possible que ceux-ci ne fassent pas forcément l'unanimité et/ou que certains designs soient beaux sans pour autant qu'ils respectent tous ces éléments (une fois que l'on maîtrise les règles, on peut les dépasser ^^)
Bien commencer

Avant de commencer votre thème, avant même de chercher vos images, prenez 10 secondes et posez-vous une question : Qu'est-ce que je veux faire ? Cette question est l'étape la plus importante de la réalisation de votre thème. Le reste n'est que de la recherche, de la technique et du temps.

Réfléchissez à un univers, à une ambiance, quelle est l'histoire que vous voulez raconter ? Si vous vous contentez de coller des éléments ensemble sans penser avant au ressenti que vous voulez provoquer, ce sera peut-être joli, mais il vous manquera l'élément "Whouaw" qui donnera une particularité à votre thème et qui le différenciera des autres forums.

Pour faciliter cette étape, je vous conseille de faire un petit brainstorming avec vos peluches et/ou les autres admins/commanditaires du thème. Après, travaillez le plus possible sur maquette, cela permet d'avoir une idée du rendu global ou graphisme et codage cohabitent sans se marcher dessus et on évite les mauvaises surprises Smile
Une maquette est une réalisation graphique qui représente à la fois l'apparence graphique et le codage du site/forum... pour lequel on le réalise. Voici un Exemple. Quoi ? Vous ne savez pas réaliser de maquette ? C'est très mal. Miettes a tout prévu et vous explique ici comment faire !

Respecter le sujet

Essayez également de respecter une cohérence design-sujet abordé par votre forum. Si votre forum est un forum RPG ou basé sur un univers précis (jeux vidéos, sports,...), c'est facile, vous avez l'entièreté de cet univers à votre disposition. Si ce n'est pas le cas, c'est plus compliqué. Vous pouvez vous donner un univers global à respecter (comme notre partenaire Royale Pub) ou simplement respecter le cours de l'année (comme sur SoP où nos thèmes évoluent en fonction des saisons).

Cependant, si vous fonctionnez comme ceci, n'hésitez pas à aborder des sous-thèmes. Si vous vous contentez du thème principal de la saison, cela risque rapidement d'être répétitif et, surtout, de ressembler à ce que l'on trouve sur tous les autres forums. Vous pouvez également choisir un style graphique particulier, bref, il existe des tas de façons de se démarquer pour éviter de faire encore et encore le même thème sur la plage et les tongs en été Smile
Si je prends l'exemple de SoP:
 

La mode

Finalement, un peu moins amusant, je pense qu'il est tout de même important de considérer la mode. Vous n'êtes pas obligés de la suivre (loin de là) mais prenez-là en compte tant dans le style que dans les couleurs afin que vos membres ne se disent pas que votre forum est vieillot ou que le forum n'a pas évolué. Bien entendu, cette règle n'en est pas vraiment une, certains forums ne s'y prêtent pas vraiment.
Exemple:
 
Qualité

Parlons un peu de la qualité. Cela semble évident, mais commencer un thème sur base d'images de mauvaise qualité est très déconseillé. Cela donnera tout de suite un rendu "amateur" à votre thème qui sera beaucoup moins propre.

En terme de qualité, j'entends ici la qualité de l'image en elle-même (pixelisée ?) mais également, si vous utilisez un render, de la découpe (géométrique ?). Choisissez donc bien vos images (les plus grandes possibles) et découpez-les vous mêmes si nécessaires (ou demandez à quelqu'un qui peut le faire Smile )
Exemple mauvaise découpe:
 
Exemple mauvaise qualité:
 

A noter que si vous utilisez une image de qualité moyenne, il faut éviter de mettre en avant celle-ci. Plus concrètement, ne marquez pas les contours d'une image mal découpée, ne placez pas une image de qualité moyenne avec des images de bonnes qualités et n'essayez pas de masquer cette qualité derrière des tas et des tas de calques de réglage, cela ne marchera pas, au contraire !
Exemple:
 

Cohérence

La cohérence dans votre design est un élément extrêmement important qui va permettre d'avoir une harmonie globale. Parfois, il s'agit de détails mais ce sont ces détails qui font vraiment la différence.
Les couleurs

Concrètement, la première chose à penser, c'est évidement l'harmonie des couleurs. Si les couleurs ne vont pas ensemble, votre thème aura du mal à être agréable à l'oeil. Évitez donc les mélanges de couleurs hasardeux, les couleurs qui sortent de nulle part ou qui sont trop flashies (par exemple du rouge tomate uniquement sur les titres). Essayez avant de commencer votre design d'établir une palette de couleur. Pour cela, vous pouvez aller sur les nuanciers des marques de peinture !
Exemple Palette que Mewyn fait dans le coin de ses maquettes:
 
Images : style et luminosité

Ensuite, au niveau des images, essayez de choisir des images qui sont toutes dans le même style. Évitez le mélange de genre. Si vous faites une composition qui veut représenter un jardin, choisir un dessin pour la pelouse, une image réelle pour les fleurs et une peinture pour les arbres va donner un rendu très étrange. C'est également valable au niveau du style de dessin, etc...

Une fois que vous avez toutes vos images, essayez de garder une cohérence au niveau de la direction de la lumière. Si la lumière vient de la droite, elle doit venir de la droite sur toutes les images de votre thème !
Exemple:
 

Les polices

Dans le même ordre d'idée, gardez le même type de police pour l'ensemble du thème. Je vous conseille de choisir une version stylisée (exemple), une version stylisée simplifiée (exemple) et une police classique pour les textes normaux (arial,...). Ainsi, vous avez une très jolie police pour le titre du forum (bannière), une police plus simple qui est bien lisible pour les titres de forum, etc... mais qui reste originale et ensuite une police simple pour les textes.
Autres

N'hésitez pas non plus à utiliser un élément récurrent dans vos thèmes. Cela peut se manifester par des structures, des mascottes, des petits éléments décoratifs, bref, un élément auquel votre membre pourra se raccrocher à chaque changement de thème et grâce auquel il pourra se dire "ah oui, je suis sur Forum X". Sur SoP, par exemple, il s'agit d'un hibou/chouette que l'on place sur chaque design.
Exemple SoP:
 
Ergonomie

Pour cette partie du tutoriel, je vais partir du principe que vous fonctionnez avec des maquettes Smile Cependant, même si vous ne fonctionnez pas à partir de maquette, certains éléments de cette section pourront vous être utiles.
La lisibilité

Dans un premier temps, lorsque vous réalisez votre thème, il est très tentant de mettre des éléments partout. Cependant, pensez d'abord à la lisibilité. Que ce soit au niveau du graphisme ou du codage, les textes doivent être faciles à lire, on ne doit pas avoir besoin de se rapprocher de son écran ou de se concentrer pour lire un texte.
Exemple:
 

Ensuite, pensez pratique ! Le forum doit être beau, mais avant tout, il doit être utilisé par les membres. Pour cela, rendez le aussi pratique que possible, ne cachez les boutons, ne créez pas d’ambiguïté sur les images importantes (nouveau message par exemple), etc...
Mise en avant

Réfléchissez bien à votre composition afin de mettre en avant les éléments importants, placez vos éléments de façon à attirer l’œil sur ce qui important. Bref, n'ajoutez pas d'éléments inutiles qui pourraient distraire ^^ (pas de rouge sur un simple détail). Toujours sur cette maquette, il y a beaucoup trop d'élément dans les forums ce qui fait que l'oeil n'est plus attiré par le bouton Nouveau message ou Verrouillé mais ne sait pas trop où se poser.
Dans le même ordre d'idée, évitez les choses qui bougent. Dans le monde du web, tout ce qui bouge/clignote est considéré comme de la pub. Et, même si ce n'en est pas, cela peut créer un encombrement visuel inutile et rendre le chargement de votre page plus lourd.
Organisation

Finalement, lorsque vous préparez votre maquette, gardez l'objectif de chaque élément en tête. Un forum n'est pas un message et un message d'entête n'est pas un message de concept. Évitez donc de prévoir trop d'espace pour certaines parties, cela forcerait donc à faire des textes très longs ou à avoir des parties vides.
Sur cette maquette, l'espace alloué aux nouveautés est beaucoup trop grand. Soit il sera constamment à moitié vide, soit il y aura des tas d'infos inutiles pour remplir ou de vieilles infos seront laissées pour "remplir".

Pour terminer

Pensez à demander des avis, le plus possible. Si un élément revient souvent, vous pouvez être sûr que d'autres membres le remarqueront aussi. Ainsi, si quelqu'un vous dit que la forme de votre bannière fait penser à une méduse, d'autres le remarqueront aussi et ils ne verront plus que ça ainsi que tous ceux à qui ils le diront :p

Il est possible que cette liste ne soit pas exhaustive, n'hésitez pas à contacter un intervenant si vous voyez un élément à ajouter.


Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Je soussigné(e), Agnïeszka, accepte qu'un directeur reposte tous mes tutoriels tel que je les ai rédigés.


Revenir en haut Aller en bas


Création d'un nouveau design, les bases
Page 1 sur 1
 Sujets similaires
-
» Nouveau Design !
» nouveau design du forum !! qu'en pensez vous ??
» GF-Pub a un nouveau design !
» Nouveau design : Halloween
» Nouveau design
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Arts plastiques :: Autres+