Unsere studentischen Mitglieder waren nicht nur anwesend, sondern auch ein wesentlicher Bestandteil dieser Veranstaltung, indem sie ihr Talent präsentierten und alle, die mehr über unser Team erfahren wollten, willkommen hießen.
In diesem Blog berichten wir über die spannenden Höhepunkte und wertvollen Erkenntnisse dieser unvergesslichen Konferenz und beleuchten die dynamische Mischung aus Lernen, Spaß und den vielversprechenden Möglichkeiten, die uns erwarten. Begleiten Sie uns, wenn wir von unseren Abenteuern und Entdeckungen auf der Digital Labin-Konferenz berichten, einer Feier des Wachstums und der Kameradschaft in der Welt der digitalen Innovation.
Frontend: Einseitiges Design zum Leben erwecken von Locomotive
Die Masterclass begann mit einem tiefen Eintauchen in das Design, das von Locomotive akribisch ausgearbeitet und mit Figma und einer speziellen Webseite präsentiert wurde. Die Feinheiten des Designs zu verstehen war entscheidend, um das gewünschte einseitige Layout effizient umzusetzen. Die Entwickler wendeten die BEM-Methode (Block Element Modifier) für CSS an, die auf den Umfang dieses Projekts zugeschnitten ist und einen strukturierten und organisierten Ansatz gewährleistet.
Um einen sanften Scroll-Effekt zu erzielen, stellte das Locomotive-Team seine Bibliothek für sanftes Scrollen mit dem treffenden Namen Locomotive-scroll vor. Diese Bibliothek bot nicht nur ein außergewöhnliches Scroll-Erlebnis für die Benutzer, sondern gab den Entwicklern auch Werkzeuge an die Hand, mit denen sie die Elemente der Webseite nahtlos animieren konnten. Die Animationen des SWAG-Titels und des Modellbildes wurden beim Scrollen gestartet, was das Potenzial dieser Bibliothek verdeutlicht.
Unter Verwendung von SCSS und CSS haben die Entwickler kreative Animationstechniken für den SWAG-Titel und die SVG-Bilder eingesetzt. Die CSS-Eigenschaften "transform" und "transform-origin" wurden effektiv für Bildanimationen eingesetzt. Eine for-Schleife in SCSS ermöglichte buchstabenweise Animationen für das SVG und erweckte das Design auf ansprechende Weise zum Leben.
Durch die Integration einer scrollbasierten CSS-Animation im Posterbereich führte das Team eine Produktauflistung mit einem Kaskadeneffekt ein. Durch den Einsatz des Locomotive-scroll-Attributs "Scroll Progress" wurde eine präzise Steuerung der Animationsauslöser erreicht. Der Scroll-Fortschritt mit definierten Offset-Parametern erleichterte die Synchronisierung der Animationen mit dem Scrollen des Benutzers und führte zu einer dynamischen und ansprechenden Produktliste.
Die Entwickler betonten die Bedeutung der Barrierefreiheit und wiesen darauf hin, dass die Sichtbarkeit von Text und der Farbkontrast für alle Nutzer gewährleistet sein müssen. Im redaktionellen Teil zeigten sie, wie Designvariationen effizient gehandhabt werden können, ohne die Zugänglichkeit zu beeinträchtigen. Außerdem wurde die Verwendung nativer HTML-Elemente zur Erstellung barrierefreier und leichtgewichtiger Akkordeon-Komponenten hervorgehoben.
Zum Abschluss der Masterclass erstellten die Entwickler eine Galerie mit dem Grid-Layout und wendeten einen Scroll-Animationseffekt mit GSAP (GreenSock Animation Platform) an. GSAP ermöglichte ausgefeilte Animationen, die die gewünschte visuelle Wirkung erzielten. Außerdem wurde ein WebGL-basiertes 3D-Modell eines Hutes integriert, das die Vielseitigkeit von Technologien wie THREE.js demonstriert.
Sanja Božić, Frontend-Entwicklerin:
Die Masterclass von Locomotive vermittelte wertvolle Einblicke in die Erstellung einer fesselnden One-Page-Website, wobei der Schwerpunkt auf effizienten Codierungsstrukturen, reibungslosem Scrollen, Animationstechniken und Überlegungen zur Barrierefreiheit lag.
Die Kombination von Bibliotheken wie Locomotive-scroll, GSAP und THREE.js mit strukturierten Codierungsmethoden demonstrierte die Leistungsfähigkeit und Vielseitigkeit der modernen Frontend-Entwicklung.
Wenn wir diese Techniken beherrschen und in unsere Projekte integrieren, können wir das Benutzererlebnis verbessern und überzeugende einseitige Websites erstellen, die in der dynamischen digitalen Landschaft von heute Anklang finden. Viel Spaß beim Codieren!
Meisterklasse: Spekulatives Design - Lösungen für die Herausforderungen der zukünftigen Gesellschaften
Die Masterclass, die von einem talentierten UX Tech Lead Designer geleitet wurde, war erstaunlich. Es war eine wirklich eindringliche und aufschlussreiche Erfahrung, die in den Bereich des spekulativen Designs eintauchte. Was sie noch bemerkenswerter machte, war der unkonventionelle Ansatz, den wir während der Sitzung verfolgten.
Anstatt uns auf Laptops und digitale Tools zu verlassen, wurden wir ermutigt, von den Bildschirmen zurückzutreten und uns an Diskussionen zu beteiligen, während wir den Stift zu Papier brachten. Diese analoge Herangehensweise an das Lernen und Gestalten ermöglichte es uns, eine andere kreative Dimension zu erschließen und Ideen freier zu erforschen.
Adnan Hodžić, Junior-Software-Ingenieur:
Die Masterclass bot nicht nur wertvolle Einblicke in die Welt des spekulativen Designs, sondern regte auch meine Fantasie an. Die Art und Weise, wie unsere Gastgeberin ihre Leidenschaft für Design und Innovation teilte, war ansteckend und entfachte in mir eine neue Begeisterung für meine eigene Arbeit in diesem Bereich. Ich habe ein tieferes Verständnis dafür gewonnen, wie Designer Inspiration aus verschiedenen Quellen schöpfen und ihre Kreativität nutzen, um sich zukünftige Möglichkeiten vorzustellen.
Außerdem war die Konferenz selbst eine bereichernde Erfahrung. Ich hatte die Gelegenheit, mit einer vielfältigen Gruppe von Menschen in Kontakt zu treten. Die Gespräche mit anderen Teilnehmern eröffneten mir neue Perspektiven und hinterließen bei mir ein Gefühl der Kameradschaft innerhalb der Branche.
Insgesamt war die Teilnahme an der Digital Labin-Konferenz und an der "Speculative Design"-Masterclass eine denkwürdige und transformative Erfahrung. Es hat mich daran erinnert, wie wichtig kontinuierliches Lernen und Erforschen auf meinem beruflichen Weg sind. Ich bin zutiefst dankbar für die Gelegenheit, daran teilhaben zu können.
Ich freue mich darauf, das Wissen und die Inspiration, die ich auf dieser Konferenz gewonnen habe, in meine Arbeit einfließen zu lassen und die Grenzen der Kreativität in meinen eigenen Entwürfen weiter zu erweitern.
Die Mischung aus hochmodernen Webentwicklungstechniken und innovativen Designkonzepten unterstreicht die sich ständig weiterentwickelnde Landschaft der Front-End-Entwicklung.
Als Entwickler bereichern solche Erfahrungen und die Offenheit für unkonventionelle Methoden nicht nur unsere Fähigkeiten, sondern schüren auch unsere Leidenschaft für die Schaffung außergewöhnlicher digitaler Erlebnisse. Es ist ein Beweis dafür, dass es in unserer sich ständig weiterentwickelnden Branche immer Raum für Kreativität und neue Perspektiven gibt. Diese Masterclass hat uns daran erinnert, über den Tellerrand hinauszuschauen und unsere Arbeit mit einer frischen, aufgeschlossenen Perspektive anzugehen, was letztendlich unsere Fähigkeiten verbessert, einzigartige und ansprechende Projekte für unsere Kunden zu liefern.
