Webdesign et Infographie : Différence entre versions

De Ekopedia
Aller à : navigation, rechercher
(Page créée avec « == Webdesign == Le webdesign est un terme anglais qui peut très bien se traduire par "Conception de pages web". Nous allons examiner les technologies qui permettent de le ... »)
 
 
(18 révisions intermédiaires par 5 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
 +
{{Admissibilité}}
 +
 
== Webdesign ==
 
== Webdesign ==
  
Le webdesign est un terme anglais qui peut très bien se traduire par "Conception de pages web".
+
Le webdesign est un terme anglais qui se traduit par "Conception de pages web".
  
Nous allons examiner les technologies qui permettent de le réaliser, les logiciels à utiliser ainsi que des notions de conception graphique.
+
L'aspect graphique d'un site web détermine en partie le succès qu'il remporte auprès des visiteurs potentiels. Donc, lorsqu'on crée un site web, il est important de le concevoir en terme de graphisme, exactement comme on le ferait pour un magazine ou un livre.
  
 
=== Les technologies ===
 
=== Les technologies ===
Ligne 9 : Ligne 11 :
 
Les pages web sont stockées sur un serveur informatique appelé serveur web, sous la forme de fichiers d'extension HTML (.html).
 
Les pages web sont stockées sur un serveur informatique appelé serveur web, sous la forme de fichiers d'extension HTML (.html).
  
Ces fichiers peuvent être associés à deux langages qui complètent le code HTML: CSS et Javascript; ainsi qu'à des fichiers de type image, documents de toutes sortes, vidéos, sons, musiques...
+
Ces fichiers peuvent contenir des feuilles de style (CSS) et des instructions écrites dans un langage appelé Javascript.
 
+
On peut également stocker sur un serveur web: images, vidéos, sons, musiques... en réalité, tout type de fichier.  
Tout document peut être stocké sur le serveur et téléchargé par le navigateur web; cependant, le navigateur ne pourra afficher que du texte et des images (fixes et éventuellement GIF animées) dans le contenu de la page web.
 
 
 
L'affichage de vidéos ou de pistes audios directement dans le navigateur peut se faire par le biais de plugins (Flash, Silverlight, autres...) ou par un navigateur compatible utilisant HTML5.
 
 
 
==== HTML ====
 
 
 
C'est un langage informatique qui permet de définir un document contenant du texte. Ce langage se présente sous une forme textuelle. Pour visualiser le code d'une page, par exemple sous Firefox, il suffit d'aller dans le menu Développement web->Code source de la page.
 
 
 
À l'intérieur du code d'une page, il est possible de créer des liens vers d'autres pages ou vers des fichiers (balise <a>), d'insérer une image (balise <img>), un objet (balise <object>) par exemple pour une animation ou vidéo Flash.
 
 
 
Il est aussi possible d'inclure du code écrit en CSS ou en Javascript sans recourir à un fichier externe, cependant il est souvent préférable de structurer le code partagé par toutes les pages du site sous la forme de fichiers séparés.
 
 
 
==== CSS ====
 
 
 
"Cascading Style Sheets", ce langage permet, à partir d'un document HTML qui structure le contenu de la page en éléments, d'affecter un style à des éléments selon des règles précises.
 
 
 
Le CSS se relie principalement à trois types d'éléments contenus dans les pages HTML:
 
 
 
* les balises HTML
 
* les classes (attribut class de chaque balise)
 
* les identifiants (attribut id de chaque balise)
 
 
 
À noter qu'on ne peut utiliser deux fois le même identifiant dans une page, tandis qu'une classe peut être utilisée autant de fois que nécessaire.
 
 
 
Les feuilles de style en cascade (CSS) permettent de définir toute l'apparence aussi du texte que des images:
 
 
 
* fonte utilisée, décorations de fonte (gras, italique, etc...) et taille
 
* couleurs de texte et de fond, image de fond
 
* bordures, alignements, disposition des blocs, espacement entre les blocs
 
 
 
Les feuilles de style sont un outil très puissant qui évolue sans cesse et dont l'usage est complexe. Cependant, avec des outils de création adaptés, il n'est pas nécessaire d'en connaître la syntaxe en détail.
 
 
 
==== Javascript ====
 
 
 
Il s'agit d'un véritable langage de programmation qui n'a rien à voir avec Java, si ce n'est son nom.
 
C'est un langage qu'un informaticien pourrait qualifier de facile à apprendre, mais qui nécessite de bonnes capacités d'abstraction pour être maîtrisé.
 
 
 
Il est utilisé pour automatiser certains affichages, créer des actions programmés s'exécutant sur certains événements du navigateur.
 
  
Par exemple, il est possible de créer des animations visuelles sur des événements comme la pression d'un bouton, le survol d'un lien... son usage n'est pas strictement nécessaire pour créer de belles pages web.
+
Javascript est un véritable langage de programmation, utilisé pour créer une navigation plus dynamique à l'intérieur d'un site web.
  
 
=== Les logiciels ===
 
=== Les logiciels ===
  
De nombreux logiciels ont été développés pour créer des pages web. On peut utiliser un simple éditeur de texte comme UltraEdit par exemple, mais pour une édition efficace il est préférable d'utiliser soit un éditeur de code HTML, soit un éditeur WYSIWIG de pages web.
+
De nombreux logiciels ont été développés pour créer des pages web. On trouve principalement en logiciel de design web propriétaire, Adobe '''Dreamweaver''', et en [[logiciel libre]], Kompozer et sa version récente '''BlueGriffon'''.
  
==== Les éditeurs de code HTML ====
+
Un bon logiciel de dessin ou éditeur d'images est indispensable pour réussir de belles pages. Si vos pages ne contiennent que du texte, ce n'est pas du design graphique! On peut également utiliser des photos libres de droits pour enrichir le design de son site.
  
Dans le monde du logiciel libre, on trouve principalement '''BlueFish''' (sous Linux). Il en existe une grande quantité en gratuit et en payant, mais les professionnels utilisent souvent un éditeur WYSIWIG.
+
=== Le graphisme ===
 
 
==== Les éditeurs WYSIWIG ====
 
 
 
On trouve principalement en logiciel propriétaire, Adobe '''Dreamweaver''', et en logiciel libre, Kompozer et sa version récente '''BlueGriffon'''.
 
 
 
==== Un éditeur d'images ====
 
  
Un bon logiciel de dessin ou éditeur d'images est indispensable pour réussir de belles pages. Si vos pages ne contiennent que du texte, ce n'est pas du design graphique!
+
Le design de pages web est principalement une conception graphique. On commence en général par un croquis rapide de l'apparence générale de la page, on fait un schéma de la navigation sur le site web, et ensuite on commence le design à proprement parler.
  
Nous allons maintenant voir quelques conseils pour concevoir graphiquement vos pages web.
+
Il est conseillé de ne pas trop charger d'éléments graphiques et de texte chaque page. Les sites clairs et nets sont ceux qui ont le plus de succès.
 
 
=== Le graphisme ===
 
  
Le design de pages web est principalement une conception graphique. La première chose à faire est de faire une ébauche de la page et de rédiger un peu de texte. Ensuite, prévoir la structure de la page, les menus qui doivent apparaître sur chaque page, l'alignement des blocs, la présence d'un logo.
+
La conception graphique fait appel à l'usage créatif de fontes, photos, effets picturaux, logos, couleurs de texte et de fond, dessins, dégradés, encadrés, etc...  
  
Choisir une fonte adaptée au contenu de la page et à l'esprit du site est indispensable. Ensuite, choisir une taille de texte adaptée à chaque paragraphe ou élément graphique.
+
Il existe de nombreux sites web et de magazines consacrés au design photo ou web, sans compter l'inspiration fournie par la multitude de sites et de blogs qui sont souvent très créatifs.
  
Il est conseillé de ne pas trop charger d'éléments graphiques et de texte chaque page. Les sites clairs et nets sont ceux qui ont le plus de succès, un écran trop chargé décourage le visiteur.
+
Lorsque l'on publie des articles sur un blog, l'hébergeur propose un cadre pour créer des modèles (''templates'') qui sont souvent plus faciles à éditer que lorsque l'on crée un site de zéro.
  
Choisir des couleurs claires, pastel et pas trop vives est recommandé dans la plupart des cas. Dans certains cas un fond noir est plus adapté.
+
=== Voir aussi ===
  
Utiliser les feuilles de style pour séparer les différents blocs plutôt que de créer des tableaux imbriqués s'avère utile car cela permet une meilleure compréhension de la structure de la page, et de séparer ces blocs par des bordures et des espacements variés.
+
* [[Marketing]]
 +
* [[Photographie]]
  
Il est nécessaire d'adopter une palette de couleurs, que l'on utilisera pour chaque élement textuel. Enfin, les textes sur fond multicolores sont souvent moins lisibles que sur un fond monochromatique.
+
{{Portail Communiquer}}
 +
[[Catégorie:Communiquer]]

Version actuelle en date du 27 octobre 2012 à 14:30

Webdesign[modifier]

Le webdesign est un terme anglais qui se traduit par "Conception de pages web".

L'aspect graphique d'un site web détermine en partie le succès qu'il remporte auprès des visiteurs potentiels. Donc, lorsqu'on crée un site web, il est important de le concevoir en terme de graphisme, exactement comme on le ferait pour un magazine ou un livre.

Les technologies[modifier]

Les pages web sont stockées sur un serveur informatique appelé serveur web, sous la forme de fichiers d'extension HTML (.html).

Ces fichiers peuvent contenir des feuilles de style (CSS) et des instructions écrites dans un langage appelé Javascript. On peut également stocker sur un serveur web: images, vidéos, sons, musiques... en réalité, tout type de fichier.

Javascript est un véritable langage de programmation, utilisé pour créer une navigation plus dynamique à l'intérieur d'un site web.

Les logiciels[modifier]

De nombreux logiciels ont été développés pour créer des pages web. On trouve principalement en logiciel de design web propriétaire, Adobe Dreamweaver, et en logiciel libre, Kompozer et sa version récente BlueGriffon.

Un bon logiciel de dessin ou éditeur d'images est indispensable pour réussir de belles pages. Si vos pages ne contiennent que du texte, ce n'est pas du design graphique! On peut également utiliser des photos libres de droits pour enrichir le design de son site.

Le graphisme[modifier]

Le design de pages web est principalement une conception graphique. On commence en général par un croquis rapide de l'apparence générale de la page, on fait un schéma de la navigation sur le site web, et ensuite on commence le design à proprement parler.

Il est conseillé de ne pas trop charger d'éléments graphiques et de texte chaque page. Les sites clairs et nets sont ceux qui ont le plus de succès.

La conception graphique fait appel à l'usage créatif de fontes, photos, effets picturaux, logos, couleurs de texte et de fond, dessins, dégradés, encadrés, etc...

Il existe de nombreux sites web et de magazines consacrés au design photo ou web, sans compter l'inspiration fournie par la multitude de sites et de blogs qui sont souvent très créatifs.

Lorsque l'on publie des articles sur un blog, l'hébergeur propose un cadre pour créer des modèles (templates) qui sont souvent plus faciles à éditer que lorsque l'on crée un site de zéro.

Voir aussi[modifier]


Crystal Clear app linneighborhood.png
Portail Communiquer – Articles Ékopédia concernant la Communication