Créer un magnifique en-tête web

Dimension: px

Commencer à balayer dès la page:

Download "Créer un magnifique en-tête web"

Emmanuelle Carignan
il y a 8 ans
Total affichages :

1 Projets Créer un magnifique en-tête web Créez un en-tête efficace le plus aisément possible. Pensez simplement en sections. L en-tête d une simple page web est son élément visuel le plus important. Sur de nombreux blogues, c est le seul élément visuel. Aussi la tâche qui lui incombe est-elle importante! Il doit identifier le site et définir sa tonalité visuelle. Il doit permettre de savoir d un simple coup d œil de quel type de site il s agit et de connaître son esprit. L en-tête doit aussi permettre de naviguer aisément. À cette fin, il suffit de créer trois sections, une pour chaque fonction, et de les unifier à l aide de similitudes visuelles. Voici comment assembler les différents éléments. Gros travail, espace peu profond L en-tête s étend sur toute la largeur de la page et constitue souvent le seul élément visuel non textuel. Bienvenue à la La de la vous propose de vous détendre dans un cadre enchanteur et agréable autour d une merveilleuse cuisine et de mille et une activités.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. 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 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

Il doit permettre de savoir d un simple coup d œil de quel type de site il s agit et de connaître son esprit. L en-tête doit aussi permettre de naviguer aisément.

2 1 Commencer par diviser l espace Un en-tête web couvre toute la largeur de la page et est extrêmement peu profond. Divisez-le en trois sections : nom, image et liens de navigation. Travaillez sur chacune d elles séparément. Quelle taille exactement? À titre de règle, le nom prend place dans le coin supérieur gauche et la barre de navigation en bas. Ne passez pas vos nuits à créer des divisions exactes ; les tailles des sections dépendent du nom (court ou long) et de l image. Cependant, évitez de fractionner l espace supérieur en deux moitiés, qui tendent à attirer l attention sur les sections plutôt que sur le contenu ; il est préférable de recourir à des divisions asymétriques. Déconseillé : Moitiés Préférable : Asymétrique 1) Nom 2) Image 3) Navigation 2 Trouver une photo expressive Une belle photo est un élément clé d un en-tête réussi. Recherchez une image qui communique ses informations d un simple fragment. Vous serez surpris par la facilité avec laquelle vous la trouverez. Capturer autant d informations que possible La scène pastorale comporte des arbres, de l herbe, des montagnes et du soleil, et tout ceci en un seule tranche! Voici ce que vous désirez, à savoir un peu de tout. Il est intéressant de constater qu il suffit de très peu de choses pour communiquer une signification une branche, un brin d herbe, un morceau de ciel. Recherchez particulièrement la profondeur, qui s exprime souvent à l aide de valeurs foncées-claires (à l extrémité droite) ; dans cette image, vous voyez le premier plan, le plan intermédiaire et l arrière-plan. Créer un magnifique en-tête web 195

$Cependant, évitez de fractionner l espace supérieur en deux moitiés, qui tendent à attirer l attention sur les sections plutôt que sur le contenu ; il est préférable de recourir à des divisions$

3 3 Colorier les sections Prélevez une gamme de couleurs sur la photo, triez-les de la plus foncée à la plus claire, puis appliquez une couleur à chaque section. Prêtez attention aux contrastes. Du foncé au clair Un fort contraste sépare Clair Un faible contraste unit Un fort contraste est source d énergie Une palette de couleurs communes unifie les trois sections. Comme toutes les couleurs existent dans la photo, les sections travaillent ensemble indépendamment (en principe) de la façon dont vous mélangez et assortissez. Plus le contraste est élevé entre les sections, plus l énergie dégagée est importante ; les faibles contrastes sont plus paisibles (mais, généralement, moins marquants). Clair Médian 4 Définir le nom et la navigation Si vous avez le choix, privilégiez une police qui complète la photo : photo chargée/police sobre ; photo élégante/ police élégante ; photo ordinaire/police ostentatoire. Les couleurs alternatives police verte sur fond or et police or sur fond vert permettent d unifier les sections. Privilégier un cadre simple (1) Un nom très long peut s écrire sur deux ou plusieurs lignes. Sans risque de collision entre les hampes ascendantes et les hampes descendantes, une police en caractères majuscules constitue une solution idéale. Dans le cas présent, une police discrète et élégante représente un bon complément à la très belle image picturale. (2) Évitez les polices amusantes, mais qui volent la vedette et (3) les polices aux styles aboutis, mais incompatibles Projets

Comme toutes les couleurs existent dans la photo, les sections travaillent ensemble indépendamment (en principe) de la façon dont vous mélangez et assortissez.

4 5 Utiliser la couleur opposée Ici, une photo au contenu quelque peu abstrait communique le style d architecture du cabinet D&T, mais ses couleurs bleu/gris sont trop effacées pour le logo. La solution consiste à utiliser la couleur opposée. Du foncé au clair D&T ARCHITECTE S PORTFOLIO DERNIERS PROJETS PRIX PRESSE CONTACT Le bleu de la phot paraît approprié, mais il ne communique pas la qualité souhaitée. D&T A R C H I T E C T E S PORTFOLIO DERNIERS PROJETS PRIX PRESSE CONTACT Couleurs opposées à forte énergie La photo comporte un bleu froid en quantité élevée, qui ne traduit pas le caractère énergique du cabinet d architectes. La solution : contenez l influence de la couleur bleue en utilisant sa couleur opposée, ou complémentaire, pour le logo. Recherchez le bleu sur le cercle chromatique, puis déplacez-vous jusqu au secteur opposé (à gauche). Les couleurs complémentaires ne possèdent pas de nuances communes (contrairement, par exemple, au vert et à l orange, qui partagent le jaune) et présentent par conséquent un contraste très élevé. Le violet et le jaune offrent le contraste à la valeur (foncé/clair) la plus élevée sur le cercle chromatique. Créer un magnifique en-tête web 197

Du foncé au clair D&T ARCHITECTE S PORTFOLIO DERNIERS PROJETS PRIX PRESSE CONTACT Le bleu de la phot paraît approprié, mais il ne communique pas la qualité souhaitée.

5 6 Concevoir le logo ou autres éléments graphiques Fairweather Downs utilise pratiquement le même logo depuis cinq décennies. Il est un classique! Dans ce cas, la meilleure chose à faire est de s appuyer, non sur la photo, mais sur le logo. Les deux mots Fairweather et DOWNS offrent un fort contraste script/roman, petit/grand, minuscules/majuscules ; cependant les graisses et la qualité du travail d artiste sont similaires. Vert et beige sont des couleurs secondaires, l une froide, l autre chaude. Emprunter les caractéristiques du logo (En bas) Les bordures à double ligne et les coins en forme de coquille du logo peuvent aisément être transférés aux autres sections et produire un aspect classique. Comme c est le logo qui détermine l aspect, 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), sélectionnez Fin Fin, qui convertit le trait simple en trait double. (3) Dans la boîte de dialogue Objet > Options d arrondis, sélectionnez Arrondi inversé, spécifiez une taille (ici 0p9, soit 3 mm), puis cliquez sur OK. 198 Projets

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

Documents pareils

expo communication visuelle expographie expographie communication visuelle impression numérique création graphique matériel

expo communication visuelle expographie expographie communication visuelle impression numérique création graphique matériel atum dip er aliquis atis eugiatum euisim aute mod min elis acidunt lore tatem ipsum ing et utem ex exer sendiam vulluptat lam, sustie ver alisl iliquat lorem zzrilis do etum quismod oloborting ex eu faccum