[TUTO WEB] Création d'un site web, méthode + choix du style

Recherche :

Mot : Pseudo : Filtrer
Page : 1 2 Page Suivante Page Précédente Bas de page
Auteur	Sujet : [TUTO WEB] Création d'un site web, méthode + choix du style

an3k

powered on macintosh ^^

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 :

Citation :

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

Spoiler :

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)

Citation :

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).

Citation :

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

Citation :

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

Citation :

<!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

Citation :

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

Publicité

an3k

powered on macintosh ^^

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
http://www.colorschemer.com/

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
http://www.cssvault.com

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
mon préféré : http://www.realityslip.com/

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.
par les créateur du site précedent : http://www.realityslip.com/plur2k/hybrid.htm

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.
http://www.pixelsyndrome.com/

-----------------
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
http://www.voila.fr

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.
http://www.c1.citroen.com/

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).
http://www.cssbeauty.com

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....
http://www.an3k.com :sol: [:al zheimer]
http://www.metropro.com.mx

ect...

Mélangez les style, les formes et créez votre image.

________________________________________________________________

Le tuto, le vrai : :sol:
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.

Message édité par an3k le 21-08-2005 à 20:55:40

---------------
An3k.com Création de sites web - mon tuto

an3k

powered on macintosh ^^

Réservé

Message édité par an3k le 20-08-2005 à 19:16:36

---------------
An3k.com Création de sites web - mon tuto

TKG

Just a Sweet Transvestite...

Heureusement que j'aime pas le webdesign, j'aurais pas à tout lire [:itm]

an3k

powered on macintosh ^^

déjà un troll ?

---------------
An3k.com Création de sites web - mon tuto

Danamir_

kodama

A suivre avec intérêt. [:huit]

Skopos

:jap:

FlorentG

an3k a écrit :

Sommaire :

Citation :

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 :

Ayuget

R.oger

Code :

<div id="colone">
<ul id="colone">
<li>Acceuil</li>
<li>Services</li>
<li>Produits</li>
<li>Panier</li>
<li>Contact</li>
<li>Acceuil</li>
<li>Services</li>
<li>Produits</li>
<li>Panier</li>
<li>Contact</li>
</ul>
</div>

Erreur au niveau du code là.

Bonne initiative cependant.

an3k

powered on macintosh ^^

oui, j'ai pas mal de trucs à changer pour l'exemple, et je dois créer "mes explications"

---------------
An3k.com Création de sites web - mon tuto

Publicité

jirotoh

[:drapal] [:huit]

---------------
visit my portf o lio on jir o toh.com

skyh_ead

an3k a écrit :

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 :cry:
merci an3k :love:

Message édité par skyh_ead le 20-08-2005 à 17:19:39

an3k

powered on macintosh ^^

en dessous je vais faire un tuto approfondis sur les menus

---------------
An3k.com Création de sites web - mon tuto

jirotoh

tiens an3k tu pourrais mettre le motif que tu as utilisé pour faire les hachures pour le fond ?

merci :hello:

---------------
visit my portf o lio on jir o toh.com

an3k

powered on macintosh ^^

jirotoh a écrit :

tiens an3k tu pourrais mettre le motif que tu as utilisé pour faire les hachures pour le fond ?

merci :hello:

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

---------------
An3k.com Création de sites web - mon tuto

jirotoh

ok merci ! :jap:

(en fait je savais mais je trouvais que c etait une belle astuce a faire connaitre [:bap2703] )

---------------
visit my portf o lio on jir o toh.com

justeleblanc

an3k

powered on macintosh ^^

Mise en place d'un sondage

---------------
An3k.com Création de sites web - mon tuto

justeleblanc

premier vote [:volta]

an3k

powered on macintosh ^^

justeleblanc a écrit :

premier vote [:volta]

:jap:
j'espere en avoir pleing :bounce: :pt1cable: :whistle:

---------------
An3k.com Création de sites web - mon tuto

Skopos

a voté :jap:

skyh_ead

s'po fini je vote pas encore (mais où s'arretera t'il ?)

an3k

powered on macintosh ^^

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

---------------
An3k.com Création de sites web - mon tuto

an3k

powered on macintosh ^^

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 !

---------------
An3k.com Création de sites web - mon tuto

Natopsi

☄️Just end it already!☄️

[:blueflag] [:huit]
Bravo! [:acherpy]

---------------
⚡ACH/VDS⚡HFRCoin◈1435mm⚡

seb306bzh

très bon tuto :sol:

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

---------------
merci http://forum.hardware.fr !!

an3k

powered on macintosh ^^

seb306bzh a écrit :

très bon tuto :sol:

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

bien sur
bzh powaa [:bigbrother]

---------------
An3k.com Création de sites web - mon tuto

seb306bzh

an3k a écrit :

bien sur
bzh powaa [:bigbrother]

merki

c'est clair BZH powaaaaaaaa [:bigbrother]

---------------
merci http://forum.hardware.fr !!

an3k

powered on macintosh ^^

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 :miam: ) 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

---------------
An3k.com Création de sites web - mon tuto

skyh_ead

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 :whistle:
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.

an3k

powered on macintosh ^^

ouai c'est pour ca que je dois refaire... faut pas bosser avec la migraine ca rend pas bien
je metterais des exemples de menus, leurs atouts, leurs défauts et peut etre comment les faire ?

---------------
An3k.com Création de sites web - mon tuto

justeleblanc

bzh powa aussi alors

seb306bzh

justeleblanc a écrit :

bzh powa aussi alors

t'es d'ou ?

---------------
merci http://forum.hardware.fr !!

justeleblanc

rennes

kzimir

Très bon tuto !

---------------
Serre les fesses jusqu'en 2012...

seb306bzh

justeleblanc a écrit :

rennes

moi vannes

et toi t'es d'ou ?

va falloir faire un topic des bretons

HS OFF

---------------
merci http://forum.hardware.fr !!

gatsusat

skyh_ead a écrit :

si ton design est tout en vectoriel, tu n'as pas trop de souci si surtout tu utilises les CSS

an3k

powered on macintosh ^^

faut que je le finisse ce tuto... amsi j'ai du taff à la pelle là !

---------------
An3k.com Création de sites web - mon tuto

Publicité

Page : 1 2

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Graphisme

Cours

[TUTO WEB] Création d'un site web, méthode + choix du style

Sujets relatifs
[Avis] logo pour site de création graphique	[Blender] 1er création ....
de Autocad au Web	[Web]Charte graphique VTT freeride [MAJ]
site perso de mes dessins	avis d'amélirations d'un site
Un très bon logiciel de création de site ?
Plus de sujets relatifs à : [TUTO WEB] Création d'un site web, méthode + choix du style

Page générée en 0.169 secondes