Я не дизайнер, но делаю свой сайт

Какие приёмы использовать, чтобы результат понравился?

🤷 Это статья для копирайтеров, редакторов, разработчиков и тех, кто иногда делает сайты-визитки или лендинги. Дизайнеры не найдут здесь ничего нового и интересного.

— Сделаю лендинг по-быстренькому!

Недавно я запустила рассылку «Текст в интерфейсе». И мне, конечно, понадобился лендинг, чтобы рассказать об этом.

Я решила делать лендинг в конструкторе сайтов. Была уверена, что справлюсь за вечер. (Текст уже есть, тут картинку добавлю, там — кнопку и готово).

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

Я поняла, что результат мне не нравится. И решила, что пора использовать дизайнерские приёмы (сразу бы так).

— Сначала займись референсами

Для начала я просмотрела лендинги с похожими продуктами.

Всё, что нравилось по шрифтам, иллюстрациям и композиции, копировала в Фигму. Получилось наглядненько.

Когда собрала референсы, поняла, какие иллюстрации и шрифты нужны, что делать с композицией. Жить стало чуть-чуть легче.

Лайфхак — шрифтовую пару я подобрала на Behance, а картинки купила на Creative Market. На это ушло несколько часов и 800 рублей.

— Вот бумага и ручка, порисуй

С самого начала у меня была фактура. После работы с референсами я поняла, что хочу по стилю. Теперь нужно было разобраться со структурой.

Я принялась за варфреймы — визуальный скелет лендинга. На нём схематично отметила элементы и как они располагаются.

Я рисовала на бумаге. Это помогло сконцентрироваться на смысле, а не отступах и пикселях.

На первой картинке — фактура. На второй — как её расположить на лендинге.

Пока рисовала варфреймы поняла, где верстать в одну колонку, а где — в две. И ещё отказалась от всяких украшательств. На них нужно время и продвинутые знания по модульным сеткам. А у меня не было ни того ни другого.

— Делай и сравнивай

Теперь-то я знала, что хочу и как это будет выглядеть. Но идти в конструктор сайтов было рано. Сначала нужно задизайнить лендинг в Фигме.

А. Купер в книге «Психбольница в руках пациентов» пишет, что нужно пять-шесть итераций, чтобы допилить дизайн. Мне понадобилось 10.

Два последних варианта «Что внутри».

К каждому блоку возвращалась по нескольку раз. Где-то нужно было поменять картинку, где-то подправить акценты или убрать лишнее.

Все итерации сохраняла на бордах в Фигме и потом выбирала самые крутые.

— Ну, теперь-то всё?

Да! Могу показать, что получилось.

— Стоп! Без морали никуда

Сначала референсы, варфреймы и много итераций в Фигме. А потом уже вёрстка. А не наоборот.

_________________________________________________________________

→ Как и где следить за мной

Рассылка о тексте в интерфейсе — как проектировать, тестировать, писать для приложений, ботов и сайтов.

Редач.Подкаст — первый подкаст для UX-писателей на русском;

Телеграм — о тексте в интерфейсе;

Нашли опечатку? Отправьте скрин в Телеграм: @redachredach