В ответ на мое резюме на должность “Junior-дизайнер” мне прислали задание: разработать концепцию и дизайн для landing page (промо-страницы) и баннер для сайта-ужастика www.advancedwriters.com:
Скажу честно, что я даже не знал, что такое “landing page” и какие принципы дизайна следует для нее использовать. Баннерами я тоже не занимаюсь.
После поиска информации я сделал такие выводы о правильном проектировании дизайна промо-страницы:
- четкий короткий и броский заголовок. Пользователь должен сразу понять, о чем идет речь;
- страница должна содержать четко выраженный и легко различимый призыв к действию;
- в дизайне промо-страницы может быть 1 или 2 призыва к действию. Эти элементы должны привлекать все внимание пользователя;
- простой дизайн. Только призывы к действию могут быть “особенными”. Все остальные элементы не должны отвлекать, а лишь способствовать направлению взгляда пользователя на ключевые элементы страницы;
- минимум информации. Не стоит нагружать пользователя чтением больших блоков текста. Лучше использовать изображения;
- в качестве подтверждения качества ваших услуг можно предоставить короткие отзывы о ваших продуктах или обзоры в авторитетных ресурсах.
Разработка дизайна промо-страницы
Поскольку оригинальный дизайн сайта очень запутанный и перегруженный, то я отошел немного от концепции сайта:
Вначале страницы мы спрашиваем у пользователя: “Нужна помощь профессиональных писателей?”. Если ответ “Да”, то пользователь продолжит просмотр. Если “Нет”, то мы сэкономим ему время, и он уйдет с миром.
Далее перечисляем кратко основные преимущества сервиса. Можно их сделать ссылками на подробное описание.
Ниже расположены кнопки: основная “Заказать сейчас” и вторичная “Бесплатный запрос”. Действие основной кнопки в дизайне сайта усиливает изображение девушки, указывающей на кнопку, а также стрелка на самой кнопке.
Поскольку вторичное действие “Бесплатный запрос” для нас менее желательно, то ее дизайн нужно делать намного менее заметным. Чтобы еще более снизить ее привлекательность, можно убрать элементы, которые придают ей вид кнопки: тень, градиент – а также уменьшить ее. Самый действенный вариант – просто ссылка.
Если вдруг пользователь задумает: “Стоит ли мне делать здесь заказ?”- то внизу он увидит надпись “Они уже используют наши услуги” и кнопку в виде стрелки, указывающей вниз. Кликнет по ней или прокрутит страницу и прочитает отзывы клиентов.
Как вы видите, я нарушил правило об 1 или 2 призывов к действию. У меня их 4. Я дублировал кнопки. Если пользователь прокрутит страницу вниз страницы, то он не увидит верхние кнопки. Можно было разместить внизу ссылку “Вернуться наверх”. Но я решил сэкономить действия ленивых пользователей и разместил копии кнопок внизу. Если ему все понравится, то не за чем заставлять его возвращаться назад, чтобы дать согласие.
Разработка баннера
Здесь все оказалось просто. Поскольку в дизайне страницы сайта я использовал сетку, то элементы, описывающие преимущества сервиса как раз были 300 пикселей по ширине. Я скопировал их в новый документ, изменил размеры и разсположение заголовка и кнопок. И в конце добавил анимацию для смена кадров:
По баннеру дам 1 рекомендацию. Если вы считаете, что для просмотра определенного кадра посетителю хватит столько времени (например, 2 секунды), то ставьте в 2-3 раза больше. Они еще рассматривают картинки на баннерах.
Если кому-то понадобятся исходные файлы, то обращайтесь.
