Projets

Crer un magnifique en-tte web

Crez un en-tte efficace le plus aisment possible. Pensez simplement en sections.

Len-tte dune simple page web est son lment visuel le plus important. Sur de nombreux blogues, cest le seul lment visuel. Aussi la tche qui lui incombe est-elle importante ! Il doit identier le site et dnir sa tonalit visuelle. Il doit permettre de savoir dun simple coup dil de quel type de site il sagit et de connatre son esprit. Len-tte doit aussi permettre de naviguer aisment. cette n, il suft de crer trois sections, une pour chaque fonction, et de les unier laide de similitudes visuelles. Voici comment assembler les diffrents lments.

Coule Verte
maison dhtes
AGENDA

NOUVELLES

CARTE

HBERGEMENT

QUIPEMENT

VOIR

LIENS

ACCS

CONTACT

Gros travail, espace peu profond Len-tte stend sur toute la largeur de la page et constitue souvent le seul lment visuel non textuel.

Coule Verte
maison dhtes

NOUVELLES

AGENDA

CARTE

HBERGEMENT

QUIPEMENT

VOIR

LIENS

ACCS

CONTACT

Bienvenue la Coule Verte

La maison dhtes de la Coule Verte vous propose de vous dtendre dans un cadre enchanteur et agrable autour dune merveilleuse cuisine et de mille et une activits.
ad Nullum

Nullum ad ea feu feugiatie dolor sustrud eugiat velesto del utpat nis amconse mod etue consent aliqui ero erostin ulpute commy nit nim zzrit, sit, con ullandipit wiscidu ipsuscidunt lumsandrer illa faccum verilit, commy nullupt atummy nulla feugait vercidu issequip euipit la acil exero con et adit accum nismolore vendrero consequat, velenim quisl dui blaor sum in vullaor tincidunt accum dions niate modolesequam irit at eugue

ea feu feugiatie dolor sustrud eugiat velesto del utpat nis amconse mod etue consent

aliqui ero erostin ulpute commy nit nim zzrit, sit, con ullandipit wiscidu ipsuscidunt lumsandrer illa faccum verilit. Nullum ad ea feu feugiatie dolor sustrud eugiat velesto del utpat nis amconse mod etue consent aliqui ero erostin ulpute commy nit nim zzrit, sit, con ullandipit wiscidu ipsuscidunt lumsandrer illa faccum verilit, commy nullupt atummy nulla feugait vercidu issequip euipit la acil exero con et adit accum nismolore vendrero consequat, velenim quisl dui blaor sum in vullaor tincidunt accum dions niate. Nullum ad ea feu feugiatie dolor sustrud eugiat velesto del utpat nis amconse mod etue consent aliqui ero erostin ulpute commy nit nim zzrit, sit, con ullandipit wiscidu ipsuscidunt lumsandrer illa faccum verilit, commy nullupt atummy nulla feugait vercidu issequip euipit la acil exero con et adit accum nismolore vendrero consequat, velenim quisl dui blaor sum in vullaor tincidunt accum dions niate modolesequam irit at eugue

194

Projets
2010 Pearson Education France Crations graphiques John McWade

Commencer par diviser lespace

Un en-tte web couvre toute la largeur de la page et est extrmement peu profond. Divisez-le en trois sections : nom, image et liens de navigation. Travaillez sur chacune delles sparment.
Quelle taille exactement ? titre de rgle, le nom prend place dans le coin suprieur gauche et la barre de navigation en bas. Ne passez pas vos nuits crer des divisions exactes ; les tailles des sections dpendent du nom (court ou long) et de limage. Cependant, vitez de fractionner lespace suprieur en deux moitis, qui tendent attirer lattention sur les sections plutt que sur le contenu ; il est prfrable de recourir des divisions asymtriques. 1) Nom 2) Image Dconseill : Moitis Prfrable : Asymtrique

Coule Verte
maison dhtes

NOUVELLES

AGENDA

CARTE

HBERGEMENT

QUIPEMENT

VOIR

LIENS

ACCS

CONTACT

3) Navigation

Trouver une photo expressive

Une belle photo est un lment cl dun en-tte russi. Recherchez une image qui communique ses informations dun simple fragment. Vous serez surpris par la facilit avec laquelle vous la trouverez.

Capturer autant dinformations que possible La scne pastorale comporte des arbres, de lherbe, des montagnes et du soleil, et tout ceci en un seule tranche ! Voici ce que vous dsirez, savoir un peu de tout. Il est intressant de constater quil suffit de trs peu de choses pour communiquer une signification une branche, un brin dherbe, un morceau de ciel. Recherchez particulirement la profondeur, qui sexprime souvent laide de valeurs fonces-claires ( lextrmit droite) ; dans cette image, vous voyez le premier plan, le plan intermdiaire et larrire-plan. Crer un magnifique en-tte web
2010 Pearson Education France Crations graphiques John McWade

