Le webdesign : réalisation et contraintes

Le WebDesign est une activité artistique propre à la création d'un site Internet, certes mais comment réaliser un design web qui respecte toutes les contraintes ? que doit on prévoir ? Jusqu'où peut on aller ? quels sont les outils appropriés ? autant de questions auxquelles je vais donner MA réponse personnelle du point de vue subjectif de MON avis !

Petit sommaire ....

• Les outils disponibles
• A quoi doit on se préparer ?
• La vue en 3 dimensions du design
• Ressources pour webdesigner
• Découpe d'un design
• Comment l'optimiser ?

Petite introduction pour comprendre ce qu'est AU FINAL un webDesign ...
C'est un ensemble d'images qui une fois collé les une autres, a la manière d'un puzzle, forme le dessin d'un site web ...
Les outils disponibles
Il existe une multitudes d'outils disponibles pour réaliser l'interface graphique d'un site web, mais le plus fiables reste le plus connus ... Photoshop ! A ma connaissance aucun logiciel n'offre autant de possibilités que photoshop pour réaliser votre design (encore que 90% des possibilité ne sont pas exploitées)
Le système de calques et d'options de fusions et les filtres permettent, en les combinant d'obtenir n'importe quel aspect graphique je voie cela comme un mot de passe de 1 milliard de caractères qu'on essayerais de trouver ...
Pour vous faire une idée visitez CSS MANIA qui propose une liste de plus de 7 500 design étonnant ...
A quoi doit on se préparer ? Lorsque vous préparez un design vous devrez penser a toutes les pages en même temps car il est essentiel de pouvoir obtenir un résultats final cohérent ...
Ainsi on devra avoir la même largeur de page sur tous le site ou encore respecter un code coloriel fixe (pas plus de 2 à 3 différentes, jouez ensuite sur les teintes )
Pensez aussi a comment vous allez découper votre design pour que celui ci puisse être exploitable.
Par exemple, ne tentez de choses trop farfelues ou extravagantes pour le design d'un site hyper dynamique qui contiendra de nombreuses page différente (site de e-commerce, site immobilier ...)
Ressources pour webdesigner Pour votre future interface vous devrez aussi avoir besoin de centaines d'objets (bouton, fond de page, bordure, effets de texte, cadres ect..)
Si vous ne savez pas designer , il vous possible d'utiliser la multitude de ressources disponible sur la toile et piocher a ici et la ce dont vous aurez besoin ...
Je vous invite encore a consulter cette liste de 15 outils qui peuvent palier a un manque de connaissance en web design.
La vue en 3 dimensions du design Plus profedement, on peut analyser le design de manière différente ...  Pour moi Le graphisme du site web doit être vue en 3 dimensions , Il aura forcement une largeur, une hauteur ... mais il faut pensez a sa profondeur , c'est a dire a la superposition des éléments...
Tout bêtement en ajoutant un bouton sur un fond de page vous superposez sans le vouloir 2 objet non ?!?
Et pensez , prévoyez et imaginez en fonction de cela , comment seront position les éléments sur votre page... comment se comporteront ils ? comment les textes et images externes s'y grefferont ? sont autant d point auxquelles vous devrez faire attention ... Je tente un explication par l'image ...
Voici une tentative de vue d'un design incliné ...
Découpe d'un design Comme je l'ai dit précédemment, un web design est en faite un puzzle qu'il faut reconstruire grâce au css et au (x)Html ...
Un élément ne peut être que rectangulaire ou carré, il est impossible d'avoir une image ronde !!! pourtant les angles arrondis sont fréquent sur le net ... il suffit de générer des images au format PNG ou GIF avec un fond transparent qui comblera l'espace supplémentaire entre l'angle arrondi et le carré de support ...
Exemple :
  
Ici les zones transparentes ont étaient remplacées par du gris ... on voie bien qu'au finale l'image est carré (avec ou sans le gris)
Et chaque image doit avoir cette forme (de toutes façons vous n'aurez pas le choix...
En définitif en regroupant toutes vos image ainsi et les positionnant aux bons endroits vous arriverez a cela :
 
Comment l'optimiser ?
Les images sont toutes créer, vous avez même reconstruit celui ci en xHTML et c'est tout beau, tout propre :D
Mais vous remarquez que l'affichage est est bien lent ...
Vous n'avez pas optimisez votre design pour une intégration web !!!
Vérifiez que vous images sont en mode de couleur RVB 8bits pour une résolution de 72 dpi.
Pour l'enregistrement de vos images sous photoshop (je ne parle que de ce que je sais) utilisez :
Fichier > Enregistrer pour le Web
Comme d'habitude... je reste ouvert a toutes les remarques ou suggestion :D