Charte fonctionnelle site web

Charte Fonctionnelle site Web | Qui et Comment ! [2/2]

Tweet

Email

RSSS

Tweet Email

C’est une petit peu comme dans « Ratatouille » comme dirait « Gusto » :
Tous le monde peu faire une maquette fonctionnelle !

Et aujourd’hui certains outils permettent d’aller vite et d’obtenir un résultat bluffant et surtout très abouti ! Les designers sont ravis ! Enfin une mission cadrée par une vraie réflexion ou le donneur d’ordres a pris le temps de mettre sur « pixels » ses envies de projet !

Pas besoin de mots compliqués ou de technique particulière votre meilleure arme est votre capacité a vous projeter dans votre prochain site ou  la prochaine version de la page etc…
Voici donc ce qu’il  faut pour démarrer :

• Une idée un peu aboutie du site web souhaité (penser à grenouiller sur le web et récupérer les idées souhaitées pour votre projet)
• Un bon outil pour commencer à se projeter sur l’ecran (Je vous conseil Balsamiq qui est gratuit 7 jours puis 79€). Il les vaut largement et pour un projet pas trop timide 79E c’est vite rentabilisé ! (1)

Une fois cela lancé une dernière chose importante ! Voir stratégique avant d’envoyer des maquettes fonctionnelles qui pourraient ressembler à des ovnis par la profession ! Il faut cadrer la taille de l’écran sur lequel vous souhaitez votre site ! C’est la contrainte la plus importante. Aujourd’hui on a tendance à partir sur des écrans qui vous laisseront une zone utile de 1000 pixels de largeur et 680 pixels de hauteur pour votre page avant de devoir scroller avec la souris (sauf contexte particulier comme: Tous vos internautes seront sur un ecran 800×600 pixels car c’est l’intranet de la SNCF et qu’ils ont tous de vieux écrans).

Pour vous aider encore, voici un canevas que j’ai créé rien que pour vous, à a la taille annoncée….
>> Télécharger ici<< C’est un fichier Balsamiq dans un ZIp, il faut donc avoir installer Balsamiq avant !

Les pages qu’il faut généralement réaliser :

• Page d’accueil (home page)
• Page intérieure, page de contenu ou page article (cette page est une page article / billet par exemple)
• Page liste ou page catégorie (si vous avez des articles, de produits etc)
• Page contact avec formulaire
• et parfois aussi : Page « nous trouver » avec sa carte interactive et toute page spécifique dont le besoin ne serait pas couvert par les pages citée ci-dessus (inscription espace privé)

Cet article fonctionne aussi pour une maquette fonctionnelle d’un site marchand e-commerce et donc la vente en ligne (e-business) avec un processus plus long de design fonctionnel et un enjeu plus fort bien évidemment (ce sont vos ventes !) :

• Pages du panier (récapitulatif panier, processus de commande)
• Page produit
• Pages de l’espace client
• …

Nota : Dans le cadre d’un développement spécifique on y pense rarement mais une maquette fonctionnelle du backoffice peu être très utile pour se mettre d’accord sur comment sera géré le site web par vous ou votre equipe digitale ! C’est hélas souvent la surprise au moment de la livraison du projet web !

(1) Il faut garder en tête qu’un projet pas assez préparé, c’est un prestataire qui va anticiper qu’il va devoir faire aussi ce travail de maquette fonctionnelle avec vous ou revoir son design plusieurs fois. Vos 79€ seront, je le garantis, plusieurs centaines d’euros parfois économisés sur le devis du site à réalisé. Et du temps de gagné pour tous (les 2 sont liés).