Большая переверстка Евроопта

Привет! У меня сегодня для вас крупный улов. Я переверстал главную страницу сайта
Евроопта + заредизайнил два его логотипа — собственно еврооптовский и лого рекламной
игры «Удача в придачу!»

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

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

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

Начнем разбор полетов.

1)

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

2)

Когда в последний раз вы звонили по такому телефонному аппарату?

3)

Арендодателям > Арендаторам > Перевозчикам > Инвесторам (бля!) —
это ведь должно быть в одном меню вместе с акциями, товарами удачи
и подарочными сертификатами? Вы наркоманы там все?

4)

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

Не понятно к чему тут такое настойчивое повторение одного и того же.
• «Продукты питания...» на вкладке вверху — это то же самое,
что зеленый логотип e-dostavka.
• ГиперМолл на вкладке, он же логотипом.
• Удача в придачу на странице упоминается 5 раз! П Я Т Ь! Справа еще колонка новостей,
но все они процентов на 95 тоже об «Удача в придачу!»

Причем баннер просто мега-уродливый.

Ниже под баннерами идет блок, до которого, по мнению разработчиков, никто
и никогда не доскролит (потому что пользователя раньше вырвет от анимации
и желто-красного), а значит можно сверстать текст с жуткими дырами, наплевать
на теорию близости («Читайте корпоративную газету „Евроопт News на нашем
портале в Минске, в Пинске...“) и поставить картинку с 3-D человечками, воняющую
Шатерстоком.

Подвал сайта у нас посвящен одному номеру телефона. Сука, этот номер такой важный,
что для него выделили весь подвал. Причем свет даже в этом подвале не включили.

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

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

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

Задачи передо мной стоят следующие:
1) Убрать нахрен всю анимацию.
2) Убрать ненужное дублирование — снизить плотность информации, сохранив главное.
3) Переделать модуль игры „Удача в придачу!“
4) Изменить структуру ссылок, меню — разбить на группы по назначению.
5) Привести все к единому стилю.
6) Получить на выходе красивую, понятную главную страницу для крупной сети ритейла.

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

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

Отрисовываю знак. Всегда раздражала эта кривая буква „е“.

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

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

Фу.

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

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

Кручу, верчу.

Пришел к идее взять все разноцветные формы
разных размеров и попробовать слепить из них что-нибудь.

Готово.

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

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

Параллельно шла примерка нового фирменного стиля удачи.

Ок, нашел. Меню будет две штуки. Товары красной цены будут вначале, затем слайдер
с рекламой, рядом с ним блок с акциями, скидками и всей „халявой“, ниже блок на
всю ширину будет для удачи в придачу, затем мы неспеша спустимся в подвал.

Начну с шапки.

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

Как видите, я вставил лого удачи в придачу в шапку, в то время, как для нее и так
выделил отдельный блок. Да, это дублирование, но необходимое — на тот случай,
если человек не будет скроллить, а захочет сразу попасть на страницу Удачи в придачу.

Вроде ровно.

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

Эскизный вариант.

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

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

А теперь меняю его местами с блоком про экономию.

Вот шапка с блоком „халявы“.

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

Беру нормальные фотки, травлю, делаю пачки с деньгами, использую
элементы нового фирменного стиля для оформления.

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

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

А логотипчик, неплохо-бы сменить.

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

UPD
Нет, предела совершенству. Спасибо комментаторам, утру и трезвому взгляду.

Поделиться
Отправить
Запинить
Популярное