Разбор концепта для сервиса доставки

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

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

Автор работы Чернецкая Агнесса, подписчица DL PRO

Проект можно посмотреть на Pinterest

Агнесса, привет!

Классная и объемная работа. Отдельный респект за то, что это ещё и свёрстанная на Webflow страничка!

Мы записали видеоразбор с ответами на все основные вопросы. А ниже прокомментировали подробно и с примерами.


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

Очень смелый и крутой задел на кастомные иллюстрации и стиль. Молодежно, свежо, уникально, трендово. Это нужно развивать. Но иллюстрации получились разные: в разных стилистиках, и даже внутри одной иллюстрации встречаются. разные стили.

Обрати внимание на толщину линий, углы и детали.

Разная толщина линий, сломаная перспектива

Толщины у линий разные. Фон получается очень тонкий (0.86 px), другие границы толстые (2px), и из-за этого, иллюстрация кажется разрозненной. У логотипа еще толще граница, а у куртки тоньше. Такого быть не должно. Обычно границы должны быть либо одинаковые, либо повторяться. Сама иллюстрация не бьется по стилю с остальными эллементами сайта.

Также обрати внимание, что везде на сайте закругленно и мягко, а на фоне углы острые — приведи к общему виду.

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

Вот какие элементы получились удачно: нужно поправить толщину иконки, сделать ее более «массивной», и тогда эти элементы между собой будут перекликаться.

Очень крутые стикеры. Постарайся разобраться, как такой стиль работает, посмотри на приемы в этих иллюстрациях, и у тебя получиться ОЧЕНЬ классный стиль. Обрати внимание, что все границы одинаковы по толщине.

Дальше на сайте хочется видеть еще больше иллюстраций. Для них есть место. Посмотри, даже в тех референсах иллюстрации продолжаются по сайту.

Вернемся теперь к сайту. Сайту не хватает графики и деталей, он получился достаточно простым и пресным. Если мы добавим иллюстраций в остальные блоки, будет гораздо интереснее. Ты уверена, что тебе хватит 3-4 блока, чтобы рассказать о новом продукте? По моему мнению, не хватит, нужно разобрать структуру сайта конкурентов и подумать, зачем там блоки, которые добавил дизайнер.

Сайт разбит на части, текста не так много, чтобы я устал его читать, и в нем есть иерархия, но все равно получается сухой текст без усиления смысла графикой. Графика в виде иконок не справляется здесь, скучно читать.

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

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

Порядок в макете

Мы оценивали критерий работы в команде по проекту внутри Webflow. Ты использовала правильные блоки, grid, называла контейнеры элементов по функции. Использовала глобальные стили для цветов.

Не хватило более проработанной работы с классами, многие элементы имеют название, которое вебфлоу даёт автоматически. Это затруднит разработку в будущем.

Интересно правильно ли я проработала компоненты, стили? Как лучше было назвать слои в этом проекте? Как называть слои внутри иллюстрации и нужно ли это?

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

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

Артефакты портят впечатление(

А вот аккуратная мобильная версия порадовала.

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

Додо Брендбук. Иллюстрации

Как называть классы в Webflow на английском

Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™

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

Работу разобрали Валерия, Александр и Антон

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

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

https://pro.dsgnline.ru/