AVEC LE MOCKUP, T'AS PAS FINI DE ZONER

Par Ritepac, le 02 décembre - yabaz →

AVEC LE MOCKUP, T'AS PAS FINI DE ZONER

Vous devez créer un nouveau site internet ! Comme d'habitude, c'est direction tête baissée dans Photoshop pour attaquer le design. Mais est-ce vraiment le meilleur moyen d'être autonome, performant ?

Si votre projet est perso et que vous avez la vie devant vous pour en refondre régulièrement la charte, pas de soucis. Si néanmoins, c'est un projet pro et que chaque modification peut entrainer des heures de travail (même si c'est bien penser à la base), là le Mockup est juste indispensable !

Lors de la création de site web, nous passons par les étapes suivantes :
1. LE CAHIER DES CHARGES
Le cahier des charges doit être proposé par le client pour vous aiguiller sur la manière et les procédés pour créer le site web. Pour qu 'un cahier des charge soit réussi, il vous faut poser un maximum de questions pour ne pas avoir de zones floues et éliminer les questions inutiles.

2. LE DESIGN
Toute la difficulté d'un design est de coller aux attentes du dit client tout en apportant sa matière grise (pour l'organisation, l'ergonomie) et sa matière blanche pour les questions graphiques.

3. L'INTÉGRATION
Lorsque la maquette a été validée par le client, on peut passer à l'intégration. On propose au client une page web qui ressemble traits pour traits au design à plat avec toutes les fonctions et plug-ins et extensions nécessaires pour donner vie à cette maquette.

4. CRÉATION D'UN TEMPLATE
Le template va vous permettre de définir des actions logiques, routinières, répétitives et qui concernent tout le site. Ensuite, les agréments et contenus différents seront intégrées sur les pages web. Bien souvent, le site est relié à une base de données PHP qui fait la liaison avec la Base de Données dans laquelle nous iront piocher les informations et les traiterons pour n'en afficher que le nécessaire stricto-sensus.

5. MISE EN LIGNE
Votre site est beau, il est vivant, le client a validé alors let's go pour la mise en ligne sur un hébergeur. Pour qu'enfin le site soit accessible à tous.

Pour améliorer ces étapes de conception, le MockUp intervient avant le design et permet de définir les zones pub, le menu, les zones éditorailes, les zones réactives. Tout cela avec de véritables actions et une simulation de contenu réelle. Quoi de mieux pour un client que de voir son site organisé (ergonomie, placements, mise en avant...) ?

Il regroupe la plupart du temps :
• Les différentes zones du site (logo, navigation, sidebar, header, footer...)
• Les fonctionnalités attendues (menu déroulant, slideshow, animation...)
• Le recensement des éléments (icônes, boutons, images, input...)
• L'agencement du contenu (niveaux de titres, citations, accroche...)

C'est un excellent test pour vérifier la qualité du cahier des charges. S'il est complet vous n'aurez aucune question supplémentaire à poser.

Avec tous ces éléments placés au bon endroit, on dispose d'un prototype sur lequel vous et votre client pouvez vous baser. C'est à ce moment précis que les modifications doivent être faites : c'est rapide et efficace. Le client aura même le droit d'être pointilleux. Après il n'en aura plus le droit (enfin… en théorie !).

Le Mockup validé, vous disposez maintenant d'un plan de construction !

Quelques outils gratuits ou payants :
• Mockflow
• Pencil Project
• Balsamiq Mockups
• Mockingbird
• Cacoo

A tester de votre côté donc !