Tobias RoppeltKontakt

Konzept für eine Agentur-Landing-Page.

Konzeption & UI-Design.

Welche Gedanken stecken eigentlich hinter einem Webdesign?
In dieser Case-Study zeige ich dir meinen Design-Prozess für die Landingpage der Kreativagentur Bikefolks.

Ein Mock-up von einem Laptop, der mein Design der Bike-Folks zeigt

1. Briefing.

In einem 30 bis 60-minütigen Briefing, lerne ich meinen Kunden und sein Anliegen kennen.
Unter anderem besprechen und beantworten wir folgende Fragen:
Wer seid ihr und was macht ihr?
Wer ist die Zielgruppe?
Wer ist die Konkurrenz?
Was ist das Business-Ziel?
Was ist das Ziel der Website?

Bikefolks:

Bikefolks ist eine Agentur, die sich auf Branding und Design für Fahrradmarken spezialisiert hat.

Das Ziel der Website ist es, ihre Leistungen und Referenzen vorzustellen. Gleichzeitig wollen sie den potenziellen Kunden neugierig machen und ihn dazu animieren, sie zu kontaktieren.

2. Moodboards.

Nachdem ich einen Überblick über das Business, die Ziele und die Vorstellung des Kunden habe, erstelle ich Moodboards.
Diese helfen mir, um herauszufinden:
Was ist die Zielgruppe schon gewohnt?
Welche Message wird oft transportiert?
Wie ist die Farb-, Bild- und Textsprache?
Wie sieht die Konkurrenz aus?
Was sind Trends in diesem Bereich?

Bikefolks:

Im Laufe der Strategie-Phase sind mehrere Moodboards für das Projekt entstanden.

Am Anfang ging es darum herauszufinden, wie sich Fahrradmarken und Agenturen präsentieren und wie sich das vereinigen lässt. Im fortschreitenden Prozess kamen Moodboards über Geschwindigkeit und Farbwahl hinzu.
Eine Darstellung von Moodboards für mein Webdesign

3. Strategie.

Auf Grundlage des Briefings, dem Ziel und den Moodboards entwickle ich eine Strategie, wie die Website aufgebaut werden soll und welche Gestaltungselemente die Nutzerführung und die Hauptaussage unterstützen.
Die wichtigste Frage für die Strategie:
Was ist das Ziel der Website und wie kann ich mithilfe von Design dieses Ziel erreichen?

Bikefolks:

Alle Gedanken aufzuzählen, die zu der Strategie geführt haben, würde den Rahmen sprengen. Aus Platzgründen werde ich hier deshalb nur das Endergebnis präsentieren.

Was soll die Website ausstrahlen:
"Wir sind Experten für Marketing und können dir in der Corona-Zeit schnell helfen neue Ideen zu finden, um deine Fahrräder optimal zu vermarkten."

4. Farbwahl & Typo.

Eine Darstellung von einem Design-Styleguide aus dem Tool Zeplin
Nachdem die Strategie steht, geht es darum, eine Farbe und Schrift zu wählen, die diese Strategie optisch unterstützt.
Wir wollen:
Die Wahrnehmung der Websitebesucher zu leiten und das richtige Gefühl zu wecken.

Hier hilft Farb-, Wahrnehmungspsychologie und Erfahrung.

Bikefolks:

Farbe:
Die Akzentfarbe Gelb steht unter anderem für: Kreativität, Energie und Optimismus.
Sie ist die perfekte Farbe für die Kombination aus Agentur und Fahrrädern (Speed). Außerdem unterstützt sie das Ziel der Website: Schnelle Hilfe.

Das sehr dunkle Blau bietet einen optimalen Kontrast zum Gelb. Es lässt das Gelb noch mehr zur Geltung kommen und reiht sich in die dunkle Farbwelt der meisten Fahrradmarken ein.

Schrift:
Montserrat ist eine moderne, serifenlose Schrift. Sie ist unter anderem sehr breit und hat sehr fette Schriftschnitte. Eine gute Wahl, um Lautstärke und Energie auszudrücken.

5. Bildsprache.

Sowie Farbe und Schrift soll auch die Bildsprache unsere Message unterstützen. Durch die Bildsprache können wir noch viel gezielter Stimmungen transportieren und Gefühle hervorzurufen.
Die wichtigsten Fragen:
Was soll durch die Bildsprache transportiert und vermittelt werden?
Welches Gefühl soll der Beobachter durch die Bilder bekommen?

Bikefolks:

Alle Gedanken aufzuzählen, die zu der Strategie geführt haben, würde den Rahmen sprengen. Aus Platzgründen werde ich hier deshalb nur das Endergebnis präsentieren.
Ein ausgeschnittenes Bild von einem Cube-Fahrrad

6. Gestaltungs-Elemente.

Gestaltungselement gliedere ich generell in zwei Gruppen.
1. Wiedererkennungswert:
Gibt es Gestaltungselemente, die einen gewissen Wiedererkennungswert liefern?
Diese Art von Gestaltungselemente sind nicht unbedingt Teil eines Design-Prozesses und abhängig vom Konzept.

2. UI-Elemente:
Wie sehen die Buttons, die Navi, der Footer, die Links etc. aus?
Das sind alle Elemente, die eine Website haben muss, um überhaupt zu funktionieren. Wenn man Elemente mit Wiedererkennungswert hat, spiegeln die sich oft auch in den UI-Elementen wider.

Bikefolks:

Das Hauptziel der Seite ist es a) im User das Gefühl von Energie und Geschwindigkeit zu wecken und b) ihn zum Formular am Ende der Seite zu leiten.

Was bietet sich da besser an, als Pfeile?
Pfeile wurden sehr exzessiv auf der Seite genutzt, um den Blick des Users zu lenken.

Ein weiterer Vorteil von Pfeilen: Die Verbindung zu Fahrrädern und dem Straßenverkehr.

7. Animationen.

Animationen sind eine nette Sache, besonders für User-Interaktionen – solange sie einen gewissen Sinn haben. Auf Websites werden Animationen leider viel zu oft als Effekthascherei eingesetzt, weil sie cool aussehen und nicht unbedingt, weil sie die Aussage unterstützen.
Worauf es ankommt:
Gibt es Animationen und Effekte, die die Message kommunizieren?

Bikefolks:

Hier war wieder der Fokus darauf Kraft, Energie und Schnelligkeit zu vermitteln. Außerdem animieren die Animationen den Besucher durch die Website zu scrollen, um nach Bildern zu suchen und mit den Hover-Animationen zu spielen.
Das wiederum unterstützt das Ziel, den User dazu zu bringen, nach unten zu scrollen!
Eine Übersicht meines Designs für die Bike-Folks Website

Die Fertige Website.

Eine Übersicht meines Designs für die Bike-Folks Website

Teile diese Case-Study!

Interesse an einer Zusammenarbeit?

Erstgespräch vereinbaren