Masha

Für das freie Markenbildungsprojekt habe ich mir zum Ziel gesetzt, eine Portfolioseite zu gestalten. Beispielhaft habe ich diese für Mariia Matasova erstellt. Mariia Matasova studiert an der HAW in Hamburg Kommunikationsdesign. Zuvor hat sie im Kiew ein Architekturstudium mit dem Master abgeschlossen.

Zielsetzung

Vor und während meines Studiums habe ich bereits Webseiten und Apps gestaltet, diese aber nie umgesetzt. Bei diesem Projekt stand für mich im Vordergrund eine responsive Webseite zu gestalten und auch technisch umzusetzen, sodass diese direkt online gehen kann.

Webflow

Webflow ist ein visuelles Gestaltungsprogramm das HTML, CSS und JavaScript generiert. Die Dokumention und Tutorials dazu sind sehr gut ausgearbeitet, sodass ich anfangs viel Zeit damit verbracht habe, mir das Programm anzueignen. Nachdem ich damit experimentiert habe, gestaltete ich zunächst das visuelle Erscheinungsbild.

Logo

Als Erstes arbeitete ich am Logo. Es ist eine einfache Wortmarke bestehen aus Vor- und Nachnamen. Ich wählte die nichtproportionale Schrift Inconsolata — ein Buchstabe in Normal- und der andere in Fett-Schrift. Zudem setzte ich das Logo in Großbuchstaben. Ein Kontrast sollte hergestellt werden - einerseits zu der grotesken Roboto Schrift und anderseits zu 
den organischen Illustrationen und analogen Fotografieren.

Farben

Die Webseite sollte farblich dezent gestaltet sein, um die Arbeiten in den Vordergrund zu stellen. Deswegen ist die Seite in Weiß, Schwarz und einem hellen Grau gehalten. 
Als Akzentfarbe und für die interaktiven Bedienflächen wählte ich ein stark gesättigtes Rot, das nicht zu hell und nicht zu dunkel ist. Es harmoniert sehr gut mit dem schwarzen Header und Footer, der Schrift sowie den großen weißen Hintergrundflächen.

Webseite

Ausgehend vom Logo, den Farben und Schriften entwarf ich die dazugehörige Webseite.

Insgesamt sollte die Webseite professionell und gut gestaltet wirken. Das Webseiten-Design sollte aber nicht zu viel Fokus auf sich ziehen, sondern dezent im Hintergrund bleiben. Arbeitsproben, Ausbildung und Fähigkeiten sollten hervorgehoben werden. Eine leichte Kontaktaufnahme sollte den Betrachter/Innen mittels Kontaktformular so einfach wie möglich gemacht werden.

Der Aufbau der Webseite unterteilt sich in folgende Bereiche:

• Navi

• Header

• About

• Portfolio

• Education

• Experience

• Skills

• Contact

• Footer

Fazit

Im Rückblick bin ich sehr zufrieden damit, ein reales Projekt bis zum Launch umgesetzt zu haben. Ich habe viel über Webentwicklung gelernt – etwa wie mühsam es sein kann, 
etwas zum funktionieren zu bringen, aber 
auch darüber, wie viel Freude es bereitet, 
wenn schließlich alles funktioniert.

Einige Dinge würde ich beim nächstem Mal wahrscheinlich anders angehen, um den Arbeitsprozess einfacher zu gestalten.

Ich würde z. B. nicht gleich versuchen, im Webflow Editor zu gestalten. Denn wer Produkte nur visuell gestaltet, kann leicht Kleinigkeiten vergessen, die am Ende sehr viel Zeit in Anspruch nehmen um sie anzupassen.

Bei dem Projekt habe ich gelernt, wie ich meine Zeit besser einplanen kann und für was ich zu Beginn mehr Zeit einplanen sollte, um am Ende Zeit zu sparen. Auch die Bedeutung von CSS Klassen für Webentwickler habe ich besser verstanden. Viele (graphisch vielleicht interessante) Ausnahmen bedeuten, dass ein Webentwickler schnell den Überblick verlieren kann.

Zwar ist es zeitaufwendig, eine Dokumentation schreiben zu müssen, jedoch erwies sich mir das dokumentieren und reflektieren als nützlicher als ich anfangs angenommen habe. Die Studenten der HAW in Hamburg sind nicht verpflichtet eine Dokumentation am Ende des Projektes zu schreiben, was das erstellen einer Portfolio-Seite deutlich erschwert. Man muss lange zurück liegende Projekte strukturieren und sich wieder hineindenken.