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. Programmieren in React/Gatsby/JavaScript

    Neustart in Richtung Programmieren

    Meine Rolle: Frontend-Entwickler
    Technologien: React.js | Gatsby.js | GraphQL | VS Code | Github | Affinity Designer

    Für meine berufliche Weiterbildung in neuen Technologien entwarf und programmierte ich mithilfe diverser Tutorials meine neue Portfolioseite in React.js und Gatsby.js.

    Ich habe für meine neue Website zuerst die Zielgruppe analysiert, der ich meine Kenntnisse zeigen und anbieten wollte, das sind etablierte Teams im Bereich Frontend-Entwicklung mit Designern und Entwicklern. 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. Ich wollte das ganze Design sehr reduziert halten, um eine schnell ladende Seite zu bekommen, es sollte mehr das programmiertechnische Funktionelle im Vordergrund stehen.

    Die Daten für die einzelnen Projekte auf der Seite, werden mit GraphQL aus Markup-Dateien abgerufen und über eine ge"map"te Liste auf der Seite dargestellt, ursprünglich war Contenful als CMS im Einsatz, ich wollte mein Portfolio aber an einer Stelle weiter pflegen und aktuell halten.

    • • •

  2. React-App und Daten via GraphQL

    Abfragen von Daten für eine Liste

    Meine Rolle: Frontend-Entwickler
    Technologien: React.js | Gatsby.js | 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.

    • • •

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

    • • •

  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. Präsentation als Profi

    Meine alte Website

    Meine Rolle: Frontend-Entwickler
    Technologien: HTML5 | CSS3 | JavaScript | VS 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.

    • • •