Цветочный хедер

Решим задачку?

Условие

Нужно сделать дизайн хедера для цветочного магазина. А вот и ТЗ:

Решение

Для начала расскажем заказчику, что тут все плохо. Во-первых, две огромные дырищи:

Во-вторых, трех-четырехэтажные блоки:

Кнопки телеграмма, вайбера улетели за километр от телефона.

Все как-то навалено друг на друга. Куча инфы добавлена просто абы была.

В общем, все надо упростить, расставить акценты, сделать аккуратно и чисто. А главное, чтобы глаза не разбегались. Вот, например, зачем нам слово «корзина» и фраза «оформить заказ». Это лишний визуальный мусор, усложняющий восприятие. Рамка тоже не нужна — так уже лет пять не выделяют область телеги.

Сделаем хорошо, воздушно и современно:

  • Под логотипом можно выпилить сильношумящую фразу про Нижний Новгород (прочитать ее сложно), а шумит очень сильно. Лучше поставить справа инфу про доставку с тем же Нижним Новгородом. Двух зайцев одним городом!
  • Делаем крупный телефон, а иконки рядом с ним.
  • Иконку корзины лучше сделать в виде пакета, а не телеги. Не та тематика сайта.
  • Дополнительное меню прячем в «гамбургер» (3 полоски). На таком сайте можно смело скрыть. Оставим только навигацию по продукции.

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

Так у нас всегда будет доступна вся нужная инфа сверху экрана. В одной полоске, а не в 3−4 этажных блоках!

Условие #2

Казалось бы, задачку решили, но нас просят изменить время работы. Раньше было круглосуточно 24/7. А теперь «Пн — Пт: с 9:00 до 17:00; Сб: с 9:00 до 14:00; Вс: выходной»

Решение #2

Первый делом, конечно же, подставим:

Грустно как-то: появилась третья строка. Попробуем скипнуть инфу про бесплатный звонок:

Стало аккуратнее и вроде как задача решена. Вот только решили мы ее каким-то нечитаемым адком 🙂 Сложно сходу разобраться во времени и днях. А еще цифры телефона рядом все усложняют. Попробуем сделать более юзер-френдли:

Работаем в будни с 9:00 до 17:00; в субботу с 9:00 до 14:00; воскресенье — выходной:

Кривовато. Уберем «работаем»:

Ну вот. Все читабельно и решение устроит 99% заказчиков… Но по-прежнему три строки. Давай обратно сократим субботу и воскресенье до «сб» и «вс»:

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

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

Ну вот, нишняк. Можем немного все раздвинуть вдогонку:

Кайф!

99% устроит
Но так лучше

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

Валя, глянь почту)

Оставить комментарий

Укажите корректно свой e-mail

Извините, для комментирования необходимо войти.
5 комментариев
1

Крайний вариант и правда клевый, одновременно и компактный, и информативный. Скажи, а вариант сокращения за счет «Вс — выходной» не рассматриваешь? Имею в виду, не очевидно ли, что воскресенье — выходной, если мы распишем график только на 6 дней?

Валя, глянь почту)

И глянула, и ответила).

Ответить
2

Конечно, можно не показывать. Мне по условиям твоей задачи казалось, что заказчик хочет все дни использовать. А так-то да, можно и без воскресенья, и все равно понятно будет:

В будни с 9:00 до 17:00
В субботу до 14:00

А на странице контактов можно полностью все расписать.

Ответить
3

Мне по условиям твоей задачи казалось, что заказчик хочет все дни использовать.

Да, хотел, но я уговорила удалить воскресенье. А потом засомневалась, не для одной ли меня это очевидно). Спасибо за совет с пропуском начала дня в субботу. Не встречала так, да и сама бы вряд ли додумалась настолько сокращать.

Ответить
4

Пожалуйста 🙂

Ответить
5

Это 5!
Спасибо за разбор!

Ответить