Réaliser des Maquettes de Conception Graphique Adaptatives

Réaliser la maquette dans Photoshop
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre le Responsive Design
Revoir le teaser Je m'abonne
Transcription

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

L'objectif de cette vidéo est d'apprendre à créer des maquettes de conception graphique adaptées à différents types d'écrans, en utilisant des points de rupture et des grilles structurées, afin de faciliter l'intégration et la cohérence visuelle des projets web.

Découvrez comment réaliser des maquettes de conception graphique pour différents types d'écrans, en respectant les points de rupture et en utilisant des grilles de mise en page précises.

Dans cette leçon, nous explorons la création de maquettes de conception graphique adaptées aux divers appareils, notamment les écrans, tablettes et smartphones. En utilisant Photoshop et d'autres logiciels de création graphique comme Illustrator, nous avons conçu trois maquettes respectant des points de rupture spécifiques.

Nous avons déterminé un point de rupture à 320 pixels pour les smartphones, 769 pixels pour les tablettes, et 1200 pixels pour les écrans plus larges. Nous expliquons l'importance de la précision des pixels dans l'intégration et comment utiliser des grilles de tailles diverses pour structurer vos maquettes.

N'hésitez pas à employer des grilles préexistantes comme celle du site 960.gs, ou à créer vos propres grilles adaptées. Nous abordons également des outils disponibles en ligne pour faciliter ce processus. Ces grilles sont essentielles pour garantir que chaque élément de votre conception s'aligne correctement, assurant une mise en page cohérente et efficace lors de l'intégration.

