Webdesign für Bosca Bróg
An der Westküste Irlands, entlang des Wild Atlantic Way, liegt unser kleines Haus Bosca Bróg, direkt unterhalb des heiligen Berges Croagh Patrick. Seinen Namen verdankt das Haus seiner charakteristischen Form, die an einen Schuhkarton erinnert. Seit vielen Jahren ist es das zweite Zuhause unserer Familie.
Mehrmals im Jahr reisen wir nach Irland, um in Bosca gemütliche Ferien zu verbringen. Mit seiner idyllischen Aussicht auf das Meer und den heiligen Berg und seiner idealen Lage zu den schönsten Orten entlang des Wild Atlantic Way ist Bosca das perfekte Ferienhaus. Nicht nur unsere Familie, sondern auch Freunde und Verwandte haben hier schon erholsame Momente verbracht.
Meine Mutter bemerkte, dass sie in ihrem Freundes- und Bekanntenkreis immer mehr Anfragen erhielt, Bosca für eine oder zwei Wochen zu mieten. So entstand der Wunsch nach einer kleinen Website für Bosca. Nicht eine, die leicht zu finden ist, sondern eine, die sie den Leuten zeigen kann, wenn sie Bosca vorstellen möchte. Eine kleine Übersicht über das Haus, die Umgebung und genaue Information über die Lage.
Ich selbst fand die Idee grossartig und machte mich an die Umsetzung. Dabei konnte ich es nicht lassen nur ein Webdesign zu gestalten, sondern entwickelte ein komplettes Corporate Design für Bosca Bróg, inklusive Logo, Schriften und Farbpalette.
Bevor ich mit der eigentlichen Website beginnen kann, entwarf ich wie üblich ein Webdesign. Bisher habe ich dafür Adobe XD verwendet, da wir dieses Programm auch im Studium behandelt haben. Allerdings wird Figma in der Wirtschaft immer beliebter und setzt sich als Standard durch. Daher habe ich mich entschlossen, mir Figma selbst beizubringen und das Webdesign damit zu gestalten. Da es sich nur um ein Webdesign handelt, ist der Text noch nicht der eigentliche Text, sondern nur ein Platzhalter. Das Design dient dazu, das Look and Feel der Webseite zu zeigen.
Hier kannst du die Desktop Version und hier die Mobile Version des Webdesigns anschauen.
(eli)
Idee und Motivation
Die Inspiration zu diesem Projekt kam von meiner Mutter, die den Wunsch nach einer Website für unser Ferienhaus Bosca äusserte. Sie will Interessierten einen schnellen und übersichtlichen Einblick in die Einrichtung, die genaue Lage und die Umgebung des Hauses geben. Aufgrund meiner Affinität zu Design entschied ich mich, ein kleines Corporate Design mit Logo, Schriften und Farbpalette zu entwickeln, um einen klaren gestalterischen Leitfaden zu haben.
Webdesign in Figma
Bevor ich mit dem Webdesign begann, besprach ich mit meiner Mutter die genauen Anforderungen an die Website. Grundlegende Informationen über das Haus und der genaue Standort war für sie wichtig, dass es auf der Website ist, ansonsten liess sie mir aber kreative Freiheit. Nach der Planung der Struktur begann ich mit einer groben Skizze der Website.
Für die Umsetzung des Webdesigns entschied ich mich für Figma. Nun hatte ich noch keine Erfahrung mit Figma, da wir in der Schule noch mit XD gearbeitet haben. Da aber Figma sich als Wirtschaftsstandart etabliert, entschied ich mir es selbst anzueignen. Mit Hilfe von YouTube-Tutorials erlangte ich ein grundlegendes Verständnis von Figma und begann mit dem Design. Am Anfang hatte ich noch Mühe mich in Figma zurechtzufinden, doch nach ein zwei weiteren Videos und Übungen ging es besser und besser. Vor allem Auto-Layout zu Verstehen und Beherrschen war eine Herausforderung und ist es immer noch. Doch ich find es sehr cool, dass man Farben, Schriften und weitere Elemente die oft genutzt werden speichern und einfach darauf zugreifen kann.
Corporate Design
Für das Logo habe ich mich von dem grossen runden Stein vor dem Haus inspirieren lassen, auf dem «Bosca Bróg» steht. Die Mithilfe von Adobe Capture konnte ich eine ähnliche Schrift für das Logo finden. Für die Laufschrift wählte ich Inter, welche zwar generisch aber sehr ästhetisch und gut für eine Website ist.
Die Farben für das Corporate Design entnahm ich den Bildern des Hauses und der Einrichtung. Blau ist eine prägnante Farbe im Haus, wie auch Braun wegen dem Holzboden. Mir war auch wichtig grün in den Farben zu haben, da es die Farbe von Irland ist. Ein Moodboard half mir die Farben Moss, Shamrock, Seafoam und Sand aus den Bildern zu extrahieren. Diesen Farben wurden Namen gegeben, die zu Irland und der Umgebung passen.
Learnings
Trotz der anfänglichen Schwierigkeiten, mich in Figma zurechtzufinden, hatte ich viel Spass mit dem Programm. Es ähnelt XD ist aber anders. Ich denke, ich habe nur die Oberfläche des Programms berührt und werde es in zukünftigen Projekten verwenden, um mehr Sicherheit zu erlangen. Eine wichtige Lektion war die Umsetzung des Mobile-First-Ansatzes, der das Gestalten einfacher und angenehmer machte. Das habe ich aus früheren Projekten gelernt.