Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Peut-on réaliser un bon design Web sans Web-designer ?
Quelques pistes de réflexions pour tenter d'y arriver

Le , par FirePrawn

192PARTAGES

12  0 
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 :

  • 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 ?

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 ?

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de camus3
Membre éprouvé https://www.developpez.com
Le 05/07/2012 à 16:12
J'ai de très mauvais goûts je pense
Le design est surtout une question de culture.
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.
4  0 
Avatar de icexplorer
Membre habitué https://www.developpez.com
Le 05/07/2012 à 14:38
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...
2  0 
Avatar de FirePrawn
Expert éminent sénior https://www.developpez.com
Le 05/07/2012 à 14:54
Citation Envoyé par icexplorer Voir le message
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...
Dé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 efficace
2  0 
Avatar de dourouc05
Responsable Qt & Livres https://www.developpez.com
Le 05/07/2012 à 13:26
Citation Envoyé par VivienD Voir le message
D'autre part j'ai aussi remarqué que le texte "normal" (donc en dehors des titres de section et des emphases) et son fond devait avoir des couleurs dites neutres: moi-même j'ai dû mal à lire du texte qui n'est pas noir (d'une couleur très proche) sur un fond qui n'est pas blanc (d'une couleur très très proche).
Ç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 ).
1  0 
Avatar de yassiin
Membre à l'essai https://www.developpez.com
Le 05/07/2012 à 18:32
Au 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.
1  0 
Avatar de Scorpyosis
Membre confirmé https://www.developpez.com
Le 06/07/2012 à 8:39
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 !
1  0 
Avatar de rambc
Membre expérimenté https://www.developpez.com
Le 06/07/2012 à 12:16
Citation Envoyé par FirePrawn Voir le message
Je ne suis pas d'accord avec toi rambc.

Personnellement, je pense qu'il est plus judicieux d'avoir d'ores et déjà la maquette de son site avant de commencer quelques lignes de code que ce soit.
Ce n'est pas incompatible. Il faut faire les deux.

Citation Envoyé par FirePrawn Voir le message
Pour ce qui est de kuler : une fois que tu as choisi un thème couleur, tu as une icone sur la même ligne que le titre du thème qui te donne les codes associés (cf image jointe).
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.
1  0 
Avatar de Torgar
Rédacteur https://www.developpez.com
Le 03/07/2012 à 14:48
Citation Envoyé par FirePrawn Voir le message
Avez-vous déjà tourner en rond pour la création d'un design ?
Si oui, ces différentes étapes vous auraient-elles aidées ?
Et 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 conseils

0  0 
Avatar de bob633
Membre expérimenté https://www.developpez.com
Le 04/07/2012 à 9:10
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.
0  0 
Avatar de ibrakola
Membre averti https://www.developpez.com
Le 04/07/2012 à 13:49
un site "arc-en-ciel".
cette remarque m'a déjà été faite lors d'une de mes présentations de projet web en classe.
Merci pour ces conseils FirePrawn
0  0