Voir plus
Questions réponses
Quel logiciel a été utilisé principalement pour réaliser les maquettes présentées?
Les maquettes présentées ont principalement été réalisées en utilisant Photoshop, bien que d'autres logiciels comme Illustrator puissent également être utilisés.
Quelle est l'importance des points de rupture dans la création de maquettes?
Les points de rupture sont essentiels car ils déterminent la façon dont la mise en page se réajuste à différentes tailles d'écran, assurant une expérience utilisateur cohérente et optimisée sur tous les appareils.
Pourquoi la grille de 960 pixels est-elle souvent utilisée?
La grille de 960 pixels est couramment utilisée car elle est facilement divisible en plusieurs colonnes et convient à une large gamme de résolutions d'écran, facilitant ainsi la conception de mises en page flexibles et cohérentes.
Nous allons à présent voir comment réaliser les maquettes de conception graphique. Depuis Photoshop, nous avons réalisé trois maquettes qui sont présentées ici, donc une maquette pour l'écran, une maquette pour les tablettes, et une maquette pour les écrans de type smartphone. Bien évidemment, ces maquettes ont été réalisées dans Photoshop, mais vous pouvez utiliser d'autres logiciels de création graphique, ou encore vous pouvez utiliser Illustrator ou d'autres logiciels semblables qui vous permettraient de réaliser ce type de maquettes, à condition bien entendu qu'il n'y ait pas de travail exclusivement sur l'image. La taille des trois maquettes doit bien évidemment respecter les points de rupture que vous avez au préalable déterminés. Nous avons déterminé un point de rupture sur 320 pixels, c'est la raison pour laquelle cette maquette est de taille 320 par 790 en haut, donc la hauteur n'ayant pas beaucoup d'importance. La maquette numéro 2 a été réalisée sur une taille de 769 pixels, donc la précision du pixel est ici relativement importante, puisque lors de l'intégration, nous allons récupérer très précisément les différents espaces et les différentes tailles des éléments pour pouvoir les traduire plus tard en pourcentage. Donc la maquette ici doit être réalisée de façon le plus précise possible. Et puis enfin, notre troisième maquette a été réalisée pour une taille de 1200 pixels, c'est la taille que nous avons choisie comme celle représentant le maximum de la visualisation à l'écran. Cette maquette a été réalisée à partir d'une grille dont les colonnes sont d'une taille de 50 pixels et chaque colonne est espacée par une taille de 22 pixels. Celle-ci possède 16 colonnes, plus deux morceaux de colonnes à droite et à gauche. La maquette concernant les tablettes a été réalisée à partir de 14 colonnes, et puis celle du smartphone a été réalisée à partir de 4 colonnes seulement. Alors ici j'ai réalisé des maquettes avec des colonnes ayant respectivement la même taille, donc 55 de large et puis espacée de 22 pixels. Mais nous aurions pu également concevoir une maquette avec des tailles de colonnes différentes, de manière proportionnelle à la réduction de taille d'une maquette vers une autre. Cela aurait été également possible. L'usage courant est généralement ce que j'ai réalisé, c'est-à-dire une même grille avec simplement un nombre de colonnes différentes. Je suis parti sur une grille ayant donc 55 pixels de large espacées de 22 pixels entre chaque colonne. La construction de ces différentes grilles peut être faite un petit peu comme cela vous arrange, mais l'important étant que l'ensemble des éléments prévus pour la construction de la page puissent pouvoir s'insérer correctement et correspondre plus ou moins à l'emplacement de votre grille. Il faut donc vérifier et calculer et regarder quelle sera la future mise en page pour en quelque sorte faire un petit passage entre la réalisation de la grille et le nombre des éléments. C'est un petit compromis à réaliser dès le départ. Si vous ne souhaitez pas réaliser de grille par vous-même, il existe sur le web un certain nombre de sites qui vous proposent des grilles déjà réalisées, ce qui constituerait éventuellement une première base. Ce ne sont pas des grilles toujours prévues pour le responsive web design, ce sont des grilles qui sont prévues pour une taille d'écran fixe, mais que vous pourrez très facilement adapter ensuite aux différentes maquettes. Il y a notamment une grille qui s'appelle 960. Alors voici, nous sommes sur le site 960.gs. Je vais revenir sur la page d'accueil qui est ici, donc l'adresse 960.gs. Un site qui vous propose en téléchargement un système de grille basé sur une taille de 960 pixels. Alors la taille de 960 pixels est une taille assez intéressante puisque on considère généralement que de nombreux navigateurs, de nombreux écrans, font une taille de 1024 pixels, ce qui est une taille à la fois relativement grande, mais également relativement petite si on considère la taille moyenne des écrans, puisque la taille moyenne des écrans français est à peu près de 1300 pixels. 960 constitue un bon compromis. Pourquoi 960 ? En fait, nous sommes partis sur une taille de 1024. A ces 1024 pixels en largeur, il est indispensable de retirer d'éventuels ascenseurs sur la partie droite, qui constituent environ une vingtaine de pixels, 20 à 30 pixels selon le navigateur. Et puis ensuite, une taille doit être facilement divisible en colonnes et puis en gouttières. Donc 960 est un chiffre très intéressant, puisqu'il est divisible par 2, 3, 4, 5, 6, par 7 peut-être pas, mais au moins par 8, 10, ainsi que 12. Donc il est, grâce à cela, possible de réaliser une grille très facilement. Vous avez un exemple au niveau de vue démo, qui vous montre différentes possibilités de mise en page à partir de cette grille. Donc une grille constituée de 12 colonnes, de 16 colonnes. Et vous avez également la possibilité, depuis ce site, de télécharger des masques de grille au format Illustrator, Photoshop et même InDesign. D'autres systèmes de grille existent, par exemple autour de 1200 pixels, que vous pourrez également trouver sur le web, ou bien, comme je l'ai fait, réaliser votre grille de montage. Nous avons un court instant sur nos maquettes. Nos maquettes ont été réalisées à partir de grilles, et j'ai ajouté également quelques indications pour chacune de nos zones. Ces indications seront très importantes par la suite lors de l'intégration, puisqu'elles nous permettront de visualiser très vite les différentes tailles importantes de nos maquettes. Voici donc ces tailles qui sont forcément différentes d'une maquette à l'autre. Donc c'est un petit travail à réaliser que je vous conseille, ce qui permettra d'éviter de vous perdre d'abord entre les différentes tailles de maquettes, et puis surtout d'éviter de vous tromper entre une maquette et une autre au niveau de sa taille. Donc là, par exemple, l'espace situé à gauche est de 14 pixels au niveau de la maquette pour tablette, alors que l'espace situé à gauche pour les écrans est ici de 35 pixels. Donc le fait de les écrire et d'avoir vraiment sous les yeux nous permettront par la suite de gagner du temps et d'avoir des données constantes.

Programme détaillé de la formation

Nos dernières formations WebDesign UX / UI