Beyond just attending, our student members were an integral part of this event, showcasing their talent and welcoming all who were eager to learn more about our team.
In this blog, we unravel the exciting highlights and invaluable takeaways from this unforgettable conference, shedding light on the dynamic fusion of learning, fun, and the promising opportunities that await us. Join us as we recount our adventures and discoveries at the Digital Labin conference, a celebration of growth and camaraderie in the world of digital innovation.
Frontend: Bringing one-page design to life by Locomotive
The masterclass began with a deep dive into the design, meticulously crafted by Locomotive and presented through Figma and a dedicated webpage. Understanding the design intricacies was crucial in order to efficiently implement the desired one-page layout. The developers adopted the BEM (Block Element Modifier) methodology for CSS, tailored to suit the scope of this project, ensuring a structured and organized approach.
To achieve a smooth scrolling effect, the Locomotive team introduced their smooth-scrolling library aptly named Locomotive-scroll. This library not only provided an exceptional scrolling experience for users but also empowered developers with tools to seamlessly animate the webpage elements. The ‘SWAG’ title and model image animations were initiated upon scrolling, showcasing the potential of this library.
Utilizing SCSS and CSS, developers employed creative animation techniques for the ‘SWAG’ title and SVG images. CSS ‘transform’ and ‘transform-origin’ properties were effectively used for image animations. A for loop in SCSS enabled per-letter animations for the SVG, bringing the design to life in an engaging and visually appealing manner.
Incorporating a scroll-based CSS animation in the poster section, the team introduced a product listing with a cascade effect. Leveraging Locomotive-scroll’s scroll progress attribute, precise control over animation triggers was achieved. Scroll progress, with defined offset parameters, facilitated the synchronization of animations with user scrolling, resulting in a dynamic and engaging product listing.
The developers stressed the importance of accessibility, emphasizing the need to ensure text visibility and color contrast for all users. In the editorial section, they showcased how variations in design can be efficiently handled while maintaining accessibility. Additionally, the class highlighted the use of native HTML elements for creating accessible and lightweight accordion components.
To conclude the masterclass, the developers crafted a gallery using the grid layout and applied a scroll-animation effect using GSAP (GreenSock Animation Platform). GSAP enabled sophisticated animations, achieving the desired visual impact. Furthermore, a WebGL-based 3D model of a hat was integrated, showcasing the versatility of technologies like THREE.js.
Sanja Božić, Frontend developer:
The masterclass by Locomotive provided valuable insights into creating a captivating one-page website, emphasizing efficient coding structures, smooth-scrolling, animation techniques, and accessibility considerations.
The combination of libraries like Locomotive-scroll, GSAP, and THREE.js, along with structured coding methodologies, demonstrated the power and versatility of modern front-end development.
By mastering these techniques and incorporating them into our projects, we can elevate the user experience and create compelling one-page websites that resonate with today’s dynamic digital landscape. Happy coding!
Masterclass: Speculative design – Solving the challenges of future societies
The Masterclass, which was facilitated by a talented UX Tech Lead designer, was amazing. It was a truly immersive and enlightening experience that delved into the realm of speculative design. What made it even more remarkable was the unconventional approach we took during the session.
Instead of relying on laptops and digital tools, we were encouraged to step back from the screens and engage in discussions while putting pen to paper. This analog approach to learning and design allowed us to tap into a different creative dimension and explore ideas more freely.
Adnan Hodžić, Junior software engineer:
The Masterclass not only provided valuable insights into the world of speculative design but also ignited my imagination. The way our host shared her passion for design and innovation was infectious, and it sparked a renewed enthusiasm in me for my own work in the field. I gained a deeper understanding of how designers draw inspiration from various sources and harness their creativity to envision future possibilities.
Moreover, the conference itself was an enriching experience. I had the opportunity to connect with a diverse group of individuals. Conversations with fellow attendees opened my mind to new perspectives and left me with a sense of camaraderie within the industry.
Overall, attending the Digital Labin conference and participating in the “Speculative Design” Masterclass was a memorable and transformative experience. It reminded me of the importance of continuous learning and exploration in my professional journey. I am profoundly grateful for the opportunity to have been a part of it.
I look forward to applying the knowledge and inspiration gained from this conference to my work and continuing to push the boundaries of creativity in my own designs.
The blend of cutting-edge web development techniques and innovative design concepts truly highlights the ever-evolving landscape of front-end development.
As developers, embracing such experiences and staying open to unconventional methods not only enriches our skill set but also fuels our passion for creating exceptional digital experiences. It’s a testament to the fact that there’s always room for creativity and new perspectives in our constantly evolving industry. This masterclass served as a reminder to think outside the box and approach our work with a fresh, open-minded outlook, ultimately enhancing our abilities to deliver unique and engaging projects for our clients.
