Портфолио Школа дизайнеров Кладовка Обо мне
Линкидин Фейсбук Инстаграм zoia.bilash@gmail.com

Коммерческие проекты

Зоя Билаш, дизайнер. Делаю сайты. Проектирую, дизайню, верстаю.

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

Digdata

Зона ответственности. Дизайн-решения коммуникативных задач компании:

— редизайн сайта B2b;
— дизайн маркетинговых материалов, презентаций;
— дизайн-код для оформления аналитических отчетов компании;
— дизайн мерча (худи, сумки в подарок сотрудникам на день рождения компании и на Новый год);
— дизайн веб-приложения для проведения отчетов, редизайн логотипа, дизайн рассылки, дизайн онлайн-анкет, оформление соц-сетей, оформление кастомных опросников, отчетов, презентаций, баннеров.

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

Скрыть описание кейса

Редизайн сайта B2b

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

Решение. Обновила дизайн сайта. Структурировала информацию о компании таким образом, чтоб посетитель сразу нашел ответы на ключевые вопросы: чем занимается компания, какие задачи решает. Провела первичный SEO-анализ, нашла популярные поисковые слова и фразы. Использовала их, чтоб рассказать больше об услугах компании. Сделала русскоязычную, англоязычную версию сайта. В результате посещаемость сайта возросла более чем в 1,5 раза, улучшились поведенческие факторы страницы.

Недостатки старого сайта компании: устаревший дизайн, сложный текст, нелогичные акценты.

— Первый экран используется неэффективно. Слайдер неинформативный, на маленькие точки-переключалки неудобно нажимать.
— Текст о компании сложно читать, слишком длинные строки и мелкий шрифт затрудняют чтение.
— Текст неинформативный, общие фразы не помогают посетителю узнать больше о компании и принять информированное решение о сотрудничестве.
— Текст на странице плохо структурирован: заголовки и подзаголовки не помогают понять содержание текста.
— Преимущества компании спрятаны за кнопками, это усложняет к ним доступ для посетителя.
— Логотипы партнеров не приведены к единому масштабу, спрятаны за стрелками.
— Акценты расставлены нелогично. Цветом выделены случайные разделы, не хватает акцентов у кнопок CTA.
— Стилистика, цветовые и шрифтовые решения выглядят устаревшими.
— Сайт доступен только на украинском языке.

Преимущества новой страницы: выразительный дизайн, структурированный текст, логичные акценты.

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

Сайт B2b компании

Слева — старый дизайн сайта. Стилистика устарела, сплошной текст сложно воспринимать, акценты случайные. Справа — новый сайт. Обновила дизайн, структурировала текст, расставила акценты.

Дизайн маркетинговых материалов

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

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

Презентация Омнибус Digdata
Презентация Онлайн-панель Digdata

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

Дизайн-код

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

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

Дизайн-код для оформления аналитических отчетов компании

В Гайдлайнах рассказываю, как оформлять текст, таблицы, как использовать модульную сетку и корпоративные цвета

Фрагмент лекции про редакторскую гигиену. Рассказываю, как избавиться от информационного шума и сделать слайд выразительнее

Дизайн мерча

Задача. Мы хотели подготовить для сотрудников компании что-нибудь необычное в подарок на день рождения компании.

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

В подарок на Новый год нарисовала векторные портреты сотрудников компании

Макет худи с напечатанным портретом

Коттеджный поселок «Лесной Пейзаж»

Задача. Создание лендинга для компании.

О компании. Компания занимается продажей земельных участков в Подмосковье. А также строительством домов и коттеджных поселков.

Описание кейса

Процесс. Структура сайта

Я отправила бриф, запросила у клиента информацию о компании. В процессе формирования структуры сайта, я собираю информацию по нескольким направлениям.

1. Информация о компании:

— сфера деятельности, какие товары и услуги предоставляет;
— этапы работы;
— кто целевая аудитория, как клиент представляет потребности ЦА;
— основные конкуренты;
— информация о распродажах и скидках;
— любая дополнительная информация о компании, которая кажется клиенту полезной в контексте разработки сайта.

Информация про сферу деятельности и услуги помогает лучше понять, чем живет клиент. Как устроен и функционирует его бизнес. Мне важно понимать, какие цели ставит клиент. Как сделать, чтоб реализация проекта способствовала их достижению.

Я смотрю сайты конкурентов, делаю первичный SEO анализ. То есть, изучаю показатели конкурентов на предмет посещаемости. Смотрю, какие механизмы привлечения и удержания аудитории они используют. Работаю с этой информацией по-разному, в зависимости от запроса. Иногда требуется, чтоб сайт отличался от сайтов конкурентов. Но бывает и так, что у конкурентов можно позаимствовать удачные решения.

Я формирую структуру сайта, руководствуясь информацией про потребности целевой аудитории. Основной фокус — какой должна быть структура, чтоб посетитель получил максимальную пользу?

2. Предпочтения по стилистике:

- прошу клиента обозначить предпочтения в виде общих эмоциональных характеристик (сайт должен быть строгий, элегантный, провокационный, изящный, гламурный, др.).

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

3. Технические вопросы, функционал сайта:

