Hédonist: Vorstellung des französischen Lebensstils

Eine UI-Design-Fallstudie

Dieses Projekt war ein Website-Design für eine französische Lifestyle-Marke namens Hédonist. Es fand im Verlauf eines dreiwöchigen Sprints statt, um einen Prototyp als ein Minimum an tragfähigem Produkt für den Kunden herzustellen.

Hédonist ist ein Einzelhandelsgeschäft mit Sitz in Toronto, das sich auf die Förderung der französischen Lebenskunst in einem internationalen Raum konzentriert. Savoir-faire und die traditionelle französische Handwerkskunst sind zwei der wichtigsten Geschenke, die sie an Toronto weitergeben möchten.

"Kein Rot, kein Blau, keine Baguettes."

Ist eines der ersten Dinge, die unser Kunde zu uns gesagt hat, als wir nach dem Design gefragt haben und wo ich mit meinem Design-Denken und -Prozess begonnen habe.

Ich werde das wiederholen, da unser Kunde es auch mehrmals getan hat:

"Kein Rot, kein Blau, keine Baguettes."

Wahrscheinlich der Satz, der mir am meisten in den Sinn kam, nachdem ich mit unserem Kunden gesprochen hatte. Das Wichtigste, was er wollte, war, dass wir das Website-Design so gestalten, dass es französisch aussieht und sich anfühlt, ohne klischeehaft zu sein.

Das Inception Sheet ist ein Werkzeug, mit dem sich eine Stimmung und eine visuelle Sprache entwickeln lassen. Nun können viele Leute einfach einen zufälligen Stil entwickeln, aber so machen wir das hier nicht. Der ganze Zweck dieses Blattes ist es, ein WARUM in den Mittelpunkt des Designs zu stellen.

Ohne zu wissen, warum wir entwerfen, was machen wir überhaupt?

Der Grund, warum unser Kunde diese Site wünscht und was er für sein Unternehmen will, wird die Türen für die bestmöglichen Designs öffnen, die wir für sie erstellen können. Wenn wir uns auf das Warum konzentrieren, können wir Stimmung und Bildsprache leichter strukturieren.

Anfangsblatt
Die Dualität der modernen und traditionellen französischen Kultur zum Ausdruck bringen, eine Erfahrung schaffen, die Klischees bricht und die französische Kunst des internationalen Lebens fördert.

Mit diesem Warum in der Mitte. Die Bildsprache folgte natürlich. FRANZÖSISCH, das wichtigste Wort für das gesamte Design, ist im Gegensatz zu anderen Highlights modern und traditionell, muss jedoch in einem Tandem dargestellt werden, das später für einen interessanten Prozess erstellt wurde. Mühelos und kühn, in meinen Augen ein anderes kontrastierendes Paar, ein Thema für das Design.

Mit einem Produkt- und Lifestyle-Fokus auf die Marke habe ich auch Worte wie persönlich, immersiv und freundlich verwendet. Jeder hat die Idee, dass jemand die Marke wirklich durch seine Online-Darstellung kennenlernen könnte, und nicht nur eine Erfahrung im Laden. Die Site selbst musste auch gut, fokussiert und sauber sein und mich zu einem eher redaktionellen Erscheinungsbild führen.

Zwei Seiten zu jeder Münze.

Französisch zu machen, aber nicht zu klischeehaft, war wahrscheinlich die größte Herausforderung, aber eine weitere Herausforderung bestand darin, zwei Seiten der Marke darzustellen. Einerseits wollten wir, dass Eleganz und Qualität der Produkte für sich sprechen, andererseits wollten wir eine lustige und sehr künstlerische Seite, die die Freundlichkeit und Freude der Marke zum Ausdruck bringt. Wir wollten modern und traditionell. Meine Aufgabe war es, die beiden Seiten in perfekter Übereinstimmung darzustellen.

Meine Moodboards, die dieser Mentalität folgten, waren wie folgt:

Ganz über Akzent: Konzentrieren Sie sich auf die Präsentation von Qualität durch lebendige Farben. Immer eine Akzentfarbe im Bild, um es zum Platzen zu bringen. Die Verwendung von Linien und Neutral, um diese mühelose französische Ästhetik zu vermitteln. Ich habe versucht, Rot und Blau auf eine Weise zu verwenden, die kein Klischee war, aber am Ende war unser Kunde immer noch, obwohl dieser zu stereotyp französisch war.

Einfach und mühelos: Konzentrieren Sie sich auf die rustikalere und kulturellere Seite des französischen Lebensstils. Kaffee und Patios, um eine noble, aber mühelose Mentalität zu präsentieren. Unser Kunde hat die Bilder mit Menschen sehr genossen, ein bisschen künstlerischer und fröhlicher dargestellt, aber das war ihnen noch zu stereotyp französisch.

Ruhige Qualität: Konzentration auf die Eleganz des französischen Stils. Viel dunklere, aber dennoch lebendige Farben, die bei unserem Kunden mehr Resonanz fanden. Viele Texturen und Muster sowie Stoics-Modelle lenken den Fokus eher auf das Produkt als auf das Modell und lassen die Qualität für sich selbst sprechen. Dritte von links in der oberen Hälfte, ein Bild einer Frau, die auf einem Balkon zu Mittag isst, um das französische Lebensgefühl aufrechtzuerhalten. Der Favorit unseres Kunden, aber mir wurde gesagt, dass es an Emotionen mangelte, es ging zu sehr auf Eleganz und Stoizismus.

Moodboards von links nach rechts: Rund um den Akzent, einfach und mühelos, leise Qualität

Mit 3 abgelehnten Moodboards ging es also wieder ans Reißbrett. Es war nicht so, dass sie völlig falsch waren, aber keine war die perfekte Stimmung, die unser Kunde wollte.

Ich entschied mich dafür, die besten Dinge der letzten beiden zu nehmen (die erste war zu weit von der Vision des Kunden entfernt) und kombinierte sie zu einem finalen Moodboard.

Ich muss meinem UX-Designer und Projektpartner Ali Angco (siehe UX-Seite der Fallstudie hier) dafür danken, dass er mir geholfen hat, das Rätsel zu lösen, das das perfekte Moodboard war, und sogar eine Reihe von Bildern für das letzte beigetragen hat . Hier ist:

Herrliche Dualität

Final Mood Board

Das Mood Board konzentriert sich wirklich darauf, die Dualität jedes Elements darzustellen. Jede Farbe hat eine andere Seite der Platine, um sie zu verkleinern. Jedes Bild hat ein Gegenteil in der Stimmung. Wir pflegen die Freude und das künstlerische Gefühl in der oberen Hälfte mit lebendigen Bildern, die Menschen zeigen, und die untere Hälfte hat die dunklere, elegantere und stoischere Seite.

"Jede Münze hat zwei Seiten."

Wirklich zu verstehen, dass eines nicht mit dem anderen existiert, ist jedes Element gegensätzlich aber komplementär. Das französische Savoir-Vivre lebt in diesem Moodboard und zeigt, dass ein französischer Lebensstil ein Spektrum umfasst. Ich kann dies als Erfolg bezeichnen, da ich endlich ein unglaubliches „Wow! Das ist perfekt! “Von unserem Kunden. Es war wahrscheinlich das schwierigste Moodboard, das ich entwerfen musste, und das Endergebnis war umso besser.

Französischer Lebensstil

Von Moodboards war es ein direkter Einstieg in die Entwicklung eines Stils für Hédonist.

Geliefert von einigen der besten Mid-Fidelity-Wireframes, die ich je erhalten habe. Es war an der Zeit, die Bildschirme so zu gestalten, dass die Produkte, ihre hohe Qualität und vor allem der französische Lebensstil strahlen.

Mid-Fi-Bildschirmdesigns

Zur Erinnerung, hier sind die größten Dinge, die ich mit dem Design vermitteln wollte:

Französisch, aber kein Klischee
Dualität
Produktorientiert

Farben

Ich denke, der beste Weg, dies zu erreichen, war das von mir entwickelte Farbsystem. Ich entschied mich für die Verwendung von 4 Farben. Auf den ersten Blick scheinen sie zu viel zu sein, zu viel Farbe kann zu Konflikten führen und wir haben das gleiche Problem, das unser Moodboard vermeiden möchte. Jede Farbe hat jedoch ihren Zweck.

Die Primärfarbe: Eine dunkle, gesättigte Farbe, die auf der gesamten Website verwendet werden soll, insbesondere dort, wo das Logo hervorstechen und die Aufmerksamkeit auf Aktionen und Schaltflächen lenken soll. In diesem Fall sehen Sie die dunkle Krickente.

