Branding und Homepage für Tech-B2B-Startup Celestical
Red Boumghar, der CEO von Parametry, bat mich, eine Website für sein neues Projekt, eine EU-basierte Cloud namens Celestical, zu erstellen.
Das Ziel der Website war, die Besucher der Homepage zur Anmeldung für die Warteliste zu motivieren.
![Mockup von Webseitenelementen für Celestical Homepage, inklusive Überschriften wie "We are Space Engineers." und "Bring your computing above the Clouds.", Nutzer-Testimonials, Preisinformationen und einen Anmeldebereich. Die Gestaltung betont dunkle Hintergründe mit farblichen Akzenten und interaktiven Elementen zur Preisberechnung und Dienstleistungspräsentation.](https://musnuss.de/wp-content/uploads/2024/05/celestical-interaktive-homepage-erstellen-lassen.jpg)
Inhaltsverzeichnis
Zielgruppe
Als Erstes definierte ich in Absprache mit Red die Zielgruppe: Entwickler in Tech-KMU.
Für diese Zielgruppe spielt eine interaktive Benutzererfahrung eine wichtige Rolle, um ihre Aufmerksamkeit zu gewinnen.
Deshalb plante ich die Website so, dass fast mit jedem Element interagiert werden kann, um die Besucher 40% länger auf der Website zu halten.
Designsystem
Da Celestical noch keine Markenidentität besaß, entwickelte ich das Designsystem von Grund auf, um die weltraumorientierte Vision von Celestical widerzuspiegeln.
![Das Bild zeigt die Elemente eines Designsystems für Celestical, darunter UI-Komponenten, Farbpaletten und Typografie-Optionen auf einem dunklen Hintergrund. Es umfasst verschiedene Formen mit abgerundeten Ecken, Farbschemata für Erfolg, Fehler und neutrale Zwecke sowie Schriftgrößen und Abstände für die Gestaltung einer Benutzeroberfläche.](https://musnuss.de/wp-content/uploads/2024/05/celestical-Designsystem-erstellen-lassen-1400x1050.webp)
BONUS: Logo-Entwürfe
Zusätzlich erstellte ich vier Logo-Entwürfe im entwickelten Stil von Celestical, um die Marke zu etablieren.
Red konnte sich für das beste Logo entscheiden, das ich anschließend auf die Website integrierte.
![Vier Logo-Entwürfe für Celestical, die die Marke repräsentieren und die Weltraum-orientierte Vision widerspiegeln: Im ersten Entwurf ist Kreis, der auf 3 aufgerundeten Teile geteilt ist, zu sehen. Die Grenzen zwischen den Teilen bilden die Form der ersten zwei Buchstaben des Namens. Der zweite Entwurf ist ein stilisierter Satellit, der aber die Form eines Planeten hat. Der dritte Entwurf ist ein Kreis, der den Planeten darstellt, von dem die Radio-Wellen ausgehen. Der vierte Entwurf ist einen Planeten, der in sich die Radio-Wellen trägt.](https://musnuss.de/wp-content/uploads/2024/05/celestical-logo-erstellen-lassen-1400x1050.webp)
Planung
In der Planungsphase entwickelte ich die Website-Strukturund das Nutzererlebnis in Figma. Red konnte bereits nach einer Woche einen interaktiven Website-Prototyp testen.
Red konnte sich für das beste Logo entscheiden, das ich anschließend auf die Website integrierte.
![Ein detailliertes Wireframe-Layout der Celestical-Website in Figma für Desktop- und Mobilansichten, das die Benutzerführung und Interaktion für verschiedene Seiten wie die Homepage, Registrierung und Anmeldung zeigt. Die Wireframes sind mit Linien verbunden, die den Fluss der Benutzerinteraktionen darstellen.](https://musnuss.de/wp-content/uploads/2024/05/celestical-website-designen-lassen-1400x1050.webp)
Entwicklung
Nach der Freigabe des Prototyps, erstellte ich die Website mit HTML5, CSS3 und JavaScript mit Nuxt.js.
Der Lighthouse-Score beträgt 98/100 für Performance und 100/100 für SEO. Zudem unterstützt die Website mehrere Sprachen und ist vollständig responsiv.
Semantische Suchoptimierung
Als Letztes optimierte ich die Website für SEO, indem ich semantische HTML-Tags und das Schema-Vokabular nutzte, um den Suchmaschinen genau zu zeigen, was Sache ist.
Erfahre mehr darüber, wie semantisches HTML auf SEO wirkt
![Das Bild zeigt einen Screenshot des Ergebnisses eines HTML-Checkers, der für den Inhalt eines Texteingabefelds ausgeführt wurde. Es zeigt, dass die Überprüfung abgeschlossen ist und keine Fehler oder Warnungen gefunden wurden. Darüber hinaus ist ein Ausschnitt des HTML-Codes sichtbar, der Teile eines Webseitentitels und Strukturdetails enthält.](https://musnuss.de/wp-content/uploads/2024/05/celestical-html5-semantische-seo-optimierung-1400x1050.webp)
BONUS: Drei Monate gratis Support & Wartung
Zum Schluss übergab ich Red eine Dokumentation und veröffentlichte die Website. Und nach dem Launch genießt Red kostenlose Wartung und Support für die ersten 3 Monate.