Разбор концепта лендинга для рыбной фермы

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

Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma Jam, который передаётся автору работы с большими подробностями и точечными указаниями на то, что следует исправить.

Автор работы Алиса Павлова, подписчик DL PRO.

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

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

Привет, Алиса! Большое спасибо, что поделилась своей работой!

Что понравилось в работе

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

Логика

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

Насколько для обычного покупателя важно, что ферма продала 100 тонн рыбы? Как он это соотнесёт со своим опытом? Хоть ты пока и тренируешься верстать на Тильде, продуманный контент и отсутствие условного лорем ипсума очень важны и в таком случае. А ещё ты говоришь о десяти разновидностях осетровых рыб, но такого их количества в карточках товаров не представлено, потому что там тоже визуальный лорем ипсум в виде одинаковых изображений.

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

У тебя есть раздел с ответами и вопросами, но его нет в структуре хедера. Насколько это будет удобно пользователям, если они захотят к этому блоку вернуться в мобильной версии, к примеру?

Бизнес

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

Товар может иметь другую характеристику, помимо премиум? И как мне узнать больше, если у товара нет никакого описания?

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

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

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

Возможно, визуально не самое привлекательное решение, но зато здесь чётко описана логика того, как работает оплата при весовом товаре.

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

Визуал

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

Мудборд и референсы

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

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

Хорошая композиция может начинаться с рефренсов и их грамотного подбора.

Типографика

Ты подобрала для проекта достаточно неплохой шрифт. Чтобы построить с ним более интересную композицию, тебе не хватило контрастов в типографике. Сейчас твой заголовок 48 размера, а наборный текст 18. Это достаточно стандартное соотношение размеров шрифтов. Ты можешь пойти дальше и увеличить контраст. Что, если заголовки будут 80 размера? Или даже 90? Но более краткие и ёмкие. Или же наоборот: сделаем крупный наборный текст и аккуратные небольшие заголовки, которые как теги будут висеть над текстом. Вариантов масса, но все они находятся чуть за гранью стандартной разницы в размерах шрифтов. Пробуй и экспериментируй.

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

Также обращай внимание на детали. В твоём макете периодически нарушается правило внешнего и внутреннего + теория близости.


Композиция

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

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

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

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

Сайт от embacy. Кейс доступен по ссылке.
Сетка из кейса Chipsa. Кейс можно посмотреть по этой ссылке.

Цвет

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

Слева цвет из палитры работы. Справа вариант замены цвета.

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

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

Пример деликатного цвета с кейса Red Collar.


Команда

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

Используется сетка, подходящая под Тильду, это плюс. И очень здорово, что собрала отдельный UI-kit с элементами. Используешь компоненты и варианты, тоже плюс.

Что посмотреть

Чтобы макет сайта был аккуратнее в нюансах, почитай книгу от Бюро Горбунова «Типографика и верстка».

Как создать качественную цветовую палитру для UI.

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

Applying user research to a small e-commerce website — a UX case study

Copywriting & UX: Why Copywriters Need Wireframes

The Complete Guide to Writing Product Descriptions That Convert

Успехов в будущих проектах!

Работу разобрали Лера и Алина.

Наш бот Прошка оценил работу так

Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров:

https://pro.dsgnline.ru/