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

Les rubriques (actu, forums, tutos) de Développez
Tags
Réseaux sociaux


 Discussion forum

Sur le même sujet
Le , par FirePrawn, Responsable Développement Web
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 ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de camus3 camus3
http://www.developpez.com
Membre Expert
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.
Avatar de Earered Earered
http://www.developpez.com
Invité de passage
le 05/07/2012 16:33
Citation Envoyé par FirePrawn  Voir le message
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.

Ça contredit un peu les résultat de cdiscount
cf l'audience sur le site de la FEVAD : http://www.fevad.com/

Un design lourd peut s'adresser à d'autres utilisateurs : myspace/skyblog vs Facebook (adolescents vs universitaire)

Être dû à une plus grande richesse : MyYahoo vs iGoogle

Le "less is more" de Sheena Iyengar a été invalidé (une hirondelle ne fait pas le printemps, son étude ne se généralise pas à tout)

cf . scheibehenne.de/ScheibehenneGreifenederTodd2009.pdf
Avatar de yassiin yassiin
http://www.developpez.com
Invité régulier
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.
Avatar de Astroneo Astroneo
http://www.developpez.com
Futur Membre du Club
le 06/07/2012 0:15
Bon les enfants c'étai très amusant, il va falloir retourner dans les musées d'Arts et d'histoire au moins une fois par an

Le Design de site Internet aujourd'hui grâce à la popularité du CSS au détriment de players plus avancés tels que flash, est revenu aux années 90 et impose un design minimaliste comme seul option. Ce qui donne aujourd'hui l'impression qu'on peux se passer d'un web-designer

Mais l'art de composer une accroche visuelle ne s'apprend pas en 10 minutes dans un article web ; la composition picturale a ses regles d'or à respecter, des mouvances de styles et une très longue histoire à connaitre , héritage multi-millenaire de "retour d’expériences utilisateurs" ( la grille date de l’époque des pharaons - allez au musée du louvre ^^). Designer est un métier à respecter qui s'apprend dans un monde à part ^^ et qui a autant de valeurs, d'efforts et de savoir-faire que le travail d'un ingénieur.

un site internet qui ne respecte pas les loi esthétiques du sens visuel est aussi impressionnant que la vitrine d'un magasin désordonné, sans enseigne, ni illustrations visuels, en somme sans crédibilité palpable dans sa présentation. Aussi histoire de faire bonne impression, respectez les arts comme les lettres :
un Web-designer n'est pas un logiciel en option mais un expert du sens visuel et Maître d'oeuvres dans l'illustration du message à faire passer. Lesson learned ?
Avatar de Scorpyosis Scorpyosis
http://www.developpez.com
Membre éprouvé
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 !
Avatar de rambc rambc
http://www.developpez.com
Membre Expert
le 06/07/2012 11:53
Je ne suis pas un professionnel du web donc je n'ai pas les moyens de me payer un webdesigner. Quant à payer un template, je n'ai jamais été convaincu par les templates proposés : pour ceux que j'ai vu, c'était d'un conformisme affligeant... Je ,ne connaissais pas http://dribbble.com . Je pense y piquer des idées car je n'ai pas envie de payer pour un template.

Revenons à l'article. Il manque un point impportant : avant toute élaboration d'un webdesign, il faut commencer par avoir un code HTML 5 qui fonctionne tout seul, une code HTML 5 organisé et cohérent (pour mon nouveau site web, je le développe sans CSS et même sans JS, puis ensuite je rajoute du CSS et du JS).

Je pense que l'on peut malgré tout faire des choses jolies à condition de ne pas partir dans des projets hyper ambitieux : les exemples du boncoin et e stackoverflow en sont la preuve. Souvent, on confond design avec surcharges d'ornements, ce n'est pas la même chose.

Pour finir, il ne faut pas oublier d'associer design et ergonomie : par exemple, un site proposant 3 thèmatiques bien distinctes pourra décider, ou non, d'associer une palette de couleurs pour chaque thème, permettant ainsi à l'utilisateur de "savoir inconsciemment" qu'il est en train de lire des pages sur la thématique qui l'intéresse.

A propos de kuler : a-t-on un moyen simple de récupérer les couleurs des thèmes ?
Avatar de FirePrawn FirePrawn
http://www.developpez.com
Responsable Développement Web
le 06/07/2012 12:09
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.

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).
Avatar de rambc rambc
http://www.developpez.com
Membre Expert
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.
Avatar de _skip _skip
http://www.developpez.com
Expert Confirmé Sénior
le 06/07/2012 14:16
Citation Envoyé par FirePrawn  Voir le message
Avez-vous déjà tourné en rond pour la création d'un design ?

Oui c'est vraiment un boulot, que j'ai malheureusement souvent très largement sous-estimé. Je connais les bases html/css, cependant je suis loin d'être un gourou en div flottante, et en "je fais s'aligner ce truc verticalement dans ce conteneur pis ça marche sous IE" .

La dernière fois que j'ai touché au web, j'ai créé une interface pour consulter et paramétrer les stats de mon applications. Franchement si le code serveur a été rapidement écrit, faire en sorte que ça ressemble à une vraie application moderne et pas à un truc de 1995 a été honteusement frustrant et chronophage.

On lit que déjà peu de personnes peuvent être de bons développeurs et peu de personnes peuvent être de bons designers. Donc que dire de ceux qui peuvent être ces 2 à la fois?

