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

3 min readFeb 24, 2020

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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