s/n

Sascha Nabrotzky

Frontend

Entwicklung

Meine Projekte

Hier ist eine Auswahl meiner umfangreicheren Website-Projekte, bei denen ich alles von Grund auf planen und erstellen und auch die Nutzererfahrung optimieren konnte, häufig gestaltete ich ebenfalls die restlichen Werbemittel.

  1. Portfolio-Seite für eine Tagesmutter

    Neustart in Richtung Programmieren

    Meine Rolle: Frontend-Entwickler
    Technologien: ReactJS | GraphQL | VS Code | Github

    Zur Website

    Für diese neue Portfolio-Seite brauchte ich kein herkömmliches CMS mehr und konnte alles in einem modernen Techstack programmieren

    Für eine Tagesmutter habe ich eine App programmiert, die bei Bedarf Daten von Socialmedia-Accounts abgreifen und auf die Seite laden kann. Es ist geplant, die häufig zu aktualisierenden Termine, mithilfe von GraphQL automatisch nachzuladen. Die einzelnen „Seiten“ werden über das React-Routing gesteuert.

    Die Seite befindet sich derzeit noch in der Entwicklung.

    • • •

  2. Eigene Portfolio-Seite als React-App

    Neustart in Richtung Programmieren

    Meine Rolle: Frontend-Entwickler
    Technologien: ReactJS | GatsbyJS | GraphQL | VS Code | Github

    Für meine berufliche Weiterbildung in neuen Technologien entwarf und programmierte ich meine neue Portfolioseite in ReactJS und GatsbyJS.

    Als Hoster und Versionierungssystem habe ich GitHub ausgewählt, das kam mir für einen professionellen Auftritt sehr gelegen, da ich mich mit diesem Schritt noch leichter mit den passenden Berufsgruppen vernetzen konnte. Die Texte und Bilder für die Projektseite, hole ich mithilfe von GraphQL aus Markup-Dateien und werden dann als Liste auf die Seite geladen. Ich wollte das ganze Design sehr reduziert halten, um eine schnell ladende Seite zu bekommen, es sollte mehr das programmatisch Funktionelle im Vordergrund stehen.

    • • •

  3. React-App und Daten via GraphQL

    Abfragen von Daten für eine Liste

    Meine Rolle: Frontend-Entwickler
    Technologien: ReactJS | GatsbyJS | GraphQL | VS Code | Github

    Zur Website

    Um zukünftige Projekte vollumfänglich auf neuesten technologischen Stand zu bringen, hatte ich eine React-App erstellt, die Daten einer anderen Seite abfragt und als Liste darstellt.

    Um endlich unabhängig von den bekannten Contentmanagement-Systemen, wie z. B. Wordpress und Joomla! zu sein, hatte ich während einer Aufgabe neben der reinen Gestaltung mit HTML5 und SCSS, gleichzeitig eine Web-App mit React gebaut. Zudem wollte ich mehrere Artikel via GraphQL von der Website Contentful abfragen, die dann als Liste in die Seite laufen.

    Der Vorteil dieser Vorgehensweise ist der modulare Aufbau einer Präsenz im Internet, denn dadurch kann man Inhalt und Darstellung technologisch trennen und besser austauschen.

    • • •

  4. Neustart als Tagesmutter

    Website Kita Löwenzahn

    Wireframe Kita Löwenzahn

    Meine Rolle: Frontend-Entwickler | UX-Designer | Mediengestalter
    Technologien: Joomla! | JavaScript | PHP | HTML5 | CSS3 | VS Code | Affinity Designer

    Zur Website

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

    Nach der User-Research habe ich ein buntes aber abgestimmtes Farbkonzept 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 wurde ein Formular eingeplant.

    Das Logo für die Kita wurde zuerst digital gezeichnet, da der »human Touch«, das Menschliche besser rüberkommen sollte und später vektorisiert.

    Für diese Seite habe ich ein sehr schlankes Template für Joomla! entwickelt. Dafür wurden in ein HTML5-Gerüst u.a. mehrere Modulpositionen per PHP gesetzt und danach via CSS3 responsiv gestaltet.

    Das Menü kam für die Desktopversion nach oben neben das Logo. Mithilfe von JavaScript programmierte ich ein komplett neues mobiles Menü, das Script klont alle Links, gestaltet Sie per CSS und setzt sie an den Fuß des Smartphones in die Nähe des Daumens wieder ein.

    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.

    • • •

  5. Mehr Spendengelder für guten Zweck

    Website Moorland-Festival

    Wireframe Moorland-Festival

    Meine Rolle: Frontend-Entwickler | UX-Designer | Mediengestalter
    Technologien: HTML5 | CSS3 | JavaScript | VS Code

    Zur Website

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

    Die User-Research zeigte, dass bei allen Touchpoints die Kommunikation und Werbung flüssig und eingängig funktionieren muss, also habe ich eine responsive Website ohne CMS programmiert und ein flexibles Farbschema erstellt. Mit einem neuen Farbschema konnte man trendig auftreten, Kontrast und Aufmerksamkeit erzeugen bei gleichzeitiger Einhaltung der CI, auch das ursprüngliche Logo wurde dafür vektorisiert.

    Die Website brauchte kein CMS im Backend oder »kostspielige« Module, da sie von mir für die Zeit gepflegt wurde, so konnten weitere Kosten gespart werden. Ich übernahm also den alten Account ohne Datenbank und setzte alles in HTML5, CSS3 und JavaScript um.

    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 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.

    • • •

  6. Web-App für "KiTaLa e.V."

    Vereinsseite der Tagesmütter

    Meine Rolle: Frontend-Entwickler
    Technologien: React | SCSS | HTML5

    Zur Website

    In Ladbergen haben die Tagesmütter einen Verein gegründet, ich erstellte die Website mit React, welche in Zukunft von mir weiter gepflegt und der Quellcode immer aktuell gehalten wird.

    Nach einer kurzen online User-Research, wie und was der Verein auf der Website idealerweise kommunizieren sollte, plante ich mithilfe diverser Skizzen die einzelnen Bereiche der Seite. Ich sortierte nach dynamischen und statischen React-Komponenten und konnte somit recht schnell die grundsätzliche Struktur der Seite für das Routing planen.

    Da die Zielgruppe hauptsächlich junge und technikaffine Mütter sind, erstellte und optimierte ich zuerst die mobile Ansicht, das Menü brachte ich deswegen auch nach unten in Daumennähe, Texte kommen zum Aufklicken in Accordions.

    • • •