Das erste Mal in meinem Leben UI Design

Anna Fokina
CosARTig’s Blog
Published in
3 min readApr 12, 2017

Nach einer kurzen Verschnaufpause nach der Abgabe meiner Projektarbeit habe ich mich heute mit meinem neu erlangten Wissen an ein Projekt gemacht, das schon länger in meiner Schublade liegt.

Ich habe eine komplette Website an einem Tag gebaut. Ich würde sagen, sie ist zu 75% fertig. Dafür, dass ich eigentlich kein UI Designer bin, bin ich eigentlich recht zufrieden.

Es geht um die Website für den gemeinnützigen Verein BuKi e.V. Wir arbeiten schon seit Herbst 2016 an diesem Projekt und irgendwie ging es einfach nicht so richtig voran.

Bei meiner Projektarbeit kam mir die Erkenntnis, warum: Wir wissen ja gar nicht, wie und was wir kommunizieren wollen! Genauer gesagt: Wir wissen es irgendwie schon, aber haben es nicht so richtig artikuliert und festgehalten.

Damit habe ich mich heute den ganzen Tag beschäftigt und das ist dabei raus gekommen.

Brand Message

Wie wollen wir eigentlich sein? Um ein Bild davon zu bekommen, habe ich eine schnelle Brand Message gemacht — ähnlich wie in meiner Projektarbeit.

Wie sind wir und wie sind wir nicht?
Wie sind wir und wie sind wir nicht?
Brand message architecture für BuKi e.V.
Brand message für BuKi e.V.

Whyology

Danach habe ich mir Gedanken darüber gemacht, warum wir das Ganze eigentlich machen: Also woran wir glauben und was unsere Vision ist.

Woran wir glauben, Mission und Vision für BuKi e.V.
Woran wir glauben, Mission und Vision für BuKi e.V.

Warum und wie man sowas macht, beschreibt Dale Partridge in seinem Blogpost „How to build an emotional brand that stands out.“ Absolute Leseempfehlung!

Informationsarchitektur

Die Informationsarchitektur stand größtenteils schon fest. Um sie zu verfeinern habe ich trotzdem nochmal den Content sortiert und die Ziele je Seite aufgeschrieben.

Bestehender Content neu sortiert
Bestehender Content neu sortiert
Wireframes
Scribble Wireframes
Ziele je Seite
Ziele je Seite

Design

Danach habe ich mir überlegt, wie wir visuell kommunizieren müssen, um die brand message rüber zu bringen. Das war für mich der schwierigste Teil, weil ich das bisher noch nicht so oft gemacht hab.

Ich habe auf Dribbble recherchiert und geschaut, was mich anspricht und welche Elemente auch für uns Sinn machen würden. Dann habe ich die Farben festgelegt und ein sehr einfaches Logo gebaut.

Recherche und Logo
Recherche und Logo

Auf dieser Basis habe ich nach dem Atomic Design Ansatz von Brad Frost ein sehr einfaches Design Pattern erstellt und die Website damit aufgebaut.

Wireframes der neue Website von BuKi e.V.
Wireframes der neue Website von BuKi e.V.

Fazit

Es war ein sehr langer, produktiver und erkenntnisreicher Tag! Wir hatten hier und da schon Teile des Konzepts und des Designs rumliegen und heute habe ich sie neu zusammengesetzt. Ich bin gespannt, wie sich das weiter entwickelt und wie die Website am Ende aussieht.

Entwurf Website für BuKi e.V.

Hier sind die Werke von meiner Recherche:

--

--

Anna Fokina
CosARTig’s Blog

Freelance UX designer and karaoke singer from Berlin.