Кейс: сайт для специалиста в создании бренда одежды
Привет! Меня зовут Елизавета и сегодня я расскажу как создавала сайт для Наталии — специалиста в области создания брендов одежды.
Заказчик и задача:
Ко мне обратилась Наталия с задачей разработать сайт-визитку для ее флагманского продукта — оказание услуг швейного и конструкторского дела: от консультации по построению бренда одежды до полного ведения.
Почему сейчас:
В сфере Наталия уже более 18 лет, за это время накопила огромный багаж знаний и умений и хочет помогать большему количеству людей в создании собственного бренда.
Для этого необходимо грамотно себя упаковать как специалиста, собрать последние кейсы и структурно их представить. Чтобы привлекать новых клиентов на свои услуги. А также заявить о себе в интернете.
Для этого Наталия решила выбрать сайт как инструмент, который закрывает все ее пункты для реализации ее задачи.
Что было сделано:
- Изучила сферу деятельности, ЦА и конкурентов
- Разработала структуру сайта и структурировала тексты
- Сформулировала две дизайн концепции
- Выполнила дизайн сайта
- Сделала адаптивную верстку на Тильде
***
Сбор информации и погружение в нишу
На первом созвоне мы составили предварительную структура сайта, но нужно было подтвердить выдвинутые гипотезы и скорректировать их, разобравшись в нише. Для этого был проведен анализ конкурентов и сферы швейного и конструкторского аутсорсинга.
Что выявили на данном этапе:
- Окончательно определились со структурой сайта: добавили блок вопрос-ответ и прописали вопросы к нему, на основе анализа потребностей аудитории.
- Поменяли блоки местами, чтобы вывести вверх сайта более важную информацию для пользователей — услуги и кейсы. Эти блоки закрывают вопрос о нужной им услуге (и есть ли дальше смысл листать сайт) и опыте специалиста (работал ли с той категорией вещей, которые хочет создать человек).
- Поняла как нужно расписывать кейсы. Отобрали последние кейсы из работы Наталии, чтобы на сайте охватить большинство категорий, которые есть на рынке и с которыми она работает. Тем самым показали широки спектр компетенций, которые имеет Наталия по созданию брендов.
Структурирование текста и поиск фишечек
При написании текста для сайта решили, что я разработаю структура сайта с пояснениями по каждому блоку, а Наталия ее заполнит. Так как никто не знает свое дело лучше, чем она сама)
На основе структуры сайта, разработала тестовый прототип — таблица с разделением сайта на блоки и подсказками где у нас что будет и оставленными пустыми строками для заполнения.
Выглядело это так:
Также, я записала видео с пояснениями, чтобы закрыть три момента:
- Точно передать, что нужно написать в каждом блоке. Чтобы не было расхождения, что нужно мне и что поняла заказчица
- Обосновать для чего мы здесь это пишем и почему это важно
- Удостовериться, что все пункты будут заполнены и ни одно поле не выпадет из фокуса
Практика показывает, что видео объяснение лучше работает, чем просто отправить таблицу/дизайн/что угодно на заполнение. Для заказчицы полное понимание, что нужно, чтоб не гадать делать тут это или не делать. А для меня это меньше правок. Все в плюсе!
Из интересного:
Выяснилось, что у Наталии есть опыт работы с клиентами из-за рубежа, а именно из New York. В работу входило изготовление спортивных костюмов под ключ: от создания лекал и подбора материалов до пошива готового изделия.
Практически все этапы были выполнены и согласованы удаленно. В процессе в New York были отправлены образцы тканей для утверждения. Все остальное было сделано онлайн.
Такой необычный кейс не хотелось прятать в маленькой плашке в блоке "Отзывы", поэтому для него было предложено разработать индивидуальный блок, чтобы более детально рассказать о работе и тем самым подсветить компетентность и гибкость в работе Наталии.
Далее я посмотрела тексты и отредактировала:
- Сделала фразы более лаконичными (так как на сайтах много информации это плохо и никто избыток читать не будет)
- Убрала лишнее, без потери ключевой мысли (опять же, чтобы было меньше текста)
- Отструктурировала тексты по кейсам, чтобы выделить суть и разграничить текст
Проработка дизайн концепции
Далее я подобрала примеры сайтов, которые мы можем взять за основу по цветам/шрифтам/композиции + записала видео с пояснениями
Какие концепции были предложены:
- Строгость и четкость
Стиль работает на контрастных цветах и четких формах. Что придает сайту атмосферу четкой и системной работы, строгости и формальности.
- Мягкость и гибкость
Этот стиль работает в более нежных цветах и на мягких формах. Что придает сайту атмосферу заботы, внимания и доверия.
Заказчица выбрала вторую концепцию, так как она ей была ближе по духу. В своей работе она была более мягкой и заботливой, нежели строгой и формальной.
Разработка прототипа
Прототип — это схематичное изображение сайта, где отражены последовательность блоков и объем текста. Ни дизайна, ни цветов/шрифтов/картинок тут нет. Разобрали тут структуру, пришли к пониманию и утвердили как примерно будет выглядеть сайт.
Делаем дизайн сайта
Цвета:
Цветовую гамму решили взять теплую и спокойную. Чтобы сконцентрировать внимание на тексте и фото.
Шрифты:
Мною был предложен вариант сочетания простого гротескного шрифта с вставками ажурного шрифта, но только отдельных букв. Чтобы сделать акцентные заголовки выразительнее без потери читабельности. Также подобрала несколько интересных шрифтов, которые также будут подыгрывать стилистике сайта.
Все варианты были хороши, но решили остановиться на первом.
Детали:
- Добавила в дизайн скетчи а ля рисунки моделей одежды, как отсылку к деятельности Наталии — создании одежды
- Для блока “Кейсы” выбрала свободную сетку с большим количеством воздуха. тем самым привлекла внимание к данному блоку
- Подобрала фото с бесплатных стоков в тематику сайта там, где нам нужны были фото по смыслу, но своих таких не было
Верстка сайта на Тильде
Что было важное:
- Стандартные блоки
Отдельные блоки были задизайнены и сверстаны специально на стандартных блоках Тильды, чтобы заказчица сама могла вносить в них изменения. - Анимация
Мною были предложены варианты анимации для отдельных блоках и сделаны две версии. Из них по факту уже выбирали, какую оставляем - Видео
Ввиду ухода ютуба из России, нужно было подобрать другой хостинг для расположения видео, чтобы оно было видно на сайте. Решили использовать ВК видео, все хорошо работает
Сложности:
В проекте было важно использовать стандартные блоки, но не все из них обладали необходимым функционалом. Например, блоки с отзывами и раскрывающимися пунктами не имели возможности встроить в них кнопку(которая по замыслу очень там была нужна)
Поэтому! Вооружившись знаниями написания кода и бодрой музыкой для поднятия духа, я разработала код (и впоследствии статью “Как добавить кнопку в стандартный блок”), чтобы решить эту задачу
И вуаля! Сайт готов и можно посмотреть по ссылке
Выводы:
Итогом совместной работы стал сайт и решение поставленных в самом начале задач. А именно:
- Создать стильный сайта-визитку для услуг швейного аутсорсинга: от специалиста в швейной индустрии по построению бренда одежды
- Упаковать часть 18-летнего опыта Наталии в виде последних кейсов, услуг, компетенций, обратной связи клиентов
Что в планах:
Добавить на сайт бесплатный материал для тех, кто хочет сделать свой бренд одежды или обучиться швейному ремеслу самостоятельно.
Что о работе говорит Наталия:
Если вам нужен сайт, напишите мне и мы обсудим детали