CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre le Responsive Design - en HTML5 et CSS3

Réaliser des Maquettes de Conception Graphique Adaptatives

Retour à la formation
Chapitre 3 Leçon 1
Précédent
Suivant

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.

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en design graphique, ainsi qu'une familiarité avec les logiciels comme Photoshop et Illustrator.

Métiers concernés

Les compétences abordées dans cette vidéo sont particulièrement utiles pour des designers UI/UX, des développeurs front-end, et des gestionnaires de projets web.

Alternatives et ressources

Outre Photoshop, vous pourriez utiliser Illustrator, Sketch, Figma, ou même des outils en ligne comme Canva pour créer vos maquettes.

Questions & Réponses

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.
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.
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.