[Design][DEALS] Display a deal

[christophefondacci]

Dans la version 2.7, nous intégrons la notion de "deal".

Un deal est une promotion offerte par un lieu. Typiquement et dans un premier temps ce sera le 1er verre acheté = 1 verre offert. Par la suite les deals se diversifieront probablement.

3 moyens d'accéder aux deals:

• (1) Depuis la carte, via un bouton "deals" spécifique (github à venir)
• (2) Depuis le snippet "homepage", tabulation "DEALS"
• (3) Depuis le snippet "overview" d'un lieu

1,2, 3 = numéro accès référencés ci-après.

Nous avons besoin d'une cohérence d'affichage des deals entre ces 3 points d'entrées.

Informations que nous avons besoin de présenter lorsque nous affichons un deal:

• Le lieu et le type de lieu (pour accès 1 et 2, car sur l'overview on est a priori déjà sur le lieu)
• Le "titre" du deal
• La validité (lorsque l'utilisateur a déjà utilisé le deal, on pourra afficher quelque chose comme "Utilisable dans 19h", sinon ce pourrait être un descriptif du type "du lundi au vendredi")
• Eventuellement le stock (50 restants): nous n'avons pas encore discuté de cette fonctionnalité, ne la design pas mais sache que ça pourra venir s'intégrer
• Probablement une thumbnail de la photo du lieu (pour accès 1 et 2)
• Un bouton "Utiliser ce deal" de taille bien visible

Je pense que les accès 1 et 2 présenterons les deals exactement de la même manière tandis que la présentation du deal dans une overview sera un peu plus light (car le contexte du lieu où se trouve le deal est déjà présent).

Pour l'overview, on a besoin que la section "ressorte" visuellement. Elle se trouvera juste en dessous du snippet (sous les boutons like / checkin / comment), et sera une ligne horizontale d'information (ne pas grouper avec d'autres informations sur la même ligne stp) de la hauteur que tu souhaites. On pourra éventuellement utiliser un fond de couleur pour faire ressortir l'information.

[richardratiman]

voici ma prop version ovw pour en parler tout à l'heure

[christophefondacci]

• Autre bloc différent pour les listes et présentant en plus:
  • La vignette du bar
  • Le nom du bar

[richardratiman]

pour la version liste, prévilégier bouton

[richardratiman]

pour la version Overview ci-dessus --- Bouton coul vert => #0c741a typo => Open sans Reg 48px

--- Typo 1 verre acheté => Source sans pro semi bold 40px du lundi au vendredi => Source sans pro Reg 30px

--- Icon sur Drive en 68x76 car taille particulière pour ce bloc mais précise moi si nous devons en faire qu'1 seule

[richardratiman]

version bloc-liste en cours et à venir en cours de semaine

[christophefondacci]

Epaisseur bordure: 5? Pas multiple de 2, j'ai donc pris 6 (donc taille réelle 3) Couleur de fond bleu foncé? => j'ai pris #151422

Pour les résolutions écran plus grandes (pad) je centre le bloc, ok ?

[richardratiman]

ok pour centrer le bloc, Couleur de fond bleu foncé = #141522 mais vois au mieux ce que ça donne au final. Juste à vérifier qu'il ne tourne pas trop au violet J'avais effectivement 5 en bordure mais ok pour 6

[richardratiman]

la version blocs-liste que je te propose avec 3 types de boutons. Ma 1ère version était avec un bouton vert (comme le bloc2) mais en le répétant je trouve que ça un peu lourd. Donc ma préférence pour le bloc 1 ou 3.

[christophefondacci]

Ok, parfait (oublie le mail que je viens d'envoyer du coup)

Est-ce qu'on essaierait pas la 1 mais sans le fond gris (fond de la 3 transparent). On garde juste l'icône cadeau vert à gauche

[richardratiman]

Je suis d'accord avec toi, c'est mieux. Qu'est-ce qu'il te faut du coup ? L'icone Deal sous fond vert ? Typo couleur et taille ?

[christophefondacci]

typo couleurs et taille si l'icône deal que tu m'as donnée est sur fond transparent je n'ai pas besoin d'une autre. Si ce n'est pas le cas, le mieux est de me faire l'icône deal sur fond transparent car plus simple pour l'intégration

[richardratiman]

oui elle est sur fond transparent mais dis moi si tu souhaites que je la refasse. Pour la typo "Nom de l’établissement" = Source Sans Reg 26pt coul #a9a9a9 "1 verre acheté" = Source Sans Semi bold 32pt coul #ffffff "du lundi au vendredi" = Source Sans Reg 26pt coul #a9a9a9 "Utiliser ce deal !" = Open sans 36pt coul #ffffff

[christophefondacci]

Oui j'ai besoin de l'icône deal en fond transparent aux bonnes dimensions (dimensions du carré vert avec icône centrée) car la seule icône deal que j'ai est en 68x76 et colle les bords de l'image donc elle ne convient pas.

[christophefondacci]

PS, il faudrait que tu designes en 640 car c'est très compliqué pour moi de réintégrer sur plus petit. Exemple : "Utiliser ce deal" ne tient pas, "1 verre acheté = 1 offert" non plus.

C'est toujours plus simple d'intégrer dans plus grand, mais dans plus petit c'est l'enfer. Si tu peux changer tous tes modèles en 640 pour les futurs design stp ça m'arrangerait.

[christophefondacci]

Je commence à intégrer et plus je le vois plus je trouve ce design lourd.

La tendance côté app est plutôt dans la finesse des traits, icônes, etc. La je trouve qu'on est à l'opposé de ça (gros contours, polices semibold, etc.)

Peut on essayer d'affiner tout ça? et peut-être éclaircir un peu? Je trouve tout cela bien sombre.

[christophefondacci]

Il faut également réduire l'image car elle prend trop de place. J'ouvre la liste dans une modal, donc la largeur est encore plus petite que celle de l'écran. Je ne vois pas d'autres solutions que de changer le format de l'image pour la mettre beaucoup plus petite.

Voilà une capture pour te rendre compte:

[richardratiman]

ok je veux bien qu'on en parle d'ici peu, à notre rdv Skype. Tant qu'à faire des modifs je refais une pass sur cette dernière prop.

[richardratiman]

Voici les versions Overview revues comme convenu (les éléments sur Drive) 1 verre acheté = Source Sans Light 30pt #717171 du lundi au vendredi = Source Sans Light 28pt #717171 rejoignez-nous = Source Sans Reg 30pt CAPITAL #e56207

[christophefondacci]

Ok j'intègre ça. Je te ré-assigne car il me manque la version liste correspondante.

[christophefondacci]

Police pour le bouton "Utiliser ce deal" ? Idem police "rejoignez-nous" ? J'ai agrandi la police du titre du deal car trop petite (je suis en 20 donc 40 pour toi).

[christophefondacci]

Attention tu n'utilises pas toujours le même orange j'ai l'impression... #e56207 versus #e95707

[christophefondacci]

Ca tranche un peu trop avec le reste du snippet quand j'intègre. J'ai donc fait des essais. Lorsque la section deal ne couvre pas l'ensemble de l'arrière plan je trouve que ça s'intègre un peu mieux.

Je pense qu'il manque encore quelque chose pour mieux intégrer le deal dans le snippet. Contour, légère inner shadow, je sais pas trop.

Voici mon intégration actuelle:

[richardratiman]

[richardratiman]

Prochaine modif : revenir sur la version sur laquelle nous avons échanger hier sur Skype, avec bouton hors fond clair (à caler/centrer en fonction du rendu)

[richardratiman]

et voici la version ovw

[richardratiman]

et la liste modal

[christophefondacci]

La version liste ne fonctionne pas sur fond clair. As-tu essayé l'IPA?

Je te l'ai envoyé pour que tu te rende compte.

La liste en fond clair ne s'intègre pas

[christophefondacci]

Sur la version snippet le texte n'est pas très lisible, la couleur du texte est trop claire je pense / pas assez contrastée.

[richardratiman]

je n'ai pas reçu ton fichier exemple mais j'ai fait ça. ok pour toi ?

[christophefondacci]

Oui, pardon j'ai fait les captures et je te le ai pas envoyées: