Skip to main content
Temps de lecture : 3 minutes

Avant on travaillait nos sites en version desktop. Avec l’arrivée des smarphones, nous avons vu le jour des applications mobiles naitre. C’est pour cela que le mobile-first à toute son importance. D’ailleurs, les tailles d’écrans sont très nombreuses, surtout chez Android.

 

Mobile-first ?

Comme l’indique le terme “Mobile-first”, on commence par penser par le mobile en premier sur une grille de 8px (Grid 8). Autrement dit, on travaille la plus petite taille d’écran possible. D’où le terme de mobile-first, le mobile en premier. La meilleur base est la taille de l’iPhone SE (320 x 568 px).

Attention, chez Android l’unité est le dpi, car on fait appel à la densité de l’écran. Voici un petit récapitulatif pour comprendre :

ldpi

mdpi

hdpi

xhdpi

xxhdpi

xxxhdpi

Et au fur et à mesure, on travaille vers les tailles les plus grandes. De plus, les tailles d’interfaces se diversifie de plus en plus car pour un même projet, vous pouvez aller d’une taille de montre connectée, en passant par le mobile, la tablette, l’ordinateur pour fini par la télévision qui ont des résolutions de plus en plus grande.

 

Pensez petite ergonomie

Les éléments peuvent être traités en découpage, on parle d’atomic design.

Les atomes sont des éléments insécables, comme le texte, une couleur, une forme…

Les molécules sont un ensemble d’atomes comme un bouton.

Les organismes sont un ensemble de molécules comme une tabbar.
Grâce aux organismes, vous pourrez créer un design system complet avec l’état de tous les éléments dont vous avez besoin dans la création de template de votre page. Vos mieux travaillez en pourcentage.

 

UX Writer

Le texte est aussi important. Il faut adapter votre ligne éditoriale en pensant que sur le mobile, la majorité des utilisateurs ne lisent pas les textes. Veuillez à privilégier les illustrations et animations, suivi des titres avec peu de caractères, une petite description sur deux à trois lignes maximum et pour finir par un bouton. Les mots doivent être très court et les paragraphes doivent aller à l’essentiel.

Share