Разбор сайта для художницы
Обсуждаем, как правильно применять исследования по проекту, как работать с бизнес-требованиями. Разбираемся, как подбирать стилистику для креативных проектов и как не закопаться с компонентами и вариантами в Figma.
Разбор работ в DL PRO обычно состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.
Автор работы Алёна Шорова, подписчица DL PRO
Привет, Алёна. Спасибо, что отправила работу на разбор. Мы по порядку дадим комментарии по ней, чтобы ты смогла внести изменения в своё решение)
Что понравилось в работе
Здорово, что попробовала сделать сайт в духе минимализма, чтобы основной акцент был на работы художницы, а не сам интерфейс. Постаралась собрать UI-kit, заодно прописав шрифтовые стили и цвета, что облегчит работу разработчику, но рекомендуем тебе посмотреть наш DL Talk #3, посвященный критерию Команда. Думаем, что так тебе будет понятнее, что именно тебе стоит поправить в аспекте организации макета.
Бизнес и логика
Дизайн сайта для художницы. Цель – не продавать картины через сайт, они продаются через галереи, а показать деятельность художницы помимо картин. Она проводит курсы и хочет продавать мерч.
Очень хорошо, что ты указала цель создания сайта. Именно от цели нужно отталкиваться при планировании исследований и построении информационной архитектуры.
Какие бизнес-задачи вытекают из описанной тобой цели?
- Привлечение внимания к образовательному контенту и увеличение продаж курсов.
- Увеличение продаж мерча.
Для увеличения продаж курсов, тебе нужно понять, кому такие курсы будут интересны. Да, у тебя в работе была попытка создать персон, ты молодец. Но персон формируют после предварительных исследований.
С каких исследований стоило бы начать в твоём случае?
Подходов к этой задаче может быть много, но мы начали с того, что провели бы дополнительное интервью с заказчиком, анализа рынка и конкурентов. Затем мы можем непосредственно проводить опросы и интервью с потенциальными покупателями курсов, чтобы лучше понимать боли тех, кому мы будем продавать.
Дополнительное интервью с заказчиком
Сначала можно уточнить у заказчика сайта (художницы), кого она видит ключевой целевой аудиторией своего образовательного контента.
Если у неё уже были продажи курсов и мерча, то она может дать небольшую статистику по покупателям.
Сайт для кейса сделан на русском языке. Стоит сразу уточнять у человека, заказывающего сайт, будет ли он ориентирован только на русскоязычную аудиторию? Или же художница хочет привлечь внимание англоязычной аудитории, чтобы расширить свои продажи?
Опрос через анкеты или интервью с потенциальными покупателями курсов
Это нужно для того, чтобы лучше понимать, как люди принимают решения о покупке подобных курсов, где они сейчас покупают похожие курсы.
По покупателям мерча, стоит поискать исследования или кейсы по похожей тематике.
Небольшой анализ рынка и конкурентов
Базовые данные следует получить у самого заказчика, если же он ими не располагает, то проведи такое исследование самостоятельно. Посмотри статистику по объему рынка, выяви прямых и косвенных конкурентов, проведи их анализ, чтобы вы с клиентом могли отстроиться на их фоне при позиционировании своего продукта.
Об информационной архитектуре
После того как ты лучше узнаешь целевую аудиторию, можно переходить к проектированию и наброскам информационной архитектуры.
К примеру, в текущей структуре, несмотря на то что целью стоит привлечение внимания к образовательному контенту (курсам) и продаже мерча, об этих направлениях на главной странице сайта ничего нет. Об этом можно узнать, только посмотрев на шапку и прочитав пункты меню главной навигации. Сейчас главная страница сайта больше соответствует по смыслу тому, если бы главной целью стояла именно продажа картин, а не тому, что было заявлено в брифе.
В Фигме у тебя показана информационная архитектура сайта, но она составлена с ошибками. Она напоминает микс ИА с пользовательскими сценариями.
Например, на вкладке «Магазин» у тебя есть каталог, а у каждой позиции есть своя карточка.
То есть человек может перейти в корзину двумя путями: сразу из каталога или же провалившись в карточку товара. У тебя в информационной архитектуре вообще не упоминается такая внутренняя страница, тогда как она — одна из главных для электронной коммерции.
После того, как опишешь информационную архитектуру и продумаешь навигацию по сайту, хорошей практикой будет начать с прототипирования страниц, которые имеют наиболее важное значение для задач бизнеса. В твоём случае, это каталог курсов, внутренняя карточка курсов, каталог продукции и карточка товара, а также корзина. Сейчас у тебя внутренней карточки курса нет в макете.
Есть ещё замечания по юзабилити. Когда у тебя человек находится на внутренних страницах, то это видно только по хлебным крошкам, но почему-то в главной навигации сайта (в шапке) у тебя это не показано.
Например, если человек находится на странице «Курсы», то было бы здорово сделать этот пункт меню в навигации активным, более ярким и заметным, чтобы пользователь понимал, где именно он сейчас находится.
Визуальная часть
Отличная идея, что ты не перегружаешь в данной работе «дизайном», а выбрала направление, которое больше подходит этой задаче — минимализм. Но стоит учитывать, что с ним может быть сложно работать начинающему дизайнеру. Сложность такого стиля заключается в том, что приёмы для выразительности используются несколько сложнее, чем обычные «украшательства». В минимализме активно работают с композицией, типографикой, сеткой, чтобы осознанно управлять вниманием пользователя.
О референсах
Смотря на твою работу, у нас сложилось впечатление, что ты мало времени уделила поиску референсов. На данном этапе в профессии заметно, что ты пока недостаточно прокачала свою насмотренность, многие приёмы могут показаться несовременными и избитыми.
Здесь мы бы хотели увидеть референсы, на которые ты опиралась, когда разрабатывала сайт. Мы бы смелее подходили к использованию композиционных приемов, постарались сделать их выразительнее. Сейчас выглядит всё выглядит несколько шаблонно. Обрати внимание на второе задание DL Pro, лекцию Анастасии Галеевой, арт-директора Embacy «Нестандартный лэйаут в вебе».
Примеры, на какие работы стоит обратить внимание и стремиться:
https://dribbble.com/shots/16129658-Artence-Magazine-Gallery-Animation
Как мы можем изменить текущую работу?
- Возьмем более выразительный шрифт, соответствующий более креативному духу бренда, сделаем такой шрифт массивнее. Как в примерах, что мы показали ранее. Не бойся активно использовать приемы из референсов. Шрифт должен стать основой характера твоего сайта. В нынешней версии, ему этого самого характера не хватает, шрифт в нем не работает. Попробуй сделать его "громче", не бойся экспериментировать. Для этого рекомендуем подобрать акцентный шрифт для заголовков и построить весь дизайн на шрифте и фотографиях.
- Найдем интересную композицию. Также посмотрим примеры. Композиция очень важна в подобных работах, и в минимализме, в частности. Обрати внимание на наш DL Talk #5, который был посвящен этой теме.
Визуальные нюансы для проработки
Если мы углубимся в детали, то многим элементам не хватает воздуха.
Сейчас кнопочки зажаты, из-за чего выглядят несколько неаккуратно. Это происходит по причине того, что у тебя большой текст заглавными в кнопке, при этом небольшие внутренние отступы.
Давай посмотрим на примере, как может выглядеть такая кнопка.
Также обрати внимание, что у тебя довольно узкие поля ввода. Их можно делать по высоте такими же, как кнопки выше, чтобы добавить воздуха дизайну и консистентности — всей системе.
Иконкам очень тесно внутри, фрейм для них можно делать больше раза в два, или уменьшать размеры самих иконок. Давай посмотрим на примере. И еще комментарий по их поводу: следи за консистентностью, сейчас у тебя в них используются линии разной толщины, что очень бросается в глаза и выглядит не очень аккуратно.
Давай разберемся с ними. Компоненты нужны, когда у тебя один элемент повторяется несколько раз на сайте и везде выглядит одинаково. Разница в тексте кнопки не является основанием для того, чтобы создавать в системе абсолютно идентичные элементы. Это может только запутать разработчика.
Варианты для кнопок используют, чтобы показать её состояния: ховер, обычное, клик и т.д. В кнопке ты можешь писать любой текст, как мы ранее сказали, нет смысла каждую кнопку закидывать в вариант.
Как правильно сделать кнопку с вариантами
Используй Auto Layout для того, чтобы создать кнопку. Это удобно, когда ты изменяешь в ней текст, тебе не нужно изменять её размер каждый раз. Таким образом, она будет сохранять постоянно одни и те же внутренние отступы.
Делаешь кнопку компонентом и делаешь с ними варианты (Обычная, ховер, клик)
Копируешь кнопку, и теперь ты там можешь писать любой текст. Поэтому нет смысла на каждый текст делать кнопку в вариантах. Есть смысл на разные типы кнопок, делать варианты (к примеру: цветная и другая кнопка с границами, тогда делаешь 2 варианта)
Что посмотреть
Подход к композиции в работе дизайнера
Как подобрать шрифт для дизайн проекта
Видеоурок по работе с компонентами и Variants в Фигме
Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™
Работу разобрали Александр Ищенко и Наталья Бухтиярова
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров: