100 points à savoir sur…
Développement Web éco-conçu

Nous pouvons développer une structure de wireframing réussie pour la conception mobile-first en suivant 6 étapes :

1. Créez un inventaire du contenu

En écrivant le contenu que vous pensez être essentiel pour le wireframing, vous filtrez les éléments inutiles.
Veuillez noter ! L'objectif n'est pas d'éliminer des éléments mais de trier le contenu en fonction de son niveau de priorité en primaire, secondaire et tertiaire.

2. Concevoir en fonction de la hiérarchie visuelle

En utilisant les informations de votre inventaire de contenu, déterminez comment vous allez afficher vos différents éléments en fonction de leur niveau de priorité. N'oubliez pas que les éléments jugés prioritaires doivent être affichés de manière plus visible sur votre site Web !

3. Restez simple

Vous ne savez pas comment afficher votre contenu, maintenant que vous avez éliminé les éléments non essentiels ? Voici quelques conseils de conception pour une bonne présentation :

• N'encombrez pas votre menu de navigation avec trop de liens.
• Quel que soit le sujet, utilisez le moins de pages possible pour afficher le contenu.
• Structurez le contenu en deux colonnes au maximum.
• Utilisez un seul type et une seule taille de police pour le texte (le mieux est d'opter pour une police système et une taille de police de 16 pt pour le corps du texte).
• Utilisez les espaces blancs pour améliorer la lisibilité et réduire le désordre.

N'oubliez pas ! Le chargement de votre page Web ne doit pas prendre plus de 3 secondes, car les utilisateurs sont plus susceptibles de quitter un site Web qui prend plus de temps à charger. La simplicité de votre conception réduira le temps de chargement de votre site Web.

4. Soyez attentif à la taille

Comme le design mobile-first doit s'adapter à une taille d'écran plus petite, la taille de vos éléments aura un impact sur les performances du site et sur l'expérience utilisateur. Vous devrez agrandir certains éléments car les doigts humains sont moins précis que les curseurs de souris. C'est le cas des boutons et des fonctions interactives qui peuvent sembler plus petits sur les ordinateurs. Cependant, plus grand n'est pas toujours mieux pour d'autres éléments de conception ! Par exemple, lorsque vous ajoutez des images, évitez celles qui sont trop grandes car elles ne s'afficheront pas correctement.

5. Testez sur des appareils réels

Une fois que vous avez terminé une version bêta de votre conception, la meilleure façon de déterminer si elle est utilisable ou non est de voir par vous-même. Chargez les pages de votre site Web depuis votre téléphone portable et ceux de votre entourage.
Ce faisant, posez-vous les questions suivantes :

• Les pages Web se chargent-elles rapidement ?
• Le contenu le plus important est-il affiché en premier ?
• Le contenu (texte et images) est-il lisible ?
• Y a-t-il suffisamment d'espace blanc autour des éléments ?
• Les éléments interactifs sont-ils facilement activables par le toucher ?

6. Utilisez votre conception comme base pour aller plus loin

Si vous avez suivi les étapes mentionnées ci-dessus et que vous êtes satisfait du fonctionnement de votre site Web sur les téléphones mobiles, félicitations : vous avez réussi à créer une solution de conception élégante et durable compatible avec les plus petits appareils (et les plus fréquemment utilisés) ! Vous pouvez maintenant commencer à penser "plus grand" et créer la version pour ordinateur de votre site Web en élargissant et en complétant vos solutions de conception.