Как сделать вёрстку лендинга (Landing Page)? OpenOffice

Всем привет, меня зовут Даня и я помогаю развивать Теледирект! Сегодня мы поговорим о том, как сверстать макет продающего лендинга. В нашей команде верстку лендинга можно разделить на следующие этапы: 1 этап - анализ дизайн-макета и взаимодействие с дизайнером 2 этап - экспорт ресурсов из макета или его ‘нарезка’ 3 этап - Написание кода 4 этап - Получение технической и рекламной информации, тестирование 5 этап - Отправка на проверку дизайнерам и рекламному отделу Разберём подробнее каждый из этапов: После того, как дизайнеры подготовили макет, в работу вступаем мы, frontend-разработчики. Когда разработка продающих лендингов осуществляется на основе шаблона, всегда существуют некоторые части, которые могут быть переиспользованы от одного проекта к другому. При первичном анализе лендинга, мы отмечаем данные блоки и сразу же оцениваем время на выполнение проекта, чем больше таких частей, тем меньше времени уйдет на разработку. Также нам необходимо понять, какие основные шрифты и цвета используются в макете. Специальный скрипт для Adobe Photoshop позволяет увидеть список всех шрифтов, которые использованы в данном макете. (Показать). Следите, чтобы их было не больше 2-3, так как это напрямую влияет на скорость загрузки вашего лендинга. В нашей команде мы отдаем предпочтение desktop-first подходу в разработке, поскольку это определяется нашей целевой аудиторией. Большинство дизайн-макетов разрабатываются в начале для desktop разрешений, но в последствии может быть сделан адаптив. Нам, разработчикам, необходимо это учитывать и после получения макета обговорить с дизайнером, какой могла бы стать адаптивная версия лендинга. Также на этом этапе разработчик может обсудить с дизайнером моменты интерактива на лендинге, которые не всегда очевидны из статичного макета (анимации, состояния и тд) 2. Следующий этап - экспорт ресурсов из макета или его ‘нарезка’ После анализа макета frontend-разработчик приступает к экспорту ресурсов из макета. Вернемся к макету лендинга сковорода Мастер Жар. Данный макет содержит много растровой графики. И одной из задач разработчика является сохранить баланс между качеством используемой графики и скоростью загрузки сайта. Задний фон - это самая большая картинка на нашем сайте и скорее всего самая тяжелая. В предыдущем видео Настя рассказывала, насколько важен первый экран лендинга для клиента. И чтобы пользователь не ждал загрузки всего фона, а смог сразу же увидеть первый экран, разобьем эту картинку на 2 части, одна соответствует первому экрану, вторая остальной части лендинга. Далее мы используем инструмент нож, который позволяет выделить графические ресурсы без прозрачных слоев и за один раз экспортировать их из макета. При этом перед выделением каждого блока, мы скрываем текст и векторные изображения - иконки и тд. Сделано. Теперь необходимо экспортировать растровую графику с прозрачными слоями и векторные фигуры. И вот, мы экспортировали из макета все, что нам необходимо для дальнейшей работы. Переходим к следующему этапу. 3. Следующий этап - написание кода. Мы, как frontend-разработчики, уделяем большое внимание качеству написанного кода. За последние годы во frontendе появилось множество инструментов, упрощающих работу и позволяющих делать удивительные вещи. В нашей команде мы используем компонентный подход в разработке. В этом нам помогают такие библиотеки как React и Redux. В связке с препроцессором SASS и CSS модулями эти инструменты позволяют нам создавать независимые компоненты, которые мы можем переиспользовать на разных лендингах. Это значительно ускоряет разработку лендингов, имеющих определенный шаблон, но при этом большинство компонентов остаются гибкими их можно изменять при необходимости. В данном макете общими компонентами, являются такие блоки, как бегущая строка, анимированные баннеры слева и справа, блок распаковки и тд. Сборка проекта осуществляется с помощью Webpack. Он автоматизирует многие рутинные операции, такие как сжатие картинок, сборка спрайтов, сжатие и минификация кода. Мы используем SASS переменные для шрифтов и основных цветов лендинга, это позволяет нам быстрее писать код и с легкостью изменить один цвет на другой во всем проекте. Синтаксис JSX, встроенный в библиотеку React, позволяет нам совместить разметку с Javascript кодом, это удобно для создания интерактивных компонентов. Звоните и заказывайте прямо сейчас: 8(800)500-1444 Бесплатный звонок по России ---------------------------------------- Подписывайтесь на наш канал и ставьте лайки : ) ---------------------------------------- Официальный сайт ----------------------------------------