Разбор концепта для сервиса доставки
Разбор страницы сайта на Webflow с акцентом на то, как выдерживать стилистику иллюстраций и иконок и подкреплять смыслы графикой.
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma Jam, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.
Автор работы Чернецкая Агнесса, подписчица DL PRO
Проект можно посмотреть на Pinterest
Классная и объемная работа. Отдельный респект за то, что это ещё и свёрстанная на Webflow страничка!
Мы записали видеоразбор с ответами на все основные вопросы. А ниже прокомментировали подробно и с примерами.
Что понравилось в работе
Очень смелый и крутой задел на кастомные иллюстрации и стиль. Молодежно, свежо, уникально, трендово. Это нужно развивать. Но иллюстрации получились разные: в разных стилистиках, и даже внутри одной иллюстрации встречаются. разные стили.
Обрати внимание на толщину линий, углы и детали.
Толщины у линий разные. Фон получается очень тонкий (0.86 px), другие границы толстые (2px), и из-за этого, иллюстрация кажется разрозненной. У логотипа еще толще граница, а у куртки тоньше. Такого быть не должно. Обычно границы должны быть либо одинаковые, либо повторяться. Сама иллюстрация не бьется по стилю с остальными эллементами сайта.
Также обрати внимание, что везде на сайте закругленно и мягко, а на фоне углы острые — приведи к общему виду.
Даже кнопки не повторяются. Получается винегрет из разных стилей. Иконки в кнопках детализированные, но тебе нужно найти менее детализированные и сделать их в стиле кнопки звонка.
Вот какие элементы получились удачно: нужно поправить толщину иконки, сделать ее более «массивной», и тогда эти элементы между собой будут перекликаться.
Очень крутые стикеры. Постарайся разобраться, как такой стиль работает, посмотри на приемы в этих иллюстрациях, и у тебя получиться ОЧЕНЬ классный стиль. Обрати внимание, что все границы одинаковы по толщине.
Дальше на сайте хочется видеть еще больше иллюстраций. Для них есть место. Посмотри, даже в тех референсах иллюстрации продолжаются по сайту.
Вернемся теперь к сайту. Сайту не хватает графики и деталей, он получился достаточно простым и пресным. Если мы добавим иллюстраций в остальные блоки, будет гораздо интереснее. Ты уверена, что тебе хватит 3-4 блока, чтобы рассказать о новом продукте? По моему мнению, не хватит, нужно разобрать структуру сайта конкурентов и подумать, зачем там блоки, которые добавил дизайнер.
Сайт разбит на части, текста не так много, чтобы я устал его читать, и в нем есть иерархия, но все равно получается сухой текст без усиления смысла графикой. Графика в виде иконок не справляется здесь, скучно читать.
У тебя идет перечисление инструментов которые используешь, все это можно перевести в графику с иллюстрациями/иконками. Так проще воспринимается информация, и при сканировании сразу будет понятно, что я получу от сервиса.
Так же и здесь. Крутой текст, крутой оффер, так хочется к нему иллюстрацию для усиления смысла и привлечения внимания пользователя!
Порядок в макете
Мы оценивали критерий работы в команде по проекту внутри Webflow. Ты использовала правильные блоки, grid, называла контейнеры элементов по функции. Использовала глобальные стили для цветов.
Не хватило более проработанной работы с классами, многие элементы имеют название, которое вебфлоу даёт автоматически. Это затруднит разработку в будущем.
Интересно правильно ли я проработала компоненты, стили? Как лучше было назвать слои в этом проекте? Как называть слои внутри иллюстрации и нужно ли это?
Этот вопрос можно переадресовать тебе самой, потому что здесь ты выступила и в роли дизайнера, и в роли верстальщика. Удобно или тебе было работать со слоями и иллюстрациями, иконками в фигма? Не путалась ли ты в файлах, что можно было бы улучшить?
С заглавной иллюстрацией случился конфуз — она в SVG, но кажется внутри есть растрированные элементы, и поэтому появились артефакты.
А вот аккуратная мобильная версия порадовала.
Что посмотреть
Как называть классы в Webflow на английском
Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™
Работу разобрали Валерия, Александр и Антон
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров: