Création d'un site web, méthode + choix du style [TUTO WEB] - Cours - Graphisme
Marsh Posté le 20-08-2005 à 00:24:38
Comment donner du style à sa page web ?
Récapitulatif :
Les couleurs
Vous n'arrivez à rien avec les couleurs ? Vous vous sentez daltoniens du clic ? Plusieurs sites peuvent vous aider à choisir, c'est une question de pratique.
Citation : Je vous en donne un, il y en a des tas, à voir sur google |
Les polices d'écriture
Il faut prendre des polices compatibles sur toutes les plates-forme. On préfèrera des polices simples, classiques du genre arial, verdana, times, times new roman... c'est selon le style de la page et au feeling. Moi je choisis généralement verdana, mais georgia, times new roman c'est assez sympa je trouve dans les sites de couleurs claires. polices à bannir : les polices fantaisies genre comic sans ms, ca donne un style vraiment amateur.
Le style (en lui meme)
On distingue dans le webdesign plusieurs styles dans les formes, la présentation, l'organisation, la taille.
Je vais essayer de détailler tout ce qu'il me passe par la tête (les autres webdesigners, je compte sur vous pour complèter la liste), avec un exemple.
Le style trash
Citation : C'est un style qui va avec mode du dark/gore/jackass ( c'est comme ca que je le défini). Le principe est de créer des images brouillée, salies, vieillies avec les brush des logiciels de retouche. |
Le style clean
Citation : C'est l'inverse du style trash, il est à la mode chez les développeurs CSS, ca ressemble presque à du dessin technique, tout est bien carré/oragnisé, très compliqué à définir puisque ce style a pris des centaines de directions |
Le style technique
Citation : C'est un style qui utilise beaucoup d'images, il est associé à un style d'infographie très moderne/futuriste à la sauce Troidé et StarWars il faut avoir un sacré niveau en inforaphie pour réaliser ces sites |
Le style aqua
Citation : Rappellant les interfaces de linux et mac os9, il est bien usité (oh je parle bien!) dans le monde du libre. le principe est de donner des effet de 3D avec de la 2d et des dégradés. |
Le style pixel art
Citation : Très à la mode il y a quelques années, lorsque tout le monde passait au 1024, qu'on avait des ordinateurs de plus en plus puissants, avec des cartes graphiques qui commencaient à bien en jeter, beaucoup on eu la nostalgie de la superNES et ont créé des infographies/illustration sur paint avec des effets lcd. le principe : tout faire avec l'outil crayon. |
-----------------
Le portail
Citation : non il ne sagit pas d'une forme de site avec des portes de jardin, mais de gros sites contenant beaucoup d'informations, généralement (quasi obligatoirement) élaborés avec des lagages dynamiques type PHP ou ASP. Ce genre de sites est assez réstrictif dans les formes : un menu à gauche, une banière, le conten u au milieu |
Le mini-site
Citation : C'est des petits sites souvent en flash qui sont un peu comme des pubs TV : petit dans le contenu, souvent en flash. Notement utilsés pour présenter un produit ou une gamme de produits. |
Le blog
Citation : Issu de la mode des blos que tout le monde connais, ce sont des sites qui présentent l'information en hauteur, assez souvent fins, ce sont des petits portails (c'est cette forme que j'ai utilisé plus haut). |
Le portfolio
Citation : Tout le monde connais, pas besoin de s'étendre. Ce sont des galeries améliorées pour montrer ses oeuvres, productions ect.... |
ect...
Mélangez les style, les formes et créez votre image.
________________________________________________________________
Le tuto, le vrai :
Pour moi, la navigation, donc le menu, est l'éléments principal du site. Le menu, par sa forme, sa taille, son style va définir le reste. Il faut donc s'appliquer.
Les technologies pour les menus : FLash, CSS, JavaScript et html simple.
Le menu : Quelle forme choisir ? Horizontal ou vertical ?
Beaucoup de catégories (portail) ? le choix sera vertical, sauf si on peut opèrer à plusieurs subdivisions, dans ce cas on peut se permettre un menu horizontal à plusieurs niveaux, mais c'est pas super pratique à l'usage.
Peu de catégories ? il faut maintenant avoir une idée du rendu final : est-ce que on va avoir une ou plusieurs colones ? Si on a du contenu qui permet de faire une mise en page assez graphique, avec des cadres, une image+ du texte + un titre, on peu choisir une colone, ca ne fera pas vide, en revanche pour un contenu un peu monotonne, qu'on ne peut organiser sans plus, on préfèrera plusieurs colones pour éviter le vide, avec le menu dans les colones (blogs). On pourra également faire un mix des deux : le menu principale dans la banière en haut, et un autre pour des trucs moins importants dans une colone.
On évitera les menus dépliants, ils sont assez chiants à personaliser, donc difficiles à intègrer parfaitement.
La banière : attaché ou détaché de notre menu ?
Le reflexe, c'est souvent de faire comme un portail, une banière en haut, son menu à gauche, mais ou est le style ?
je n'aime pas personnellement les bannière seules qui font la largeur du site, ca fait m'as-tu-vu ? (après y'a des designer qui sont très convaincants et qui arrivent à faire changer d'avis. c'est plus une histoire de feeling.) j'aime créer un menu dépendant de son logo, lui meme dépendant de la bannière et vice-versa, en créant des barres horizontales ou verticales pour les relier, avoir un fond commun (cherchez des exemples). je crée un logo discret, avec le nom du site qui ne dépasse pas la taille du logo.
Vous êtes débutants complétement ?
Je vous conseille de faire le menu et le logo ensemble. soit toute la largeur du site en haut avec le logo à gauche ou à droite, et le menu sur le reste de la banière. soit en haut d'une colone le logo et juste en dessous votre menu (annimé très simplement : une petite fleche qui apparait au survol ?). vous pourrez comme ca très facilement crer un logo avec un menu qui vont ensemble.
je metterais ce tuto à jour avec des images, des exemples. il faut que je navigue un peu pour préparer ca.
________________________________________________________________
Mot de la fin :
Aucun cours ne vous fera devenir bon, il faut s'inspirer et pratiquer pour avoir un style cohérent et une pratique des couleurs. N'hésitez pas à regarder de beaux sites et à s'en inspirer, il n'y pas de mal à ca surtout au début. l'important c'est de ne pas copier, on ne progresse pas en copiant. interressez-vous surtout aux menus.
Marsh Posté le 20-08-2005 à 02:02:47
Heureusement que j'aime pas le webdesign, j'aurais pas à tout lire
Marsh Posté le 20-08-2005 à 11:39:33
an3k a écrit : Sommaire :
|
L'Xhtml est effectivement à faire tout d'abord. Le mieux, c'est de faire 100% du site sans aucune présentation. Puis tester, surfer dessus, vérifier que tout fonctionne et est accessible sans images et sans CSS ni JavaScript. Après, on peut se lancer dans la partie CSS
Exemple connu :
Marsh Posté le 20-08-2005 à 12:01:49
Code :
|
Erreur au niveau du code là.
Bonne initiative cependant.
Marsh Posté le 20-08-2005 à 17:19:24
Moi ce que j'aime c'est la partie "elaboration du psd"
Puisque les idées ca se trouve, le code bah c'est "que" du code, ca se trouve/change facilement/s'apprend mais alors le design
merci an3k
Marsh Posté le 20-08-2005 à 19:16:47
tiens an3k tu pourrais mettre le motif que tu as utilisé pour faire les hachures pour le fond ?
merci
Marsh Posté le 20-08-2005 à 19:30:01
jirotoh a écrit : tiens an3k tu pourrais mettre le motif que tu as utilisé pour faire les hachures pour le fond ? |
j'ai utilisé une "pattern" avec le seau de peinture.
> création d'une nouvelle image 5px / 5px
> avec le crayon on crée une diagonale
> edition > define pattern (en anglais)
> on retourne dans son image
> pot de peinture > pattern (en haut à gauche) > sélectionner la pattern
Marsh Posté le 20-08-2005 à 21:25:22
ok merci !
(en fait je savais mais je trouvais que c etait une belle astuce a faire connaitre )
Marsh Posté le 21-08-2005 à 19:34:49
justeleblanc a écrit : premier vote |
j'espere en avoir pleing
Marsh Posté le 21-08-2005 à 20:21:03
bah c'est un cours complet pour styliser sa page, j'en ai vu nulle part, et j'ai l'impression que certains en ont besoin. ca permet de sauter des étapes (celle du linchage publique sur HFR par exemple )
je devrais faire prof tient ! lol
Marsh Posté le 22-08-2005 à 12:17:30
très bon tuto
tu pourrais m'en dire un peu plus sur le decoupage du psd ?
la j'ai fait une maquette mais je vois pas comment faire
Marsh Posté le 22-08-2005 à 12:27:53
seb306bzh a écrit : très bon tuto |
bien sur
bzh powaa
Marsh Posté le 22-08-2005 à 12:30:23
an3k a écrit : bien sur |
merki
c'est clair BZH powaaaaaaaa
Marsh Posté le 22-08-2005 à 12:33:52
j'utilise l'outil tanche (slice tool).
j'imagine comment je peux mettre en page avec les tableaux ou les css et je découpe en fonction. j'essaie d'avoir le moins d'images possible donc je rgroupe des parties. (c'est là qu'on voi à quoi sert de faire un croquis ) je découpe les parties qui seront utilisées en fond le plus petit possible. tu verras très vite le fonctionnement avec l'outil tranche > apres tu envois dans image ready et tu exportes.
si tu veux un conseil montre moi ta maquette, je pourrais plus t'aider
Marsh Posté le 22-08-2005 à 12:56:44
an3k a écrit : tuto fini. il se peut juste (en fait dans ma tete c'est sur) que je refasse la fin qui parle des menus car j'en suis pas du tout satisfait ! |
la partie sur la banniere detachée du logo détachée du menu, j'ai rien compris
Moi je veux bien qu'on me dise que c'est pas le mieux de tout faire attaché mais le problème c'est qu'après souvent on voit pas comment faire pour faire plein de morceaux et garder de la coherence.
Disons que j'ai voté c'est utile, mais que la derniere partie est un peu plus theorique que pratique (il faut pas faire çà, mais çà, oui mais comment ?)
Enfin apres c'est ptet aussi parce que je suis pas trop debutant et que je conaissais un peu ce que t'as dit.
Marsh Posté le 22-08-2005 à 17:13:20
justeleblanc a écrit : bzh powa aussi alors |
t'es d'ou ?
Marsh Posté le 22-08-2005 à 22:26:51
Très bon tuto !
Marsh Posté le 23-08-2005 à 12:03:41
justeleblanc a écrit : rennes |
moi vannes
et toi t'es d'ou ?
va falloir faire un topic des bretons
HS OFF
Marsh Posté le 08-09-2005 à 08:28:12
skyh_ead a écrit : Moi ce que j'aime c'est la partie "elaboration du psd" |
si ton design est tout en vectoriel, tu n'as pas trop de souci si surtout tu utilises les CSS
Marsh Posté le 20-08-2005 à 00:24:27
Ce tuto s'adresse aux webdesigners occasionnels, qui souahitent avoir un site un peu plus élaboré, avec une interface plusa accrocheuse.
Sont déjà en place : la méthode et le "cours" sur les style. Je dois refaire le tuto sur les menus et bannières, voire développer complètement sur la navigation.
I > L'exemple : création d'un site, la méthode
II > Les cours : comment donner du style à sa page ?
Les cours c'est bien, un exemple c'est mieu !
j'espère que je serais assez pédagogue.
Nous allons faire ici un site, avec mise en page en css.
Sommaire :
0. On se pose les prèmieres questions
1. Elaboration d'un croquis papier pour la navigation
2. Choix des couleurs + Choix des polices + Choix du style
3. Elaboration d'un logo
4. Création de la page xhtml (maintenant ou après les découpages, je le conseille au début mais en général je le fait à la fin ! faite ce que je dis, pas ce que je fais)
5. Elaboration du Psd
6. Découpage du Psd
7. Création du CSS
Je suis en train de faire un site, il sagit en réalité d'une refonte, donc j'ai déjà un un logo et des textes, mais je vais en mettre des bidons. L'exemple montrera la création de ce site. Il se peut que j'oublie quelque chose, ce n'est pas fixé !
Les quesitons
- Quel est le sujet du site ? (influera la création du logo, des couleurs, la police)
Ici c'est un site de vente de produits de décoration orientaux :
> logo : caligraphie orientale
> Couleurs : chaudes, sesk (heu non pas sesk ! je me perd, c'est la chaudeur !) couleurs chaudes = orange, rouge, bordeau
> Polices : je ne fais pas de fantaisies, arial, verdana...
- Quel est la philosophie associée au site ? (ilfluera plutot sur le style du site : pas de trash pour un site institutionel, mais pour un site de sport extreme, la police).
Vendre, il faut quelque chose de classique niveau design, mais comme ca parle de déco on a le droit à un peu de fantaisies comme du trash, ou une navigation spéciale.
> 2 niveaux de menu : un pour la navigation générale (acceuil, contacts...) l'autres pour les produits
- Faut-il créer un seul CSS ou plusieurs ? (les catégories vont-elles ensemble ? peut-on les séparer ?)
dans mon cas j'aurais pu. mais je ne veux pas me prendre la tête, j'aimerais finir ce site dans la nuit ! je changerais juste une image dans la navigation
Le croquis
j'ai pas de scanner mais ca sera : un grand menu en haut avec une image, un menu texte à gauche, et le contenu à droite.
Choix des couleurs, du style, des polices
plus N&B
le style, c'est celui qui est "à la mode" dans le design CSS. J'aurais bien fait du trash mais je le sens mal, c'est assez délicat pour un site de vente.
exemple : http://colorschemer.com/
en trash ca aurait été plus ca : http://www.lanuovavela.com/
Le logo
Le xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site.com</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="conteneur">
<div id="logo">Site.com</div>
<div id="navigation">
<ul id="menu">
<li><a href="#">Acceuil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Panier</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="colone">
<ul id="colone">
<li>Lampes héné</li>
<li>Lampes calligraphiées</li>
<li>Lampes vieillies</li>
<li>Applique</li>
<li>Plafonnier</li>
<li>Lampes en os</li>
</ul>
<ul id="colone">
<li>Vases</li>
<li>Assiettes</li>
<li>Tajines</li>
<li>Boites</li>
<li>Bougeoirs</li>
<li>Cendriers</li>
<li>Théières</li>
</ul>
<ul id="colone">
<li>Accessoirs de bureau</li>
<li>Boites et coffrets</li>
<li>Objets et tables</li>
<li>Jeux de société</li>
</ul>
</div>
<div id="corps">
<h3>ACCEUIL</h3>
<div id="bloc">
<h2>Titre</h2>
<p>Cras egestas nulla nec sapien. Aliquam nulla erat, suscipit non, porttitor at, rutrum in, eros. Vestibulum rutrum porta quam. Mauris vehicula. Phasellus quis enim. Quisque eget justo. Maecenas pulvinar vestibulum orci. Nunc ante orci, laoreet vitae, egestas in, ultrices quis, tellus.</p>
</div>
<div id="bloc">
<h2>Titre</h2>
<p>Cras egestas nulla nec sapien. Aliquam nulla erat, suscipit non, porttitor at, rutrum in, eros. Vestibulum rutrum porta quam. Mauris vehicula. Phasellus quis enim. Quisque eget justo. Maecenas pulvinar vestibulum orci. Nunc ante orci, laoreet vitae, egestas in, ultrices quis, tellus.</p>
</div>
<div id="bloc">
<h2>Titre</h2>
<p>Cras egestas nulla nec sapien. Aliquam nulla erat, suscipit non, porttitor at, rutrum in, eros. Vestibulum rutrum porta quam. Mauris vehicula. Phasellus quis enim. Quisque eget justo. Maecenas pulvinar vestibulum orci. Nunc ante orci, laoreet vitae, egestas in, ultrices quis, tellus.</p>
</div>
<div id="bloc">
<h2>Titre</h2>
<p>Cras egestas nulla nec sapien. Aliquam nulla erat, suscipit non, porttitor at, rutrum in, eros. Vestibulum rutrum porta quam. Mauris vehicula. Phasellus quis enim. Quisque eget justo. Maecenas pulvinar vestibulum orci. Nunc ante orci, laoreet vitae, egestas in, ultrices quis, tellus.</p>
</div>
</div>
<div id="pied">
<p id="bottom" class="footer">Site.com | <a href="http://validator.w3.org/check?uri=referer">xhtml</a> | css © 2005 - An3k</p>
</div>
</div>
</body>
</html>
Elaboration du psd
600x500 px j'ai choisi une bande fine, avec un fond un peu plus élaboré pour.
- création du fond :
- création du header (chapeau) avec la navigation du premier niveau :
bon je vais garder ca pour le tuto, c'est simple.
je vais mettre un rollover pour le menu. vous voyez j'espere à quel point votre menu est la base de votre site. c'est vraiment le menu+baniere qui va donner du caractère à la présentation, c'est donc sur cela qu'il faut s'appliquer et le reste sera pardonné.
Decoupage du psd
Création du css
body {
background-color: #330000;
background-image: url(images/fond.jpg);
color: #990000;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
}
a {
color: #990000;
text-decoration: underline;
}
a:hover {
color: #000;
text-decoration: none;
}
h2 {
font-size: 13px;
font-weight: bold;
letter-spacing: 3px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 2em;
padding: 0;
}
h3 {
font-size: 16px;
font-weight: bold;
letter-spacing: 2px;
margin-bottom: 3px;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
}
ul#menu
{
margin: 0px;
padding: 0px;
margin-top: 118px;
list-style-type: none;
text-align: center;
font-size: 13px;
font-family: Georgia, Times, Serif;
}
ul#menu li a
{
float: left;
display: block;
width: 100px;
height: 62px;
padding-top: 20px;
color: #000;
text-decoration: none;
background: url(images/roll.jpg) no-repeat 0 0;
}
ul#menu li a:hover
{
background: url(images/roll.jpg) no-repeat 0 -82px;
text-decoration: none;
}
#conteneur {
background-color: #ffcc33;
margin: 0px;
padding: 0px;
width: 550px;
}
#logo {
position: absolute;
background-image: url(images/logo.jpg);
background-repeat: no-repeat;
left: 0px;
height: 144px;
width: 150px;
}
#navigation {
position: absolute;
left: 150px;
height: 200px;
width: 400px;
background: url(images/baniere1.jpg) no-repeat 0 0;
}
#colone {
margin: 0px;
padding: 0px;
width: 150px;
float: left;
padding-top: 144px;
}
ul#colone
{
margin-left: 10px;
margin-top: 10px;
padding: 0px;
list-style-type: none;
}
#corps {
padding-top: 200px;
padding-left: 150px;
}
#pied {
text-align: center;
clear: both;
}
Voilà, il reste des petites améliorations au niveau des textes.
on va passer à ce qui est vraiment important : comment donner du style à sa page web ?
Message édité par Skopos le 07-01-2011 à 16:18:22
---------------
An3k.com Création de sites web - mon tuto