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 ! 

Capture d'écran du site https://www.flaticon.com/

Il y a mille façons de créer sa propre application mobile, à vous de voir si les outils que nous vous suggérons correspondent à votre besoin ou si vous irez en chercher d'autres !

Panda Suite 
Panda Suite est un logiciel en ligne français qui permet de créer du contenu interactif, et en particulier des applications mobiles et tablettes, sans aucune ligne de code. Il permet de réaliser rapidement de beaux designs, de l'animation, de l'interaction classique mais aussi avec des composants systèmes comme les capteurs du téléphone. Il offre aussi la possibilité  de prévisualiser son prototype dans les conditions réelles d'utilisations, grâce à son application de visualisation Panda Viewer.
Toute la création est gratuite, seule la publication de l'application - par exemple sur les stores - est payante. Bien sûr, la démonstration d'un prototype sur l'application de visualisation est amplement suffisante pour le Challenge, la parution n'est pas requise pour le Jury.
Un gros point fort : Panda suite met à disposition des tutoriels très complets et précis sur son site internet, et propose un chat d'aide. Si vous avez une question, il suffit de la poser dans la messagerie en bas à droite de l'écran et d'attendre qu'une personne de l'équipe vous réponde !
Découvrez la variété de projets qu'on peut réaliser avec la vidéo suivante : 

Retrouvez ci-dessous 3 tutoriels réalisés par une enseignante ayant participé

à l'édition 1 du Challenge Innov'Avenir :

MIT App Inventor 2
MIT App Inventor 2 est un logiciel libre et gratuit développé par le Massachussets Institute of Technology. Il s'inscrit dans la continuité de Scratch, avec une programmation par blocs accessibles et permet de développer des applications Android (donc pas encore pour iPhone), à partir d'une plateforme en ligne. Il est néanmoins possible d'installer le logiciel hors-ligne.
Comme Pandasuite, MIT App Inventor 2 met à disposition une application gratuite, MIT AI2 Companion, pour visualiser votre application sur votre Smartphone (Android) à tout moment de la conception. 
De très nombreux tutoriels sont disponibles sur Internet, en anglais et en français ! En voici quelques uns : 

Retrouvez d'autres tutoriels vidéos et textes réalisés par teen-code en partenariat avec Geek-Junior ICI

En essayant de réaliser les jeux proposés, vous apprendrez ainsi à prendre en main ce logiciel.

Les Voyageurs du Code proposent également des tutoriels textes qui te guident pas à pas dans la réalisation d'une appli : rdv ICI pour y accéder. Tu verras que certains exemples d'applis sont proposés sur teen-code et sur les Voyageurs du Code, ce sont des classiques pour découvrir de nouvelles fonctionnalités de MIT AI2.

Pour voir en un clin d’œil quel est le principe de création, regardez la vidéo ci-dessous :

Retrouvez toute la documentation sur la page https://help.pandasuite.com/fr

 

Retrouvez Panda Suite avec des démos et des tutoriels vidéos sur Youtube

Invente de nouvelles solidarités dans ta ville