EN

Réalités Parallèles

Ergonomie et conception de jeu vidéo

Presentation Axure

  1. Les outils de conception
    1. Le sitemap
    2. Les widgets
    3. Les masters
  2. La zone de travail
  3. Panneaux d’options
    1. Widget interactions and notes
    2. Widget properties and style
    3. Widget Manager
  4. Pour commencer à travailler avec Axure, il n’y a besoin que de deux choses

Axure est un logiciel de maquettage destinés aux concepteurs web : ergonomes, UX designers. Il permet de faire du maquettage à différent niveaux de fidélité, de la basse définition stylisée en “traits à main levée” jusqu’à la simulation complète d’une application gérant variables et cas d’utilisation dynamiquement.

La principale force d’Axure est sa richesse fonctionnelle là où des outils comme Balsamiq permettront de réaliser plus vite des maquettes de basse définition, avec une prise en main plus simple.

Axure se présente comme un logiciel classique, séparé en trois volets. A gauche, les outils de conception, au centre, la zone de travail, et à droite, les panneaux d’options.

Screenshot donnant une vue d'ensemble de l'interface d'Axure.

Les outils de conception

Le sitemap

Le sitemap permet de gérer, créer, déplacer et renommer les différentes pages web qui composeront la maquette finale. Elle reflète généralement l’arborescence du site cible.

Screenshot du plan du site dans l'interface.

Il est possible de créer des sitemaps très simples, en ajoutant des pages et en les réorganisant par drag-and-drop. Les sitemaps plus complexes peuvent être organisés clairement grâce à la possibilité de gérer des niveaux de hiérarchie et de grouper des ensembles de pages dans des dossiers.

Les widgets

Les widgets sont les briques qui permettent, par combinaison, de créer rapidement des maquettes détaillées. Ils peuvent être ajoutés facilement dans les maquettes réalisées en effectant un drag and drop des éléments voulus vers la zone de travail. Ils peuvent ensuite être adaptés et personnalisés pour Différent types de widgets existent :

Screenshot du bloc widgets dans l'interface.

Les masters

Screenshot de la liste des masters dans l'interface

Les masters sont des assemblages de widgets. Il est possible de créer et gérer des masters comme des pages. Tout comme les widgets, ils peuvent être ajoutés une ou plusieurs pages de la maquette par simple drag-and-drop. Contrairement aux widgets, ils sont communs à l’ensemble des écrans auxquels ils sont ajoutés et ne peuvent pas être modifiés indépendamment sur différentes pages.

Les masters sont particulièrement adaptés pour intégrer dans les pages des éléments qui doivent être commun à plusieurs écrans. Dans le web, les masters sont particulièrement utiles pour gérer les en-têtes et pieds-de-pages par exemple.

La zone de travail

La zone centrale ou zone de travail permet d’afficher le contenu des différentes pages et masters. Par un drag and drop, les éléments peuvent être placés et arrangés dans la zone de travail.

Celle-ci dispose d’une grille et de guides configurables qui permettent de faciliter l’alignement des blocs et de définir une grille de conception cohérente entre les pages (ex 960).

Screenshot de la zone de travail vide

Plusieurs pages peuvent être ouvertes en même temps. Elles s’affichent alors sous forme d’onglets au dessus de la zone de travail. Des raccourcis sont disponibles pour configurer les points de rupture dans le cadre de responsive design et basculer rapidement d’une vue sur l’autre.

Panneaux d’options

Widget interactions and notes

Screenshot des options des widgets

Le panneau widget interactions and notes permet de rendre dynamique les différents contenus ajoutés dans les pages. Parmi les actions proposées, les plus simples et fréquemment utilisées sont :

Des fonctionnalités avancées permettent les utilisateurs plus experts ou ayant besoin de faire des maquettes de plus haute fidélité de gérer des interactions riches :

Widget properties and style

Screenshot de l'interface des options de widget et des styles.

Les styles et propriétés de widgets peuvent être gérés via les options sur la gauche. Elles permettent de définir finement la position et taille des éléments, des marges, et plus généralement le style graphique des contenus de la page

A noter : les styles peuvent être édités rapidement via des raccourcis disponibles dans les barres d’outils en haut du logiciel :

Screenshot de la barre d'outils.

Widget Manager

Lorsque la maquette est très chargée d’éléments, notamment dynamiques, il peut devenir difficile de retrouver un élément dans la zone de travail. Le widget manager présente une liste de tous les éléments qui sont placés dans la page active, et permet de les rechercher et sélectionner rapidement, pour peu qu’ils aient été nommés correctement.

Pour commencer à travailler avec Axure, il n’y a besoin que de deux choses

Dans l’interface Axure, cela signifie que pour vos premières maquettes, vous n’avez besoin d’utiliser que les widgets et la zone de travail.

Posté par Cornelia le 2014-04-21. Dernière mise à jour le 2020-12-21

Articles sur des sujets connexes

Les bases d’Axure partie 1 - Créer une maquette navigable dans Axure

Didacticiel Axure Débutant, Maquettage en fil de fer,

Les bases d’Axure partie 2 - Créer des interactions au sein des pages

Didacticiel Axure Débutant, Maquettage en fil de fer,

Les bases d’Axure - créer des menus optimisés avec les dynamic panels

Didacticiel Axure Débutant, Maquettage en fil de fer,

Les bases d’Axure partie 3 - les dynamic panels

Didacticiel Axure Débutant, Maquettage en fil de fer,

Les bases d’Axure partie 4 - Comment utiliser les Masters dans Axure

Didacticiel Axure Débutant, Maquettage en fil de fer,

Axure - Didacticiel complet en Français

Didacticiel Axure Débutant, Maquettage en fil de fer,