Startseite Layout

„Leistungen“ Layout

„Über mich“ Layout

erstelltes Webdesign Briefing

1// Intro (Elevatorstory)
Diesen Samstag – Onlineshop für Naturprodukte mit persönlicher Empfehlung, ausgesuchten Produkten und ehrlichen Erfahrungsberichten für (junge) umweltbewusste Weltverbesserer. Bewusstes Green Shopping.

2//Feelings
Willkommen fühlen, Ehrlichkeit, persönliche Ansprache (Du, Frau/Herr)

3/ / Look + Feel (Ästhetik)
TOP: bewusst ehrlich natürlich
Leicht, authentisch, freundlich, gesellig, frisch ,lebendig

4// Brand Position
Kleiner Onlineshop mit persönlicher Beratung, mit hoher Stammkundenrate, schnellem
Versand und persönlichen, ehrlichen Kundenservice.

5// Gewünschte Likes + Dislikes
+ Usability
+ Intuitivität
+ Übersichtlichkeit
+ Klarheit
+ form follows function

– Verwirrung vermeiden
– Kunde soll schnell und sicher den Kauf abschließen
– stocken in der Usability vermeiden

! Kundenzufriedenheit
! technische Funktionalität

6// Design
Farben:
Highlightfarbe: Orange:# fedo25
Schrift: # 000000 (Schwarz)
Hintergrund: # NM (Weiß)
Hintergrund Produktfoto: # f5f284

Fonts:
Logo Font: Nort mit LetterSpace 50
HeadlineFont: Majuskeln, Proxima Nove Bold mit LetterSpace 100
Fließtext Font: Century Gothic Pro Regular mit LetterSpace 100

Startseite:
Referenzseite: https://www.carbonbeauty.com/

– (Lade)Animation der Bilder/Schrift
– Silder im Headerbereich mit selber veränderbare Marketingbotschaft
– kostenfreier Versand ab 49.95€
– Animierter Button auf dem Slider (Schrift und Hintergrundfarbe invertiert bei Mousehover)
– Vertikales, versetztes Produkt Grid
– Animierte Schrift-> BEWUSST EHRICH NATÜRLICH fliegt von rechts nach links durchs bild
– Mouseover bei Produktbild: Overlay vom Produktbild wird abgedunkelt (60%igem Schwarz), Produktname unterstrichen (dahinter Produktlink) oberhalb Markenname; unterhalb Preis
– „Unendliches“ Laden von Produkten, kein weiter/nächste Seite klicken
– Produktbeschreibungstext = Shortdescription

Menü:
Referenzseite: https://www.carbonbeautv.com/
– mobiles Menü -> Hamburger Menü
– Ausgeklapptes Menü (Von links kommend); Mischung aus Bild und Schrift; restliche Seite wird verdunkelt (60% Schwarz)
– Links oben ein Kreuz zum Menü schließen
– Bei Mousehover wird die Auswahl hervorgehoben (Corporate Design Orange)

AGBs/Impressum usw:
– Dropdown
– Pluszeichen dreht sich beim ausklappen
– Footer Links verlinken in die FAQs

dynamische Seiten

Kategorieübersicht:
Referenzseite: https://www.carbonbeauty.com/collections/hair-care

– Vertikales, versetztes Produkt Grid
– minimale Filter an der Seite mit hervorgehobenen Hintergrund bei Auswahl
– Scrollbox für Marken – „Filter“ auf der Kategorieseite
– Unendliches Laden von Produkten, kein weiter/nächste Seite klicken
– Produkt-Ad Slider am Ende von jeder Kategorie
– Mousehover bei Produktbild: Overlay vom Produktbild wird abgedunkelt (60%igem Schwarz), Produktname unterstrichen (dahinter Produktlink) oberhalb Markenname; unterhalb Preis
– Name Kategorie über Produktgrid (auch anschnitt möglich)
– Produktbilder freigestellt / Schweben im Layout vor einem hellgrauen rechtwinkligen Hintergrund
– Scrollanimation wie bei Carbonbeauty.com
– Kategorietext ausklappbar unterhalb aller Produkte

Detailseite Produkt:
Referenzseite: https://www.carbonbeautv.com/products/geranium-cleansing-water
– Inhaltsstoffe und Anwendung zum ausklappen (nur da, wenn auch ausgefüllt)
– Nur ein Produktbild (Sonst Slider mit png-Bildern und kleinen Pfeilen im Produktbild
– groß Produktname und darüber klein die Marke. Bei Überlänge über die ganze Seite
– Unter Beschreibung Button mit Verlinkung in die Marke
– Unten 3 Produkte der gleichen Marke oder Kategorie ohne Headline drüber

Suche:
Referenz: carbonbeauty.com
Vertikales Grid mit Minibildern und Name drunter Marke

Warenkorb
– graues Feld von Rechts (Produkthintergrundfarbe) über die halbe Seite mit Auflistung Produkte
– Rechts oben ein X zum schließen
– Unten „zur Kasse“ Button

Blog:
– Layout Übersicht und Postaufbau wie bei https://www.vogue.de/
– Produktverlinkung im Blogbeitrag an der Rechten Seite
– unendlich scrollen

statische Seiten (AGB, Impressum)
FAQ aufbau mit untereinander ausklappbaren Reitern.

Bsp: https://www.frankbody.com/eu/support/ oder https://us.typology.com/faq

7// konkretes Need am Ende

Design von:
Startseite
dynamischer Seite: Produkt + Kategorieübersicht
statischer Seite (AGB, Impressum)
Warenkorb
Kundenkonto