Peut-on réaliser un bon design Web sans Web-designer ?
Quelques pistes de réflexions pour tenter d'y arriver
Le 2012-07-03 14:27:58, par FirePrawn, Expert éminent sénior
Le design des sites aujourd'hui est un point "critique". Et bien souvent les utilisateurs préfèreront un "beau" site à son concurrent moins "évolué" graphiquement.
Malheureusement, il n'est pas toujours possible d'avoir à ses côtés un web designer.
Dans ce cas, il faut se retrousser les manches et tenter de faire du mieux que l'on peut.
Savoir créer un design attrayant ne s'apprend pas en quelques lignes. Cependant voici un petit guide pour débutant qui vous aidera dans la création de votre graphisme.
Les contraintes sont nécessaires
Même si ça peut sembler contre-intuitif, un bon design part toujours de contraintes bien établies.
Si vous pensez que votre projet n'a pas de limite, c'est qu'elles ne sont pas forcément évidentes au début. Néanmoins, vous vous devez de déterminer des contraintes sur votre projet au risque de le voir partir dans tous les sens.
Par exemple si vous voulez créer un design pour un site destiné aux mobiles, la première contrainte est la taille de l'écran ou encore le temps d'affichage des pages.
Les contraintes visuelles sont similaires.
Il est préférable d'utiliser une couleur prédominante, et de ne pas faire un site "arc-en-ciel".
En premier lieu, il vaut mieux avoir trop de contraintes que pas assez.
Nous vous conseillons donc d'utiliser une grille CSS pour réduire les choix de mise en page, obtenir une palette de couleur fixe pour limiter le nombre de couleurs qui seront utilisées sur votre site et un petit "guide" de style pour limiter le nombre d'éléments distincts.
Comment procéder
Prenez environ une demi-heure pour mettre à plat vos contraintes.
Voici quelques points d'entrée pour créer votre liste :
Une fois cette étape terminée, gardez cette liste à portée de main.
A chaque fois que vous prendrez une décision pour votre site, vérifiez que cette dernière est compatible avec vos contraintes.
Si ce n'est pas le cas, trouvez une autre solution. Ce mécanisme peut être contraignant, mais il est critique pour votre site.
Trouver l'inspiration
Un bon design ne se fait pas à partir de rien.
Les meilleurs artisans et ingénieurs ont toujours été inspirés par leurs pairs.
Vous devez utiliser ce qui existent déjà comme un avantage.
Lorsque vous voyez un design qui vous plait, capturez le et essayer de comprendre pourquoi il vous a plu et pourquoi les éléments de celui-ci fonctionnent (ou ne fonctionnent pas).
Jusqu'à ce que vous ayez suffisamment d'expérience, vous pourrez trouver votre bonheur sur le Web.
Comme par exemple sur Dribbble. Nous vous conseillons également d'utiliser Kuler qui est un site quasi indispensable pour constituer sa palette de couleurs.
Comment procéder
Prenez 15 minutes pour trouver cinq design qui vous plaisent (sans limite de temps vous y passerez facilement une heure ou deux).
Vous devez vous efforcer de trouver ce qui les distingue des autres.
Gardez par la suite cette liste dans un coin.
Lorsque vous ferez face à un blocage créatif, consultez là pour comprendre comment ces différents design ont résolu le problème auquel vous êtes confronté.
Rester cohérent
Bien que des fioritures visuelles sont un moyen de différencier votre site d'un autre, vos futurs utilisateurs seront plus intéressés par les moyens disponibles pour atteindre leur but.
Au lieu de penser chaque nouvelle page de votre site comme un nouveau départ, créez plutôt ces pages en utilisant des éléments visuels existants. Faites de nouveaux éléments graphiques uniquement si ceux déjà présents sur votre site ne répondent pas au besoin de la nouvelle page.
Comment procéder :
Créez un "guide" de style pour votre site.
Ce guide doit être un document vivant et une partie à part entière de votre site (sans toutefois être visible par les utilisateurs).
Chaque fois que vous créerez un nouvel élément graphique, ajoutez un exemple dans ce document en reprenant la méthode que vous avez utilisé jusqu'ici.
Si vous faites une mise à jour d'un élément de style sur votre site, celle-ci devra être reportée sur le guide.
Une fois ce guide terminé, pour créer une nouvelle page, il sera surtout question d'intégration des blocs de votre page dans les éléments de style existants.
Cette méthode permettra d'éviter de refaire le même travail à chaque fois et vos utilisateurs seront plus à l'aise avec la navigation vers de nouvelles pages.
Ce guide n'est bien sûr pas exhaustif.
Il s'agit là uniquement de quelques étapes importantes (voir indispensables) pour vous permettre de créer un design solide et efficace pour votre site.
Source : Easel Blog
Et vous ?
Avez-vous déjà tourné en rond pour la création d'un design ?
Si oui, ces différentes étapes vous auraient-elles aidées ?
Malheureusement, il n'est pas toujours possible d'avoir à ses côtés un web designer.
Dans ce cas, il faut se retrousser les manches et tenter de faire du mieux que l'on peut.
Savoir créer un design attrayant ne s'apprend pas en quelques lignes. Cependant voici un petit guide pour débutant qui vous aidera dans la création de votre graphisme.
Les contraintes sont nécessaires
Même si ça peut sembler contre-intuitif, un bon design part toujours de contraintes bien établies.
Si vous pensez que votre projet n'a pas de limite, c'est qu'elles ne sont pas forcément évidentes au début. Néanmoins, vous vous devez de déterminer des contraintes sur votre projet au risque de le voir partir dans tous les sens.
Par exemple si vous voulez créer un design pour un site destiné aux mobiles, la première contrainte est la taille de l'écran ou encore le temps d'affichage des pages.
Les contraintes visuelles sont similaires.
Il est préférable d'utiliser une couleur prédominante, et de ne pas faire un site "arc-en-ciel".
En premier lieu, il vaut mieux avoir trop de contraintes que pas assez.
Nous vous conseillons donc d'utiliser une grille CSS pour réduire les choix de mise en page, obtenir une palette de couleur fixe pour limiter le nombre de couleurs qui seront utilisées sur votre site et un petit "guide" de style pour limiter le nombre d'éléments distincts.
Comment procéder
Prenez environ une demi-heure pour mettre à plat vos contraintes.
Voici quelques points d'entrée pour créer votre liste :
- est-ce que vos utilisateurs seront majoritairement sur des PC ou sur des mobiles ?
- combien de tailles d'écrans différentes devez-vous gérer ?
- quel est le but des utilisateurs ?
- combien d'actions seront nécessaires aux utilisateurs pour atteindre ce but ?
- combien de temps devront-ils attendre ?
Une fois cette étape terminée, gardez cette liste à portée de main.
A chaque fois que vous prendrez une décision pour votre site, vérifiez que cette dernière est compatible avec vos contraintes.
Si ce n'est pas le cas, trouvez une autre solution. Ce mécanisme peut être contraignant, mais il est critique pour votre site.
Trouver l'inspiration
Un bon design ne se fait pas à partir de rien.
Les meilleurs artisans et ingénieurs ont toujours été inspirés par leurs pairs.
Vous devez utiliser ce qui existent déjà comme un avantage.
Lorsque vous voyez un design qui vous plait, capturez le et essayer de comprendre pourquoi il vous a plu et pourquoi les éléments de celui-ci fonctionnent (ou ne fonctionnent pas).
Jusqu'à ce que vous ayez suffisamment d'expérience, vous pourrez trouver votre bonheur sur le Web.
Comme par exemple sur Dribbble. Nous vous conseillons également d'utiliser Kuler qui est un site quasi indispensable pour constituer sa palette de couleurs.
Comment procéder
Prenez 15 minutes pour trouver cinq design qui vous plaisent (sans limite de temps vous y passerez facilement une heure ou deux).
Vous devez vous efforcer de trouver ce qui les distingue des autres.
Gardez par la suite cette liste dans un coin.
Lorsque vous ferez face à un blocage créatif, consultez là pour comprendre comment ces différents design ont résolu le problème auquel vous êtes confronté.
Rester cohérent
Bien que des fioritures visuelles sont un moyen de différencier votre site d'un autre, vos futurs utilisateurs seront plus intéressés par les moyens disponibles pour atteindre leur but.
Au lieu de penser chaque nouvelle page de votre site comme un nouveau départ, créez plutôt ces pages en utilisant des éléments visuels existants. Faites de nouveaux éléments graphiques uniquement si ceux déjà présents sur votre site ne répondent pas au besoin de la nouvelle page.
Comment procéder :
Créez un "guide" de style pour votre site.
Ce guide doit être un document vivant et une partie à part entière de votre site (sans toutefois être visible par les utilisateurs).
Chaque fois que vous créerez un nouvel élément graphique, ajoutez un exemple dans ce document en reprenant la méthode que vous avez utilisé jusqu'ici.
Si vous faites une mise à jour d'un élément de style sur votre site, celle-ci devra être reportée sur le guide.
Une fois ce guide terminé, pour créer une nouvelle page, il sera surtout question d'intégration des blocs de votre page dans les éléments de style existants.
Cette méthode permettra d'éviter de refaire le même travail à chaque fois et vos utilisateurs seront plus à l'aise avec la navigation vers de nouvelles pages.
Ce guide n'est bien sûr pas exhaustif.
Il s'agit là uniquement de quelques étapes importantes (voir indispensables) pour vous permettre de créer un design solide et efficace pour votre site.
Source : Easel Blog
Et vous ?
-
camus3Membre éprouvéJ'ai de très mauvais goûts je pense
Disons qu'il faut avoir dans sa tête de bonnes références et une culture artistique , plus qu'une capacité à dessiner.
Ensuite dans le design il y a des règles comme toutes disciplines.
On ne design pas juste en écrivant du css , il faut être capable de conceptualiser de faire une maquette , des variations ,etc ...
donc à ne pas confondre avec le design "web" qui lui est plus la mise en oeuvre du design sur le web ( donc l'intégration ) , la différence est subtile mais significative.
En fait la plus part des "web designers" sont juste intégrateurs, pas "designers" ou 'graphistes' , mais le "graphisme" n'implique pas le fait d'être "artiste" non plus, mais plutôt "artisan" dans une certaine mesure.
Un bon bouquin pour avoir des bases est "les sens du visuel" , accessible ,il ne fera pas de vous un graphiste mais vous feras éviter les pièges les plus courants.
Et ne jamais partir de rien ,s'inspirer soit du réel ( brochures , flyers , oeuvres existantes ) ou d'autres sites web , en prendre une dizaine ,analyser ce qui fonctionne ou pas ,etc ...
Enfin ergonomie =/= "design" , parfois même le design fonctionne au détriment de l'ergonomie. Etre ergonomiste est encore un autre métier que celui de designer ou graphiste.le 05/07/2012 à 16:12 -
icexplorerMembre habituéC'est pas pour dire, mais quand je vois le succès de sites tels que leboncoin, facebook, stackoverflow et compagnie, je me dis que c'est pas le design qui a fait leur succès...le 05/07/2012 à 14:38
-
FirePrawnExpert éminent séniorDétrompe toi
C'est justement leur design très simplifié qui fait qu'il y a autant d'utilisateurs
Développe un leboncoin avec des fioritures visuelles de tous les côtés, ça va décourager tes futurs utilisateurs.
C'est justement parce que le créateur a pris le temps de réfléchir à ce dont les utilisateurs auraient besoin que le design est si simple, mais efficacele 05/07/2012 à 14:54 -
dourouc05Responsable Qt & LivresÇa montre que le webdesign est surtout expérimental : pour peu qu'on ait une vision pas trop détériorée et un écran relativement correct au niveau du rendu des couleurs, pas besoin de se bourrer le crâne de conseils en tout genre, il suffit d'avancer... puis de regarder sans a priori, sans biais ce qu'on a fait (c'est la partie la plus dure : après des heures, voire des jours de travail, c'est presque impossible d'être neutre face à son travail sans prendre une bonne pause), on retombera assez naturellement sur une grande majorité de conseils donnés (que l'on ne comprend jamais vraiment à fond tant qu'on n'a pas expérimenté l'exact contraire
). le 05/07/2012 à 13:26 -
yassiinMembre à l'essaiAu sein de ma boite, il m’a été affecté la tache de réaliser les pages maîtres du site web(conception et développement) et j'ai bien réussie cette expérience... malgré que j'avais pas une expérience assez fort en design, de mon point de vue le design c'est juste question de "conception graphique" mais c aussi un art comme le dessin.le 05/07/2012 à 18:32
-
ScorpyosisMembre confirméPour moi, demander de faire du web-design à un développeur c'est comme demander à un peintre en bâtiment de faire une toile de maître ! On a les mêmes outils mais on ne fait pas le même métier ! Ce message s'adresse à tous les décideurs qui n'ont toujours pas intégré cette donnée !le 06/07/2012 à 8:39
-
rambcMembre chevronnéCe n'est pas incompatible. Il faut faire les deux.
Merci. Pour le coup, on a un exemple de design qui pourrait être amélioré : mettre ce logo sur fond blanc et dessiné en noir le ferait ressortir car là il est noyé dans la page et pratiquement invisible pour le novice.le 06/07/2012 à 12:16 -
TorgarRédacteurEt comment... c'est le pain quotidien d'un développeur web dans une société sans graphiste
Pondre quelques couleurs et trouver une mise en page efficace n'est pas le souci. Ce qui l'est plus c'est d'assortir le tout. Quelle couleur dominante choisir ? Avec quelles couleurs les marier ? Quels visuels mettre à cet emplacement ? Tiens, un dégradé serait joli ici (il s'avéra dès plus immonde une fois réalisé) Tant de question anodines mais au combien difficile pour quelqu'un qui n'a pas la fibre artistique.
Je m'inspire souvent de site ou de kit HTML pour trouver l'ossature. J'ai par moment passé trop de temps à chercher telle ou telle chose pour agrémenter le site.
Je prends note des conseilsle 03/07/2012 à 14:48 -
bob633Membre expérimentéJe me retrouve également dans cette situation la plupart du temps ...
Je suis développeur web en amateur, mais pas graphiste du tout, ca devient vite très moche ce que je fais
Et bien j'ai suivi ces conseils dans le faire exprès si je peux dire. Je navigue sur différents sites afin de trouver des idées .. ensuite pour des menus je parcours les menus open source jquery ou css et j'adapte en fonction de ce qui me plait.
Pour la cohérence c'est un bon point. J'ai déjà vu des sites où le design change à chaque page, et bien on se demande même si on est encore sur le même site lorsqu'on navigue dessus
Bref de bon conseil, qui paraissent logique à vue d'oeil, mais qui au final ne l'est pas pour tout le monde.le 04/07/2012 à 9:10 -
ibrakolaMembre avertiun site "arc-en-ciel".
Merci pour ces conseils FirePrawn
le 04/07/2012 à 13:49