Design web & mobile

Pup’s – Reboot Factory

⇨ Comme chaque année, le fameux workshop REBOOT fait son apparition ! L’objectif principal ? Mettre au point une application native (qui ne fonctionne pas vraiment) sur base d’une problématique. Le but de cet atelier est donc de se former, de travailler en groupe et bien évidemment mettre au point une idée géniale, si possible.

Nous allons vous expliquer ci-dessous toutes les étapes qui nous ont conduit vers la réalisation de ce projet.

1.Choix de notre Problématique

Beaucoup de propriétaires perdent leur animaux. C’est malheureusement un cas fréquent qui touche aussi bien les chats, les chiens ainsi que les oiseaux et autres. Actuellement, aucun moyen fiable n’est mis en place pour pallier à ce problème utilisateur. C’est pour cela que nous nous sommes intéressé à ce sujet et que nous avons voulu le développer.

2.Chercher, s’inspirer, élaborer

ELABORER DES WIREFRAMES

 Nous avons dessiné pleins de visuels papier. Cette méthode porte le nom de wireframes. En effet, grâce aux esquisses crayon, cela permet de mieux comprendre à quoi ressemblera notre futur projet sur mobile. On peut ainsi prévoir les éventuels problèmes liés au développement ou au visuel. Cette étape est donc très importante pour pouvoir avancer vers la finalité du projet.

Wireframe Papier

 

3.Concevoir une expérience visuelle

TROUVER UNE IDENTITE GRAPHIQUE

⇨ Une fois la phase de dessins et de tests terminés, nous nous sommes penché sur la partie visuelle du projet. Nous avons les bases mais il faut encore trouver notre patte graphique. Pour ce faire, nous avons également consulté des ressources tierces de manière à trouver nos couleurs, notre typographie ainsi que l’aspect colorimétrique global du projet.

Notre palette colorimétrique

Nous nous sommes ensuite concerté pour trouver les couleurs de notre projet. Après de longues réflexions, nous nous sommes mis d’accord sur une palette de 4 couleurs.

Pourquoi ces couleurs en particulier ?

Orange : Nous avons choisi l’orange comme couleur secondaire pour distinguer certains éléments des autres, en particulier les détails. C’est une couleur qui viens soutenir notre couleur principale.

Vert foncé : Le vert foncé est notre couleur de dégradé. Car oui nous avons choisi de faire des dégradés, c’est tendance. Il nous permet de créer un fondu qui se veux indispensable dans la conception de notre logo.

Vert clair : Le vert clair est notre couleur principale ! Nous l’avons choisie pour le côté “Naturelle” de notre projet. Les animaux étant perdu dans la nature, le vert se veut représentatif de notre design.

Blanc : Le blanc est synonyme de clarté, de pureté. On a pas voulu en faire de trop dans l’élaboration de notre design et c’est pour cela que nous avons respecté un visuel simple, sans trop d’éléments, de manière à ne pas créer une surcharge cognitive. Cette couleur était donc particulièrement importante à nos yeux.

Notre choix typographique

Une fois nos couleurs validées, nous nous sommes penchés sur la typo. La typo est très importante car elle représente 90% de notre design. On a donc cherché sur plein de sites pour visualiser notre futur font.

Nous avons finalement choisi l’Open Sans.

Pourquoi ce choix ? : L’open Sans correspond parfaitement à notre design. La typo possède plusieurs graisses pour marquer les importances de certains éléments. Elle présente également plusieurs particularités aussi bien en petite taille qu’en grande taille.

4.Construire pour l’utilisateur

CONCEPTION DE VISUELS

⇨ Une fois toute notre charte graphique mise en place et validée, nous avons commencé à créer des visuels finaux. Cette étape est révélatrice de notre application puisqu’à partir de maintenant on aura une vision clair de ce à quoi tout notre projet va ressembler.

Une fois de plus, il nous a fallut garder l’utilisateur au centre du processus de création pour concevoir des interfaces facile d’accès et utilisable.

Nous avons placé nos couleurs et notre typo et nous avons mis nos wireframes au propre.

5.Création d’un set d’icônes

⇨ Une fois nos visuels mis en place, nous avons dû créer des icônes pour créer une affordance sur certaines fonctionnalités. Une affordance désigne le fait qu’un élément parle de lui même, on ne doit pas le comprendre.

Les icônes sont très importante et permettent de gagner de la place sur certaines zones parfois petite comme sur mobile.

6.INTÉGRER ET VISUALISER

CODER NOS VISUELS

⇨ Place à l’intégration désormais ! Tout nos visuels étant crée, nous avons concentré nos forces sur la partie la plus difficile de ce travail, le code. on a intégré la partie mobile parce que notre app ne fonctionne que sur mobile et notre site internet qui représente notre projet.

On a également codé le site en responsive pour qu’il soit consultable sur tous les plateformes.

Le mot de la fin

⇨ Notre workshop s’est merveilleusement bien passé ! Notre équipe était au top et on a prit beaucoup de plaisir à concevoir ce projet. On aura eu en tout deux semaines à quatre pour en réaliser l’ensemble. Chacun d’entre nous était méga impliqué dans son travail. C’est toujours un plaisir d’avoir des coéquipiers tous motivé. Du bon job donc !

We love animals ❤

Team PUP’s

     Projet au hasard