Как текст помогает создавать дизайн на сайте, а дизайн — текст

Глупо задаваться вопросом, что важнее — копирайтинг или дизайн, потому что одно без другого не работает. Плохой текст не спрячется за стильным визуалом, а плохой дизайн не спасёт даже качественный копирайтинг. В статье рассказываем, почему важно заказывать сайт у студий или фрилансеров, которые действуют в командах или креативных парах.

Контент и визуал на сайте работают вместе. И точка. Если главного героя в этой истории нет, то не имеет значения, с чего начинать веб-разработку — с картинки или со слова? Давайте сравним 2 разных подхода, чтобы понять, как процесс влияет на результат.

Заказчик хочет новый сайт и обращается к дизайнеру за разработкой. Тот приступает к первому этапу — прототипированию. Это структура будущего сайта без дизайна. Прототип выглядит, как чёрно-белый сайт с рабочими кнопками, но последовательность и наполнение блоков отображены схематично. К примеру, в одном из блоков дизайнер размечает 3 колонки преимуществ с иконками, под каждую ставит подзаголовок и две строки текста. Выглядит аккуратно, заказчик согласовал. А прототип, как эстафета, перешёл в руки копирайтера.

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

В чём проблема? Дизайнер сконцентрировался на своих референсах и видении сайта, сделал чистенький симметричный дизайн, но не предусмотрел особенности будущего текста. Получилось красиво, но тема до конца не раскрыта.

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

Дизайнер приступил к концепции сайта, изучил проект и понял, что для презентации продукта нужна наглядная инструкция с иллюстрациями. Отрисованные скетчи размещает в блоке с текстом, который не предусматривает такого формата. Блок решает совсем другую задачу и акцентирует внимание пользователя на другом смысле.

В чём проблема? Копирайтер писал текст без учёта визуальной составляющей. Иллюстрации не подкрепляют текст, и продукт не получил нужной демонстрации. Сайт выглядит рыхло и сыро.

В Молнии разработка сайта когда-то шла по второму сценарию. На своём опыте мы пришли к тому, что копирайтеру и дизайнеру нужно действовать сообща. Сейчас в студии над проектом работает команда. В чём отличие? С первого брифа с заказчиком контент и визуал обсуждаются комплексно. После сбора всей нужной информации о проекте креативная пара из копирайтера и дизайнера брейнштормит и совместно находит решение задачи. В обсуждении рождается полноценная презентация продукта или услуги, а не просто текст в дизайне или дизайн в тексте.

Хорошая презентация на сайте раскрывает выгоды с двух сторон: с рациональной и эмоциональной. За рациональность отвечает текст, за эмоции — визуал. Копирайтер работает со смыслом и содержанием, а дизайнер — с формой. Каждый из них генерирует идеи и решает задачи, а не только пишет текст или рисует макет. Работа в команде помогает сделать содержание понятным и цепляющим для пользователя.

Это графическая подача данных или знаний. На сайте она помогает быстро и просто доносить сложную или объёмную информацию. Но если формат графический, то это совершенно не означает, что здесь не приложил свою руку копирайтер. На этапе изучения материала он нашёл важную, но тяжёлую для восприятия мысль, структурировал её и отправился к дизайнеру, чтобы вместе упаковать в блок.

На сайте для digital-агентства важно донести, какими маркетинговыми инструментами владеет команда. На брифе выяснилось, что они работают с огромным числом сервисов. Чтобы показать масштаб и обозначить направления деятельности, разработали наглядную схему.

Для компании, которая занимается согласованием перепланировок, важно показать опыт, что повысит лояльность потенциальных клиентов. У компании впечатляющие цифры по успешно завершённым проектам. С помощью карты отобразили, где и сколько счастливых клиентов спокойно живут с официальной перепланировкой в БТИ.

Это важные цифры или факты на сайте. Люди любят статистику, потому что это интересно и ёмко. Одно значение может сказать больше, чем абзац текста, но считывается намного быстрее и удобнее. К тому же красивые впечатляющие цифры вызывают доверие.

С помощью фактоидов рассказали на сайте швейной фабрики о масштабах и скорости производства. Вместо длинного рассказа — три ярких числа, которые говорят про складские возможности, сроки и объёмы.

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

Уникальные запоминающиеся иллюстрации рождаются на основе ярких смыслов из текста. Копирайтер проделывает большую работу по поиску ценностей бизнеса, а после обсуждает их с дизайнером. Если ценность вызывает больше эмоциональный отклик, чем рациональный, то её можно подкрепить иллюстрацией. Это позволяет усилить ассоциации и впечатление от продукта или услуги, привлечь внимание и добавить узнаваемость сайту.

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

Школа иностранных языков отличается от сервисных конкурентов домашней обстановкой и индивидуальным подходом к каждому ученику. На брейншторме родился интересный образ дома, в котором живут иностранные языки. Концепцию лендинга построили на внутреннем интерьере: мебель, светильники, двери и даже декор. Здесь визуал и текст дополняют друг друга и вместе передают уютную атмосферу школы.

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

Для курсов итальянского языка придумали интерактив в заголовках, с которым можно приступить к изучению прямо на сайте. Перевод незнакомых фраз можно узнать по клику в сноске. Дизайнер подобрал шрифт с засечками в начертании Italic, чтобы подчеркнуть утончённую культуру Италии.

Сайт для детского языкового лагеря не может быть серьёзным и формальным. Он должен передавать дружескую атмосферу беззаботных каникул. Чтобы создать лёгкость в подаче текста, лендинг оформили в стиле блокнота или личного дневника. Использовали рукописные шрифты для акцентных фрагментов и дополнили их минималистичными набросками, какие обычно дети рисуют на полях тетради.

Это визуал с небольшим текстовым комментарием. Демонстрация позволяет донести о продукте или услуге намного больше, чем отдельно копирайтинг или изображение. У демонстрации не бывает определённых форматов. Каждая создаётся под поставленную задачу, когда возникают трудности раскрыть какой-то сложный вопрос на сайте. Демонстрация напоминает инфографику, только здесь используются чаще всего фотографии, видео и иллюстрации, а не графические формы.

Компания разрабатывает устройства для беспроводной передачи данных. Это сложные понятия о технологии интернета вещей. Чтобы просто и наглядно донести на главном экране, чем компания занимается, разместили иллюстрацию с мини-городом. На ней показали, для каких объектов и организаций используется оборудование. По наведению всплывают подсказки, и пользователь узнаёт больше. Вместо огромного списка получился запоминающийся и привлекательный интерактив.

На сайте компании по ремонту и отделке важно показать, что работы выполняются качественно с соблюдением современных технологий. Если это раскрывать в тексте, то получаются общие слова, которые можно встретить у любого конкурента. А фотографии результатов работы не могут передать, насколько профессионально сдан объект. Мы визуализировали, что находится под слоем штукатурки, чтобы показать подход компании к отделке стен.

Текст и дизайн — это не цель. Это мощный инструмент для решения задач бизнеса: продать, повысить узнаваемость, укрепить имидж.

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

Пользу от Молнии можно получать каждый день:

Сайт: flashfamily.ru

Телеграм-канал: t. me/flash_family

Группа Вк: vk. com/flashfamily

YouTube-канал: www. youtube. com/c/Flashfamily