Maquette graphique

Aujourd’hui dans mon studio je vous parle de Maquette graphique. Pourquoi Faire une maquette graphique quels sont les pièges à éviter ? Quels conseils pour la réalisée ?

 

Voici la transcription de la vidéo maquette graphique :

Bonjour à tous et bienvenue dans mon studio
aujourd’hui on va parler maquette graphique.

Si vous n’avez pas regardé
mes vidéos sur le wireframe et les prototypes avant faite le car elles pourront vous aider
pour la réalisation de votre maquette graphique.

Pourquoi ? Car la maquette graphique ne va
pas seulement jeter les bases de l’esthétisme de votre site mais aussi de son ergonomie
Le wireframe, les prototypes et les tests utilisateurs vont justement permettre d’affiner
cette ergonomie.

Lors de votre première proposition essayer d’avoir trois axes créatifs différents donctrois maquettes graphiques ensuite partez sur celle que vous préférez le plus ça peut être une combinaison de plusieurs.
éviter de revenir à d’autres axes une fois votre foi choix fait.

Voici une proposition de nomenclature dans le cas d’une maquette graphique vous pouvez ajouter par exemple l’orientation d’une tablette.

[titre-page]-[périphérique]-[orientation]-[v-NB].psd

Ce qui nous donne : [contact]-[tablette]-[portrait]-[v-01].psd

Pensez donc à bien numéroter et organiser vos différentes versions de maquettes graphique.
Car vous allez certainement faire beaucoup d’essai et d’aller retour et c’est une bonne chose d’en faire Pour gérer plus facilement les allers retours vous pouvez utiliser l’espace de stockage qui est alloué avec votre compte créative Cloud.
Ainsi vous pourrez partager plus facilement votre maquette avec votre client mais en plus

il y a un système de notation directement intégré à l’espace Web c’est très pratique et le client peut même cocher et décocher les calques en ligne.

Il est important également d’inclure l’intégrateur et les développeurs lors de la phase de la maquette graphique en effet si vous n’avez pas les compétences c’est eux qui pourront vous dire ce qui est réalisable et ce qui peut être optimisé.
Si vous avez la chance de partir d’un site déjà existant vous devez faire un audit ergonomique avant de vous lancer dans la refonte de votre site et de votre maquette graphique

Faire remonter les questions de vos utilisateurs leurs points de blocage regarder les tailles d’écran les plus souvent employées et suivre le parcours de vos clients sur votre site à l’aide de Google analytics par exemple.
Si vous n’avez pas de site (ou même si vous en avez déjà un) faites une planche tendance pour vous inspirez faites également un audit des sites concurrents afin d’aller prendre les bonnes idées et suivez quelques règles ergonomique
avant de vous lancer.

L’ergonomie est un sujet très vaste qui mérite plusieurs vidéos. Restons pour l’instant

concentrer sur notre processus de création de maquette.

Après avoir fait votre wireframe vous devrez normalement savoir précisément le nombre de modèles de pages différent que vous devez réaliser et les différents supports sur lesquels travailler…

Vous devriez donc avoir une maquette par type de page.

Vous pouvez avec la dernière version de PhotoShop avoir plusieurs formats de votre maquette

au sein d’un même PSD c’est très pratique pour pouvoir mettre côte à côte la tablette le mobile la et pouvoir simplement comparer le design.

je vous conseille de commencer par les pages les plus faciles car en vous posant des questions simples et en posant les bases et les concepts de votre application sur des pages intérieures vous aurait plus de facilité à aborder la page d’accueil qui est toujours un petit peu particulière.

C’est également plus simple de faire valider les pages intérieures pour commencer et ensuite de décliner votre concept sur une page plus complexe.

Quelques conseils pratiques pour finir.

– Collecter un maximum de ressources.

– Demander photos textes, brochures de l’entreprise pour vous inspirer.

– Limiter le nombre de typo (3 – 4 maximum). Chacune ayant un usage bien spécifique. n’oubliez pas de sélectionner des polices compatibles avec le web), respecter bien la charte graphique ou a défaut la communication de l’entreprise via ses supports affiche, intranet, flyer, brochure…

Si vous n’avez pas de photos et que vous avez les compétences n’hésitez pas à vous constituer votre propre
photothèque ou (mieux) à demander a un photographe professionnel de couvrir tel ou tel sujet qui vous manque.

Cela peut être une photo de votre boutique un portrait de votre collaborateur ) des photos de vos produits services etc etc …

Vous n’imaginez pas le pouvoir d’attraction d’une belle photo pour mettre en valeur

les pages clés de votre activité ou service.

Comme nous l’avons vu dans la vidéo sur le plan du site tenté de simplifier un maximum

votre menu principal. 8 catégories maximum. Vous pouvez ajouter des menus secondaires soit dans le footer soit dans header de votre site à condition que leurs fonctionnalités soient clairement défini que cela ne fasse pas doublon avec votre menu principal et de ne pas trop multiplier les menus quand même.

Dernier conseil pour les samrtphone et tablette vous devez prévoir dans votre maquette des menus et des boutons plus gros car le pouce est un pointeur bien plus gros et moins précis que la souris.
FIN

j’attends donc vos commentaires et je vous souhaite bon courage si vous avez des questions je répondrais avec plaisir dans les commentaires (Sur YouTube) Je vous embrasse fort je vous dit à très bientôt dans mon studio geecker bien mais pas trop CIAO !

On se retrouve sur :

– Twitter : http://bit.ly/1obyNGT
– Facebook : http://on.fb.me/1gz1uhF
– Google Plus : http://bit.ly/1gz1nTp
– Linkedin : http://bit.ly/1HfMlqm

J’espère que ma vidéo vous aura plus d’ici là…

« Geecker bien mais pas trop ! ^^ »

Partager l'article

Facebook
Twitter
Google+
Ou (et)

Me suivre sur Facebook

Réseaux sociaux

© 2018 Vincent MARY - N ° SIRET : 50342032500030
4299
4300
4301
4302
4303

Les vendredis #CREATIFS

Prenez une longueur d'avance avec mes conseils et tutos pour créer VOTRE business avec WordPress. Chaque vendredi.

En renseignant votre adresse email, vous acceptez de recevoir chaque semaine nos derniers articles de blog par courrier electronique et vous preneez connaissance de notre politique de confidentialités. Vous pouvez vous désinscrire à tout moment à l'aide des liens de désinscriptions ou en nous contactant à l'adresse [email protected]