Одна из самых развитых оптово-розничных сетей в России, которая специализируется на импорте цветов из самых далеких уголков земли.

Цветочный сайт «Floria»

Задача

Нужно сделать дизайн «цветочного» сайта.

Из ТЗ: «очень нравится и структура и оформление и тона и стилистика одним словом восхищён, хотелось бы что нибудь очень похожее».

Посмотреть «самый лучший - в восхищении» сайт

Цветовая гамма: в соответствии с фирменным стилем — чёрная. Форма элементов: острые, прямоугольные, плоские.

Решение

Для начала я предложил (если я вижу, что можно что-то улучшить, промолчать — не дождетесь) изменить логотип.

Тут все плохо. Во-первых, рубленый шрифт. Он подходит для стройки, и чего-то брутального мужского: автозапчасти, строительство домов, ремонт и тд. Во-вторых, жирные буквы, которые только усиливают проблему из первого пункта. Третье — знак. Читается буква О, конечно, без проблем. Только на цветок это уже не похоже. Это уже какой-то салон свадебных колец. Не обязательно выгибать стебель в букву, чтобы получить О. Запросто можно использовать сам цветок вместо буквы, чтобы не было никаких колец. А еще лучше вообще сделать без знака. Вот в 100500 раз лучше:

А что там с сайтом?

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

Все элементы оформим закругленными, а не острыми (по ТЗ) — они лучше подходят для цветочной тематики. Да-да, у роз ведь есть колючие шипы? Но и их обрезают! Основной фон — белый, а не черный (по ТЗ). Он максимально клевый и современный. Лучше белого фона никто ничего не придумал еще. На нем круто смотрятся цветы. Да и вообще он няшка)) А если к нему добавить еще бежевые «воздушные» карточки с букетами — конкуренты обзавидуются!

Мысли вслух:

Вместо черного сайта по ТЗ — сделал белый, вместо острых углов по ТЗ — плавные... Ты там нормальный вообще?!

Нуууу я такой ߘʠСоветую, предлагаю, улучшаю и вот это вот все. Вот только про хедер сколько всего я написал дорогому заказчику:

Тут все плохо. Две огромные дырищи:

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

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

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

Под логотипом можно выпилить сильно шумящую фразу про Нижний Новгород (прочитать ее сложно), а шумит очень сильно. Лучше поставить сразу за логотипом доставку. Из двух зайцев сделали одного. Или как там говориться ߘʼ/p>

Делаем крупный телефон, иконки рядом с ним.

Дополнительную навигацию скрываем в гамбургер (3 полоски). Она на таком сайте не нужна. В плане можно смело скрыть. Оставим только навигацию по продукции. К слову, у сайта-образца из ТЗ скрыта. Саму полоску меню можно сделать липкой. Вот примеры поведения.

Показал в отдельном файле. В эту полоску прыгает наша корзина:

Получается у нас всегда доступна вся нужная нам инфа сверху экрана. В одной полоске. А не в 3-4 этажных блоках. И иконку корзины лучше сделать в виде пакета, а не телеги. Не та тематика сайта.

Ну и так далее по каждому блоку подробненько для заказчика.

Представляете, как сильно я люблю свою работу!?

Видео-презентация

Включайте звук — с ним веселее =)

Главная страница

4 внутренние страницы

Клевая 404-ая ошибка

Адаптируется на планшетах

И смартфонах

Отзыв заказчика

Кстати, подписывайтесь на ютубчик :)

Поговорим о дизайне на фрилансе в видео-формате

  • Скачайте и заполните бриф

    Вопросов совсем немного, потерпите, пожалуйста)

  • Напишите письмо на почту

    Обычно я отвечаю сразу, если не сплю или не за рулем.

  • Я работаю через Веблансер

    Отниму у вас 3-4 минуты. Потом в процессе расскажу :)