Website für eine Marketingagentur

Das Ziel hinter diesem Projekt war es, eine moderne und sehr kreative Website mit einigen neuen Tools zu erstellen, um auch zu lernen und unseren Horizont zu erweitern. Deshalb haben wir uns den Kunden als Marketingagentur vorgestellt - denn wer muss schon kreativer aussehen als diese, oder?

 

Wir setzten uns die grundlegenden Grenzen:

• Standardseiten, die jede Agentur braucht
• Ein Design im dunklen Modus mit einem Off-Black als Haupthintergrundfarbe
• Ein heller Orangeton als Hauptfarbe der Marke. Harmonisch und kreativ.
• Etwas Besonderes schaffen, das sofort auffällt und sich von dem unterscheidet, was wir bisher gemacht haben

Wir wussten also, was wir erreichen wollten, nun war es an der Zeit, Ideen zu sammeln, wie wir das erreichen konnten. Wir haben uns hingesetzt und ausgiebig gegoogelt, um extravagante Lösungen für die typischen Website-Komponenten zu finden. Wir sammelten alles, was wir cool fanden und was wir auf die eine oder andere Weise einbauen wollten, und erstellten ein Moodboard, um herauszufinden, was wir zusammenfügen können und was gut zu welcher Seite passen würde (und was natürlich nicht).

 

Hier ist eine kleine Sammlung der Dinge, die wir unbedingt verwenden wollten:

• Eines der ersten „besonderen“ Dinge, die beim Öffnen der Seite auffallen, ist die lebendige, flüssige Farbanimation auf der Startseite. Wir haben [dieses erstaunliche GitHub Repo von Pavel Dobryakov] (https://github.com/PavelDoGreat/WebGL-Fluid-Simulation) gefunden und wollten es unbedingt verwenden.
• Sehr beliebt bei Kreativagenturen: Der fließende Mauszeiger. Wir wollten einen weichen, benutzerdefinierten Cursor implementieren, der der Maus des Benutzers folgt. Nicht nur das, wir haben ihn auch animiert, damit er sein Aussehen je nach dem zugrunde liegenden Element ändert. Er wird größer, wenn der Mauszeiger über einen Link bewegt wird, er wird breiter, wenn der Mauszeiger über einen horizontalen Schieberegler bewegt wird, und er wird dünner, wenn ein Texteingabefeld angezeigt wird. Das macht den benutzerdefinierten Cursor nicht nur zu einer ausgefallenen Spielerei, sondern verbessert die Benutzerintuitivität der Website.
• Generell wollten wir ein möglichst reibungsloses Erlebnis gewährleisten. Deshalb haben wir Animationen und Basiselemente standardisiert, wie z. B. Schaltflächen, die wachsen und ihre Farbe ändern, wenn man mit der Maus darüberfährt, oder den horizontalen Schieberegler mit Kästchen, die durch eine kombinierte Schrumpf- und Drehanimation einen leichten 3D-Effekt bekommen, wenn man mit der Maus darüberfährt.
• Ein Osterei. Wir sind sowieso große Fans von Ostereiern, also brauchte dieses Projekt definitiv auch eines. Deshalb haben wir unten links einen kleinen Otter eingefügt, der ein Popup mit einer benutzerdefinierten Handlungsaufforderung öffnet, wenn er angeklickt wird.

Nachdem wir mit dem Design der einzelnen Seiten fertig waren, bestand der nächste Schritt darin, sie in Betrieb zu nehmen. Da wir dies als zusätzliche Lernerfahrung nutzen wollten, haben wir jeden Teil von Hand programmiert.

 

Das Frontend der Website (das, was man als Besucher sieht) wurde in Next.js erstellt, einem Javascript-Framework, das auf serverseitigem Rendering basiert, wodurch die Website auf Ihrer Seite wahnsinnig schnell geladen wird. Das Backend (der Teil der Website, den Sie nicht sehen, wo Texte, Bilder und andere Inhalte bearbeitet werden) wird mit Strapi realisiert, das interne API-Routen nutzt, wodurch die Website wiederum superschnell lädt. Schnelles Laden ist zwar schön, weil es für die Nutzer bequem ist, aber vor allem ist es ein entscheidender Punkt für den Ruf einer Website bei Google. Alle Daten werden in einer dynamischen PostgreSQL-Datenbank gespeichert.

 

Kurzer Rückblick: Wir haben drei Teile, aus denen sich die Website zusammensetzt:

1. Frontend
2. Backend
3. Datenbank

Um das Projekt kundenfähig zu machen, haben wir alle drei Komponenten in so genannte „Container“ gepackt, die es uns ermöglichen, die Website auf einen beliebigen Server zu liefern und einfach zu starten, um sie online zu haben. Das machen wir bei allen Websites, die wir erstellen, damit die Infrastruktur die Entwicklung nicht beeinträchtigt und verkompliziert. Da sich die Website in einer virtuellen Umgebung befindet, sorgen wir außerdem für eine zusätzliche Sicherheitsebene.