Blue Horizon

Hochwertige Webseite zur Darstellung ihrer Projekte

Beschreibung

Für den Kunden Blue Horizon habe ich eine Webseite erstellt, mit der er sich hochwertig präsentiert und seine Projekte ansprechend darstellen kann.

Blue Horizon ist eine Investment- und Projektentwicklungsgesellschaft mit einem regionalen Fokus auf Berlin und Hamburg.

Leistungen:

Design, Konzeption und Umsetzung der Webseite

Kunde:

Blue Horizon, Hamburg

Jahr:

2020

Ziel der Webseite

Blue Horizon besaß vorher keine Webseite, da dies durch ihr starkes Netzwerk noch nicht zwingend notwendig war.

Jedoch möchten sie nun das potential einer Webseite nutzen, um online sichtbar zu sein.

Die Website soll den Anspruch, den Blue Horizon an seine Arbeit hat aufzeigen, um so Partner für neue Projekte zu gewinnen.

01

Individuelles Layout

Anforderungen

Dem Kunden war von Beginn an bewusst, dass ein herkömmliches Webseiten Template, sie mit ihren Besonderheiten und der Qualität die sie ausstrahlen wollen, nicht passend präsentieren kann.

Lösung

Zu beginn war die Recherche und Anaylse der vorhanden und den noch benötigten Inhalten unabdingbar. Dadruch konnte ich festlegen wo diese Informatione stehen müssen, damit sie eine ideale Wirkung erziehlen. Anschließend habe ich die Inhalte in ein passgenaues Layout zusammen gebracht.

„Das erstellen eines individuellen Layouts ist ein fester Bestandteil meiner Arbeit.“

Klarer Hauptbereich

Da die Projekte am deutlichsten die Kompetenzen von Blue Horizon zeigen und so potentielle Partner am besten überzeugen, war schnell klar, dass die Projekte eine zentrale Rolle auf der Webseite spielen müssen. Daher ist das Layout so aufgebaut, dass die Projekte einen prominenten Platz haben und das Bildmaterial entsprechend groß dargestellt wird.

Passgenaues Erscheinungsbild

Jeder Abschnitt ist genau auf die Inhalte des Kunden abgestimmt. Dadurch wird der Inhalt stets optimal dargestellt. Denn das ist genau der professionelle Ansatz, den Blue Horizon ausstrahlen will.

Kurz aber präzise

Die Texte sind eher kurz aber präzise. Daher habe ich die Schriftgröße der Überschriften und des Fließtextes in eine moderate Größe gesetzt. Dadurch lässt sich der Text gut überfliegen und die Texte gehen im Vergleich zu den Bildern nicht verloren.

Benutzerfreundlich

Die Benutzerfreundlichekeit der Webseite ist mir stets wichtig. Denn eine Webseite muss nicht nur optisch ansprechend aussehen, sondern auch technisch einfach zu Bedienen sein.

Daher gibt es eine Navigation die immer sichtbar ist und somit stets eine Orientierung gibt wo man sich auf der Seite befindet.

Und natürlich ist die Webseite auch für mobile Endgeräte bestens optimiert.

02

Projekte hochwertig präsentieren

Ziel

Blue Horizon steht für spezielle und einzigartige Bauprojekte. Es werden keine Projekte von der Stange umgesetzt. Dies soll in der Projekt- Präsentation rüber kommen und dem Benutzer einen guten Überblick über die Projekte geben.

Lösung

Zum einen wird dem Bildmaterial viel Raum gegeben. Zum anderen haben die Projekte ein flexibeles Layout was sich je nachdem, welche Inhalte hinterlegt werden, anpasst. Jedoch mit klaren und einheitlichen Strukturen, damit der Nutzer jederzeit weiß, wo er welche Informationen findet.

Einzigartiger Einstieg

Gleich im Startbereich wird die Besonderheit der Projekte eingefangen. Denn dort werden abstrakte Formen dargestellt die sich von Formen des echten Bauprojektes ableiten.

Abwechslungsreiches Layout

Das Layout passt sich, je nachdem was für Bildformate im Projekt hochgeladen werden an. Dadurch entstehen für jedes Projekt ein unterschiedliches Layout, was eine Darstellung mit ausreichender Abwechslung erzeugt.

Übersichtlichkeit

Im zweiten Abschnitt bekommt der Besucher alle wichtigen Informationen über das Projekt. Zahlen sprechen dabei für sich, daher sind wichtige Kenngrößen in der Projektübersicht besonders hervorgehoben.

Projekt Navigation

Da je nachdem wie viele Bilder ein Projekt hat, eine Seite auch etwas länger werde kann, habe ich eine Navigation für die Projektseite ergänzt. Dadurch hat man zu Beginn einen guten Überblick über die vorhandenen Projekt-Inhalte und kann unkompliziert hin und her navigieren.

03

Digitale Designsprache entwickeln

Schrift

Als Schrift habe ich die Schriftart „Avenir“ ausgewählt. Diese hat ein modernes und geometrisches Erscheinungsbild was wunderbar zu dem Thema Architektur, Bau und Blue Horizon passt.

Die Lesbarkeit bei großer und kleiner Darstellung der Schrift ist jederzeit optimal gegeben.

Dunkel-Blau

#11172E

Weiß

#FFFFFF

Orange

#f89549

Grau

#eaeaea

Farben

Durch den Firmennamen ist die Primär-Farbe natürlich klar vorgegeben. Daher habe ich als Primär-Farbe ein dunkles Blau ausgewählt, welches einen hochwertigen Look erzeugt.

Als Sekundär-Farbe habe ich einen Orange Ton gewählt der überwiegend in Kombination mit der Primär-Farbe eingesetzt wird. Um so einen hohen Kontrast zu erzeugen.

Weiterhin werden viel Weißraum und Grauabstufungen genutzt.

Abstrakte Formen als Design-Element

Um ein markantes Design-Element zu bekommen, habe ich abstrakte Formen von Gebäuden abgeleitet. Woraus sich spannende optische Elemente ergeben, die eine Andeutung auf das Thema Architektur und Finanzen sind.

Damit hebt sich Blue Horizon optisch stark von ähnlichen Unternehmen ab, da diese meist nur mit Bildmaterial arbeiten.

„Durch ein markantes Design, hebt sich Blue Horizon visuell deutlich von der Konkurenz ab.“

04

Inhalte der Webseite selbst verwalten

CMS Webflow

Das verwendete CMS „Webflow“ bringt alles mit was es braucht. Texte und Bilder können über einen Editor schnell und einfach auf der Webseite geändert werden.

Neue Projekte leicht anlegen

Auf der Projektseite kann Blue Horizon unkompliziert neue Projekte einstellen. Dabei haben sie genau die Felder die sie brauchen. Somit ist die Projektdarstellung perfekt auf sie ausgerichtet.