Webdesign für Álvaro Vargas

Diesen Beitrag widmen wir einem neuen Webprojekt, das wir im März umgesetzt haben – ein Projekt für Webdesign und Webentwicklung für Álvaro Vargas.

In Form einer kleinen Story nehmen wir euch mit durch den gesamten Design- und Entwicklungsprozess dieser neu entstandenen Website.

Vor einigen Wochen hat sich Álvaro Vargas bei uns gemeldet. Ursprünglich wollte er Informationen zum Design eines Kochbuchs, das demnächst erscheinen soll.

Wer ist Álvaro Vargas?

Álvaro Vargas ist ein äußerst aktiver Ernährungsberater, der täglich Inhalte zu Ernährung und Gesundheit erstellt und diese in den sozialen Medien teilt. Er kennt sich bestens mit digitalen Kanälen aus, misst Social Media große Bedeutung bei und versteht es, diese optimal für seine Sichtbarkeit zu nutzen.

Er ist auf Facebook und Instagram aktiv, veröffentlicht Podcasts und betreibt einen eigenen YouTube-Kanal – überall liefert er hochwertigen Content für alle, die sich für Ernährung und Gesundheit interessieren. Regelmäßig postet er Fotos seiner Gerichte, teilt Rezepte auf YouTube und veröffentlicht Blogbeiträge auf seiner persönlichen Website. Darüber hinaus hat er bereits mehrere Bücher zum Thema veröffentlicht.

Nun geht Álvaro den nächsten Schritt in seiner Karriere und möchte sein Wissen künftig auch in Präsenzkursen weitergeben. Zum Start bietet er daher Workshops in Barcelona und Madrid an.

Nachdem wir uns auf das Innendesign des Kochbuchs geeinigt hatten, sprachen wir weiter über seine Projekte – und erhielten einen spannenden neuen Auftrag.

Um seine Idee der Präsenzkurse zu unterstützen, wünschte er sich eine Website, auf der sich Interessierte direkt für die Kurse anmelden können.

Jetzt geht’s los!

Mit diesem Auftrag starteten wir im Studio durch. Nach ausführlichen Gesprächen, um die Details des Projekts zu klären, war schnell klar, welche Stilrichtung Álvaro bevorzugt: frisch, intuitiv, direkt – und ein Design, das seine Persönlichkeit und seine beruflichen Ziele widerspiegelt.

Also machten wir uns an die Entwicklung des grafischen Konzepts, das wir Álvaro präsentieren wollten.

Es war eines der erfrischendsten Projekte, an denen wir in letzter Zeit gearbeitet haben – innovativ, ohne gestalterische Einschränkungen, denn Álvaro ist sehr offen und hat uns von Anfang an als Profis vertraut. Wir haben viel Wert auf Details gelegt und waren mit dem Ergebnis rundum zufrieden. Anfangs hatten wir Zweifel, ob Álvaro den Mut hätte, sich voll auf unseren Ansatz einzulassen, aber er hat sofort verstanden, wohin wir mit seiner Website wollten.

Für das grafische Design der Website haben wir uns intensiv mit seinen Social-Media-Kanälen, Büchern und seinem Blog beschäftigt, um genau den Stil zu treffen, der zu ihm passt.

Die wichtigsten technischen Aspekte dieses Projekts waren für uns die Animationen der Website, die Farbwahl und die Informationsarchitektur.

Welche Ziele sollten wir erreichen?

Unser Ziel war es, eine Onepage-Website zu gestalten – dynamisch, intuitiv, direkt und mit viel Bewegung.

Die Nutzer sollten in kurzer Zeit alle relevanten Informationen erhalten, um zu entscheiden, ob der Kurs für sie interessant ist und wie sie sich anmelden können.

Der Zeitrahmen war knapp, denn Álvaro Vargas wollte die Website bereits Anfang April live haben.

Deshalb haben wir im Studio die folgenden Punkte besonders effizient umgesetzt:

1. Die Farbpalette
2. Informationsstruktur
3. Animationen
4. Menüführung
5. Die Vision und Mission von Álvaro transportieren
6. Die Zahlungsabwicklung
7. Persönliche Giveaways für Álvaro

1. Zur Farbpalette

Die gewählten Farben sind kontrastreich und sorgen für einen starken visuellen Reiz – perfekt für das Onepage-Konzept der Website. So erreichen wir, dass die Besucher förmlich an den Bildschirm gefesselt werden und die Seite bis zum Ende durchscrollen, ohne es zu merken.

2. Zur Informationsstruktur

Ebenso haben wir großen Wert auf die Informationsarchitektur gelegt. Wie bei den Farben soll der Blick von Modul zu Modul springen, sodass keine Langeweile aufkommt und die Nutzer gerne auf der Seite bleiben.

3. Die Animationen

Das Webdesign enthält verschiedene Effekte, die die Aufmerksamkeit der Nutzer auf sich ziehen und für die gewünschte Dynamik sorgen.

Ein Beispiel: Im Bereich „Häufige Fragen“ haben wir spielerische Animationen eingebaut – die Augen von Álvaro verfolgen ständig den Mauszeiger, und wenn man mit dem Cursor über eines der Lebensmittel im Hintergrund fährt, verschwindet es wie von Zauberhand… oder besser gesagt: dank Programmierung!

4. Das Menü

Die Website verfügt über ein originelles, horizontal angeordnetes Menü, mit dem man jederzeit zu den verschiedenen Bereichen der Seite springen kann. Die Übergänge sind besonders gelungen und vermitteln ein Gefühl von Tiefe – das macht die Navigation sehr angenehm.

5. Die Vision und Mission von Álvaro Vargas vermitteln

Dank der genannten Punkte und der Inhalte, die Álvaro selbst beigesteuert hat, werden seine Mission und Vision auf der Website klar und authentisch transportiert.

Nachdem das grafische Design der Website von Álvaro freigegeben war, machten wir uns direkt an die Programmierung.

6. Die Zahlungsabwicklung

Da es sich um eine Website mit Zahlungsfunktion handelt, war uns die Sicherheit besonders wichtig. Wir haben sämtliche Funktionstests durchgeführt und Álvaro die Bedienung der Zahlungsabwicklung ausführlich erklärt – alles lief reibungslos.

Nach nur wenigen Wochen war die Website bereits fertiggestellt und programmiert. Alles war bereit für den Launch – und so ging die Seite online.

7. Persönliche Giveaways für den Kunden 😉

Als kleines Extra haben wir für Álvaro Coverbilder gestaltet, damit er die Links zu seinen Kursen optimal auf Instagram und Facebook teilen kann.

Wir wissen, dass sich schon kurz nach dem Launch viele Interessierte angemeldet haben und einige sofort einen Platz in seinen Kursen reserviert haben.

Das Team von JordiEnsenyatDisseny und CodeWebBarcelona wünscht Álvaro viel Erfolg mit seinem neuen Projekt – und wir hoffen, dass der Saal bis auf den letzten Platz gefüllt ist!

Anerkennungen

Inzwischen wurde das Projekt bereits auf verschiedenen Websites vorgestellt, die inspirierende Webdesigns präsentieren, zum Beispiel:

http://www.csswinner.com/details/yo-s-nutrirme/11414
http://www.designnominees.com/sites/yo-s-nutrirme
https://onepagelove.com/yo-se-nutrirme
http://www.bestcss.in/user/detail/Yosenutrirme-5193

Das Projekt live erleben

Wenn ihr neugierig geworden seid und das Projekt live sehen möchtet, folgt einfach dem Link zu seiner Website: www.yosenutrirme.com