22 mars 2013 ~ 0 Commentaire

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 ?

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

Il suffit de quelques mots clefs

Il permet à l’utilisateur dans ce cas précis d’attirer son attention sur le texte, qui est assez courtet 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.

fold_277x157 

Le fold

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.

Laisser un commentaire

Vous devez être Identifiez-vous poster un commentaire.

Bluraytechnology |
RonnyLassooij |
Petitesastucesutiles |
Unblog.fr | Annuaire | Signaler un abus | Le Blog d'AXILEO
| Wowgold4
| Diablo3gold4