Die Secondaries: Eine warme, kühle und neutrale Farbe. Alle gratulieren sich gegenseitig und dem Primären. Dies sind diejenigen, die wirklich diese 3 Punkte oben getroffen haben. Ich habe ein Pastellrosa / Pfirsich für das Warme, ein Hellblau für das Kühle und ein sanftes Beige für das Neutrale verwendet.

Durch die Verwendung von 3 Farben können wir den 3 Farben der französischen Flagge eine Ehre erweisen, auch mit 1 warmen, 1 kühlen und 1 neutralen Farbe.

Wir haben auch den Dualitätsaspekt erreicht, indem wir sowohl die warmen als auch die kühlen Töne haben, ohne dass einer den anderen überstrahlt und der Neutralpunkt den Mittelweg zwischen den beiden anderen darstellt.

Jede dieser Farben wird als fester Hintergrund für die Produkte verwendet. Je nachdem, welche Farbe für dieses Produkt am besten geeignet oder am besten geeignet ist, wird sie ausgetauscht, um das Produkt in den Mittelpunkt der Aufmerksamkeit zu rücken.

Homepage in 2 verschiedenen Farbstilen

Hier zeige ich das Farbstilsystem und zwei verschiedene Variationen der 4-Farben-Palette. Auf der linken Seite ist die primäre und auf der rechten Seite ein Beispiel, wie eine Fallpalette aussehen würde. Das Farbsystem arbeitet modisch und öffnet das Design für verschiedene Jahreszeiten oder Kollektionen.

Typografie

Wo wir viele Farben verwendet haben, habe ich nur 2 Schriften gepaart. Pistilli und Futura PT. Paarung dieser kommt die Dualität wieder durch.

  • Die Pistilli, eine eher traditionelle Schrift, betonte bestimmte Wörter und unterstreicht das elegante französische Flair.
  • Der Futura PT, moderner und klarer. Halten Sie die Informationen auch gut lesbar, ohne den Produktbildern im Weg zu stehen.

Ich wollte diese drei Punkte unbedingt nach Hause fahren, weil dadurch das WARUM erreicht wird, was zu wiederholen ist:

Die Dualität der modernen und traditionellen französischen Kultur zum Ausdruck bringen, eine Erfahrung schaffen, die Klischees bricht und die Kunst des französischen Lebens international fördert

Hier ist der Styleguide, der das obige wiederholt und die verwendeten Farben sowie einige zusätzliche Elemente zeigt.

Hier sind einige der letzten Bildschirme. Schon auf einen Blick sieht man wirklich, wie das Produkt im Mittelpunkt steht. Zeigen Sie die Qualität, ohne auf Lager zu sein, durch große und lebendige Bilder. Der Text ist zurückhaltend und obwohl es sehr aussagekräftig ist, die Qualität weiter zu betonen, gelingt es ihm, sich aus dem Rampenlicht des Produkts herauszuhalten und dennoch Unterstützung zu leisten.

Einige der letzten Bildschirme

Prototyp

Zuletzt können Sie eine kurze Durchsicht des Prototyps im Video unten sehen und Sie können auch den Prototyp hier durchgehen!

gewonnene Erkenntnisse

Nichts ist jemals perfekt.

Wie immer ist es wichtig, aus Ihren Fehlern zu lernen, um Ihr nächstes Projekt zu verbessern.

Nach der Tatsache fiel mir auf, dass ein Großteil des französischen Gefühls von der Kopie statt von den Bildern herrührte. Obwohl ich mit dem entwickelten Farbsystem sehr zufrieden bin, hätte ich gerne mit anderen Elementen gearbeitet, um das Bild weiter hervorzuheben Französisches Aussehen und Gefühl auf den ersten Blick. Den FRENCH wirklich sichtbar machen, wenn Sie die Site zum ersten Mal sehen.

Dies wurde in 3 Wochen erledigt und mein Kunde, mein Partner und ich alle betrachten das als Erfolg.

Bis zum nächsten Mal!

Hallo! Wenn Sie Kontakt aufnehmen möchten, senden Sie mir eine E-Mail an: Sie können mich auch auf LinkedIn finden oder meine Fotos auf @sebscapes anschauen.