Разбор концепта лендинга для рыбной фермы
Обсудим, почему не каждый инструмент подходит под любые задачи. О важности проектирования большего количества состояний в системе и наполнении макетов реальным контентом.
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma Jam, который передаётся автору работы с большими подробностями и точечными указаниями на то, что следует исправить.
Автор работы Алиса Павлова, подписчик 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
Работу разобрали Лера и Алина.
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров: