Comment concevoir un design adapté au matériel ?
Dans le monde d’aujourd’hui, il n’y pas que les écrans d’ordinateur ou d’écran de téléphones. Nous parlons des deux, et des tablettes, et aussi des montres intelligente et probablement bientôt des Google Glass. Donc dans cette leçon nous allons parler du :
Design pour les appareils
Vous venez juste d’arriver ? Vous voudrez peut être commencer par le début.
Étape 1 : Souris ou tactile ? Utiliser un site ou une application avec une souris ou vos doigts peut complétement modifier la façon de concevoir son design. Vous trouverez plus d’information dans l’article ProTips about Touch vs. Mouse interface (en anglais).
Étape 2 : Commencer petit. Beaucoup de gens pense que le Mobil first design (mobile en premier) est devenu populaire à cause de l’augmentation très importante de l’utilisation du mobile pour surfer sur internet. C’est vrai, mais en partie. En réalité si vous créer pour le plus petit et le moins puissant des appareils en premier, cela va vous permettre de vous concentrer sur le contenu et les fonctionnalités indispensables.
Si vous le faites dans le sens contraire, c’est comme si vous essayiez de faire rentrer un marshmallow dans une tirelire, ce qui ne sera ni simple, ni élégant.
Étape 3 : quel est le super pouvoir de l’appareil ? Avec les appareils mobiles, nous pouvons nous déplacer (d’où leur nom…) et – surprise – nous passons plus de temps sur ceux ci et la localisation devient un facteur important. De plus ils sont petits et tactiles ce qui apporte de nombreuses fonctionnalités (zoom avec deux doigts, faire défiler l’écran, l’accéléromètre, l’orientation etc…). Les ordinateurs, au contraire, ne sont pas très pratiques à déplacer.
Mais ils sont plus puissants, ils ont des grands écrans, des grands claviers et la souris permet une précision de sélection bien plus importante. Ne vous inquiéter pas de la cohérence, parfois, différents appareils nécessitent différents modes de fonctionnement pour votre application ou votre site.
Étape 4 : Prendre en considération la partie logicielle. Mac vs. PC est plus qu’une campagne de publicité, mettez un utilisateur de PC sur un mac et vice versa, vous allez vitre vous en rendre compte. De plus IOS7 et Windows 8 sont différents de iOS6 et Windows Vista. Il en va de même pour les navigateurs. Vous devrez choisir avec quels logiciels sera compatible votre application ou votre site. A chaque fois que vous rajouter une compatibilité, cela va multiplier votre travail. Pensez y lors de faire votre choix !
Étape 5 : Soyez responsive. Est-ce que votre application est disponible sur le web? Prenez-vous en charge plusieurs types de téléphones ? Et si Apple fait un nouvel iPhone qui est un peu différent? L’Internet moderne - qu’il s’agisse d’un site Web ou une application - fonctionne sur tous les appareils, assurez-vous donc que votre site ou votre aplication peut s’adapter au dispositif que l’utilisateur décide d’utiliser.
Étape 6 : Pensez à plus d’un écran à la fois. Cette étape est un peu difficile, mais je pense que vous êtes prêt pour ça. Pouvez vous utiliser votre téléphone et votre ordinateur ensemble, comme une télécommande avec votre TV ? Est ce qu’un groupe de téléphone peuvent contrôler un jeu sur une tablette ? Qu’est ce qui se passe si vous êtes connecté sur votre téléphone et votre ordinateur en même temps, pouvez vous partager les données de l’un à l’autre ? Qu’en est il de la synchronisation des données ? Pensez à ce genre de choses !
Sources et ressources
Ressources sur le responsive web design
