• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Ce cours est diplômant et vous permet d'obtenir des crédits universitaires européens (ECTS).

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 17/07/2017

Structurez votre site avec des wireframes

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans ce chapitre, nous allons enfin commencer à concevoir notre site en responsive design ! J'espère que vous êtes prêt à rentrer dans le vif du sujet et à être créatif. :) 

La première étape consiste à définir l’arborescence et la structure de votre site et ensuite à dessiner clairement et simplement, écran par écran, les différentes zones éventuelles de votre site : La barre de navigation, les contenus textes ou images, les boutons valider et retour, le player vidéo, la carte interactive, etc. Autant d’éléments qui nous permettront de nous projeter sur la structure de votre site !

La notion de wireframe pour structurer le design

Je vous ai dit que nous allions commencer à concevoir notre site mais ça ne veut pas dire que vous devez avoir immédiatement ouvert votre logiciel Photoshop !

C'est l'heure de sortir vos crayons

Et oui, le travail de conception commence bien souvent avec un papier et un crayon, afin de réaliser des wireframes. Ces derniers sont très importants pour structurer le design d'un site.

J’aime beaucoup le travail de dessin à la main pour créer les wireframes. L’efficacité du dessin n’est plus à prouver, car rapidement vous pourrez poser les premières briques de votre projet. Dans le chapitre précédent, j'avais bien insisté sur le coté pratique de cette méthode. Rapide en exécution, elle se révèle d'une efficacité monstre si vous travaillez dans le cadre d'un projet en groupe à l'école ou dans le milieu professionnel.

Les échanges entre collaborateurs sont très importants. Et sur le papier, vous anticipez tous les besoins en un coup de crayon, vous échangez surtout rapidement, et vous rebondissez d'idées en idées en un rien de temps ; là où, si vous aviez commencer à dessiner votre cercle sur Photoshop, il se serait sans doute écoulé 2 précieuses minutes durant lesquelles des centaines d'idées et de questions peuvent jaillir !

En plus, le crayon est un outil universel : pas besoin de cours de dessin, seul poser l'idée compte et surtout échanger, échanger, échanger...

Voici le projet sur lequel je vais travailler pour ce cours
Voici les premières ébauches sur papier du projet sur lequel je vais travailler tout au long de ce cours...

Si vous êtes perfectionnistes, et que vous appréciez les beaux outils, il existe même une boutique UIstencil.com, qui vend tout l’attirail du parfait ergonome/UX Designer, pour que vous puissiez vous éclater à dessiner des wireframes sur papier.

Le site UI stencil
Le site UIstencil.com

Cheminons ensemble

Ces wireframes sont essentiels car ils vont donner une vision globale de chaque écran, mais surtout définir le ou les chemins utilisateur de votre site.

En quoi est-ce utile ?

Décrire ces scénarios vous permettra :

  • d'imaginer comment votre site peut être consulté et utilisé ;

  • d'être sûr du bon déroulement des pages de votre site. Par exemple, dans la cas d'un portfolio, assurez-vous que votre futur employeur arrivera bien à la page contact depuis la home page (page d'accueil), en passant par la page de vos projets.

  • De guider l'utilisateur tout au long de la consultation de votre site et d'anticiper les erreurs éventuelles qui pourraient le faire partir de votre site à tout jamais !

Notre exemple fil rouge 

Afin de rentrer dans le concret et de ne pas me perdre en route, je vais m'appuyer tout au long de ce cours sur un projet-exemple que je vais développer à chaque étape de la conception.

Je sais que vous êtes maintenant persuadé tout comme moi qu'un site responsive est la bonne réponse à beaucoup de projets web différents (site d'information, de e-commerce...). Alors puisque nous avons le choix, autant se faire plaisir ! Je vous propose de voyager un peu avec moi, en réalisant un site photo directement inspiré de mon dernier voyage : les temples d'Angkor au Cambodge. 

Dans mes premières esquisses, je place donc tous les éléments d'interfaces dont je vais avoir besoin, et je décris en même temps le chemin utilisateur allant de la home page à la partie galerie photo.

mon cheminement utilisateur
Mon cheminement utilisateur

