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

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

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

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

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

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

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

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

Логика

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

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

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

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

Бизнес

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

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

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

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

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

Визуал

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

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

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

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

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

Типографика

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

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

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

Композиция

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

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

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

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

Цвет

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

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

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

Команда

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

Используется сетка, подходящая под Тильду, это плюс. И очень здорово, что собрала отдельный 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/