Upload
thefamily
View
164
Download
0
Embed Size (px)
Citation preview
François ChayLead designer
[email protected]@francoischay
SE CONNAITRE
Identité La Ruche qui dit Oui !
Brief Créa
CONTEXTELes 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.
CIBLEFamille de zone pavillonaire ayant une conscience écologique.
TONChaleureux, proche, convivialRicheVivant
MESSAGEManger mieux, manger juste
PROMESSE Vivre mieux, en accord avec soi et son environnement
Identité La Ruche qui dit Oui !
Univers visuel
ENGAGEMENT AFFICHES VERNACULAIRES SÉRIGRAPHIE
Identité La Ruche qui dit Oui !
TypographieElle sert ici à communiquer les 2 faces du projet, l’engagement et la convivialité, avec une linéale condensée brute et une réale plus ronde et 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.
Identité La Ruche qui dit Oui !
Grand principePour 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
Identité La Ruche qui dit Oui !
Face aux sites de e-commerce bioEn évitant les teintes vert/bleu et le blanc pour une ambiance plus proche de 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.
DécLAISOnS DE FORMAtS
Logotype > Déclinaisons formatsLogo carré
Logo horizontalLogo vertical
6
Format vertical
Format horizontal - Uniquement sur fond coloré
Format horizontal Format carré
3 cm
11 mm
Tailles minimum pour l’impression
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 filaireLogo générique_FilaireLogo 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
VERSIOn FILAIRE
Logotype > Logo filaireLogo générique_FilaireLogo horizontal_Filaire
Logo vertical_Filaire
7
SE FAIRE CONNAITRE
RESPONSABLEDE 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 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.
tRActversion 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
28
200 mm
DEVENIR UNE WEBAPP
DEVENIR UNE VRAIE WEBAPP
DEVENIR UNE VRAIE WEBAPPAVEC UNE PETITE ÉQUIPE
Mangiar bene, mangiar giusto
Mangiar bene, mangiar giusto
COMPRENDRE LE TERRAIN
RESPONSABLEDE RUCHE
PRODUCTEUR
MEMBRE
RESPONSABLEDE 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 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 confi ance à internet. Mais si il achète ses fringues, pourquoi pas ses légumes ?
VALEURSréservévolontaireinformé
CE QU’IL ATTENDavoir la conscience tranquille
APRIL 30, 2015 4:49 PM 3
M E M B R EMATHIEU « JE VEUX BIEN MANGER »
Yvan a la trentaine, il habite dans une grande métropole où il a fait ses études. L’off re 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 fl exibilité selon ses disponibilités / son état. Mais il s’y perd et oublie souvent de commander.
VALEURSépicuriendésinvestiun peu fl ambeur
CE QU’IL ATTENDpouvoir commander rapidement et quand il en a envie
APRIL 30, 2015 4:49 PM 4
MEMBREY V A N
« 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éfi ce, qui sait qui elle est et ce qu’elle apporte ?
VALEURS
CE QU’ELLE ATTENDpartager une expérience avec d’autres gens donner un sens à son implication
APRIL 30, 2015 4:49 PM 5
M E M B R ECAROLINE
« 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éfi ques ne passera pas par lui.
VALEURScurieuxengagéempathique
CE QU’IL ATTENDde la transparence et des informations sur sa consommation
APRIL 30, 2015 4:49 PM 6
M E M B R EJACQUES
« 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 aff aires comme une business-woman. Ce qu’elle est.
VALEURSimpliquéesocialeorganisée
CE QU’ELLE ATTENDPouvoir gérer ses diff érentes ruchesS’organiser avec celles autour
APRIL 30, 2015 4:49 PM 16
L E A D E RCHRISTINE
« 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 fi erté ? Avoir réussi à monter sa petite aff aire qu’elle est bien décidé à bichonner.
VALEURS
CE QU’ELLE ATTENDDu social plus que du commercial !
APRIL 30, 2015 4:49 PM 15
L E A D E RS 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...
VALEURSVolontaireMéfi antApeuré
CE QU’IL ATTENDÊtre convaincu que le système marcheÊtre accompagné pour améliorer ses aff aires
APRIL 30, 2015 4:49 PM 11
PRODUCTEURR 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...
VALEURSRéfractaireDistantTêtu
CE QU’IL ATTENDFaire ses produits sans avoir à jouer à la marchandeNe pas être poursuivi pour rentrer dans ce nouveau système
APRIL 30, 2015 4:49 PM 12
PRODUCTEURR 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 chiff re d’aff aire tout en proposant une large gamme de produits le plaçant comme un producteur phare du réseau.
VALEURSambitieuxcommerçantmalin, tendance fi lou
CE QU’IL ATTENDDes outils pour gérer son réseau de producteurs et son large catalogue
APRIL 30, 2015 4:49 PM 10
PRODUCTEURP I E R R E
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
APRIL 30, 2015 4:49 PM 7
DIAGRAMME DE FBM
LIGNE D’ACTION
TRÈS MOTIVÉ
MONIQUEPIERRE
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 13
DIAGRAMME DE FBM
LIGNE D’ACTION
COOR RR TRAITE UNE DEMANDE D’OUVERTUREA faire toutes les semaines
Analyse pertinencede la localisation
Accueil Admin ListeQuestionnaires
Filtre par “Area”et “To review”
Page Questionnaire
Va chercher la ville surla 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”
Entretientéléphonique
Envoi un mailde mise en relationentre les deux RR
Mail de refus
Mail de refus
Déjà �ltré par pending
La distanceest acceptable ?
No
Yes
Le projet semble-il toujours intéressant
No
Yes
Le projet semble-il toujours intéressant
Yes
No
Le porteuraccepte-t-il
de changer de localisation
Yes
No
Le projetest intéressant
No
Yes
Est-elle proched’une autre Ruche
Yes
No
Est-ce qu’il y a déjà des Ruches autour ?
Yes
No
Ruche crééeet marquée
“init”
Questionnairemarquée comme
“validated”
Mail d’acceptation
au porteur
Ruche crééeet marquée
“init”
Mail d’acceptation
au porteur
Questionnairemarquée “refused”
Mail de refus
au porteur
Validela demande
Validela demande
Refusela demande
COOR RR TRAITE UNE DEMANDE D’OUVERTUREA faire toutes les semaines
Analyse pertinencede la localisation
Accueil Admin ListeQuestionnaires
Filtre par “Area”et “To review”
Page Questionnaire
Va chercher la ville surla 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”
Entretientéléphonique
Envoi un mailde mise en relationentre les deux RR
Mail de refus
Mail de refus
Déjà �ltré par pending
La distanceest acceptable ?
No
Yes
Le projet semble-il toujours intéressant
No
Yes
Le projet semble-il toujours intéressant
Yes
No
Le porteuraccepte-t-il
de changer de localisation
Yes
No
Le projetest intéressant
No
Yes
Est-elle proched’une autre Ruche
Yes
No
Est-ce qu’il y a déjà des Ruches autour ?
Yes
No
Ruche crééeet marquée
“init”
Questionnairemarquée comme
“validated”
Mail d’acceptation
au porteur
Ruche crééeet marquée
“init”
Mail d’acceptation
au porteur
Questionnairemarquée “refused”
Mail de refus
au porteur
Validela demande
Validela demande
Refusela demande
RECUEILLIR LES REMONTÉES
PRODUIRE
COMMUNIQUER
MAIN PRINCIPLES
PAGE HEADER
ACTION BAR
LAYOUT
� Upper level TITLE
.page-headerThe page header usually takes the context’s color as background-color but it can be used also to display a large picture.
.action-barThe action bar contains action buttons, progress bars, search, etc. that will affect what’s in the view.
The viewThe actual content of the page
� Distributions DISTRIBUTION DU 30 JUILLETWe 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 > ProductIf we are in a different case, it shouldn’t appear.
Additional info related to the view state can appear in an action-bar footer.
If the action-bar is occupied by a progress bar, the actions are placed in the action-bar footer.
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.
12 items selected
12 items selected
30
30
Action
Select all
Select all
Unselect all
Unselect all
Action
12
12
12
12
12
12
12
12
12
12
12
12
basic
with info
with progress bar
Search
Search
Search
Search
Step 1
Step 1
Step 2
Step 2
Step 3
Step 3
Next step �
Next step �
FORMS
MAIN COMPONENTS
Input sizes & marginsIn 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 butonsEventhough the box appears only 18px wide, the active area includes the 12px margin and the label.
Placeholder
Placeholder Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Wrong
Value
Placeholder
Yeah
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
normal
normal
:focus
error
normal
checked
checked disabled
half-checked
with value
disabled
success
missing
disabled
INPUT STATES
REQUIRED INPUT
CHECKBOX STATES
RADIO STATES
A checkbox can act as an on/off button but can also reflect the state of an inferior level.This level doesn’t necessarely follow a yes/no pattern but can be part yes/part no (for instance: only half the products of a provider are selected)
On small screens, the REQUIRED mention is reduced to REQ.
Radio buttons use the same styles as the checkboxes. The only difference being they are circles.
LABEL
LABEL
LABEL
LABEL LABEL
LABEL
LABEL LABEL
LABEL
LABEL
BUTTONS
Button ButtonButton
Button Button Button
normal
normal
unselected
unselected selected
.btnThe go-to button
MAIN PRINCIPLES
BUTTONS
TYPES
COLORS
GROUPS
WITH ICONS
.btn-successA button that goes with a positive action (add, validate, etc.)
.btn-groupA group of buttons is used to alter a content (filters). You can make it multi-choice or single-choice.
switchA 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-dangerTo use for an action with dangerous consequences (delete).
.btn-primaryTo use if a page has one main important unique action.
just an icon
with an icon
.btn-linkFor a secondary action. Padding stays the same, but we remove background and border
.btn-lg
.btn-blockMostly use on mobile, the length is not set by the inner text.
.btn-smIn 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
positive
:active
no ok ok
:active
negative
disabled
disabled
Button
Button
BUTTON BUTTON BUTTON BUTTON
ButtonButton
Button
Oui
Button
Non
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Oui Oui
ButtonButton ButtonButton
Non Non
Button
�
�
� Button
� Search Search
Button �
48
48
36px
Button
18 18
14px
17px
Button
Button
Button
12
12
12 12 1212
12
12
12
12
18
12
126
6
18
18
12
12
18
Minimal sizeIn order to be easily reached whatever the pointing device is (mouse or touch), every button has to be at least 48×48px
IconsFor any size above smartphone, never use a button with just an icon. It’s hard to understand and slow the interactions.
9
18 18
9
18
18
Button Button Button
BUTTONS
Button ButtonButton
Button Button Button
normal
normal
unselected
unselected selected
.btnThe go-to button
MAIN PRINCIPLES
BUTTONS
TYPES
COLORS
GROUPS
WITH ICONS
.btn-successA button that goes with a positive action (add, validate, etc.)
.btn-groupA group of buttons is used to alter a content (filters). You can make it multi-choice or single-choice.
switchA 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-dangerTo use for an action with dangerous consequences (delete).
.btn-primaryTo use if a page has one main important unique action.
just an icon
with an icon
.btn-linkFor a secondary action. Padding stays the same, but we remove background and border
.btn-lg
.btn-blockMostly use on mobile, the length is not set by the inner text.
.btn-smIn 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
positive
:active
no ok ok
:active
negative
disabled
disabled
Button
Button
BUTTON BUTTON BUTTON BUTTON
ButtonButton
Button
Oui
Button
Non
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Oui Oui
ButtonButton ButtonButton
Non Non
Button
�
�
� Button
� Search Search
Button �
48
48
36px
Button
18 18
14px
17px
Button
Button
Button
12
12
12 12 1212
12
12
12
12
18
12
126
6
18
18
12
12
18
Minimal sizeIn order to be easily reached whatever the pointing device is (mouse or touch), every button has to be at least 48×48px
IconsFor any size above smartphone, never use a button with just an icon. It’s hard to understand and slow the interactions.
9
18 18
9
18
18
Button Button Button
Merci
Merci
ON RECRUTEDesign, dev, PM