Верстка лендингов

Важным этапом в разработке лендинга является верстка дизайна — превращение красивой картинки в действующий сайт. От работы верстальщика зависит быстрота загрузки страницы, ее корректное отображение для разных браузеров и устройств. По окончанию верстки можно увидеть, как лендинг выглядит на разных расширениях экрана со всеми активными элементами.

Основные этапы работы верстальщика:

1.На начальном этапе верстальщику нужно будет разобрать PSD макет сайта или воплотить в жизнь на коленке нарисованную схему. В результате разбора макета у верстальщика появляется папка images (или как-то по-другому, или несколько папок), в которой содержатся все элементы из макета. Теперь можно приступать к самой верстке.

Работа верстальщика усложняется, если нет конкретного макета. Тогда цветовой оформление, иконки, фото (при необходимости) нужно будет искать в сети.

2.Этап  верстки сайта — непосредственно написание кода разметки и прописывание стилей для элементов сайта. Здесь верстальщику не нужно забывать об адаптивности и кроссбраузерности (отображении во всех браузерах) сайта.

3.Верстальщику необходимо быть знакомым с JavaScript библиотеками (jQuery, GSAP и пр.). С их помощью задается различное поведение для элементов сайта.

4.Проверка. Этап проверки проделанной работы немало важен, поэтому для него тоже необходимо закладывать время при подписании ТЗ проекта. Нет никакой гарантии, что все будет четко написано сразу и будет при этом еще отлично работать.

 

Элементы (блоки), встречающиеся в лендингах.

I.Меню. Этот блок является не правилом, а скорее иногда встречающимся элементом. Как правило меню на лендинге плавающее (движется при скроллинге) и, нажимая на пункт такого меню страница перемещается вниз автоматически до нужного пункта. Понятие лендинга не предусматривает большое количество страниц сайта, часто это только одна страница.

Эффекты меню: фиксация, dropdown, прокрутка вниз при нажатии на пункт меню.

II.Форма. Лендинг содержит в себе хотя бы одну форму (пока не могу придумать вариант ее отсутствия). Эта форма содержит поле для ввода информации пользователем и кнопку для отправки этой информации. Полей, конечно, может быть больше, но рекомендуется их не более 2-х, чтобы не отбить у пользователя желание ее заполнить и отправить. Как правило, в форме заполняют email.

Эффекты формы: форма в модальном окне (закрывается при нажатии мышью на крестик или на любую часть экрана вне самого модального окна); всплывающее окно при отправке формы (с благодарностью  за отправку данных или с сообщением об успешной их отправке); в форме можно предусмотреть подсветку полей при неправильном их заполнении.

III.Заголовки, блоки с текстом. Это смысловая нагрузка лендинга. Это то, что работает эффективней, чем любые другие составляющие лендинга. Конечно, не может дизайн быть достаточно эффективным, если нет текста и заголовков и наоборот. Но текст в лендинге из 100% отрабатывает все 80%.

Эффекты заголовков и текстовых блоков: эффект появления, подсветки и любая другая фантазия человека.

IV.Изображения. Фотографии тоже немаловажная составляющая. Они должны быть отличного качества, порой оригинального содержания.

Эффекты изображений: параллакс* (может быть при скроллинге, а может работать при движении мышкой по экрану), слайдеры, галереи.

V.Кнопки.

Эффекты кнопок: эффект выпуклости кнопки (правда, сейчас в моде плоский дизайн, но бывает…), подсветки, модальные окна при нажатии.

 

*В веб-дизайне параллакс-эффект или параллакс-скроллинг – это специальная техника, когда фоновое изображение в перспективе двигается медленнее, чем элементы переднего плана. Эта технология применяется все чаще, так как выглядит действительно эффектно и круто.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *