De la dernière vidéo, nous savons que nous avons cinq points majeurs à considérer lors du démarrage de la conception de ce site. Nous garderons ces derniers en tête à mesure que nous avançons.
Nous commençons bien sûr «mobile first», et nous allons commencer à comprendre le design dans Photoshop. Nous ne nous attarderons pas là, mais les outils créatifs de Photoshop sont parfaits pour la pensée créative au début d'un projet de conception.
Nous ouvrons le simulateur iOS fourni gratuitement avec XCode sur Mac. C'est pour tester le Web et les applications natives sur un ordinateur de bureau / portable. Nous voulons juste que ce soit rapide afin que nous puissions en prendre une capture d'écran pour nous donner une toile contextuelle dans Photoshop.
Pour mémoire, nous ne démarrons pas d'abord «iPhone», c'est juste un petit écran qui nous permet de concevoir. Nous ne concevrons rien qui soit trop spécifique à la taille ou aux capacités de l'iPhone.
Pour nous donner une toile plus haute pour travailler (pas besoin de confiner le site au-dessus du «pli»), nous coupons le bas du téléphone et le faisons glisser plus bas. Ensuite, nous prenons une fine tranche des bords de l'iPhone et les faisons glisser vers le bas, nous avons donc essentiellement cet iPhone super grand (mais complet).
Nous laissons un guide en place à la fin de l'écran d'origine pour nous rappeler sa taille. Oui, tout le monde fait défiler. Surtout sur mobile. Mais c'est toujours agréable de savoir à quoi ressemble ce premier écran.
Des dossiers
- # 004 - Téléphone Canvas.psd.zip
- # 004 - Photos.zip brutes