Dans ce tuto Photoshop sur le Webdesign en Mobile First, nous allons apprendre à créer une maquette de page d'accueil responsive en amélioration progressive. C'est-à-dire que l'on partira d'un webdesign d'une version mobile de notre site afin d'ajouter des fonctionnalités supplémentaires pour les versions tablettes et desktop. Concevoir son site Internet en pensant d'abord à la version mobile, c'est ce qu'on appelle le Mobile First en UX design.

Le but de ce tuto est de mieux appréhender le système de grille de Bootstrap qui nous permettra de réaliser une intégration HTML5 & CSS3 en Responsive Design par la suite, lors d'un second cours.

Au programme de ce tuto Photoshop Webdesign Mobile First

Au cours de ce tutoriel Webdesign Photoshop, nous apprendrons à :

• Créer un gabarit de page en version mobile (lecture linéaire).
• Créer un gabarit de page en version tablette (lecture sur 2 colonnes).
• Créer un gabarit de page en version desktop (lecture sur 4 colonnes).
• Placer des repères.
• Créer des boutons.
• Augmenter la taille de son espace de travail pour le switch de versions et donc mieux apprendre à travailler en responsive sous Photoshop.

A la fin de ce cours vous serez en mesure de mieux appréhender le travail de Webdesign dans la conception d'un site responsive, avec une approche Mobile First.