Lycée Saint Vincent BTS 2 - Stage. Axure. Veille. REGNIER Corentin

Dimension: px
Commencer à balayer dès la page:

Download "Lycée Saint Vincent BTS 2 - Stage. Axure. Veille. REGNIER Corentin"

Transcription

1 Lycée Saint Vincent BTS 2 - Stage Veille REGNIER Corentin 15

2 1 Sommaire Présentation.Page 2 Définitions.Page 2-4 Fonctions.Page 5-10 Exemple : Maquette Infitech.Page11-14 «*» Correspond à une définition 1

3 2 Présentation est un logiciel de maquettage aussi appelé wireframe* destinés aux concepteurs web comme ergonome* ou/et UX designer*. Il permet de faire du maquettage à différent niveaux, de la main levée jusqu à la simulation complète d une application gérant des variables et des cas d utilisation dynamiques. Le principal avantage d est sa richesse fonctionnelle. Là où des outils comme Balsamiq* permettront de réaliser plus vites des maquettes de basse définition avec une prise en main plus simple, permet d aller plus loin dans la conception de maquettes. Trente jours d essai sont offerts, la version standard vaut (289$) et la version pro coûte (589$) pour une licence. Le prix baisse si on prend plus de 5 licences inclus d un coup. Une légère différence existe entre la version standard et pro. La pro permet de faire des projets en équipe. Lien d : Wireframe : Définitions La conception de sites Web et d applications mobiles requiert une planification solide. Ainsi, des procédures sont mises en place pour tenter d éviter les mauvaises surprises tout au long d un projet de cette nature. Lors de l étape du design, une de ces procédures consiste à tracer l interface du site Web ou de l application mobile à l aide des wireframes. 2

4 3 Ergonome : L'ergonome web cherche à optimiser l'utilisation d'un site Internet en rendant son interface la plus lisible possible pour l'internaute. Pour cela, il définit l'architecture de l'information, les principes de navigation et la structuration des pages. Il vérifie ses hypothèses en organisant des tests utilisateurs. L'ergonome web peut exercer en tant que consultant dans une agence Web, en tant que travailleur indépendant ou être intégré à l équipe projet d'une entreprise. UX designer : Le designer UX (design de l expérience utilisateur) a pour objectif d insérer du storytelling (mise en récit) dans une expérience d utilisation pour faire naître de l émotion chez l internaute ; son rôle est stratégique dans la conception des pages web. Balsamiq : Présenté comme un outil de Wireframe, ou de Mockups (comprenez dessin d interfaces), Balsamiq est un outil qui s utilise soit en ligne, soit en mode déconnecté. Une version gratuite de 30 jours est disponible depuis leur site, mais si vous le souhaitez, vous pouvez vous acquitter de la somme de 79 pour une licence mono-utilisateur. 3

5 4 Drag-and-drop : Le drag-and-drop (glisser-déposer) est dans une interface graphique une méthode consistant à utiliser une souris, un pavé ou un écran, pour déplacer d'un endroit à un autre un élément graphique présent sur l'écran d'unsmartphone, d une tablette ou d un ordinateur. 4

6 5 Fonctions 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. Outils de conception Plan de travail Panneaux d options 5

7 6 Les outils de conception Le «sitemap»a comme fonctions de gérer, créer, déplacer et renommer les différentes pages web qui composeront la maquette finale. Elle correspondà l arborescence du site ou y ressemblera fortement. 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 effectuant 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 existant : 6

8 7 Des widgets élémentaires : texte, titre, cadre, image, Des widgets dynamiques : champs de formulaires, menus simples préconstruits Des widgets complexes : onglets, pictogrammes de réseaux sociaux, accordéons, player vidéo sont des assemblages de widgets qui peuvent être également utilisés comme briques de base. Des widgets personnalisés : chaque utilisateur a la possibilité d importer ou de créer des librairies de widgets, présentant des interactions complexes qu il a besoin de réutilisé fréquemment. 7

9 8 Les masters Les masters sont des assemblages de widgets. On a la possibilité de créer et gérer des masters comme des pages. 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 ces 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. 8

10 9 La zone de travail La zone de travail permet d afficher le contenu des différentes pages et masters. Par un drag and drop, les éléments peuvent y être placés et arrangés. 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. 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 (design sur mobile et tablette) et basculer rapidement d une vue sur l autre. 9

11 10 Panneaux d options Le panneau d option est divisé en 3 parties : Widget interactions and notes Le panneau widget interactions and notes permet de rendre dynamique les différents contenus ajoutés dans les pages. Widget properties and style : 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. 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. 10

12 11 Exemple : Maquette Infitech Dans la zone centrale est affiché un aperçu de la maquette, on peut aussi voir les onglets 11

13 Sitemap : On peut voir si dessous les pages de la maquette dans des fichiers Lycée Saint Vincent BTS Le bouton «Oui» possède une interaction OnClick qui redirige la page vers une autre page : Message_Suppression_Med

14 13 Cette page un est formulaire. La zone Paragraphe «Commentaire» possède une position ainsi qu une dimension (longueur et hauteur). On distingue aussi un menu apparenté à des liens allant vers les pages principales de la maquette. 13

15 14 En déroulant le «Widget Properties and Style» à droite et en cliquant sur l onglet «Style» on peut modifier la police, la taille, la couleur, la position et pleins de paramètres permettant de personnaliser les caractères. A gauche, les «Widgets (Defaut)» permettent d intégrer des zones area, des tableaux, des boutons, un menu etc. 14