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

Автор Andrei Golubev
Как сделать вёрстку лендинга (Landing Page)? OpenOffice teledirekt.ru

Всем привет.

Меня зовут. Андрей Я помогаю Tele2 кто развиваться в видео мы делали дизайн продающего лендинга. Но — это просто картинка для того чтобы из этой картинке получилось веб-страница нам необходимо задействовать следующее звено наши.

Продакшен группы фронтенд разработка высокий уровень фронтенд разработке наша гордость.

Современные технологии верстки и сборка на компонентах позволяет нам существенно сократить трудозатраты на верстку 1 лендинга сейчас мы — это делаем всего лишь 1 дня далее мы расскажем. Как организован процесс верстки и какие технологии мы используем открою все секреты и покажем как мы — это делаем больше информации о наших технологиях вы найдете на сайте.. Подписывайтесь и следите за новыми видео комментируйте. Ну конечно же оставайтесь с нами. Всем привет. Меня зовут. Данил и я помогаю развивать Tele2 сегодня мы поговорим о том как сверстать макет продающего лендинга. В нашей команде можно разделить на 5 основных этапов первый этап анализ макета и взаимодействие с дизайнером второй этап экспорт картинок из макета третий этап написание кода четвёртый этап получения технической и. Информации, а также тестирование пятый этап отправка на проверку дизайнером и рекламным отделом после того как дизайнеры подготовили макет работа вступаем мой братан разработчики когда разработка лендинга осуществляется с помощью шаблона когда существуют некоторые части которые мы можем переиспользовать от одного проекта к другому. При первичном анализе. Ваенга Мы отмечаем. Дана и сразу же оцениваем время на выполнение проекта чем больше таких частей тем меньше времени идёт на его разработку. Нам необходимо понять. Какие основные шрифты и цвета используются в макете специальность crack для Adobe Photoshop позволяет увидеть все шрифты которые используются в данном пакете чтобы было не больше двух-трех так как — это напрямую влияет на скорость загрузки вашего. В нашей команде модем предпочтения дискомфорт подхода в разработке макетов сначала разрабатывается для дисков разрешение, но впоследствии может быть сделан адаптив нам как разработчикам необходимо — это учитывать и после получения пакета обговорить с дизайнером возможность создания адаптивной версии. Ваенга также. На данном этапе разработчик может отсудить дизайнера моменты interactive на лонге такие как анимации состояния и так далее анализа фронтенд-разработчик переходят к препарату картинок из макета рассмотрим данный момент на примере лендинга мастер. Жар данный пакет содержит большое количество растровой графики и основная задача фронтенд разработчика. Это сохранить баланс между качеством исполнения картинки и скоростью загрузки сайта до на макете задний фон — это самая большая картинка и скорее всего самая тяжёлая всем известно насколько важен первый экран лендинга для клиента чтобы пользователь не ждал загрузки всего фона, а смог сразу же увидите. Разобьём данную картинку на 2 части 1 часть соответствует первому экрану 2 часть соответствует остальной части. Ваенга далее мы используем инструмент нож который позволяет графические ресурсы без прозрачных слоёв и за один раз экспортировать их из макета при этом. Перед выделением каждого блока мы скрываем текст и векторные изображения иконки и так далее после этого перенастроить нож выделяем картинку нажимаем контроль появляется диалоговое окно сохранить для WEB и сохраняем данный ресурс сделано теперь необходимо экспортировать расцелую с прозрачными слоями, а также векторные фигуры для этого мы выделяем данные свои и используем диалоговое окно экспортировать как здесь мы выбираем формат png после этого производится экспорт данных слов и вот мы экспортировали всё, что нам необходимо для дальнейшей работы переходим к следующему этапу разработчики уделяем большое внимание качеству написанного кода за последние годы во фронтенде появилось большое количество инструментов упрощающих работу и позволяющих делать удивительные вещи в нашей команде мы используем подход. В разработке в этом нам помогают такие библиотеке как реакт редакс связки с препроцессоры sass и scss моды эти инструменты позволяют нам создавать независимые компоненты которые мы можем перед пользовать на разных волнах. Это значительно ускоряет разработка лендингов имеющих определенный шаблон при этом большинство компонентов гибкими и их можно изменять по мере необходимости в данном пакете общими компонентами являются такие блоки как бегущая строка анимированные баннеры слева и справа блок распаковки сборка осуществляется с помощью. Вот так он автоматизировать рутинные операции такие как сжатия картинок сборка спрайтов и минификация кода мы используем современные для шрифтов и основных цветов лендинга. Это позволяет нам писать код с легкостью изменить один цвет на другой во всем проекте синтаксис jsx стройной библиотека react помогает нам совместить разметку джаваскрипт ходом — это удобно для создания интерактивных компонентов верстка лендинга поблочно до на макете мы берём общий компонент бегущей строки телевизионного затем переходим к верстке шапки состоит из обертки или в. Рапира контейнера который центрировать содержимое элемента в шапке в данном случае — это заголовок подзаголовок, а также кнопка заказа и телефон чтобы расположить элементы контейнера в ряд мы используем свойства Flexbox все свойства уже давно хорошо поддерживается браузерами и нет необходимости использовать устаревший inline-block или плод таким образом блок за блоком мы спускаемся всё ниже по макету как только встречаем общий компонент берём его из библиотеки стилизуем и движемся дальше на этом. Итак написание кода закончен переходим к следующему шагу после написания кода наступает этап получения технической и рекламной информации такой как цены и специальные предложения артикулы товаров микроразметка и эту информацию предоставляет отдела рекламы и аналитики ещё до разработки. Ваенга наверное сейчас её необходимо добавить.

0 комментариев
0

Читайте также