Pour concevoir votre application ou site web, repartez avant tout de votre cahier des charges. Vous n'avez pas encore lu la partie méthodologie étape III ? Allez d'abord voir quelles sont les bonnes questions à se poser avant de commencer la conception !

​

​

​

 

La conception se fait ensuite à travers plusieurs aspects. Si on conseille de travailler au préalable un minimum sur l'arborescence et prendre en considération les flux de données avant de se lancer sur les autres aspects, en revanche les tâches relevant de l'interface, de l'esthétique et du contenu peuvent être travaillées en parallèle : n'hésitez pas à vous les répartir ! Dans le monde professionnel, ces divers aspects correspondent à différents métiers, et sont donc en général attribuées à différentes personnes.

​

Quels flux de données ?

​

Cette étape consiste à choisir les données externes qui entrent et sortent de votre application ou site internet, et à étudier comment établir ces communications

- Est-ce que votre site / appli interagit avec d'autres sites, ou des extensions  ? 

- Est-ce que votre site / appli interagit avec des objets ? Si oui, comment ? (Bluetooth, wifi, capteur beacon...) 

- Est-ce que votre site / appli s'appuie sur une base de données ? Si oui, de quelles données s'agit-il ?

- Est-ce que votre site / appli utilise la géolocalisation ?

- Est-ce que votre site / appli contient un forum ?

- Pour une application : doit-elle envoyer des notifications push aux utilisateurs ?

- Pour un site : doit-il envoyer des informations via un flux RSS / une newsletter ?

​

Un conseil : Selon  les projets, vous n'aurez peut-être pas à creuser toutes ces questions, mais c'est nécessaire de se les poser avant de commencer. Dans le cas où vous auriez répondu "Oui" à une de ces questions, il est possible que ces interactions ne sont pas les points à développer en premier, mais il est bien de les avoir en tête dès le début.

​

Quelle arborescence ?

​

Cette étape consiste à faire l'arborescence de votre site ou de votre application :

- Quelles sont les différentes pages ? (Il peut n'y en avoir qu'une)

- Quelles sont les fonctionnalités de chaque page ?

- Comment sont-elles organisées entre elles ?

- Y a-t-il des sous pages ? Une hiérarchie entre les pages ?

- Y aura-t-il un menu ? Si oui, que contiendra-t-il ?

​

Un conseil : faire des schémas !

​

Quelle interface ?

​

Cette étape consiste à organiser les composants pour que l'expérience des usagers soit la plus intuitive et agréable possible

- Quels sont les éléments communs entre les pages ? (par exemple menu / barre de navigation, en-tête, bouton précédent / retour à la page d'accueil ...)

- Comment navigue-t-on entre les différentes pages ? (par exemple avec des boutons, le menu, en "scrollant", etc.)

- Pour chaque page, quels éléments doivent apparaître ? (texte, boutons, images, vidéos, carte ...)

- Pour chaque page, quels effets visuels choisis ? (par exemple animation, zone de défilement) *

- Pour les applis : quels composants systèmes choisis et pour quel usage? (par exemple le microphone, le capteur de mouvement, la webcam, etc.)

​

Un conseil : faire des croquis de l'organisation de vos pages !

On vous présente aussi Marvel App, une appli très facile d'utilisation, qui vous permet de transformer un croquis en démonstration d'application ou de site en quelques minutes. Dessinez vos écrans sur papier, prenez une photo, puis dessinez des zones interactives pour relier ensemble les écrans. Vous pouvez aussi importer des images de votre galerie.

Marvel App est une appli "freemium": gratuite pour deux projets par utilisateur (puis payante pour plus de fonctionnalités).

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Quelle esthétique ?

​

Cette étape consiste à travailler l'aspect graphique et l'univers visuel de votre plateforme, en accord avec sa thématique et son sujet 

- Quel est l'univers visuel, quels sont les codes graphiques ?

- Quelle sera votre palette de couleur ?

- Quelles forme, taille et couleur auront les divers éléments ? (par exemple les boutons)

- Quels seront les paramètres des textes ? (police et taille de caractère, espacement, alignement, couleur, etc.)

- Quels seront les arrière-plans ?

- Y aura-t-il des photos, dessins d'illustrations, icônes ?

​

Un conseil : regardez ce qui se fait "chez la concurrence", il y a en général sur les sites et appli des codes graphiques selon les domaines, les usagers. Certains outils comme l'éditeur de sites wix proposent des templates (des modèles) de sites internet selon leur thématique et leur utilisation : blog voyage, boutique en ligne de vêtements de sport et présentation d'une association jeunesse n'ont pas les mêmes codes graphiques ! Jetez un oeil aux templates pour mieux les comprendre.

​

Pour aller plus loin dans l'aspect visuel, allez lire cet article de conseils pour le design d'appli mobiles (plein de bons conseils aussi pour les sites web) !

​

​

​

​

​

​

​

​

​

​

​

 

Et pour trouver des photos d'illustration ou des icônes, faîtes un tour sur cet article qui recense des sites où trouver images, icones et polices gratuites !

​

​

​

​

​

​

​

​

​

​

​

​

​

​

 

Quel contenu ?

​

Cette étape consiste à centraliser et produire le contenu de votre site ou appli.

- Quels contenus texte ou multimédia devront apparaître ?

- Quels sont les contenus à créer vous-mêmes ?

- Où trouver les ressources nécessaires à la création de texte ?

- Où trouver les médias à importer ?

​

Un conseil : Pensez à recouper les informations, autrement dit à consulter plusieurs sources (notamment sur Internet). N'hésitez pas à aller à la rencontre d'experts sur le sujet qui vous intéresse ! 

​

​

​

​

​