Porträt von mir (Dmitry Dugarev) - eines jungen Mannes mit Brille, der lächelt und eine Jeansjacke trägt. Er steht vor einem städtischen Hintergrund während der Dämmerung, die Lichter der Stadt sind im Hintergrund verschwommen zu sehen.

Dmitry Dugarev

Webmaster & SEO-Experte

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.

Inhalts­verzeichnis

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 weltraum­orientierte 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.
Celestical Designsystem mit Typografie, Farben, Abständen und Eckrundungen

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.
Vier Logo-Entwürfe für Celestical

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.
UI/UX Prototyp von Celestical-Website in Figma

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.

Interaktive Homepage von Celestical

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.
Fehlerloses Ergebnis des Testes der HTML5-Semantik der Celestical Homepage in W3C Nu HTML Validator

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.

Hast Du Lust auf mehr Tipps und Tricks rund um Websites und SEO?

Dann abboniere meinen Newsletter und profitiere von:

Gib einfach Deine E-Mail-Adresse ein und mach Deine Website zum Magneten für Suchende zu machen!

P.S.: Bist Du noch am Überlegen? Dann hier ist ein kleiner Anreiz für Dich:

Wenn Du mein Newsletter abbonierst, bekommst Du:

  • BONUS: Checkliste mit 55 Tipps für perfekte SEO-Beiträge für B2B 2024 - Ein E-Book mit den besten SEO-Praktiken, die 2024 relevant sind.

Dieses E-Book hat alles drin, was ich alltäglich für meine Kunden mache, um deren Online-Präsenz aufs nächste Level zu bringen.

Ich hoffe das reicht. Ich freue mich auf Dich und bin gespannt, was Du mit meinen Tipps erreichst!

Meine Unterschrift, die aus einem durchgestrichenen Buchstaben D besteht, der in kyrilischer Schreibschrift geschrieben ist

Beste Grüße
Dmitry Dugarev