François Chay
Lead designer
francois@lrqdo.fr
@francoischay
SE CONNAITRE
Identité La Ruche qui dit Oui !
Brief Créa
CONTEXTE
Les consomateurs commencent à refuser la commercialisation
de masse. I...
Univers visuel
ENGAGEMENT AFFICHES VERNACULAIRES SÉRIGRAPHIE
Identité La Ruche qui dit Oui !
chaleureuse. Détail important : ce sont 2 typos gratuites et libres de droit,
afin de perm...
Identité La Ruche qui dit Oui !
Pour La Ruche qui dit Oui !, le système est basé sur la sérigraphie : utiliser
un nombre l...
Identité La Ruche qui dit Oui !
la terre, et en refusant les gimmicks des web-apps actuelles (reflets, ombres,
rubans, etc...
DécLAISOnS DE FORMAtS
Logotype > Déclinaisons formats
Logo carré
Logo horizontal
Logo vertical
6
Format vertical
Format ho...
SE FAIRE CONNAITRE
RESPONSABLE
DE RUCHE
PRODUCTEUR
MEMBRE
unE “RuchE” S’ESt OuVERtE
pRèS DE chEz VOuS
DécOuVREz-LA SuR
www.laruchequiditoui.fr
unE “RuchE” S’ESt OuVERtE
pRèS DE chE...
DEVENIR UNE WEBAPP
DEVENIR UNE VRAIE WEBAPP
DEVENIR UNE VRAIE WEBAPP
AVEC UNE PETITE ÉQUIPE
Mangiar bene, mangiar giusto
Mangiar bene, mangiar giusto
COMPRENDRE LE TERRAIN
RESPONSABLE
DE RUCHE
PRODUCTEUR
MEMBRE
RESPONSABLE
DE RUCHE
PRODUCTEUR RUCHE-MAMA
MEMBRE
« JE NE VEUX PAS AVOIR À ME POSER DE QUESTIONS »
Mathieu est habitué aux marchés
dont il apprécie l’ambiance, mais il
voit...
TRÈS MOTIVÉ
JACQUES
CAROLINE
MATHIEU
YANN
PEU MOTIVÉ
TRÈS APTEPEU APTE
FACILITATEURS
très motivé
peu apte
ÉTINCELLE
peu mo...
COOR RR TRAITE UNE DEMANDE D’OUVERTURE
A faire toutes les semaines
Analyse pertinence
de la localisation
Accueil Admin
Lis...
RECUEILLIR LES REMONTÉES
PRODUIRE
COMMUNIQUER
MAIN PRINCIPLES
PAGE HEADER
ACTION BAR
LAYOUT
∠ Upper level
TITLE
.page-header
The page header usually takes the context’s...
normal
unselected
unselected selected
COLORS
GROUPS
WITH ICONS
.btn-success
A button that goes with a positive
action (add...
Merci
Merci
ON RECRUTE
Design, dev, PM
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
"Le processus design chez La Ruche Qui Dit Oui" par François Chay
Prochain SlideShare
Chargement dans…5
×

"Le processus design chez La Ruche Qui Dit Oui" par François Chay

622 vues

Publié le

Par François Chay, Head of Design at La Ruche Qui Dit Oui (https://twitter.com/francoischay)

Entreprendre n’est pas inné et 80% des erreurs peuvent être évitées.
Ne perds pas de temps, offre-toi Koudetat : http://bit.ly/koudetat-youtube

Inscrivez-vous au prochain meetup! — http://www.meetup.com/Get-the-SWAG-on/
Inscrivez-vous à la newsletter pour ne pas rater les prochains évènements ! — http://www.thefamily.co/events/
Suggestions, idées de speakers, feedbacks always welcome ! — http://buff.ly/1r0ubkx

Publié dans : Design
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
622
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

"Le processus design chez La Ruche Qui Dit Oui" par François Chay

  1. 1. François Chay Lead designer francois@lrqdo.fr @francoischay
  2. 2. SE CONNAITRE
  3. 3. Identité La Ruche qui dit Oui ! Brief Créa CONTEXTE Les consomateurs commencent à refuser la commercialisation de masse. Ils savent qu’ils paient trop chers pour des produits de piètre qualité et que ce sont les gros industriels qui en profitent. S’inscrire à une ruche, c’est s’émanciper de ce système. En se procurant de meilleurs produits, le membre souhaite cuisiner ses propres plats et mieux contrôler ce qu’il mange. La ruche fournit la confiance et la transparence dans l’achat de produits frais. Elle accompagne le consomateur. Il y a deux aspects : manger mieux (bons produits, bonne cuisine) et manger juste (meilleurs prix & rémunération). Qualité de vie et Engagement. La Ruche, c’est la kermesse du coin et la voisine du des- sous, c’est quelqu’un qu’on croise et qui est notre égal, c’est l’affichette dans la rue pour retrouver son chat. La Ruche, c’est l’amateurisme. C’est pourquoi il faut vraiment se méfier de tout code graphique qui pourrait paraitre trop travaillé, élitiste, sophis- tiqué. C’est brut et honnête. CIBLE Famille de zone pavillonaire ayant une conscience écologique. TON Chaleureux, proche, convivial Riche Vivant MESSAGE Manger mieux, manger juste PROMESSE Vivre mieux, en accord avec soi et son environnement
  4. 4. Univers visuel ENGAGEMENT AFFICHES VERNACULAIRES SÉRIGRAPHIE
  5. 5. Identité La Ruche qui dit Oui ! chaleureuse. Détail important : ce sont 2 typos gratuites et libres de droit, afin de permettre à tous les membres de la communauté de les utiliser pour créer leurs propres documents. CARACTÈRE DE TITRAGE CARACTÈRE DE LABEUR LEAGUE GOTHIC POUR LES TITRES Georgia pour le texte courant. Officiis plabo. Ut quissi optatur rem fugia pa dolorpo stibusa voluptius mosant. Ignime minum alitiis ius, ipsa qui doluptatur, qui doluptae ipsae nimus pero dolo temquo conectus.
  6. 6. Identité La Ruche qui dit Oui ! Pour La Ruche qui dit Oui !, le système est basé sur la sérigraphie : utiliser un nombre limité de couleur et créer les autres par des superpositions ou des jeux de tramages. PRINCIPE EXEMPLES D’APPLICATION
  7. 7. Identité La Ruche qui dit Oui ! la terre, et en refusant les gimmicks des web-apps actuelles (reflets, ombres, rubans, etc.), La Ruche qui dit Oui ! a une « patte » bien à elle.
  8. 8. DécLAISOnS DE FORMAtS Logotype > Déclinaisons formats Logo carré Logo horizontal Logo vertical 6 Format vertical Format horizontal - Uniquement sur fond coloré Format horizontal Format carré 3cm 11mm 4 cm Cette version est utilisée en cas de besoin spécifique lié à l’impression (sérigraphie...). Elle peut être utilisée avec toutes les couleurs de la gamme VERSIOn FILAIRE Logotype > Logo filaire Logo générique_Filaire Logo horizontal_Filaire Logo vertical_Filaire 7 Cette version est utilisée en cas de besoin spécifique lié à l’impression (sérigraphie...). Elle peut être utilisée avec toutes les couleurs de la gamme
  9. 9. SE FAIRE CONNAITRE
  10. 10. RESPONSABLE DE RUCHE PRODUCTEUR MEMBRE
  11. 11. unE “RuchE” S’ESt OuVERtE pRèS DE chEz VOuS DécOuVREz-LA SuR www.laruchequiditoui.fr unE “RuchE” S’ESt OuVERtE pRèS DE chEz VOuS DécOuVREz-LA SuR www.laruchequiditoui.fr unE “RuchE” S’ESt OuVERtE pRèS DE chEz VOuS DécOuVREz-LA SuR www.laruchequiditoui.fr unE “RuchE” S’ESt OuVERtE pRèS DE chEz VOuS DécOuVREz-LA SuR www.laruchequiditoui.fr unE “RuchE” S’ESt OuVERtE pRèS DE chEz VOuS DécOuVREz-LA SuR www.laruchequiditoui.fr unE “RuchE” S’ESt OuVERtE pRèS DE chEz VOuS DécOuVREz-LA SuR www.laruchequiditoui.fr FRuItS & LéguMES, œuFS, FROMAgE,yAOuRt, VIAnDE, VOLAILLE, pAIn, MIEL, juS DE FRuItS... FRuItS & LéguMES, œuFS, FROMAgE,yAOuRt, VIAnDE, VOLAILLE, pAIn, MIEL, juS DE FRuItS... FRuItS & LéguMES, œuFS, FROMAgE,yAOuRt, VIAnDE, VOLAILLE, pAIn, MIEL, juS DE FRuItS... FRuItS & LéguMES, œuFS, FROMAgE,yAOuRt, VIAnDE, VOLAILLE, pAIn, MIEL, juS DE FRuItS... FRuItS & LéguMES, œuFS, FROMAgE,yAOuRt, VIAnDE, VOLAILLE, pAIn, MIEL, juS DE FRuItS... FRuItS & LéguMES, œuFS, FROMAgE,yAOuRt, VIAnDE, VOLAILLE, pAIn, MIEL, juS DE FRuItS... c’ESt gRAtuIt Et SAnS Aucun EngAgEMEnt. InScRIVEz-VOuS! c’ESt gRAtuIt Et SAnS Aucun EngAgEMEnt. InScRIVEz-VOuS! c’ESt gRAtuIt Et SAnS Aucun EngAgEMEnt. InScRIVEz-VOuS! c’ESt gRAtuIt Et SAnS Aucun EngAgEMEnt. InScRIVEz-VOuS! c’ESt gRAtuIt Et SAnS Aucun EngAgEMEnt. InScRIVEz-VOuS! c’ESt gRAtuIt Et SAnS Aucun EngAgEMEnt. InScRIVEz-VOuS! pOuR SE nOuRRIR DE BOnS pRODuItS En DIREct DES pRODuctEuRS DE VOtRE RégIOn. pOuR SE nOuRRIR DE BOnS pRODuItS En DIREct DES pRODuctEuRS DE VOtRE RégIOn. pOuR SE nOuRRIR DE BOnS pRODuItS En DIREct DES pRODuctEuRS DE VOtRE RégIOn. pOuR SE nOuRRIR DE BOnS pRODuItS En DIREct DES pRODuctEuRS DE VOtRE RégIOn. pOuR SE nOuRRIR DE BOnS pRODuItS En DIREct DES pRODuctEuRS DE VOtRE RégIOn. pOuR SE nOuRRIR DE BOnS pRODuItS En DIREct DES pRODuctEuRS DE VOtRE RégIOn. tRAct version monochrome Lorsque les tracts sont en monochrome, on peut jouer sur l’opacité des blocs pour créer un rythme et de la hiérarchie dans le document. Tract > Tract_Monochrome 19 Les tracts étants imprimés sur du papier Cyclus 120 g/m2 , qui est un papier offset, il convient donc d’utiliser les pantones offset (U) tABLIERS Pantone 1805 C Pantone 109 C Tablier > Tablier rouge_pantone 1805C Tablier jaune_pantone 109C 200mm
  12. 12. DEVENIR UNE WEBAPP
  13. 13. DEVENIR UNE VRAIE WEBAPP
  14. 14. DEVENIR UNE VRAIE WEBAPP AVEC UNE PETITE ÉQUIPE
  15. 15. Mangiar bene, mangiar giusto
  16. 16. Mangiar bene, mangiar giusto
  17. 17. COMPRENDRE LE TERRAIN
  18. 18. RESPONSABLE DE RUCHE PRODUCTEUR MEMBRE
  19. 19. RESPONSABLE DE RUCHE PRODUCTEUR RUCHE-MAMA MEMBRE
  20. 20. « JE NE VEUX PAS AVOIR À ME POSER DE QUESTIONS » Mathieu est habitué aux marchés dont il apprécie l’ambiance, mais il voit bien que certains maraîchers proposent des produits hors-saison et en quantité suspecte. Il ne veut pas retrouver ce sentiment de honte qu’il a quand il va acheter des légumes au supermarché alors qu’il sait très bien que le système écrase les producteurs. Il s’est bien proposé comme bénévole dans une AMAP mais le producteur s’est révélé odieux et il était encore coincé pour 6 mois de navets. Il a entendu parler de La Ruche qui dit Oui ! et est assez séduit par le principe mais il ne sait pas si il peut faire confiance à internet. Mais si il achète ses fringues, pourquoi pas ses légumes ? VALEURS réservé volontaire informé CE QU’IL ATTEND avoir la conscience tranquille APRIL 30, 2015 4:49 PM 3 M E M B R E MATHIEU « JE VEUX BIEN MANGER » Yvan a la trentaine, il habite dans une grande métropole où il a fait ses études. L’offre culturelle et le réseau qu’il y a développé ont fait qu’il est resté naturellement mais il n’oublie pas la campagne où il a grandit. Il gagne bien sa vie et même si il n’aime pas se l’avouer, il est très bourgeois-bohème. Il s’engage, mais via des pétitions en ligne, il aime dire qu’il cuisine, mais c’est surtout depuis Top Chef. Il est très connecté, possède un smartphone et une tablette en plus de son portable. Il sort souvent avec ses amis, du coup il a rejoint plusieurs Ruches pour garder une certaine flexibilité selon ses disponibilités / son état. Mais il s’y perd et oublie souvent de commander. VALEURS épicurien désinvesti un peu flambeur CE QU’IL ATTEND pouvoir commander rapidement et quand il en a envie APRIL 30, 2015 4:49 PM 4 MEMBRE YVAN « JE VEUX ME SAVOIR UTILE » Caroline est dans sa trentaine, elle a déménagée sur Paris pour trouver du boulot mais elle n’a pas réussi à se faire un nouveau groupe d’ami dans cette grande ville. Ça l’a déprimée, elle s’est sentie très isolée mais depuis qu’elle a rejoint sa Ruche elle s’éclate ! Toujours volontaire pour dépanner à une distribution, toujours partante pour une expédition, toujours entousiaste pour les nouvelles idées. Elle s’investit à fond, commande à fond, et se sent extrêmement impliquée dans le projet. Par contre elle commence à avoir l’impression que c’est une relation qui ne va que dans un sens. Elle s’investit mais pour quel bénéfice, qui sait qui elle est et ce qu’elle apporte ? VALEURS CE QU’ELLE ATTEND partager une expérience avec d’autres gens donner un sens à son implication APRIL 30, 2015 4:49 PM 5 M E M B R E CAROLINE « MA CONSOMMATION DOIT SUIVRE MES CONVICTIONS » Jacques approche de la retraite et depuis toujours il refuse de baisser les bras face à ce qui le révolte. Il s’est engagé dans plusieurs associations et a notamment fait parti d’une AMAP pendant plusieurs années. Cependant, il n’aimait pas l’idée de perdre son panier quand il était en vacances avec ses petits-enfants, il s’est alors inscrit dans une Ruche. Mais attention, il ne laissera rien passer si il sent la moindre dueperie dans cette entreprise. Il s’est mis à l’ordinateur pour rester en contact avec ses enfants et s’est surpris à aimer l’outil sans pour autant devenir expert. Le portable et ses ondes maléfiques ne passera pas par lui. VALEURS curieux engagé empathique CE QU’IL ATTEND de la transparence et des informations sur sa consommation APRIL 30, 2015 4:49 PM 6 M E M B R E JACQUES « MON MÉTIER, C’EST RESPONSABLE DE RUCHE » Christine est mère de trois enfants. Jusqu’à récemment elle donnait des coups de main à droite à gauche mais passait le plus clair de son temps à s’occuper de sa famille. Quand elle a découvert les Ruches, elle a sauté sur l’occasion en pensant que ça lui donnerait l’occasion de rencontre d’autres gens et de l’occuper un peu. Elle a pris goût à construire sa communauté, à rentrer en contact avec les producteurs, elle s’est passionnée pour les enjeux jusqu’à devenir une référence dans sa région. Aujourd’hui elle a ouvert deux autres Ruches, s’est organisée pour sa famille et gère ses affaires comme une business-woman. Ce qu’elle est. VALEURS impliquée sociale organisée CE QU’ELLE ATTEND Pouvoir gérer ses différentes ruches S’organiser avec celles autour APRIL 30, 2015 4:49 PM 16 L E A D E R CHRISTINE « J’AI CONSTRUIT QUELQUE CHOSE » Sophie habite dans une région rurale et travaille à trois-quart temps dans un cabinet médical. Elle ne souhaitait pas exposer son jeune enfant aux produits industriels et s’est donc intéressée aux sources alternatives d’approvisionnement. Elle a décisé d’ouvrir sa Ruche et est maintenant bien occupée. Elle connaît tout ses membres et attache beaucoup d’importance à ce que tout le monde soit le plus satisfait possible. Sa plus grande fierté ? Avoir réussi à monter sa petite affaire qu’elle est bien décidé à bichonner. VALEURS CE QU’ELLE ATTEND Du social plus que du commercial ! APRIL 30, 2015 4:49 PM 15 L E A D E R S O P H I E « ÇA MARCHE PAS. » Robert a 50 ans dont 30 passés en tant qu’éleveur dans la ferme familiale (il est la 3e génération !). Il a fournit des AMAPs mais ça l’emmerde de devoir tout expliquer à ces citadins. Il vend à des supermarchés mais ça l’emmerde de se faire exploiter par des costumes-cravates. Il est un peu bougon. Le concept l’a séduit même si internet c’est pas trop son truc, il vient de s’inscrire. Au début, il était pas sur d’être bien inscrit mais il a proposé ses produits à une Ruche, pour voir. Ses ventes ne décollent pas, y a personne dans sa Ruche et toute façons les gens achètent quasiment rien comparé à la Biocoop. Pourtant il fait des bons produits, y en a des moins bons qui vendent plus, pourquoi personne lui explique ? Bon bah tant pis... VALEURS Volontaire Méfiant Apeuré CE QU’IL ATTEND Être convaincu que le système marche Être accompagné pour améliorer ses affaires APRIL 30, 2015 4:49 PM 11 PRODUCTEUR R O B E R T « ON M’A DIT QUE » René n’est pas inscrit à La Ruche qui dit Oui. D’ailleurs ça ne l’intéresse pas. Il fait ses légumes et après il les vend dans des AMAPs et des Biocoop et ça marche. Pas très bien mais ça va, pas besoin d’enrichir encore d’autres opportunistes. Non parceque les bobos parisiens qui viennent se sucrer 20% en faisant rien, il en veut pas. La Ruche il en a entendu parlé, il est pas allé sur le site, mais il sait que c’est encore rien que mecs qui se croient plus intelligents, qui te font payer et où toi tu gagnes rien. En même temps, ses voisins qui participent ont l’air content... VALEURS Réfractaire Distant Têtu CE QU’IL ATTEND Faire ses produits sans avoir à jouer à la marchande Ne pas être poursuivi pour rentrer dans ce nouveau système APRIL 30, 2015 4:49 PM 12 PRODUCTEUR R E N É « J’AI DES OBJECTIFS, JE DÉVELOPPE MON BUSINESS » Issu d’une famille d’agriculteurs, Pierre a vu ses parents se faire écraser par les grosses corporations internationales. Il refuse de rentrer dans ce shéma et se dirige très vite vers les réseaux courts en multipliant les services. Il a senti qu’il y avait un marché qui existait et est bien décidé à prendre sa part. La Ruche qui dit Oui ! lui a d’abord permis de centraliser toutes ses activités mais il a aussi détourné le système en vendant les produits de ses voisins. Il dégage ainsi un plus grand chiffre d’affaire tout en proposant une large gamme de produits le plaçant comme un producteur phare du réseau. VALEURS ambitieux commerçant malin, tendance filou CE QU’IL ATTEND Des outils pour gérer son réseau de producteurs et son large catalogue APRIL 30, 2015 4:49 PM 10 PRODUCTEUR P I E R R E
  21. 21. TRÈS MOTIVÉ JACQUES CAROLINE MATHIEU YANN PEU MOTIVÉ TRÈS APTEPEU APTE FACILITATEURS très motivé peu apte ÉTINCELLE peu motivé très apte SIGNALEMENT très motivé très apte IL 30, 2015 4:49 PM 7 IAGRAMME DE FBM LIG N E D ’ACTIO N TRÈS MOTIVÉ MONIQUE PIERRE PEU MOTIVÉ TRÈS APTEPEU APTE FACILITATEURS très motivé peu apte ÉTINCELLE peu motivé très apte SIGNALEMENT très motivé très apte ROBERT RENÉ APRIL 30, 2015 4:49 PM DIAGRAMME DE FBM LIG N E D ’ACTIO N
  22. 22. COOR RR TRAITE UNE DEMANDE D’OUVERTURE A faire toutes les semaines Analyse pertinence de la localisation Accueil Admin Liste Questionnaires Filtre par “Area” et “To review” Page Questionnaire Va chercher la ville sur la carte de la Home Analyse de la motivation et du projet Va regarder les distances sur Mappy Mail d’entretien téléphonique Mail d’entretien téléphonique Marque comme “reviewed” Marque comme “reviewed” Entretien téléphonique Envoi un mail de mise en relation entre les deux RR Mail de refus Mail de refus Déjà filtré par pending La distance est acceptable ? No Yes Le projet semble-il toujours intéressant No Yes Le projet semble-il toujours intéressant Yes No Le porteur accepte-t-il de changer de localisation Yes No Le projet est intéressant No Yes Est-elle proche d’une autre Ruche Yes No Est-ce qu’il y a déjà des Ruches autour ? Yes No Ruche créée et marquée “init” Questionnaire marquée comme “validated” Mail d’acceptation au porteur Ruche créée et marquée “init” Mail d’acceptation au porteur Questionnaire marquée “refused” Mail de refus au porteur Valide la demande Valide la demande Refuse la demande Analyse pertinence de la localisation Va chercher la ville sur la carte de la Home Va regarder les distances sur Mappy Mail d’entretien téléphonique Marque comme “reviewed” Envoi un mail de mise en relation entre les deux RR La distance est acceptable ? No Yes Le projet semble-il toujours intéressant No Le projet est intéressant No Yes Est-elle proche d’une autre Ruche Yes Est-ce qu’il y a déjà des Ruches autour ? Yes No Questionnaire marquée “refused” Mail de refus au porteur Refuse la demande
  23. 23. RECUEILLIR LES REMONTÉES
  24. 24. PRODUIRE
  25. 25. COMMUNIQUER
  26. 26. MAIN PRINCIPLES PAGE HEADER ACTION BAR LAYOUT ∠ Upper level TITLE .page-header The page header usually takes the context’s color as background-color but it can be used also to display a large picture. .action-bar The action bar contains action buttons, progress bars, search, etc. that will affect what’s in the view. The view The actual content of the page ∠ Distributions DISTRIBUTION DU 30 JUILLET We don’t override the browser back button. The back button should only bring you to the upper level of a top to bottom tree. For instance: Providers > Provider Profile > Product If we are in a different case, it shouldn’t appear. Additional info related to the view A basic action bar contains buttons, input and/or filters that affects the view. It’s placed so that the page header bottom arrives at its middle. 30 30 Action Action 12 12 12 12 basic with info SearchSearch SearchSearch FORMS MAIN COMPONENTS Input sizes & margins In order to be easily reached whatever the pointing device is (mouse or touch), every input has to be at least 48px high Checkbox and radio butons Eventhough the box appears only 18px wide, the active area includes the 12px margin and the label. PlaceholderPlaceholder PlaceholderPlaceholder PlaceholderPlaceholder PlaceholderPlaceholder PlaceholderPlaceholder PlaceholderPlaceholder WrongWrong ValueValue PlaceholderPlaceholder YeahYeah LABEL LABEL LABEL REQUIRED LABEL REQ. LABEL REQUIRED LABEL REQ. LABEL LABEL LABEL LABEL 126 12 12 612 12 12 12 12 12 12 12 12 48 42 42 16 16 16 16 normal :focus error normal with value disabled success missing INPUT STATES REQUIRED INPUT
  27. 27. normal unselected unselected selected COLORS GROUPS WITH ICONS .btn-success A button that goes with a positive action (add, validate, etc.) .btn-group A group of buttons is used to alter a content (filters). You can make it multi-choice or single-choice. switch A switch is used when there’s a choice to be made. It’s a btn-group composed of a btn-success and a btn-danger .btn-danger To use for an action with dangerous consequences (delete). .btn-primary To use if a page has one main important unique action. just an icon with an icon stays the same, but we remove background and border .btn-block Mostly use on mobile, the length is not set by the inner text. :hover positive :active negative disabled Button Button BUTTON BUTTON BUTTONBUTTON BUTTON ButtonButton OuiOui ButtonButton NonNon Button Button Button Button Button Oui Oui ButtonButton ButtonButtonButton Non Non Button Button Button ∠ Button 18 9 18 18 9 18 18 BUTTONS Button ButtonButtonButton Button Button ButtonButton normal normal .btn The go-to button MAIN PRINCIPLES BUTTONS TYPES COLORS .btn-success A button that goes with a positive action (add, validate, etc.) .btn-primary .btn-link For a secondary action. Padding stays the same, but we remove background and border .btn-lg .btn-block Mostly use on mobile, the length is not set by the inner text. .btn-sm In some cases we can use a small button, but the hit area must still be 48px high. A 6px margin has to be respected above and under the button. :hover :hover :active no ok ok :active disabled disabled Button ButtonButton ButtonButton Button Button Button Button Button Button Button Button Search Search 48 48 36px Button 18 18 14px 17px Button Button Button 12 12 12 12 1212 12 12 12 12 18 12 12 6 6 18 18 12 12 18 Minimal size In order to be easily reached whatever the pointing device is (mouse or touch), every button has to be at least 48×48px Icons For any size above smartphone, never use a button with just an icon. It’s hard to understand and slow the interactions. Button Button ButtonButton
  28. 28. Merci
  29. 29. Merci ON RECRUTE Design, dev, PM

×