Sur la home page, nous aurons accès aux premiers contenus en faisant défiler la page qui s'étend sur plusieurs écrans :

  1. Le visiteur arrive d'abord sur une superbe image des temples d'Angkor pour que la magie opère immédiatement en l'immergeant sans attendre dans ces ruines au passé incroyable. Sous mon titre, j'installe une introduction qui, tout comme la photo principale, invite au voyage. L'utilisateur scroll / fait défiler la page vers le bas.

  2. L'utilisateur arrive sur une illustration de la carte du Cambodge pour situer plus précisément les temples d'Angkor. Un texte décrivant la situation géographique, et me présentant au passage, permettra à l'utilisateur de mieux préparer son voyage.

  3. J'invite ensuite l'utilisateur à visiter les temples avec des extraits de la partie galerie photos. Si le charme opère, je passe ainsi directement à la partie 4 !

  4. L'utilisateur se promène dans les ruines des cités khmers, dans la partie galerie photo où j'y expose tous mes clichés.

Vous voyez, le chemin utilisateur vous a permis de comprendre comment je compte faire voyager celui-ci au sein de mes pages. Vous aussi, essayez-vous rapidement à décrire ce type de chemin sur vos propres projets !

Les wireframes sur écran

Il est possible de représenter graphiquement de différentes façons le chemin utilisateur. Nous allons voir dans le prochain chapitre comment passer rapidement du crayon à l'écran.

Mais est-ce vraiment bien utile de recopier nos dessins à l'écran ?

Et bien, cela dépend bien sûr de l'ampleur de votre projet, mais en général oui !

  • Cela vous permettra de poser définitivement tous les éléments de votre site ainsi que son arborescence. Autant dire que cela donnera un peu de clarté à tous les gribouillis que vous, ou vos collaborateurs, auront fait. 

  • Dans un travail de groupe, ce document numérique servira de référence tout au long de votre projet.

Quelques exemples

Dans le cadre de mon rôle de formateur, j'entraîne souvent mes étudiants à cet exercice du wireframe et du cheminement utilisateur. Voici ainsi quelques exemples de travaux réalisés en classe :

Projet 2ème ICAN Webdesign - application Universcience
Projet 2ème année ICAN Webdesign - application Universcience

Dans cet exemple très graphique du cheminement utilisateur (à lire de bas en haut), mes étudiants ont posé le fonctionnement d'une application dédiée à l'établissement public Universcience (issu du rapprochement entre le Palais de la découverte et la Cité des sciences et de l'industrie à Paris), suivant 3 cas de figure :

  1. En tant qu'utilisateur (représentée par la bulle "you"), vous êtes soit déjà inscrit, auquel cas vous vous connectez (bulle connexion). Soit vous êtes un utilisateur qui ne souhaite pas s'inscrire, mais qui pourra tout de même accéder aux fonctionnalités basiques de l'application (bulle invité), soit enfin vous êtes un nouvel utilisateur (bulle inscription).

  2. Un fois l'étape d'identification réalisée, vous avez accès au menu de votre application qui vous permettra par exemple de réserver vos billets pour une exposition, de chatter avec la communauté, etc. ; ce menu étant le "hub" (plateforme centrale) de tous vos besoins.

Dans le prochain exemple, des étudiants de 4ème année ont posé des wireframes sur le logiciel Balsamiq que nous verrons au prochain chapitre, pour concevoir un advertgame : une application ludique mettant en scène une communauté d'utilisateurs se défiant autour de challenges par selfies interposés. Très utiles, ces wireframes mis au propre sur l'écran après une première recherche au crayon, ont permis au designer de l'équipe de travailler avec des structures de référence tout au long du projet.

 

Projet Neuronolus - application universcience
Projet 4ème année ICAN Webdesign - Neuronolus 

Et le résultat en images, une fois maquetté sur Photoshop :

tada !
tada !

Ne vous inquiétez pas nous arrivons bientôt à la fameuse maquette du site sur Photoshop. Mais avant, concluons cette partie en posant nous aussi nos wireframes avec Balsamiq !

Exemple de certificat de réussite
Exemple de certificat de réussite