S'inscrire |

 
Avatar de Dalu
Dalu est déconnecté Sexe Non renseigné 04/07
XP de Dalu 29 Nombre total de messages de Dalu
Voir le compte DeviantART  de Dalu
Petit-posteur
  #1 (permalink)  
Vieux 09/12/2007, 14h03
Bien ! conception d'un design et de son codage!

Bonjour,

Ouvrez bien grand vos yeux parce qu'il va y avoir du texte à lire la

Ici cela va être plus de texte que de belle image mais pour au final réussir à faire un beau design tout propre et tout coder facilement 

Bon, commençons par le début du début .
PS: ce qui va suivre est très important, le plus important de toute les choses que l' on va raconter par la suite.



1. Tout d' abord qu' est ce qu' un design ?
Pourquoi ce mot ?
Que signifie t-il ?
UN DESIGN est le mélange entre l’industrie et l’art.

En effet, on appelle beaucoup des choses, comme refaire son appartement c’est refaire le design des murs etc., et bien c’est vrai.

Mais pourquoi appeler "faire un design de site" et pas un autre mot ?
Effectivement, je ne sais pas pourquoi l’on dit cela et comment ce mot est rentrer dans la tête de tous le monde (y compris moi Lol).
Le véritable mot serais "faire une interface graphique de site".

Maintenant que vous savez un peu l' origine d'un design de site nous allons parler d'un peu a quoi sert une interface graphique de site.


2. A quoi sert un design ?
Pourquoi en faire un ?
Est ce vraiment utile ?

Un design sert en faite a présentez un site sous forme d’interface graphique et non d’écriture présentez en "justifier", Lol ou autres bêtises.
Un design sert à faire appréciez votre site des visiteurs.
Les visiteurs aiment les belles choses et si vous ne faite rien, un visiteur peu complètement zapper votre page web et ne plus y retourner.

Mieux vaut avoir un bon design .

Comme je vous l’ai dit un peu plus haut, les designs servent a accueillir les visiteurs sur votre site pour qu’ils puissent voir le contenue de tous cela sans trop se fatiguer les yeux. Personnellement, sans un design correct je ne mettrais plus les pieds sur un site et ne lirais même pas le contenu.
Vous n’êtes pas obliger d’en faire un, mais sachez que si vous voulais accueillir beaucoup de visiteurs, faisait en un
.

Nous avons un peu abordé le sujet, "quels sont l’intérêt des designs", mais maintenant intéressons nous, "aux règles d’or", de la construction d’un design.

3. Comment faire un design bien réussit ?
Quels sont les bases, les règles ?!
Faut t-il savoir utiliser un soft 2D pour en faire un ?

Mes chers amis, pourquoi t’en de questions, bon, abordons les petit à petit.
Comme vous me l’avez demander, oui il existe bien des règles a savoir pour bien réaliser un design.
Tous d' abord, un design doit refléter le contenu de votre site. C’est bien cela le problème la plupart des designs que j' ai vu ne reflète pas du tout le contenu de leurs site et j' avais du mal a savoir se que pouvez contenir le site en général.

ON DOIT POUVOIRS SAVOIR CE QUE PARLE LE SITE EN GENERAL RIEN QU EN REGARDANT SON DESIGN.

Le site et le design doivent être lier ensemble. C’est très important. Deuxième point, avant de faire quoi que ce soit, il faut AVOIR UN IDÉE bien précise de se que va PARLER VOTRE SITE. Sans idée, pas d’imagination et donc, pas de bon design.

Troisième point, l’ergonomie. Avant de se mettre au boulot, soyez bien organiser et travaillez impérativement en premier temps avec sa feuille de papier et son crayon, comme sa vous pouvez gommer et vous aurait une meilleur imagination. Le soft 2D ne fais pas tout, c’est que qu' il y a dans la tête qui compte.

Quatrième point, choix des couleurs, filtres, brushs, taille, etc.
Pour commencer, vous ne devez en aucun cas choisir plus de 3 couleurs pour votre site, 2 couleurs suffisent amplement. Choisissez une couleur chaude ou froide a votre choix, et une couleur intermédiaire (gris, blanc, noir).VOUS NE DEVEZ PAS CHOIR UNE COULEURS CHAUDE ET FROIDE, car sa risquerais d’être vraiment pas agréable a l' œil. Il faut que votre œil reste cool et c’est pour cela que l’on choisit une couleur intermédiaire. Bien sur vous pourrez jouer sur votre couleur que vous avez choisis en la rendant foncé, clair etc.
PS: il est vraiment conseiller de pouvoir mélanger le clair et le foncé dans un design pour que cela fasse plus pro.