195

Colorier les sections

Prlevez une gamme de couleurs sur la photo, triez-les de la plus fonce la plus claire, puis appliquez une couleur chaque section. Prtez attention aux contrastes.
Un fort contraste spare

Du fonc au clair

Clair Fonc Un faible contraste unit Un fort contraste est source dnergie Une palette de couleurs communes unifie les trois sections. Comme toutes les couleurs existent dans la photo, les sections travaillent ensemble indpendamment (en principe) de la faon dont vous mlangez et assortissez. Plus le contraste est lev entre les sections, plus lnergie dgage est importante ; les faibles contrastes sont plus paisibles (mais, gnralement, moins marquants).

Fonc Clair

Mdian Fonc

Dfinir le nom et la navigation

Les couleurs alternatives police verte sur fond or et police or sur fond vert permettent dunifier les sections.

Si vous avez le choix, privilgiez une police qui complte la photo : photo charge/police sobre ; photo lgante/ police lgante ; photo ordinaire/police ostentatoire.

Coule Verte maison dhtes

NOUVELLES

AGENDA

CARTE

HBERGEMENT

QUIPEMENT

VOIR

LIENS

ACCS

CONTACT

Privilgier un cadre simple 1 (1) Un nom trs long peut scrire sur deux ou plusieurs lignes. Sans risque de collision entre les hampes ascendantes et les hampes descendantes, une police en caractres majuscules constitue une solution idale. Dans le cas prsent, une 2 police discrte et lgante reprsente un bon complment la trs belle image picturale. (2) 3 vitez les polices amusantes, mais qui volent la vedette et (3) les polices aux styles aboutis, mais incompatibles.

196

Projets
2010 Pearson Education France Crations graphiques John McWade

Utiliser la couleur oppose

Ici, une photo au contenu quelque peu abstrait communique le style darchitecture du cabinet D&T, mais ses couleurs bleu/gris sont trop effaces pour le logo. La solution consiste utiliser la couleur oppose.

Du fonc au clair

D&T
ARCHITECTES
P ORT FO LIO D E R N IE RS P RO JE T S P RIX P RE SSE CO N TACT

Le bleu de la phot parat appropri, mais il ne communique pas la qualit souhaite.

D&T
ARCHITECTES

P O RT F O L IO

DERNIERS PROJETS

PRIX

PRESSE

CONTACT

Couleurs opposes forte nergie La photo comporte un bleu froid en quantit leve, qui ne traduit pas le caractre nergique du cabinet darchitectes. La solution : contenez linfluence de la couleur bleue en utilisant sa couleur oppose, ou complmentaire, pour le logo. Recherchez le bleu sur le cercle chromatique, puis dplacez-vous jusquau secteur oppos ( gauche). Les couleurs complmentaires ne possdent pas de nuances communes (contrairement, par exemple, au vert et lorange, qui partagent le jaune) et prsentent par consquent un contraste trs lev. Le violet et le jaune offrent le contraste la valeur (fonc/clair) la plus leve sur le cercle chromatique.

Crer un magnifique en-tte web

2010 Pearson Education France Crations graphiques John McWade

197

Concevoir le logo ou autres lments graphiques

Les deux mots Fairweather et DOWNS offrent un fort contraste script/Roman, petit/grand, minuscules/majuscules ; cependant les graisses et la qualit du travail dartiste sont similaires.

Fairweather Downs utilise pratiquement le mme logo depuis cinq dcennies. Il est un classique ! Dans ce cas, la meilleure chose faire est de sappuyer, non sur la photo, mais sur le logo.

Vert et beige sont des couleurs secondaires, lune froide, lautre chaude.

Emprunter les caractristiques du logo (En bas) Les bordures double ligne et les coins en forme de coquille du logo peuvent aisment tre transfrs aux autres sections et produire un aspect classique. Comme cest le logo qui dtermine laspect, les photos peuvent varier.

Bordures chic dans InDesign (1) Tracez un rectangle et choisissez un trait gal la largeur totale de la double ligne ; ici, deux points. (2) Dans Contour > Type ( droite), slectionnez Fin Fin, qui convertit le trait simple en trait double.

(3) Dans la bote de dialogue Objet > Options darrondis, slectionnez Arrondi invers, spcifiez une taille (ici 0p9, soit 3 mm), puis cliquez sur OK.

198

Projets
2010 Pearson Education France Crations graphiques John McWade