Линч цветочного магазина
Недавно мой канал набрал 500 человек и в честь этого я устроил голосовалку:
Первый день стабильно лидировал пункт про линч работ, и, хоть он проиграл, я решил, что линчу быть.
Дизайнер 쉰 넷째 прислала мне на обзор свой дизайн цветочного магазина. Зацените её полностью в Фигме. Это её первая работа, жестить не буду, как учил, но и на тормозах всё не спущу =)
Я буду разбирать логику, удобство и стиль. Плохого будет больше, ведь мы тут лучше становимся, а не нахваливаем друг друга, так ведь? Итак, погнали!
Логика и удобство
Когда я впервые увидел дизайн, я удивился. Он показался мне отталкивающим и непривычным. Это вопрос стиля. Когда я вник, то увидел довольно стройную логику и это хорошо.
Польза этого сайта — помочь покупателю подобрать идеальный букет к нужному сроку. И с этой задачей он справляется, но со скрипом.
🔥 Хорошо
Есть ответы на основные вопросы покупателя:
— Что продают? Цветы, видно же
— Сколько стоит? Вот за 3к есть, вот за 9, вам какой?
— На каких условиях?Есть самовывоз, есть доставка. Платите как хотите, а мы вам ещё и упакуем бесплатно
— А если нет нужного? Собери свой, а мы уж красиво обернём
— Отлично, как заказать? Звоните, вот номера. Или мы вам перезвоним.
👎 Плохо
Нет конкретики в условиях.
1. 22:45, поссорился с женой, срочно нужен букет. Привезёте?
2. А в час пик точно успеете за 1 час? Пробки же
3. Насколько отдалённые? Я в Рощино живу, за час довезёте?
4. Я постоянно у вас покупаю раз в год букет на 8 марта. Я постоянный клиент? А какая скидка?
5. Низкие цены? 10 тысяч то?!
6. И что мне даёт вежливость ваших клиентов?
Такие вопросы возникают в головах у клиентов. Да, можно позвонить и задать вопросы оператору, а можно поискать другой сайт. Чтобы это всё работало, нужно насытить текст фактами. Ильяхов помогает:
Качественные прилагательные
Текст о компани
Факты в продающем тексте
Теперь по блокам:
Я не понял зачем здесь меню. Если мы сейчас на главной, то зачем ссылка на неё? Со всех сайтов слово «главная» можно смело выкашивать. Заместо неё все давно тыкают на логотип. Каталог цветов будет ниже, прокрутить треть страницы легче, чем тянуться и нажимать. Специально предложение должно заменить баннер — на то оно и специальное, чтобы рекламироваться особо. Контакты написаны выше меню и тоже не ясно зачем они тут.
Баннер странный: слева описано всё то же, что и в блоке «почему мы». Их можно объединить в один блок преимуществ и показать сразу под баннером. Так клиент на входе в магазин поймёт отвечает ли он его целям: сможет ли он заказать доставку, как быстро, не замёрзнут ли по дороге и тд. Кроме того, пункты слева визуально похожи на меню.
Видно, что картинка на баннере для красоты. Клиент зашел на сайт Color of Life, а видит автомобиль Jo Malone. Лучше показывать реальные виды. Т.к. это работа не для реального заказчика, то эту картинку можно превратить в специальное предложение: Получи скидку 10% на букет
1. Сфотографируйся у нашего автомобиля
2. Выложи в Инстаграмм с хэштегом #coloroflife
3. Отметь нас в посте
Сверху не ясно табы или фильтры. Они похожи на кнопки и это плохо. Как кнопка может выглядеть только кнопка. Раз под «букетами роз» лежит серая тень, то, видимо это выбранный пункт. Нужно четче разделить что выбранно, а что нет. Например, как на Дрибббле.
Самое тяжелое — блок «собери сам». Баннер отъедает много места, но не сообщает ничего: мне своими руками букет собирать? Или вы соберёте? Что вы хотели этим сказать?
Клиент зашел быстро найти свой букет и вернуться обратно в водоворот жизни. Не юлите, говорите прямо:
Создайте свой букет
Выберите цветы и упаковку, а мы красиво соберём, упакуем и доставим
Конструктор букетов просится быть отдельной страницей. Как можно выбрать вид цветов? По названию? А если я не разбираюсь? Или там картинки будут? А большие?
Что будет, если нажать на «добавить цветы»? Станет на 2 пункта больше? Почему количество цветов отдельный пункт, а не относится к выбору цвета? А всякие травинки как добавить? Не понятно...
Классно, что подписали стоимость открытки. Это полезно.
Как я могу оформить заказ, если я ничего не заказываю? Тут должна быть кнопка «Заказать звонок»
Стиль
🔥 Хорошо
Он самобытный. Если сейчас убрать все фотографии, то всё равно будет понятно что это сайт про что-то романтичное. Большинство современных мелких магазинов собраны на конструкторе и выглядят одинаково. Например, если на сайте БукетОпт заменить все фотографии букетов на велосипеды, то ничего не изменится. Будет магазин велосипедов.
Зацените сайт Мэри Трюфель от Бюро Горбунова. На этом сайте могут продавать только платья. Если вы делаете магазин, подумайте как сделать стиль в тему.
👎 Плохо
Много неряшливости и похожих элементов. Не хватает крепкой вёрстки.
Про неряшливость.
Про вёрстку
Красное на красном
Кнопка и тэг похожи по стилю, но разные. Цена не ясно по чему выровнена. Шрифт у цены больше на 1 пункт или мне кажется?
Заголовки одного уровня разные
2 разных размера шрифта, очень всё скученно.
Текст плохо виден. Ильяхов хорошо написал как надо размещать текст на картинке.
Универсальный рецепт как сделать крепко сбитый сайт, когда у вас нет опыта:
- Собираете сайт с помощью системного шрифта и простых фигур типа «прямоугольник» и «круг». Использовать цвет и эффекты нельзя. Да, без теней. И под кнопками тоже.
- Показываете ему кому-то и спрашиваете что он понимает на сайте.
- Если ответ вас устроил, можете добавить цвет, хитрые формы и другие шрифты.
- Покажите сайт ещё раз и сравните ответы.
Итог — 3,5 из 10
В работе есть логика и старание сделать удобно. Сейчас нужно сделать самое сложное: убрать всё кроме скелета, расписать логику текстом от начала и до конца и заново собрать страницу.
Перед этим советую попробовать:
- Прочитать всё, что написано в статьях, которые я рекомендую всем начинающим
- Найти сайт, который цепляет своей красотой за душу и попробовать повторять приёмы: цвета, размер текста, отступы. Так вы поймёте его устройство и набьёте руку.
Для первой работы в портфолио это — нормальный результат. Что-то подобное у меня начало получаться только через полгода дизайна. Я думаю с таким уже берут на стажировку или работу на начальные должности.