Créer une maquette de site Internet

Transcription

1 Créer une maquette de site Internet La réalisation d une maquette de site Internet pour un projet nécessite une certaine rigueur, avec le souci du détail. Nous allons voir ici comment utiliser une grille comme point de repère pour aboutir à un Webdesign clair et détaillé. outils tech tendances Adobe Photoshop expert Julien Lavallée Ce tutoriel explique la réalisation de la page d accueil du site Internet de mon agence Web. Il s agit ici d un style plutôt simple, clair et aéré. Beaucoup de sites aujourd hui ont un esprit minimaliste, souvent basé sur une grille. J aime assez ce style, mais il faut savoir trouver le juste milieu pour réussir un webdesign minimaliste et sobre. Pour revenir à la grille, je pense qu elle reste un outil très utile, même si certains diront que cela limite la créativité. J utilise ici le 960 Grid System ( gs), mais j aime aussi générer une grille avec un outil en ligne très pratique : Gridulator (gridulator.com). Au préalable, pensez à définir sur papier (utilisez le fichier DS1panel_w_notes.pdf ) le placement de vos éléments (menus, textes, photos, boutons), c est une première étape essentielle. Autre ressource qu il m arrive d utiliser, notamment pour 4w.fr, est le site IconFinder ( qui regorge d icônes gratuites de toutes les tailles. Place maintenant aux étapes de ce tutoriel, où vous serez à même d utiliser Illustrator pour importer des éléments dans Photoshop. C est parti! NOTRE EXPERT Julien Lavallée est directeur artistique junior en agence depuis maintenant plus de trois ans. Son expérience l amène principalement à élaborer et à créer des sites Internet clairs et fonctionnels pour répondre à l attente de ses clients. Pour en savoir plus, visitez son portfolio : www. julienlavallee.com. Objectif du tutoriel Ap prendre à réaliser une maquette de site Internet corporate. Temps nécessaire 4-5 heures Eléments du tutoriel 960.psd grille.png logo.eps social.eps personnage.eps personnage.png Beaucoup de sites aujourd hui ont un esprit minimaliste, souvent basé sur une grille. 102 tutoriels

2 01 nouveau document Créez un nouveau document dans Photoshop de 1280 x 1600 pixels. Gardez en mémoire que le contenu du site sera approprié pour une résolution de 1024 pixels de largeur, la résolution la plus répandue chez les utilisateurs. Mais n oubliez pas d élargir le fond du site pour les résolutions d écran supérieures. 02 Grille et repères Importez le fichier grille.png, qui vous aidera dans la réalisation de la maquette. Ici, la grille fait 940 pixels de large, avec seize colonnes de 40 pixels de large et 20 pixels pour les gouttières. Affichez les règles en faisant Ctrl/Cmd+R et créez chaque repère en fonction de la grille. Vous pouvez aussi ouvrir directement le fichier 960.psd. 03 Header Créez un groupe de calques Header. Avec l outil Rectangle (U), tracez un rectangle blanc de 1280 x 118 pixels. Cela constituera le fond du Header. Importez le fichier logo.eps comme Objet dynamique, placez-le en haut à gauche selon les repères et redimensionnez-le comme vous le souhaitez (ici, 300 pixels de large). Ajoutez le numéro de téléphone (Police Walkway Rounded, Taille 30 points, Couleur #9D9D9D), aligné à droite du document. 04 dégradé de séparation 05 Ajoutez un nouveau calque en faisant Ctrl/Cmd+Maj+N, nommez-le Séparation. Avec l outil Ellipse (U), dessinez une ellipse de couleur noire (#000000). Ajoutez un Flou gaussien de 25 pixels (Filtre> Atténuation> Flou gaussien). Muni de l outil Rectangle de sélection (M), dessinez un rectangle ne sélectionnant que la moitié du flou. Cliquez ensuite sur la petite icône de masque vectoriel en bas du panneau Calques. Réglez l Opacité du calque à 10 %. menus Pour le fond du menu, tracez un rectangle de 1280 x 45 pixels. Double-cliquez sur le calque et ajoutez une Incrustation en dégradé (style Linéaire, Angle 90, Couleur du # vers le #2D2D2D). Dessinez une zone de texte (T), centrez-la sur la page et écrivez vos menus, séparés par des espaces. Distinguez les différents textes par des lignes verticales de 1 pixel ayant une Ombre portée (Couleur #FFFFFF, Opacité 10 %, Angle 180, Distance 1, Grossi 0, Taille 0) dans le Style de calque. 06 Bannière Tracez un rectangle de couleur #F6F6F6 en dessous de l image aplatie du Flash, pour créer un contraste avec le fond blanc. Ajoutez votre texte centré sur la page et le fond gris, ainsi qu une Ombre portée (Couleur #000000, Opacité 100 %, Angle 90, Distance 1, Grossi 0, Taille 0). Tracez un rectangle de sélection (1280 x 20 pixels) en dessous du fond gris et créez un calque de réglage Fond dégradé (Linéaire, 90, du #E3E4E4 100 % au #E3E4E4 0 %). Descendez ce calque de 1 pixel. Le contenu du site sera approprié pour une résolution de 1024 pixels de largeur mais n oubliez pas d élargir le fond du site pour les résolutions d écran supérieures. tutoriels 103

3 07 Placer le personnage Ouvrir le fichier personnage.eps sous Illustrator. Copiez d abord les mains, collez-les comme Objet dynamique et placez-les bien dans Photoshop. Faites la même chose avec la tête. Dupliquez votre Fond dégradé gris et inversez l angle, puis placez-le au niveau de la tête en mode de fusion Produit. Astuce : créez un masque d écrêtage en cliquant entre le calque Dégradé copie et Tête avec la touche Alt/Opt maintenue. Le dégradé ne sera visible que sur la tête, pour créer un effet de profondeur. 08 Footer/Social Nous allons créer la première partie foncée du footer. Tracez un rectangle de couleur # (97 pixels de hauteur). Ouvrez social.eps dans Illustrator. Copiez le logo de Facebook et collez-le comme calque de forme dans Photoshop, vous pourrez donc changer facilement sa couleur par la suite ; même chose pour Twitter. Modifiez leur couleur pour faire une version active et une version inactive. 09 Footer/menus Importez et placez personnage.png à gauche en fonction des repères. Ajoutez vos menus dans un calque texte, puis le texte de copyright et celui des mentions légales (30 pixels de marge entre les deux). Muni de l outil Rectangle (U), séparez-les maintenant avec une ligne foncée de 1 pixel et de couleur #1D1D1D. Dans le style de calque ajoutez une Ombre portée (Couleur #FFFFFF, Opacité 8 %, Distance 1, Grossi 0, Taille 0). 10 Footer/Contact 11 ombre portée Tracez un rectangle de couleur #F6F6D6 de 170 Sélectionnez le calque Contact et ajoutez une pixels de hauteur. Placez un titre appelé Contact Ombre portée (Couleur #000000, Opacité 100 %, (Couleur #2F9FE1, Police Museo 500, Taille 26 pts), Angle 90, Distance 1, Grossi 0, Taille 0) pour mettre en mettez en capitales (bouton TT dans le panneau valeur le texte, comme pour le texte de la bannière. Cela Caractère) et alignez à droite (dans le panneau permet de faire ressortir le texte sur le fond gris et sera, Paragraphe). Ajoutez le premier titre L agence et le par la suite, faisable aussi en CSS, avec la propriété texte en dessous (en Arial 11 pts, taille minimum text-shadow. conseillée pour la lisibilité). Même chose pour le titre, Projet, et pour Newsletter. Faites attention à bien vous aider des repères pour aligner ces textes. Organisez vos groupes, sous-groupes et calques, pourquoi pas avec des couleurs pour différencier les éléments du site. 12 Bouton inscription Tracez un rectangle de 110 x 23 pixels de couleur #18B3FB. Dans le style de calque, ajoutez un Contour intérieur de 1 pixel en #1097E9, une Incrustation en dégradé linéaire (Couleur #18B3FB 100 % vers #18B3FB 0 %) en mode de fusion Produit de 35 % d opacité puis une Ombre interne (Couleur #FFFFFF, mode de fusion Incrustation, Opacité 35 %, Angle 90, Distance 2, Maigri 0, Taille 0). Ajoutez le texte centré avec une Ombre portée de -90 en #1296D5, mode de fusion Normal à 100 %. 104 tutoriels

4 13 Vignette des projets 14 ombre des vignettes Après avoir ajouté le texte Nos Projets aligné à droite, créez un groupe (Ctrl/ Avec l outil Plume (P), dessinez un petit triangle large et noir sous la vignette. Cmd+G) nommé Projet1 et tracez un rectangle (U) de 178 x 100 pixels. Astuce : pour Appliquez Filtre> Atténuation> Flou gaussien de 5 pixels. Placez correctement le flou que vos formes soient nettes, dans les Options de rectangle (barre d outils en haut), en guise d ombre et réduisez l Opacité à 50 %. Ajoutez le titre du projet (en Arial bold, cochez la case Magnétisme des pixels. Appliquez un Contour intérieur blanc de 3 14 points, #3E3D40), centré par rapport à l image, et la description (Georgia Italic, 11 pixels au rectangle. Importez une image pour le projet, redimensionnez-la et créez un points, #A7A8AA). Dupliquez le groupe pour faire les deux autres projets, puis masque d écrêtage (Ctrl/Cmd+Alt ou Opt+G). Cela fonctionne comme un masque de modifiez l image et les textes. fusion. 15 Services Ajoutez une ligne de 3 pixels pour séparer les projets et les services. Il y aura trois colonnes de texte de 180 pixels de large. Ajoutez votre titre et vos textes en fonction des repères. Ajoutez la liste des services et importez une icône en guise de puce. Dupliquez-la quatre fois. Placez les cinq calques, puis sélectionnez-les et fusionnez-les (Ctrl/Cmd+E). Faites Calque> Nouveau calque> Teinte/Saturation et, pour modifier la couleur des puces, Ctrl/ Cmd+Alt/Opt+G. 16 Édito Ajoutez un fond pour l édito, avec l outil Rectangle arrondi (Couleur #9C9E9F, Rayon 10 pixels, Taille 170 x 460 pixels), puis une légère Incrustation en dégradé (mode Superposition, Opacité 5 %, Couleur du noir au blanc, Angle 90 ). Placez une photo en dessous du titre (Édito). Avec l outil Texte (T), tracez une zone de la même largeur que le fond. Réglez les marges à gauche et à droite à 18 points dans le panneau Paragraphe et ajoutez votre contenu. 17 Agence & news 18 Sur le même principe, faites trois colonnes : un texte de présentation, une partie Actualités et une partie Twitter, qui chargera vos derniers tweets avec l API de Twitter. Pour cette partie, ajoutez l icône Twitter d un oiseau puis, en dessous, deux tweets. Différenciez les liens en les passant dans la couleur #18B3FB. Enfin, rajoutez le texte Suivez-nous et, à côté, le logo version texte de Twitter que vous avez utilisé dans l étape 08. Finaliser le fichier Organisez correctement vos groupes, sous-groupes et calques, pourquoi pas avec des couleurs pour différencier les éléments du site. Faites un clic droit sur l œil à côté du calque et sélectionnez une couleur. Nettoyez votre fichier en supprimant les calques invisibles (Calques> Supprimer> Calques masqués). Et voilà : la page d accueil de votre PSD est prête à être intégrée! tutoriels 105

5 ITW Q uelle est votre formation? Après avoir obtenu mon DUT Services et réseaux de communication, j ai poursuivi avec une année de formation Spécialisation Graphiste PAO en alternance à Efficom à Paris. J ai étudié de près et de loin les logiciels de PAO avec des intervenants professionnels et entre autres la typographie, la communication... Julien Lavallée Quel matériel utilisez-vous? Je possède un imac 27 combiné à un disque externe LaCie 1 To. Rencontre avec un jeune Webdesigner de 26 ans. En agence, je travaille avec deux écrans, sous Windows 7. Je travaille donc sous deux environnements différents, ce qui a ses avantages et ses inconvénients. Sans oublier des wireframes pour élaborer les maquettes! Quels logiciels utilisez-vous le plus et pourquoi? Photoshop et Illustrator CS5 sont les logiciels principalement utilisés. Les outils dont ils disposent et les mises à jour d Adobe régulières permettent de travailler plus rapidement et plus efficacement. Les possibilités en matière de création restent aussi innombrables, on en apprend tous les jours! ITW Julien Lavallée Graphiste webdesigner Âge : 26 ans Parlez-nous de vos premiers travaux Cela remonte à mes années lycée, je m amusais à créer des fonds d écran, des bannières sur le thème du foot, pour des communautés. J ai découvert Photoshop de cette façon. Utiliser tous les outils, des techniques encore et encore, cela a été une bonne manière d explorer Photoshop. Suivre des tutoriels m a également aidé à progresser. Quels sont vos projets en cours? À venir? Outre les projets de mon agence, j aimerais lancer une boutique en ligne de T-shirts sur laquelle j ai commencé à travailler. J espère aboutir à quelque 106 interview

6 ITW À Vous De Jouer Pour le site de l association de théâtre À Vous De Jouer, les clients désiraient un site assez sobre, un peu décalé, axé sur les galeries de photos de spectacles et modifiable. Niveau fonctionnel, j ai pensé à utiliser Flickr pour gérer les galeries de photos simplement. Graphiquement, le slider avec un arrière-plan en diagonale changeait un peu de l ordinaire, tout comme la présentation textuelle de la page Spectacles. Il faudrait plus de lignes pour expliquer en détail, je vous invite à visiter le site pour juger la création! chose de concret rapidement, le design du site Internet est en cours! Êtes-vous freelance ou salarié? Je suis en poste en tant que DA Junior dans l agence Web 4w.fr et en parallèle j ai acquis le statut d autoentrepreneur. Quand avez-vous commencé à vous intéresser au Webdesign et pourquoi? Ma passion pour le Webdesign s est révélée après ma formation, où j étais plus orienté vers l infographie, puis j ai commencé à réaliser les maquettes de sites Internet en agence. Réfléchir à l ergonomie, la navigation, le style des sites m a plu. Le Web est aussi en perpétuelle évolution, ce qui nous permet de faire, d inventer de nouvelles choses sur chaque site sur lequel on travaille. Cette diversité me plaît beaucoup. Faites-vous uniquement du design ou aussi de la programmation? Je m attache uniquement à l aspect graphique, ergonomique des sites Internet réalisés, avec quand même des notions en CSS. Cela facilite la relation entre mon travail et celui des intégrateurs. Je prévois de me mettre au CSS3 et à HTML5 peut-être! Où puisez-vous vos idées, votre inspiration? Le Web est ma principale source d inspiration. Twitter notamment me permet de suivre le lancement de nouveaux sites. Les galeries de Behance sont aussi des références incontournables (Typography Served, Web Design Served...). Sans oublier la communauté mondiale de designers Dribbble, où inspiration et échange sont les mots d ordre! Quels sont vos coups de cœur du moment? J ai particulièrement apprécié le site Nike Better World et celui du studio norvégien Unfold avec un effet de scroll Parallax très innovant. Il y a aussi les réalisations de l agence HelloHikimori, des sites graphiquement superbes et interactifs, dont le dernier en date pour la série The Walking Dead. Dans un autre registre, j aime beaucoup la simplicité d un site comme celui du studio 80/20, en One Page. Si vous souhaitez ajouter quelque chose Je tiens à remercier mes collègues, avec qui travailler est un plaisir au quotidien, et mon amie pour qui ce n est sûrement pas tous les jours facile (mais qui a ses bons côtés!) de partager la vie d un graphiste un peu geek :). interview 107