Столичный дизайнер показал, каким мог бы быть сайт «Евроопта» и логотип «Удачи в придачу»

24 Ноября 2017 7056 10 Дизайн Нестандарт
Поделиться

Минский дизайнер Владимир Бугай —  создатель проект  «Переверстал», в котором он критикует, выносит на обсуждение и меняет макеты, решил полностью переверстать главную страницу "Евроопта" и  изменил всё: от логотипа компании до их оформления цен и рекламной игры.

Вот главная страница. Как видите, она перегружена информацией, оформлением
и анимацией. Анимация вообще дичь — что-то постоянно моргает, ползет и кружится.

375383_original.jpg

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

Ощущение, что сайт сейчас кааак...
367943_800.png

Первое, что хочу сказать — жутко бесит, когда ты, зайдя на внутренние страницы, хочешь вернуться на главную одним кликом, но не можешь — нет логотипа!
На главной странице нет логотипа!

376120_original.jpg

Иконки и логотипы все разностилевые, неуклюже стоящие на костылях и качающиеся на ветру.

И так, прежде чем приступить к работе, надо определиться для чего компании сайт и чего она пытается с помощью него достичь. Торговая сеть «Евроопт» занимается ритейлом, и всё, что предлагается на сайте, так или иначе связано с ним.

Рекламная игра, акции, услуги доставки, интернет-гипермаркет, магазин-склад — это все инструменты, нужные только для того, что бы народ тратил больше денег, приобретая больше товаров.

Так что на ней должна быть игра, должны быть ссылки на E-техно, магазины-склады и т.д. При этом все должно считываться в кратчайший срок — очень важное условие в наш перенасыщеный информацией век.

Задачи передо мной стоят следующие:

1) Убрать всю анимацию.

2) Убрать ненужное дублирование —
снизить плотность информации, сохранив главное.

3) Переделать модуль игры «Удача в придачу!»

4) Изменить структуру ссылок, меню —
разбить на группы по назначению.

5) Привести все к единому стилю.

6) Получить на выходе красивую, понятную
главную страницу для крупной сети ритейла.

И начну я с логотипов.

Вот какой лого у Евроопта сейчас. Кстати, я когда-то писал пост про красный и желтый, кто не видел рекомендую — очень в тему.

343896_800.jpg

Отрисовываю знак.

345051_800.jpg
345146_800.jpg

Желтый вариант больше не вариант. Оставляю красный и синий.
370705_900.jpg

Теперь очередь лого Удачи в придачу (а заодно и фирменный стиль).

349129_600.jpg

Сучу рукава. За основу возьму звезду и ее вариации форм, а также клевер, который, кстати, есть в
оформлении иконки товаров удачи.

371793_600.jpg

Звезда, потому что люди привыкли загадывать желания при виде падающей звезды (хоть это и не звезда падает, но не будем занудами).

349584_800.jpg
349931_800.jpg
350343_800.jpg

Берусь за сайт. Сетка для горизонтального выравнивания будет 16-ти колоночная, для вертикального (она же базовая) ​будет 26px. 

357000_original.jpg

Задача для начала — определить общую конструкцию, т.е. каких размеров будут основные модули и где они будут стоять.

Меню будет две штуки. Товары "Красная цена" будут вначале, затем — слайдер с рекламой, рядом с ним — блок с акциями, скидками и всей «халявой», ниже — блок на всю ширину для "Удачи в придачу". Так постепенно мы спустимся в подвал.
358359_original.jpg

Шапка.

Я избавился от ненужных логотипов доставки, гипермолла и всего прочего ненужного. Исчезла рябь, все стало понятно и доступно. Хотите доставку продуктов на дом?А бытовую технику? Вот ссылки в отдельной группе, прямо перед глазами. Ах, вы не покупатель, а потенциальный партнер?Ну что ж, вот для вас отдельный блок во втором меню.

374089_original.jpg

Далее блок с «халявой» и слайдер (тоже с «халявой»).

359381_original.jpg

Выбираю плашку для цены.

360620_original.jpg

Решаю сделать еще один блок с новостями сети, которые не относятся к рекламной игре.

362081_original.jpg

У нас остался блок с игрой «Удача в придачу!»

358801_original.jpg

И, наконец, подвал. Здесь, по-традиции, юридическая инфа о компании.

362799_original.jpg

Время перерезать ленточку. Та-даааам!

Здесь можно всё увеличить.

377744_original.jpg

Поделиться
Материалы по теме:
Обсуждение:
Читайте также: