[TUTO] Webdesign et bonne pratique (Théorie)

[TUTO] Webdesign et bonne pratique (Théorie) - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Art, graphisme, audio (https://jeuweb.org/forumdisplay.php?fid=50)
+--- Sujet : [TUTO] Webdesign et bonne pratique (Théorie) (/showthread.php?tid=4523)

[TUTO] Webdesign et bonne pratique (Théorie) - Thib4s - 10-01-2010

A. But du tutorial.
Le but de ce tutorial va être de vous donner les meilleurs bases possible pour entamer la création du design de votre site. Je sais que sa risque d'être long et ennuyeux à lire, mais vous verrez que vous aller gagner beaucoup de temps par après.

B. Le tutorial.
1. Avant tout.
Avant de commencer quoi que ce soit au niveau du code et du graphisme. Veiller à penser à tout ce que vous aller avoir besoin d'afficher. J'entend par la que vous devez vous poser des questions telle que "Est-ce que je dois prévoir un espace de connexion sur la page d'accueil?", "Est ce que je vais afficher de la pub?", etc ...
Une fois que vous avez penser aux éléments que vous voulez afficher sur vos pages, noter les sur un bloc et essayer de mettre par écrit vos exigences de manière simple et précise.

Code :
Page : Accueil

->News.

----> Titre+image

----> Pied pour les commentaires

->Menu

----> Sur la droite

----> En blocc

-> Header :

----> Lié au background

Vous allez comprendre pourquoi cette étape est importante

2. C'est parti pour l'esquisse.
Une fois la liste ci-dessus dressée, prenez une feuille blanche et un crayon et commencer un griffonnage vraiment simpliste et rapide de l'apparence de votre site. Ne craignez pas de mettre des détails telle que "padding 3px", "Gras", etc ... C'est dans cette étape que la liste créée va vous être très utile car elle va vous permettre de voir si vous n'avez rien oublier. Vous pouvez par exemple rajouter des OK a chacune des étapes que vous avez esquissée :

Code :
Page : Accueil

->News.

OK----> Titre+image

OK----> Pied pour les commentaires

->Menu

OK----> Sur la droite

OK----> En blocc

-> Header :

OK----> Lié au background

Vous devriez donc obtenir quelque chose dans le style de sa :
EXEMPLE RAPIDE D'ESQUISSE

3. Le template Photoshop
Alors là libre à vous de faire comme vous le sentez, certain font l'entièreté de la page sous PSD (moi avant) et puis intègre... D'autres(comme moi maintenant) commence a coder la structure globale du template sans images et les rajoute petit à petit... C'est une question de choix, d'habitude et d'envie, et surtout une question de cas car tous les templates ne se ressemblent pas.
Les avantages de la première méthode est qu'on à la vision concrète de ce a quoi va ressembler votre site, la deuxième a pour avantage de voir les contraintes de positionnement avant de passer du temps sur la création design tout en permettant aussi de simplifier la tâche graphique (certains éléments CSS prennent du temps à créer sur photoshop alors qu'ils ne prennent que quelque lignes en coding ...).
Les désavantages de la première méthode est que cela va vous prendre souvent du temps ... Les désavantages de la deuxième méthode est que vous ne savez pas a quoi vous attendre avant la fin et implique une forte connaissance de son XHTML/CSS.
En résumé :
METHODE 1 -> Lente mais précise, on créée tous des éléments ensemble et on a l'idée globale et concrète du template
METHODE 2 -> Plus rapide mais destinée au plus expérimenté, On crée chacun des éléments dont on a besoin les uns après les autres et de manière isolée.

4. Integration XHTML/CSS
Si vous avez suivis les 3 autres points à la lettre, vous ne devriez pas avoir de gros soucis. Néanmoins, il faut quand même respecter quelques règles indispensables à l'ergonomie et a l'accessibilité de votre template.
4.1 Regles d'ergonomie
- Essayer de créer un code hiérarchisé

Code :
<div id="all>

      <div id="header">

            <ul class="menu">

                  <li>...</li>

                  <li>...</li>

            </ul>

      </div>

</div>

- Eviter les balises inutiles

Code :
<div id="menu"><div id="first">First Menu</div></div>

METTRE A LA PLACE

<div id="menu first">First Menu</div>

- Coder logiquement : De Haut en bas et de gauche a droite.

4.2 Regles d'accessibilités
- Ne jamais remplacé par des images ce que l'on peut faire en CSS
--> exemple : pour les boutons, il vaut mieux faire une image arrière et mettre en forme le texte a l'intérieur plutôt que 5 boutons différents.
- Ne jamais remplacé par du javascript ce que l'on peut faire en CSS
--> exemple : les roll-over peuvent facilement être remplacé par :hover en CSS (exception avec netscape)
- Toujours tester son site sous tous les navigateurs...

5. Conclusion
Créer un template ne se fais pas sur un coup de tête, cela doit être réfléchi et étudier avant de se lancer ^^

Je vous remercie d'avoir lu cet article en entier et j'espère qu'il vous aura aider.
Je vous remercie d'avance aussi de m'indiquer si j'ai fais des erreurs ou si il y a des endroits ou la compréhension est difficile :S

Cordialement Thib4s

RE: [TUTO] Webdesign et bonne pratique (Théorie) - Reaven - 10-01-2010

Merci infiniment ! Ca m'a ouvert les yeux. Je constate que ma pratique est totalement mauvaise et je compte bien réctifier tout cela Wink

.

Encore merci pour ce magnifique article Smile

RE: [TUTO] Webdesign et bonne pratique (Théorie) - Thib4s - 10-01-2010

Il n'y a pas de bonne ou mauvaise méthode ^^
Tout dépend de comment on procède, de l'expérience qu'on a, de ce que l'on veut ^^
Ce tuto est plus un "Exemple de procédure" et ne s'applique pas a tout le monde.
ce n'est pas parce qu'on ne procède pas comme indiqué qu'on est dans le faux ^^

Cordialement Thib4s

RE: [TUTO] Webdesign et bonne pratique (Théorie) - Reaven - 10-01-2010

Non mais lorsque l'on procède totalement à l'inverse de ce qui est indiqué, c'est un début de mauvaise méthode Wink