s/n

Sascha Nabrotzky

Frontend

Entwicklung

Meine Projekte

Hier ist eine Auswahl meiner etwas umfangreicheren Website-Projekte, bei denen ich nicht nur durch die Nutzererfahrung optimieren konnte, sondern auch die Gestaltung der restlichen Werbemittel umsetzte.

  1. Mehr Spendengelder für guten Zweck

    Website Moorland-Festival

    Wireframe Moorland-Festival

    Technologien: UX | HTML5 | CSS3 | JavaScript | Visual Studio Code

    Zur Website

    Für das zweite Moorland-Festival sollten noch mehr Spendengelder für einem guten Zweck durch Besucher zusammenkommen.

    Das Design sollte für den kompletten Bevölkerungsdurchschnitt passen und gleichzeitig musste es rocken. Damit bei allen Touchpoints die Kommunikation und Werbung flüssig und eingängig funktioniert, musste eine responsive Website programmiert und ein flexibles Farbschema erstellt werden. Mit dem neuen Farbschema konnte man trendig auftreten, Kontrast und Aufmerksamkeit erzeugen bei gleichzeitiger Einhaltung der CI, auch das ursprüngliche Logo wurde dafür vektorisiert und die Buchstaben im Logo neu zugerichtet.

    Da das ursprüngliche Schwarz zu dominant gegenüber dem Gelb/Orange war, wurde es etwas zurückgenommen und neu angemischt und ein warmes Grau kam dazu, damit hatte man genug Farben zur Verfügung. Die Website brauchte kein CMS und »kostspielige« Module, da sie von mir für die Zeit gepflegt wurde, also habe ich den alten Account ohne Datenbank so übernommen und alles in HTML, CSS und JavaScript programmiert.

    Die Informationsarchitektur wurde so angelegt, dass man am Smartphone durch einfaches Scrollen alles nötige zum Fest erfährt, SEO wurde so lange verbessert und getestet bis die Ladegeschwindigkeit passte und man in den sozialen Medien die Seite optisch aufpoliert teilen kann.

    Da das Charity-Festival in allen Bereichen gut aufgestellt war und über zwei Tage ging, konnten die Spendengelder fast verdoppelt werden - 10.000 € kamen einem guten Zweck zugute.

    Logovergleich Moorland-Festival

    Links das vorherige Logo, rechts das neue mit neuer Zurichtung der Buchstaben und der nötigen Qualität für großformatige Drucke oder Folierungen.

    • • •

  2. Programmieren in React/Gatsby/JavaScript

    Neustart in Richtung Programmieren

    Technologien: UX | React JS | Gatsby JS | Visual Studio Code | Github | Affinity Designer

    Für meinen beruflichen Neustart habe ich mich komplett in Richtung Website-Programmierung fokussiert.

    Um mich voll und ganz auf das Programmieren als solches und auf das Erstellen von Websites zu konzentrieren, habe ich für mein neues Auftreten im Internet wie immer zuerst die Zielgruppe analysiert, die meine Kenntnisse am Besten gebrauchen kann und bei der ich mich am meisten wohlfühle - das sind etablierte Teams, bei denen ich mich als Programmierer weiterentwickeln kann.

    Meine alte Website wurde gelöscht und ein neuer Hoster gefunden, der primär ein Hub für ein Versionierungstool ist, das kam mir für einen professionellen Auftritt sehr gelegen, da ich mich mit diesem Schritt noch viel mehr nahtlos vernetzen konnte.

    Die neue Website wurde mit Gatsby.js welches auf React.js aufbaut in JavaScript und HTML programmiert. Da ich alles ganz reduziert halten wollte, habe ich mich gegen ein echtes Logo und viele Bilder entschieden, es sollten mehr das programmiertechnische Funktionelle im Vordergrund stehen, auf das es nun in Zukunft ankommt.

    Soziale Medien wie Instagram, Twitter oder Xing sprechen jetzt zusammen mit der neuen Website durch die komplette Überarbeitung eine informative und visuelle Sprache.

    • • •

  3. Neustart als Tagesmutter

    Website Kita Löwenzahn

    Wireframe Kita Löwenzahn

    Technologien: UX | Joomla! | HTML5 | CSS3 | Visual Studio Code | Affinity Designer

    Zur Website

    Eine gelernte Erzieherin wollte sich möglichst schnell in der Region mit ihrer neuen Selbständigkeit etablieren.

    Die anfängliche User-Research zeigte mir, dass man mit Informationen auf der gewünschten Website, nach denen Eltern häufig suchen, sich gut abheben kann. Die Nutzer sind Mütter zwischen 20 und 30 Jahren, die ihre Kinder in professionellen Händen wissen wollen, weitere Gespräche haben diese Erkenntnisse ebenfalls bestätigt. Die Berührungspunkte sind primär die Sozialen Medien, Google-Maps und ausliegende Flyer.

    Ein buntes, abgestimmtes Farbkonzept wurde erarbeitet, es sollten auch alle wichtigen Infos für die Eltern sofort sichtbar sein, Termine und Aktionen sollten selber aktualisiert werden können und für leichte Kontaktaufnahme kam ein Formular hinzu. Auch der Hinweis auf die staatl. Prüfung der Tagesmutter durfte nicht fehlen, denn das war ihr Alleinstellungsmerkmal gegenüber den anderen Tagesmüttern.

    Das Logo für die Kita wurde zuerst digital gezeichnet, da der »human Touch«, das Menschliche besser rüberkommen sollte, es wurde aber auch wieder verworfen - Pixelgrafiken sehen zwar authentischer aus, lassen sich aber nicht wie Vektorgrafiken skalieren. Der Hauptteil der Seite leicht angewinkelt und eingezogen, um ihm das Aussehen eines Blatt Papieres zu geben. Das Menü kam nach oben neben das Logo, das sind die meisten User gewohnt und kommen damit schneller im hektischen Alltag mit den Kindern klar.

    Das kinderfreundliche Gesamtbild, die optimierte Informationsarchitektur und gute SEO brachten der Seite bis heute beste Präsenz und Resonanz in der lokalen Region, bei suchenden Müttern und auch im Google-Ranking.

    Logovergleich Kita Löwenzahn

    Das ursprüngliche Logo (li.) wurde zugunsten des flexibleren Vektorlogos wieder verworfen.

    • • •

  4. Präsentation als Profi

    Meine alte Website

    Technologien: UX | HTML5 | CSS3 | JavaScript | Visual Studio Code

    Meine urspüngliche alte Website sollte mich selbst optimal als Fachkraft für Webdesign kombiniert mit Illustrationen präsentieren.

    Die User-Research betrieb ich hauptsächlich durch recherchieren im Internet und viel testen, um herauszufinden, welche Stärken zu welchen Kunden passen und welches Angebot man nebenberuflich anbieten sollte. Ob alles Wirkung zeigt, überwachte ich mit Hilfe von Online-Analysetools. Von Anfang an habe ich das Gesamtkonzept gedreht, verworfen und immer wieder neu infrage gestellt. Ich reduzierte die angebotenen Leistungen und fokussierte mich auf zwei Sachen. Das Logo sollte mit dem handschriftlichen Charakter das Illustrative darstellen, die erodierten Zahlen mein Interesse für ungewöhnliches Design.

    Die Seite wurde von mir zu Anfang in HTML, CSS und JQuery erstellt, nach einiger Zeit stellte ich die Codestuktur auf das modernere HTML5, CSS3 um und JQuery wurde reines JavaScript ersetzt - auch Animationen wurden dort an einigen Stellen eingebracht und der Parallax-Effekt durfte auch nicht fehlen, aber die fehlende SSL Verbindung meiner Website war immer mehr ein Problem beim Ranking.

    • • •