Comment commencer à placer son layout, comment faire pour que ce soit standard et bien compris, comment je fais que mon bouton soit un joli truc agréable plutôt que cette bouse ignoble toute droit sortie de Win 3.1? Mon salut a finalement été trouvé à travers le framework CSS bootstrap qui m'a fourni une base pour faire des prototypes qui ont un minimum de gueule en se basant sur des briques éprouvées et consistantes, et heureusement je m'en suis sorti avec quelques adaptations ad-hoc.

Donc je pense que faire du design web, passé un certain stade (qu'on atteint parfois plus rapidement qu'on le pense), c'est un boulot et faut accepter que ce soit une spécialité. Je peux lire tous les tutos photoshops, bonnes pratiques CSS etc... que je veux, je n'aurai pas pour autant le 6e sens qui permet de "sentir" que mélanger les couleurs, les bordures, les arrières plans de cette façon avec ces visuels là ce sera chouette. Je suis condamné à tâtonner le web pour trouver des recettes qui semblent efficaces, en évitant de tomber dans le repompage honteux et systèmatique.

Citation Envoyé par rambc
Je pense que l'on peut malgré tout faire des choses jolies à condition de ne pas partir dans des projets hyper ambitieux : les exemples du boncoin et e stackoverflow en sont la preuve. Souvent, on confond design avec surcharges d'ornements, ce n'est pas la même chose.

Alors bravo pour avoir choisi cet exemple, je suis très souvent allé sur stackoverlow via google et j'ai jamais pris le temps de regarder à quoi il ressemblait, il est effectivement très sobre et pourtant très efficace pour ce à quoi il est destiné.
Même s'il est vrai que ça ne pourrait pas forcément faire une bonne vitrine produit pour une entreprise.
Avatar de Lunixinclar Lunixinclar
http://www.developpez.com
Membre éprouvé
le 13/07/2012 3:59
Question épineuse.
Citation Envoyé par Scorpyosis  Voir le message
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 !

Oui c'est comme demander à Michael Schumacher de faire chauffeur de taxi. Ou inversement.

Chacun son métier le mien c'est le code rapide.

Ca n'empêche pas d'apprendre Gimp à côté c'est même indispensable, même si on n'a pas de talent ni de quoi se payer photoshop. Il faut du temps pour être bon c'est comme le tennis.

En agence web on travaille à deux ou plus: le graphiste crée une image à l'échelle 1:1 du site puis l'intégrateur HTML la transforme en HTML/CSS avant que les programmeurs intègrent le javascript/PHP/Python/AJAX/SQL et autres technologies de matheux qui sont de la science-fiction pour le graphiste ("l'artiste"). Il existe même un autre métier: administrateur système et/ou bases de données il maintient les machines et le serveur web ça aussi c'est un métier. La spécialisation les gars.

Ceci dit c'est le prix à payer pour un site pro et beau. Souvent on peut s'en sortir seul puis faire évoluer le site graphiquement. C'est là qu'il vaut mieux être programmeur. Vous vous souvenez à quoi ressemblaient à leurs débuts des sites très connus aujourd'hui? Rome ne s'est pas fait en un jour, c'est placer la barre très haut que de le vouloir.

Comme dit plus haut le mouton à 5 pattes n'existe pas,
malheureusement trop souvent c'est ce que recherchent les recruteurs et ils cherchent indéfiniment... Mais ce mouton serait sûr d'avoir toujours du boulot: un technicien qui fait le travail de cinq personnes! (mais pas 5 fois le salaire hein) Peut-être que c'est le niveau requis pour se prétendre "webmaster". Dans webmaster il y a master. Ah si les charges n'étaient pas aussi élevées ... On pourrait entasser 20 chinois dans une cave avec un peu de pain et Photoshop pour produire du design pas cher et au fouet. Et du coup avoir plus de temps pour optimiser/sécuriser le PHP car c'est bien l'objectif.

4:00. je retourne bosser.
Avatar de regis_f regis_f
http://www.developpez.com
Nouveau Membre du Club
le 13/07/2012 14:07
Depuis un an ou deux, je ne parle plus de "Web Designer" pour indiquer les Graphistes.

Je distingue clairement :
1- Le Web Developpeur : Qui est la personne qui aligne des codes de martien (pour citer ma femme)
2- Le Web Designer : Qui est la personne qui est chargée de l'architecture du site : Quoi faire ? Comment ? Dans quelles circonstances ? etc.
3- Le Web Graphiste : Qui est le concepteur graphique proprement dit
4- L'intégrateur : Qui transforme le travail du Web Graphiste en langage compréhensible pour le martien... heu... développeur.

Il est courant que l'intégrateur soit confondu soit avec le graphiste soit avec développeur soit les deux.

Il m'est arrivé de faire les quatres tafs (je suis développeur à la base) et ce n'est pas une sinécure.

Je milite clairement pour une franche séparation du travail tout en pensant qu'il faut avoir fait l'ensemble des postes pour en connaître toutes les contraintes.

D'autant plus que les graphistes tout frais émoulu de l'école s'aventure en indépendant à concevoir des sites en ne pensant que templates. C'est le carnage assuré. Mais le client est content, il préfère payer un site 2000 € plutot que 120.000 € voire même certains veulent un site qui normalement coute 120.000 pour 2.000 mais c'est une autre histoire.
Offres d'emploi IT
Développement informatique h/f
Stage
Société Générale France - Ile de France - Paris La Défense
Parue le 07/10/2014
Audit Interne des Systèmes d'Information
Stage
Société Générale France - Ile de France - Paris La Défense
Parue le 23/10/2014
Développeur Ruby (ROR) sénior
CDI
Mobiskill - Ile de France - Paris (75002)
Parue le 15/10/2014

Voir plus d'offres Voir la carte des offres IT
 
 
 
 
Partenaires

PlanetHoster
Ikoula