- нужна ли система управления сайтом (Wordpress, Joomla, Modx или подобная);
- как посетитель будет связываться с компанией, если заинтересован в ее услугах (форма обратной связи, заказ звонка, онлайн-чат);
- адаптация под мобильные устройства.

Функциональность влияет на ценообразование сайта. Каждая дополнительная функция увеличивает трудозатраты и требует времени на реализацию.

4. Дополнительные пожелания и комментарии:

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

Процесс. Прототипирование

Я сформировала информационную структуру сайта. Учитывала потребности ЦА, задачи и цели проекта, пожелания клиента. Прототип содержит разделы:

- преимущества жизни за городом

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

- развитая инфраструктура поселка
- коммуникации

Я вывела блоки про инфраструктуру и коммуникации в начало лендинга по нескольким причинам. Во-первых, клиент отметил в брифе, что развитая инфраструктура — одно из существенных преимуществ поселка в сравнении с конкурентами. Вторая причина — польза для аудитории. Наша аудитория — семейные пары с детьми, владельцы бизнеса, топ менеджеры с достатком выше среднего. Люди, которые привыкли много думать, анализировать, принимать решения, отвечать за других. Их не увлечешь красивыми картинками и пустыми обещаниями. Они заботятся прежде всего о комфорте и безопасности, своем и близких. Эту информацию я и показываю в первую очередь.

- панорама поселка

Изображения сильнее текста. Не использую фото поселка на сайте. Удачный ракурс может сильно приукрасить место и сформировать ложные ожидания. Показываю панораму, даю возможность посетителю оценить реальное положение дел на участке.

- рассрочка, ипотечный кредит, скидки

Классический способ повысить интерес потенциального покупателя и выделиться среди конкурентов.

- информация о компании
- этапы работы

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

- как доехать

Процесс. Дизайн

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

Addox General Trading FZE

Задача. Создание сайта-визитки для компании.

О компании. Компания занимается поставкой грузовиков и запчастей к грузовикам.

Описание кейса

Процесс. Структура сайта

Я предпочитаю включаться в проект на стадии идеи. Мне хочется хорошо понимать задачу. Выслушать клиента, изучить контекст, узнать аудиторию, посмотреть конкурентов. То есть, сперва собрать информацию, а после браться за дело.

Но на фрилансе бывает по-разному. Иногда подключаешься в проект, когда вся аналитическая работа уже позади. Проект на пол пути к воплощению, остается угадывать его траекторию и делать что можешь, чтоб принести максимум пользы. Так было и в этот раз. Клиент прислал материалы по проекту. Структура сайта была уже согласована, тексты для сайта были сгруппированы по страницам и разделам. Запрос клиента ко мне в рамках этого проекта: «разместить в красивом, оформленном виде информацию, представленную в файле».

Процесс. Дизайн

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

Таким образом, на входе у меня был текстовый документ, на выходе — сайт.

Фудмаркет

http://fmarket.spb.ru/

Задача. Создание сайта-визитки для компании.

О компании. Компания занимается производством и дистрибуцией продуктов питания. Производит снеки, поставляет кондитерскую, бакалейную и снековую продукцию.

Описание кейса

Процесс. Структура сайта

Клиент предоставил техническое задание. Документ содержал: текст о компании, перечень основных разделов, текстовое наполнение страниц.

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

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

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

Страница «О компании» — ключевая для новых клиентов. Я подготовила прототип, используя тексты из тз. Но уточнила, что поработаю над текстом о компании отдельно. Дальше в портфолио я опишу, как работала с текстом о компании.

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

Процесс. Дизайн

Мы обсудили предпочтения клиента. Посмотрели, что делают конкуренты. Обсудили, какие визуальные решения кажутся клиенту удачными. Что не нравится.

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

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

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

С незначительными правками согласовали трейтий вариант:

В работе над дальнейшими страницами использовала те же принципы — яркие визуальные блоки, структурированный текст, минимум информационного шума.

Процесс. Страница о компании

Страница «О компании» — главный смысловой узел сайта. Сюда идет заинтересованный в дальнейшем сотрудничестве посетитель, чтоб узнать больше.

Клиент предоставил текст о компании: «Компания «ФудМаркет» производит продукцию под торговой маркой «Partytime» с 2004 года. Наша цель обеспечить потребителя качественным вкусным продуктом. «ФудМаркет» занимает лидирующие позиции по продаже покорна и чипсов по СЗФО. Значительный опыт работы, делает сотрудничество с компанией «ФудМаркет» выгодным и надежным. Мы всегда готовы к сотрудничеству с новыми клиентами оптового, сетевого и розничного сегмента, и готовы предложить более 50 единиц продукции под нашей маркой. Для нашей продукции, мы используем только качественное сырье, соответствующее всем требованиям по качеству, предъявляемым для данного вида продукции»

Мы согласились, что текст «сырой». Для того, чтоб использовать его на сайте, над ним надо было еще поработать. В процессе редактуры:

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

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

В конце страницы оформляем контрастно призыв к сотрудничеству.

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

Процесс. Верстка

Писала на HTML + CSS, где необходимо использовала Javascript. Сайт динамически адаптируется под разрешения в диапазоне 1920 — 320 px:

На разрешении, где меню тесно (от 1200 px) реализовала меню-гамбургер:

Информация актуальна на апрель 2021 года