Bon pour les filtres, que se soir bien clair, on ne doit pas en utiliser plus de 2 (y compris LES OPTIONS DE FUSION), les brushs, pareille 1 ou 2 maxi. Car vous ne devais pas surcharger votre design de chose vraiment inutile, l’œil n’apprécierais pas. Il faut que votre design soit SOBRE, c’est un terme que j’utilise souvent, un design doit être sobre (faire pro), simple, pas trop surchargé.
La taille de votre image doit être 1024*768, avec le fond.
Cinquième point, le soft 2D. Ah oui le soft, comment pourrais-je l’aborder. Oui effectivement il faut savoir bien utiliser un soft 2D pour faire des images (EX: Photoshop, CS, CS2, bientôt CS3 [payant] ou The Gimp[gratuit]).Mais rappeler vous, tous viens de la tête et non du SOFT 2D. Le soft 2D n’est là que pour exécuter les ordres que vous lui demandais de faire. Il est quand même conseiller de savoir en maitriser un.
Sixième point, mascotte ou logo. Parfois, un site dois se différencier des autres sites ou se représentez. C’est pour cela qu’un logo ou une mascotte est conseillé. ATTENTION, elle aussi ou lui, doit s’accorder parfaitement avec le design et le contenu du site. Vous devez choisir la même couleur (chaude ou froide?) que votre design.

Voilà les règles sont approximativement toutes dites. Nous allons aborder maintenant une étape qui sera peut être très embêtante pour vous.
« Découpage et codage d’un design ». La partie la moins intéressent selon moi .

4. Cette partie est une annexe, je vais vous apprendre à découper et coder un design simple sans prises de tête. Parce moi je déteste mettre pleins de temps pour cette partie mais il faut bien y passer .

1, DECOUPAGE (aide à la rédaction du « codage » avec bmatthieu) :

Une fois votre design fait, vous découper votre design. Pour cela je vais faire un Exemple avec un des design que j' ai fait. Je découpe mon design en 4 parties:

http://i13.servimg.com/u/f13/11/09/14/87/design13.jpg

Voici les 4images plus précise (oui 4).

BANNIERE:
bannie10 - Servimg.com - Free image hosting service

MENU HORIZONTALE:
menu10 - Servimg.com - Free image hosting service

EXTENSIBLE (l' image qui va se répéter en fonction du texte que l' on va mettre dedans):
extens10 - Servimg.com - Free image hosting service

PIED:
pied10 - Servimg.com - Free image hosting service

Une fois le découpage fait, nous allons coder.

CODAGE XHTML/CSS:
Pour cette partie, il est préférable d’avoir un minimum de connaissance en XHTML/CSS.
Nous allons avoir besoin de 2fichiers (html et css).

INDEX.HTML:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Matthieu' s blog - Accueil</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
   <body>
		<div id="global">
		
			<!--BANNIERE-->
			<div id="banniere">
			
			</div>
			
			<!--MENU-->
			<ul id="menu">
				<li><a href="*.html">Accueil</a> |</li>
				<li><a href="*.html">Création</a> |</li>
				<li><a href="*.html">Forum</a> |</li>
				<li><a href="*.html">Livre d' or</a> |</li>
				<li><a href="*.html">Inscription</a> |</li>
				<li><a href="*.html">Connexion</a></li>
			</ul>
			
			<!--CORPS-->
			<div id="corps">
			<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
			At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
			sed diam voluptua.</p><br /><br />
			<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
			At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
			sed diam voluptua.</p>
<br /><br />
			</div>
			
			<!--PIED-->
			<div id="pied">
			
			</div>
			
		</div>
   </body>
</html>
/*//////////////////////////code by bmatthieu3//////////////////////////*/
DESIGN.CSS:

Code:
/*//////////////////////////LE DESIGN//////////////////////////*/
/*//////////////////////////LE DESIGN//////////////////////////*/
*
{
margin:0;
padding:0;
}
body
{
font-family: "Arial", sans-serif;
font-size: 13px;
background-color: #212121;
}
a
{
text-decoration:none;
}
/*//////////////////////////GLOBAL//////////////////////////*/
div#global
{
width:838px;
background: url("http://www.infographik.fr/images/extensible.gif") repeat-y;
margin:auto;
}
/*//////////////////////////BANNIERE//////////////////////////*/
div#banniere
{
height:207px;
background: url("http://www.infographik.fr/images/banniere.gif") no-repeat;
margin-top:50px !important;
}
/*//////////////////////////MENU//////////////////////////*/
ul#menu
{
height:50px;
background: url("http://www.infographik.fr/images/menu.gif") no-repeat;
text-align:center;
}
ul#menu li
{
display:inline;
line-height:30px;
}
ul#menu li a
{
margin:5px;
font-size:15px;
color:#A5A5A5;
}
ul#menu li a:hover
{
color:#FFFFFF;
}
/*//////////////////////////CORPS//////////////////////////*/
div#corps
{
width:790px;
padding-left:20px;
text-align:left;
}
/*//////////////////////////PIED//////////////////////////*/
div#pied
{
height:124px;
background: url("http://www.infographik.fr/images/pied.gif") no-repeat;
margin-bottom:50px !important;
}
/*//////////////////////////code by bmatthieu3//////////////////////////*/
Voici le code, sa donne sa:

http://i13.servimg.com/u/f13/11/09/14/87/sans_t10.jpg

Ce design est un design fixe, mais la surface s’agrandit quand on rajoute du texte, extensible en gros .

