delphin
hauchard

interactive, graphic & media designer

Travaux > PiNG

cover PiNG étude de cas
#mobile #identité #fablab

PiNG

PiNG est une association loi 1901 basée à Nantes promouvant l'exploration des pratiques numériques. Elle invite à la réappropriation des nouvelles technologies.
Manquant de visiblité dans le paysage numérique nantais, j'ai réalisé une refonte complète de son identité visuelle. Pour accompagner ce renouveau et pour s'adapter aux nouvelles pratiques de navigation, un nouveau site entièrement mobile a été créé.

L'identité

Je suis parti du code informatique (langage binaire, langages de programmation) ainsi que sa représentation visuelle pour exprimer la complexité première du numérique. L'identité visuelle montre qu'au delà d'un langage complexe, le numérique est passionnant.

Le logo

Logo de PiNG

Le logo, un typogramme, signifie en lui-même la complexité du numérique : il est composé de nombreux éléments. C'est l'assemblage de ces éléments qui révèle ce qu'est PiNG, un expolorateur des pratiques numériques.

L'alphabet

Alphabet créé pour l'identité

L'alphabet est à la source du logo. Modulatoire, ce sont les superpositions de ses éléments qui forment les lettres. Cela permet de décliner l'identité sur de nombreux supports.

La palette de couleurs

Couleurs de l'identité

La palette s'appuie sur deux des trois couleurs primaires (le vert et le bleu) de la synthèse additive. Ces trois couleurs sont en effet les couleurs de base d'un écran.

Illustrations

Illustrations pour PiNG
PiNG

Le site web mobile

Usages

À partir de personas, j'ai défini les wireframes du site.

Ces wireframes s'appuient sur un scénario d'usage adapté aux personas. Le site web s'appuie sur 2 points principaux :

  • la mobilité : les usagers consulteront le site de PiNG sur mobile, à partir des réseaux sociaux où PiNG communique beaucoup. Le site sera alors mobile first. De plus, PiNG se trouve dans plusieurs lieux à Nantes. Les différents lieux sont donc indiqués sur le site et sont reliés aux apps de géolocalisations du téléphone.
  • les événements : PiNG est une association organisant de nombreux événements tout au long de l'année. Le site mettra donc en avant les événements de PiNG, reliés aux différents lieux de l'association.
scénarios d'usage
Scénarios d'usage

L'accueil

L'accueil du site met donc en avant ces aspects. Elle présente en premier lieu le prochain événement, puis l'actualité de l'association et les différents lieux de PiNG : leurs bureaux, la Plateforme C et la salle de formation.

Accueil
Prochain événement et denières actus
Accueil
Infos pratiques
Menu
Le menu

Les événements

Les événements sont au centre de l'action de PiNG. Sur le site, ils sont accessibles dès l'accueil. On peut s'y inscrire directement depuis le site et une carte est disponible pour s'y rendre. On peut aussi exporter l'événement pour l'ajouter sur son agenda.

Un agenda est accessible avec tous les événements à venir.

événement
Un événement
agenda
L'agenda
agenda
L'agenda ouvert

Les actus

Les actualités sont la plupart du temps des comptes-rendus des événements. Ils sont écrits par les adhérents de PiNG via le CMS du site.

Dans une politique d'open-source, les articles sont disponibles en PDF, comme les événements sont exportables.

À la fin de chaque actu, les événements en rapport sont proposés pour engager les visiteurs à se rendre physiquement chez PiNG.

liste d'actus
Liste d'actu
Actu
Une actu
Actu
Une actu

Autres travaux

Recto Verso

#jeu #ville #quartier #installation

Découvrez votre quartier autrement en jouant à Recto Verso à l'arrêt de tram.

Livret d'ergothérapie

#santé #app #ergothérapie

Un générateur de livret personnalisé pour les proches d'une personne autiste.

Fly to Exoplanets

#web #dataviz #exoplanètes

La Terre accueille trop d'humains. La solution : envoyer des pays entiers sur d'autres planètes.

Take your time

#inria #designpersuasif #manger

Un plateau pour manger plus lentement, car on mange trop vite quand on est seul.

Rapport de stage

#édition #stage #marchéprivé

C'est long, un mois dans une startup de ventes privées locales. Un rapport de stage pour tout résumer.

Paddl

#swrouen #app #gestiondeprojet

Paddl, la solution pour organiser ses projets à plusieurs de façon simple. Fini de ramer !

#swrouen

#swrouen #dataviz #compterendu

Cinquante-quatre heures (et pas une de plus !) pour créer sa startup, une infographie pour synthétiser.

Ça va t'apprendre

#générique #enfant #science

Pour répondre à plein de questions d'enfant de manière scientifique et ludique, voici Ça va t'apprendre.

Julian Assange

#stopmotion #assange #wikileaks

De son Australie natale à l'ambassade d'Équateur à Londres, le parcours du mystérieux Julian Assange.

Courtoisie en ville

#affiches #courtoisie #ville

Pour encourager à la politesse dans l'espace public, la ville de Rouen lance une campagne d'affichage.

Articles