Trucs et astuces pour réaliser un bon design d'application #1 : les espaces et les polices.

Une fois n’est pas coutume, je me suis dit pourquoi ne pas proposer un tutoriel écrit. C’est un exercice qui ne me déplaît pas, mais encore faut-il bien le rédiger :) .

Je vais tenter de vous donner quelques petits conseils sur différents thèmes concernant le web design en général.

Aujourd'hui, je vais vous expliquer les deux points forts à ne pas omettre pour le lancement d’un site web qui aura comme objectif de promouvoir votre nouvelle application. J’ai orienté mon web design sur un template assez clair et précis.

Avant de commencer le cas pratique, voici le rendu final du design (cliquez sur le fichier-joint).

Cas Pratique

Imaginons que mon équipe de développeurs veut lancer un produit qui permettrait à des utilisateurs de sécuriser leurs  passwords, comme le fait ci-bien 1Password.

Le cahier des charges stipulent à mainte reprise que le site doit être concis et soigné.

La première chose que l’on voit lorsque l’on regarde le design, ce sont les espaces blancs entre chaque bloc.

Pourquoi utiliser des espaces ?

[caption id="attachment_1158" align="alignright" width="277" caption="Il suffit de quelques mots clefs"][/caption]

Il permet à l’utilisateur dans ce cas précis d’attirer son attention sur le texte, qui est assez court et qui va à l’essentiel. Si on arrive sur le site, sans savoir vraiment où l’on a atterri, on peut savoir déjà de quoi parle le site, en lisant seulement les titres.

Les espaces rendent le contenu textuel plus lisible.

Il faut être sûr de son coup et ne pas abuser également sur les espacements entre les blocs.

Des titres assez gros ?

La seconde technique est d’utiliser des titres assez gros, bien visibles pour l'usager pour encore une fois avertir que l’on change de bloc.

Chose importante, désormais lorsque je dois créer un design pour un client, j’essaye d’user un maximum de vocabulaire approprié au projet, pour être en adéquation totale avec le produit. J’évite d’utiliser le fameux lorem ipsum.

En parlant du texte, je manipule des mots clés qui accentuent l’image du projet.

Ici, nous proposons un produit qui doit inspirer fiabilité, sécurité et facilité d’utilisation.

[caption id="attachment_1159" align="alignleft" width="277" caption="Le fold"][/caption]

Mon fold, c’est-à-dire les 600 premiers pixels en hauteur de mon design, qui sont très importants, est encore une fois clair et concis.

Je propose à l’utilisateur de tester notre produit gratuitement s’il le souhaite, avec un bouton call to action bien mis en évidence. Autour de celui-ci du texte qui pose une question rhétorique, plus une photo de l’application en situation réelle.

Pensez à diversifier vos blocs, proposez du contenu attractif, ayez un sens de l'esthétique pour promouvoir votre produit.

Pour revenir rapidement sur les blocs, proposer à votre utilisateur de voir votre produit en situation réelle avec un support vidéo par exemple, comme le fais ci bien la marque à la pomme.

[caption id="attachment_1157" align="alignnone" width="710" caption="Tutoriel vidéo de l'application"][/caption]

Que doit-on retenir ?

• Penser simple et aller à l’essentiel
• Focaliser le lecteur sur vos titres et les textes explicatifs
• Les espaces pour créer un équilibre entre chaque bloc
• Supprimer lorem ipsum ?

Si ce type article vous plait, j'en ferais surement d'autres.

Pour finir mon avis en la matière est personnel, libre à vous de choisir ou pas mes petits conseils.

N'hésitez pas à me suivre sur dribbble ou sur twitter où je poste régulièrement mes travaux.