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.

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 Projekts 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.

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:
Die ganzen Gedanken, die zu der Strategie geführt haben, ist eine längere Geschichte. Aus Platzgründen werde hier 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.

Nachdem die Strategie steht, geht es darum, eine Farbe und Schrift zu wählen, die diese Strategie optisch unterstützt.

Es geht darum: Die Wahrnehmung der Websitebesucher zu leiten und das richtige Gefühl zu wecken.

Hier hilft Farb- bzw. 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). Sie unterstützt das Ziel der Website: schnelle Hilfe.

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

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

5. Bildsprache.

Wie die Farbe und die Schrift, soll auch die Bildsprache unsere Message unterstützen. Bilder bieten uns noch viel gezielter die Möglichkeit, Stimmungen zu 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:
Teilweise werden ausgeschnittene Bilder hier gezielt als Gestaltungselement eingesetzt.
Das liegt einerseits daran, dass diese Art von Bildsprache schon Teil des Markenauftritts war, und andererseits, dass diese Bilder durch Effekte (siehe Punkt 7) noch dazu dienen, das Gefühl von Energie stärker zu transportierten. 

6. Gestaltungselemente.

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.

Die wichtigsten Fragen: 
Gibt es Animationen und Effekte, die die Message kommunizieren?

Bikefolks:
Die wichtigsten Animationen auf der Bikefolks-Website waren die Hover-Effekte: Sobald man über ein Bild hovert, verändert sich das Bild.

Hier war wieder die Idee Kraft, Energie und Schnelligkeit zu vermitteln. Außerdem animiert es den User, 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 animieren, nach unten scrollt!

Die Fertige Website.

Es gibt noch einige andere Ideen, die in der Website stecken, zum Beispiel, der Aufbau des Kontaktformular – aber dazu kommen wir vielleicht in einer anderen Case-Study. Ich hoffe ich konnte euch einen guten Einblick in meine Arbeitsweise und Gedanken geben.

Teile diese Case-Study!

Interesse an einer Zusammenarbeit?