Наши студенты не только участвовали в мероприятии, но и были его неотъемлемой частью, демонстрируя свои таланты и приветствуя всех, кто хотел узнать больше о нашей команде.
В этом блоге мы расскажем о самых ярких моментах и бесценных впечатлениях от этой незабываемой конференции, проливая свет на динамичный сплав обучения, веселья и многообещающих возможностей, которые нас ожидают. Присоединяйтесь к нам, чтобы рассказать о наших приключениях и открытиях на конференции Digital Labin- празднике роста и товарищества в мире цифровых инноваций.
Frontend: Оживление одностраничного дизайна от Locomotive
Мастер-класс начался с глубокого погружения в дизайн, тщательно проработанный Locomotive и представленный в Figma и на специальной веб-странице. Понимание тонкостей дизайна было крайне важно для эффективной реализации желаемого одностраничного макета. Разработчики использовали методологию BEM (Block Element Modifier) для CSS, адаптированную к масштабам этого проекта и обеспечивающую структурированный и организованный подход.
Чтобы добиться эффекта плавной прокрутки, команда Locomotive представила свою библиотеку плавной прокрутки, получившую меткое название Locomotive-scroll. Эта библиотека не только обеспечила исключительный эффект прокрутки для пользователей, но и предоставила разработчикам инструменты для плавной анимации элементов веб-страницы. Анимация заголовка "SWAG" и изображения модели запускалась при прокрутке, демонстрируя потенциал этой библиотеки.
Используя SCSS и CSS, разработчики применили креативные техники анимации для заголовка "SWAG" и SVG-изображений. Свойства CSS 'transform' и 'transform-origin' были эффективно использованы для анимации изображений. Цикл for в SCSS обеспечил анимацию каждой буквы в SVG, оживив дизайн в увлекательной и визуально привлекательной манере.
Включив CSS-анимацию на основе прокрутки в раздел постеров, команда представила листинг товаров с каскадным эффектом. Использование атрибута прокрутки Locomotive-scroll позволило добиться точного контроля над запусками анимации. Прогресс прокрутки с заданными параметрами смещения облегчил синхронизацию анимации с прокруткой пользователя, в результате чего список товаров стал динамичным и привлекательным.
Разработчики подчеркнули важность доступности, обратив особое внимание на необходимость обеспечения видимости текста и цветового контраста для всех пользователей. В редакторском разделе они продемонстрировали, как можно эффективно работать с вариациями дизайна, сохраняя при этом доступность. Кроме того, в уроке рассказывалось об использовании собственных HTML-элементов для создания доступных и легких компонентов аккордеона.
В завершение мастер-класса разработчики создали галерею с использованием макета сетки и применили эффект прокрутки-анимации с помощью GSAP (GreenSock Animation Platform). GSAP позволил создать сложную анимацию и добиться желаемого визуального эффекта. Кроме того, была интегрирована 3D-модель шляпы на основе WebGL, демонстрирующая универсальность таких технологий, как THREE.js.
Саня Божич, Frontend-разработчик:
Мастер-класс от компании Locomotive позволил получить ценные знания о создании увлекательного одностраничного сайта с упором на эффективные структуры кодирования, плавную прокрутку, анимационные приемы и доступность.
Сочетание таких библиотек, как Locomotive-scroll, GSAP и THREE.js, а также методологии структурированного кодирования продемонстрировало мощь и универсальность современной фронтенд-разработки.
Освоив эти приемы и внедрив их в наши проекты, мы сможем повысить удобство работы и создать убедительные одностраничные сайты, которые найдут отклик в современном динамичном цифровом ландшафте. Счастливого кодинга!
Мастер-класс: Спекулятивный дизайн - решение проблем будущих обществ
Мастер-класс, который проводил талантливый дизайнер UX Tech Lead, был потрясающим. Это был по-настоящему захватывающий и познавательный опыт, погружающий в сферу умозрительного дизайна. Еще большее впечатление произвел нестандартный подход, который мы использовали во время занятия.
Вместо того чтобы полагаться на ноутбуки и цифровые инструменты, нам предложили отойти от экранов и принять участие в обсуждении, приложив ручку к бумаге. Такой аналоговый подход к обучению и дизайну позволил нам обратиться к другому творческому измерению и более свободно исследовать идеи.
Аднан Ходжич, младший инженер-программист:
Мастер-класс не только дал ценные знания о мире спекулятивного дизайна, но и зажег мое воображение. То, как наша ведущая делилась своей страстью к дизайну и инновациям, было заразительно, и это вызвало во мне новый энтузиазм в отношении моей собственной работы в этой области. Я глубже понял, как дизайнеры черпают вдохновение из различных источников и используют свой творческий потенциал для создания будущих возможностей.
Более того, сама конференция стала для меня обогащающим опытом. У меня была возможность пообщаться с самыми разными людьми. Беседы с коллегами открыли мне новые перспективы и оставили чувство товарищества в отрасли.
В целом, посещение конференции Digital Labin и участие в мастер-классе "Спекулятивный дизайн" стало для меня незабываемым и преобразующим опытом. Оно напомнило мне о важности непрерывного обучения и исследований на моем профессиональном пути. Я глубоко благодарен за возможность принять в нем участие.
Я с нетерпением жду возможности применить знания и вдохновение, полученные на этой конференции, в своей работе и продолжить расширять границы творчества в своих собственных проектах.
Сочетание передовых методов веб-разработки и инновационных концепций дизайна по-настоящему подчеркивает постоянно меняющийся ландшафт front-end разработки.
Как разработчики, принимая такой опыт и оставаясь открытыми для нетрадиционных методов, мы не только обогащаем свой набор навыков, но и разжигаем страсть к созданию исключительного цифрового опыта. Это подтверждает тот факт, что в нашей постоянно развивающейся индустрии всегда есть место для творчества и новых перспектив. Этот мастер-класс послужил напоминанием о необходимости мыслить нестандартно и подходить к работе со свежим, непредвзятым взглядом, что в конечном итоге повышает нашу способность создавать уникальные и увлекательные проекты для наших клиентов.