Voilà, j’espère que ce tuto vous a plut et vous aidera d’avantage a la conception d’un bon design, merci pour vous.

++
Réponse avec citation
TEAM
Avatar de Mus4RT
Mus4RT est déconnecté Sexe Non renseigné 06/06
XP de Mus4RT 398 Nombre total de messages de Mus4RT
Team IK
  #2 (permalink)  
Vieux 09/12/2007, 15h15
Ouf j'ai enfin fini, je ne sens plus mes yeux
Très intéressant ce tuto, mais il y a quelques remarques à faire:

- Un lecteur en voyant un texte long comme ça va fuir direct, je te conseils dans ce genre de tuto d'utiliser les outils disponible, le Gras, Italique, Souligné, Liste numéroté et la Police pour bien structurer ton tuto (surtout dans la partie règles), utilise aussi la balise IMG pour les images (pour que le lecteur vois le résultat directement au 1èr coup d'œil), de cette manière il sera plus visible est agréable à lire.
- Tu dois mettre ton tuto à jour
Citation:
Envoyé par Dalu
...(EX: Photoshop, CS, CS2, bientôt CS3 [payant] ou The Gimp[gratuit])...
- Ça serai bien de mettre les liens vers les outils utilisés.
- Ça aurait été plus complet si tu avait ajouté des petites définitions du XHTML et CSS ou des liens vers ces derniers.

Voila pour completer ton tuto:
XHTML - Wikipédia
CSS Feuilles de style en cascade - Wikipédia

A lire aussi:
Les 10 points à cerner avant de créer un site pro
Les 20 erreurs à ne pas faire

Merci Dalu pour ce tuto qui va aider beaucoup de personnes

P.S. Ça serai bien si tu pouvais restructurer ton tuto en fesant attention aux remarques que je t'ai faites
Réponse avec citation
Avatar de Dalu
Dalu est déconnecté Sexe Non renseigné 04/07
XP de Dalu 29 Nombre total de messages de Dalu
Voir le compte DeviantART  de Dalu
Petit-posteur
  #3 (permalink)  
Vieux 09/12/2007, 15h31
oui exacte il y a plusieurs choses que je devrais mettre à jour je le ferais après mes examens promis!
Réponse avec citation
TEAM
Avatar de Phil.Micro
Phil.Micro est déconnecté Phil.Micro est un Homme 06/02
XP de Phil.Micro 3 804 Nombre total de messages de Phil.Micro
-= CoAdmin =-
  #4 (permalink)  
Vieux 09/12/2007, 15h39
Tuto interressant mais difficile à lire..
une petite mise en page améliorera considérablement la lisibilité.


Bravo, et merci pour cette contribution
Réponse avec citation
Avatar de EtienneB
EtienneB est déconnecté Sexe Non renseigné 04/05
XP de EtienneB 174 Nombre total de messages de EtienneB
Master
  #5 (permalink)  
Vieux 27/12/2007, 21h17
Effectivement difficile à lire. Mais le contenu est intéressant

Par contre sur la premiere partie concernant le design, je suis pas tout à fait d'accord.

Design en anglais signifie conception. Un webdesigner est un concepteur web. Il conçoit un site autour d'un contenu.

Comme tu le dis ensuite, le design doit véhiculer une information, mais pas necessairement explicitement. Un site parlant de livres ne doit pas forcément utiliser des icones ou des images de livres pour avoir un bon design.

Le design peut juste permettre de donné une image : que ce soit le coté luxueux, le dynamisme, la fraicheur, la modernité ou l'originalité d'une entreprise, d'une personne.

En faite, le site est un écrin. C'est le packaging du contenu.
Réponse avec citation
Avatar de drolatic
drolatic est déconnecté Sexe Non renseigné 08/07
XP de drolatic 120 Nombre total de messages de drolatic
ArchitekThor-du
  #6 (permalink)  
Vieux 29/12/2007, 01h35
merci Dalu super le contenu du tuto mais y meriterai d etre "designé" un peu paske la c est violent pour le zyeux! mais y va beaucoup me servir ca c est sur et l'es liens de mus4rt aussi !
Réponse avec citation
Avatar de AnArChY
AnArChY est déconnecté Sexe Non renseigné 12/07
XP de AnArChY 9 Nombre total de messages de AnArChY
Nouveau iker
  #7 (permalink)  
Vieux 04/01/2008, 08h06
trés bon tuto dalu c'est plutôt sympa d'avoir pensé à nous donner les ficelles pour avoir un design un peu plus pro merci à toi
Réponse avec citation
Réponse

Outils de la discussion

Config des règles de ce forum
Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


A propos d'IK

Infographik alias IK est un forum d'entre-aide dans le domaine de l'infographie numerique
Depuis plus de 10 ans ce forum propose des tutoriaux un espace communautaire francophone.

We need You !

Faire un don permet de régler les frais de fonctionnement du site tel que l'hebergement, le ndd etc...
Faire un don

Fuseau horaire GMT +2. Il est actuellement 22h53.