Мини–гайд, который подойдет Junior-дизайнерам, предпринимателям, людям, которые хотят разработать landing page самостоятельно, но не знают с чего начать
Статья не несет в себе технических рекомендаций, это не туториал, а скорее развёрнутая памятка по тому, как можно действовать при разработке посадочной страницы
Шаг первый. Исследование
Я описал базовые принципы. Нет единого списка пунктов, пробежавшись по которым можно считать, что исследование завершено. Иногда достаточно посмотреть сайты конкурентов с первой страницы выдачи, а бывает нужно на завод к клиенту съездить или десятки интервью провести. Однако, чем глубиннее будет проведено исследование, тем качественнее будет структура и контент сайта
- Просмотрите сайты на эту или схожую тематику (лайф-хак: не обязательно соотечественников) выпишите понравившееся в заметки, можно писать всё за что зацепился глаз: красивые иллюстрации, анимации, четко сформулированный заголовок, как спроектирован блок с преимуществами или выделены ключевые точки захвата. Я использую сайты конкурентов, чтобы лучше понять суть бизнеса клиента.
- Составить CJM. Вот несколько крутых примеров того как может выглядеть карта путешествия клиента:
CJM S7
Делимобиль
Ашан
Мне кажется, что для посадочной страницы это тумач, но мало ли вам так проще структурировать информацию для будущего сайта.
Шаг второй. Прототип и контент
Речь пойдет не о детально проработанном прототипе, а скорее некой блок-схеме проводя аналогию с книгой вы делаете оглавление. Не важно в какой программе это делать, можно использовать графические редакторы типа Figma или Sketch, а можно и на листке бумаги. Главное — это понять как будет выстроено повествование на лендинге.
После того как вы продумали структуру переходите к сбору контента:
Заголовки, описание товара или услуги, призывы к действию, отзывы клиентов, фотографии, иллюстрации, видео. Не торопитесь рисовать макеты, от контента зависит как минимум половина успеха сайта. Проработайте несколько вариантов лид-заголовков, формулировок на формы захвата, найдите или сделайте качественные фотографии, видео-ролики, которые планируете размещать на сайте.
Площадки на которых можно взять графику, иконки, фотографии:
Unsplash.com
Thenounproject.com
Storytale.io
Ls.graphics
Шаг три. Рисуем
Перед тем как начать рисовать, можно собрать визуальных референсов. Рекомендую использовать следующие площадки:
Land-book.com
Dribbble.com
Behance.net
Onepagelove.com
Siteinspire.com
Я рисую в Figma мне кажется, что лучшего инструмента на данный момент не найти. И так что предстоит сделать:
- Определитесь с конструктором в котором вы будете собирать свой сайт, чтобы ваш дизайн не пришлось на ходу тюнить у Tilda и Readymag различаются ширина контейнера. Моя сетка в Readymag — 12 колонок с отступом по 30 пикселей.
- Рисуем макет. Старайтесь делать аккуратно и по сетке, следите за отступами, не плодите безмерное количество шрифтов(если вы новичок используйте один шрифт и 2-3 начертания) тоже самое касается цветов выберете один акцентный цвет и несколько вспомогательных для набора текста, подложек, плашек. Избегайте 50 оттенков серого 😊
- Помните, что люди все реже использует ноутбуки и мониторы компьютера для того чтобы найти что-то в интернете. Нарисуйте отдельные версии для планшета и мобильных устройств.
- После того как макет нарисован попробуйте протестировать его на своих коллегах или знакомых. Не воспринимайте критику на личный счет, вы и ваш дизайн не единое целое. Вам важно выпустить продукт, который будет выполнять свою работу для этого его нужно грамотно настроить, а это требует определенного количества итераций.
Шаг четвёртый. Сборка
Несколько полезных советов при верстке сайта:
- Не забывайте оптимизировать графику, пользователи не будут ждать по 10-15 секунд пока у них загрузится одна картинка
- Не перебарщивайте с анимациями. Помните, что анимация нужна не только для красоты. В первую очередь это инструмент для расстановки акцентов, используйте его с умом.
- Подключайте метрику сразу, так у вас будет больше данных для анализа аудитории. Можно использовать Google Analytics или Яндекс.Метрика
- Помните про мобильные устройства. Если под рукой нет телефона или планшета, всегда можно воспользоваться расширением от Google чтобы проверить как выглядит сайт на разных типах устройств
Шаг пятый. Вечный процесс
Нельзя один раз сделать сайт и забыть об этом, его нужно постоянно оптимизировать, тестировать новые каналы трафика, анализировать поведение аудитории и улучшать.
P.S: Я перечислил свой обычный план действий при разработке посадочной страницы, безусловно нюансов намного больше, но я надеюсь что статья будет полезна новичкам или людям далеким от дизайна. Если хотите, чтобы я более подробно разобрал какую либо тему при создании лендинга — пишите в комментарии.
✌️
— Тёма Стрельцов
Пишите мне в телеграмм @artemystreltsov
Dribbble.com
Facebook.com