Le design web : Les méthodes modernes de création de sites

Prototyper

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les premières maquettes ne sont pas graphiques mais elles vont décrire la structure à l'aide de formes géométriques simples. Elles vont ainsi indiquer la répartition du contenu.

Transcription

Arrivé à ce stade, vous allez probablement vous dire : mais il serait peut-être temps de créer quelque chose, maintenant ? Nous avons audité notre contenu, nous connaissons notre cible, nous avons hiérarchisé, nous avons architecturé ce contenu, nous l'avons structuré. N'allons-nous pas finir un jour ou l'autre par créer une maquette ? Et bien c'est exact, nous allons créer une maquette mais les maquettes que nous allons créer ne vont pas être des maquettes graphiques mais ce qu'on appelle des maquettes filaires. En anglais, on emploie le terme de wireframe mais également le terme de mockup. Il s'agit essentiellement de maquettes de structure. Vous n'allez donc pas placer d'éléments qui vont être des éléments visuels graphiques ou donner l'impression que ce sont des éléments visuels graphiques mais définir à l'intérieur de la page des zones et des emplacements pour des éléments. Et puis ensuite vous pourrez annoter ces différents éléments. Il faut noter qu'il est intéressant de créer des maquettes aujourd'hui pour différents types de périphériques. Nous allons bien entendu commencer par des périphériques de petite taille qui peuvent être par exemple des téléphones, où n'oublions pas que nous allons gérer des priorités. Et puis ensuite nous allons passer à des périphériques qui peuvent être des périphériques plus élargis comme des tablettes où nous aurons toujours la mise en place de ces priorités et vous verrez que dans certains cas certains éléments seront au-dessus ou au-dessous de la ligne de flottaison. Il faut donc penser mobile d'abord. En anglais, on dit mobile first. Pourquoi penser mobile d'abord ? Et bien tout simplement parce que en commençant par des éléments de petite taille vous aurez une meilleure appréciation de la hiérarchie des contenus et donc des éléments à afficher prioritairement. Et puis deuxièmement vous allez pouvoir identifier les éléments qui peuvent être retirés. Et en commençant par des maquettes qui sont des maquettes de petite taille sur des écrans qui sont des écrans réduits, et bien il y a certains éléments dont vous allez vous rendre compte que vous les auriez peut-être spontanément mis en place sur des écrans d'ordinateur mais qu'ils peuvent être tout à fait retirés et qu'au contraire ils auraient parasités des contenus plus importants. Pour réaliser ces maquettes filaires, vous allez pouvoir travailler avec différents types d'outils. Il y a des outils en ligne ici par exemple vous avez Gomockingbird qui permet d'ailleurs avec une entrée gratuite il s'agit d'un système freemium vous allez pouvoir l'utiliser gratuitement avec des fonctions limitées, créer des maquettes qui vont être des maquettes extrêmement intéressantes et vous voyez que sur les éléments qui sont présentés ici, il s'agit vraiment d'éléments schématiques. Nous sommes en train de bâtir un schéma. Lorsque nous testerons ces éléments, nous testerons le fonctionnement schématique de notre site. Il n'existe pas que Mockingbird sur le marché, il y en a bien d'autres. Vous avez Balsamiq également qui fonctionne très très bien. Vous pouvez télécharger une application pour ordinateur. Et puis il y a mon petit préféré qui s'appelle Pencil qui présente la particularité de pouvoir fonctionner en plugin du navigateur Firefox donc il s'agira d'un plugin que vous téléchargerez à partir de la gestion des extensions de Firefox. Mais vous allez pouvoir également télécharger une version qui tournera d'ailleurs sur d'autres plateformes, sur Mac ou sur PC va vous permettre de fonctionner avec un outil qui sera un outil indépendant d'un navigateur. Vous allez pouvoir ainsi créer des maquettes d'interface complète en filaire, c'est-à-dire avec uniquement des éléments de structure. Comme vous le constatez, avec ces maquettes filaires nous n'avons pas encore touché au design de notre site. Nous voulons à ce stade présenter au client qu'une idée qui soit clairement conceptuelle, que de la structure globale du site sur laquelle plus tard nous allons appliquer des conceptions graphiques et des perfectionnements. Mais avec nos maquettes filaires, nous disposerons d'éléments qui vont nous permettre de réaliser nos premiers tests utilisateurs.

Le design web : Les méthodes modernes de création de sites

Ayez une vue d’ensemble du processus de conception de sites web. Définissez la stratégie de contenu, le développement, la conception, les tests, pour finalement lancer votre site.

Aucun commentaire n´est disponible actuellement

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !