Atomic Shop Group 9
Ian VU, Jérôme WILLEMS, Tom ROMANZIN
Vous découvrirez notre première expérience à l’HEAJ en design web et mobile. Dans le cadre de notre workshop, nous vous présenterons l’atomicshop par le biais du concept de travail de Brad Frost. Pour ceux qui le connaissent, cela ne se repose pas sur de l’atomic design mais bien sur un inventaire d’éléments constituant un site internet.
Nous sommes Mercredi 20 Septembre 2017.
Nous avons attentivement écouté les explications que Grand Frère (et ses apôtres) nous ont fournis afin de réalisé le workshop dans les meilleurs conditions.
C’est à dire:
- Analyser un site web et une application
- Décortiquer les différents blocs
- Identifier les éléments important
Après un bon repas, nous nous sommes répartis les tâches qui consisteront à faire l’inventaire du contenu, des éléments secondaires, de la répartition du site d’Aaltra dans son ensemble.
Plusieurs procédés nous ont été proposés pour décortiquer le site sur les 3 plateformes. Nous avons décidé de faire de la manière suivante.
Ian s’est occupé de faire la partie “desktop”, Jérome sur le “mobile” et Tom s’est centré sur la partie “tablet”.
Phase 1
Pour l’organisation et pour la phase d’après, nous avons tous créé un dossier sur notre bureau pour les captures d’écrans et lorsque nous trouvions un élément intéressant à intégré dans notre inventaire commun (éléments globaux, animations, icônes, boutons, …) nous prenions des screens.
Phase 2
Une fois le dossier complet, nous avons mis en commun notre travail. C’est à ce moment là que nous nous sommes aperçu qu’aucun d’entre nous n’avait trouvé tous les éléments du site.
Grâce à cette étape, nous avons complété les informations manquantes de chacun et avons pu arriver à quelque chose de complet.
Nous avons fait en sorte d’avoir des screens de mêmes tailles pour garder les proportions et voir les éventuelles différences entre les plateformes.
Jeudi 21 Septembre 2017.
L’heure d’atomiser la page d’accueil d’Aaltra et les pages principales de l’application.
Ian s’est chargé de la page d’accueil du site web. Pour ce faire, il est parti d’une capture de l’ensemble de la page et a découper, morceau par morceau, la page d’origine de la manière suivante:
- Pages
- Templates
- Organisms
- Molecules
- Atomes
Pendant ce temps, Jérôme et Tom se sont occupés de faire de même avec l’application.
Juste après un temps de midi bien mérité, nous avons poursuivi dans la même optique de découpage. Nous nous sommes également partagés nos fichiers afin de se focaliser sur l’assemblage pour obtenir un rendu comme ci-dessous.
Lundi 25 Septembre 2017.
Cette journée de travail concernait la mise en page de l’application sur la même base que la page web; principalement réalisée par Ian et Jérôme pendant que Tom s’occupait de préparer la mise en page et les textes à mettre dans l’article Medium, que voici.
Après la matinée, une pause s’impose. L’heure de la pizza!
Sans grande surprise, nous avons continué le boulot entamé le matin tout en se parlant pour toujours être coordonnés et cohérents dans nos propos. Cette approche nous a permis d’arriver à ces résultats.
Des éléments communs dans un style graphique arrondi. Ce que nous avons découvert à travers la navigation de l’application est qu’une publicité s’affiche en bas de la page d’accueil pour shazam. Car en soit cette page nous sert qu’à appuyer sur un bouton. Pratique et malin pour que l’utilisateur ne soit pas perturbé pendant l’utilisation de l’app dans les autres pages.
Des icônes qui ont tous un même style également arrondi et de même proportion de tailles.
Mais le style graphique de Shazam qui ressortait le plus pendant l’utilisation sont les couleurs, le changement de couleur vives. Nous le remarquions encore plus quand on était sur la page “Découvrir”. Lors des visite des vignettes, selon celle-ci, la couleur de fond changeait en rapport avec la vignette.
En fin de journée, nous avions un peu de temps devant nous. Nous avons décidé de commencer les slides de présentation. C’est Jérôme, qui a donner ses dernières forces de la journée pour poser les piliers.
Pour ce faire, nous avons discuté de ce que l’on pouvait y mettre (les différences, les ressemblances entre les devices).
Mardi 26 Septembre 2017.
Ce matin, c’est la dernière ligne droite, nous terminons nos slides pour la présentation dans l’après-midi. Cross fingers!
Nos réseaux
