<?xml version="1.0" encoding="utf-8"?> 
<rss version="2.0">

<channel>

<title>Переверстал, заметки с тегом: Евроопт</title>
<link>https://pereverstal.by/tags/evroopt/</link>
<description></description>
<generator>E2 (v3254; Aegea)</generator>

<item>
<title>Большая переверстка Евроопта</title>
<guid isPermaLink="false">69</guid>
<link>https://pereverstal.by/all/bolshaya-pereverstka-evroopta/</link>
<comments>https://pereverstal.by/all/bolshaya-pereverstka-evroopta/</comments>
<description>&lt;p&gt;Привет! У меня сегодня для вас крупный улов. Я переверстал главную страницу сайта&lt;br /&gt;
Евроопта + заредизайнил два его логотипа — собственно еврооптовский и лого рекламной&lt;br /&gt;
игры «Удача в придачу!»&lt;/p&gt;
&lt;p&gt;Но обо всем по порядку. Вот главная страница. Как видите она перегружена&lt;br /&gt;
информацией, оформлением и анимацией. Анимация вообще дичь — что-то постоянно&lt;br /&gt;
моргает, ползет и кружится.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/375383_original.jpg" width="1200" height="872" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Какое ощущение испытывает пользователь, посетивший сайт, когда на него набрасываются&lt;br /&gt;
огромная плотность информации, желтый и красный цвета, дикая анимация,&lt;br /&gt;
разностилевые картинки, постоянное дублирование одного и того же?&lt;/p&gt;
&lt;p&gt;Ощущение, что сайт сейчас кааак...&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/367943_800.png" width="800" height="744" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Начнем разбор полетов.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/376120_original.jpg" width="1200" height="271" alt="" /&gt;
&lt;/div&gt;
&lt;h2&gt;1)&lt;/h2&gt;
&lt;p&gt;Первое, что хочу сказать — жутко бесит, когда ты, зайдя на внутренние страницы,&lt;br /&gt;
хочешь вернуться на главную одним кликом, но не можешь — нет логотипа!&lt;br /&gt;
На главной странице нет логотипа!&lt;/p&gt;
&lt;h2&gt;2)&lt;/h2&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/377017_original.jpg" width="384" height="44" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Когда в последний раз вы звонили по такому телефонному аппарату?&lt;/p&gt;
&lt;h2&gt;3)&lt;/h2&gt;
&lt;p&gt;Арендодателям &gt; Арендаторам &gt; Перевозчикам &gt; Инвесторам (бля!) —&lt;br /&gt;
это ведь должно быть в одном меню вместе с акциями, товарами удачи&lt;br /&gt;
и подарочными сертификатами? Вы наркоманы там все?&lt;/p&gt;
&lt;h2&gt;4)&lt;/h2&gt;
&lt;p&gt;Иконки и логотипы все разностилевые, неуклюже стоящие на костылях и качающиеся на ветру.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/377407_original.jpg" width="1200" height="165" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Не понятно к чему тут такое настойчивое повторение одного и того же.&lt;br /&gt;
• «Продукты питания...» на вкладке вверху — это то же самое,&lt;br /&gt;
что зеленый логотип e-dostavka.&lt;br /&gt;
• ГиперМолл на вкладке, он же логотипом.&lt;br /&gt;
• Удача в придачу на странице упоминается 5 раз! П Я Т Ь! Справа еще колонка новостей,&lt;br /&gt;
но все они процентов на 95 тоже об «Удача в придачу!»&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/368812_original.jpg" width="1103" height="933" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Причем баннер просто мега-уродливый.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/369733_900.jpg" width="900" height="279" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Ниже под баннерами идет блок,  до которого, по мнению разработчиков, никто&lt;br /&gt;
и никогда не доскролит (потому что пользователя раньше вырвет от анимации&lt;br /&gt;
и желто-красного), а значит можно сверстать текст с жуткими дырами, наплевать&lt;br /&gt;
на теорию близости («Читайте корпоративную газету „Евроопт News на нашем&lt;br /&gt;
портале в Минске, в Пинске...“) и поставить картинку с 3-D человечками, воняющую&lt;br /&gt;
Шатерстоком.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/370581_900.jpg" width="900" height="354" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Подвал сайта у нас посвящен одному номеру телефона. Сука, этот номер такой важный,&lt;br /&gt;
что для него выделили весь подвал. Причем свет даже в этом подвале не включили.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/370346_900.jpg" width="900" height="372" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Итак, прежде чем приступить к работе, надо определиться для чего компании сайт&lt;br /&gt;
и чего она пытается с помощью него достичь. Торговая сеть „Евроопт“ занимается&lt;br /&gt;
ритейлом и все что предлагается на сайте так или иначе связано с ним.&lt;/p&gt;
&lt;p&gt;Рекламная игра, акции, услуги доставки, интернет-гипермаркет, магазин-склад —&lt;br /&gt;
это все инструменты, нужные только для того, что бы народ тратил больше денег,&lt;br /&gt;
приобретая больше товаров.&lt;/p&gt;
&lt;p&gt;Главная страница вполне справедливо должна донести до посетителя в кратчайшие&lt;br /&gt;
сроки и без лишнего напряга для его глаз обо всех доступных вариантах того, как потратить бабло.&lt;br /&gt;
Т. е. как ни крути на ней должна быть игра, должны быть ссылки на E-техно, магазины-склады и т. д.&lt;br /&gt;
При этом все должно считываться в кратчайший срок — очень важное&lt;br /&gt;
условие в наш перенасыщеный информацией век.&lt;/p&gt;
&lt;p&gt;Задачи передо мной стоят следующие:&lt;br /&gt;
1) Убрать нахрен всю анимацию.&lt;br /&gt;
2) Убрать ненужное дублирование — снизить плотность информации, сохранив главное.&lt;br /&gt;
3) Переделать модуль игры „Удача в придачу!“&lt;br /&gt;
4) Изменить структуру ссылок, меню — разбить на группы по назначению.&lt;br /&gt;
5) Привести все к единому стилю.&lt;br /&gt;
6) Получить на выходе красивую, понятную главную страницу для крупной сети ритейла.&lt;/p&gt;
&lt;p&gt;И начну я с логотипов.&lt;/p&gt;
&lt;p&gt;Вот какой лого у Евроопта сейчас. Кстати, я когда-то писал пост про красный и желтый,&lt;br /&gt;
кто не видел рекомендую — очень в тему.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/343896_800.jpg" width="446" height="105" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Отрисовываю знак. Всегда раздражала эта кривая буква „е“.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;div class="fotorama" data-width="800" data-ratio="3.8834951456311"&gt;
&lt;img src="https://pereverstal.by/pictures/345051_800.jpg" width="800" height="206" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/345146_800.jpg" width="800" height="208" alt="" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Желтый вариант больше не вариант. Оставляю красный и синий.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/370705_900.jpg" width="685" height="900" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Теперь очередь лого Удачи в придачу (а заодно и фимренный стиль).&lt;br /&gt;
Если логотип Евроопта я просто привел в чувство, то тут&lt;br /&gt;
мне понадобится лопата и черный мешок.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;div class="fotorama" data-width="585" data-ratio="0.975"&gt;
&lt;img src="https://pereverstal.by/pictures/349129_600.jpg" width="585" height="600" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/349420_800.png" width="750" height="405" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/346561_800.jpg" width="800" height="450" alt="" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Фу.&lt;/p&gt;
&lt;p&gt;Сучу рукава. За основу возьму звезду и ее вариации форм, а также клевер, который,&lt;br /&gt;
кстати есть в оформлении иконки товаров удачи.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/371793_600.jpg" width="224" height="153" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Звезда, потому что люди привыкли загадывать желания, при виде&lt;br /&gt;
падающей звезды (хоть это и не звезда падает, но не будем занудами).&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/349584_800.jpg" width="800" height="433" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Кручу, верчу.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/349931_800.jpg" width="800" height="800" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Пришел к идее взять все разноцветные формы&lt;br /&gt;
разных размеров и попробовать слепить из них что-нибудь.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;div class="fotorama" data-width="800" data-ratio="1.5686274509804"&gt;
&lt;img src="https://pereverstal.by/pictures/350098_800.jpg" width="800" height="510" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/350343_800.jpg" width="800" height="616" alt="" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Готово.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/367538_800.jpg" width="800" height="386" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Берусь за сайт. Сетка для горизонтального выравнивания будет 16-ти колоночная,&lt;br /&gt;
для вертикального (она же базовая) ​будет 26px. Задачи показывать сетку у меня не было,&lt;br /&gt;
но периодически она будет появляться, т. к. делая скриншоты этапов создания, я не всегда&lt;br /&gt;
вспоминал, что ее нужно отключать.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/357000_original.jpg" width="1200" height="868" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Задача для начала — определить общую конструкцию,&lt;br /&gt;
т. е. каких размеров будут основные модули и где они будут стоять.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;div class="fotorama" data-width="1200" data-ratio="0.99750623441397"&gt;
&lt;img src="https://pereverstal.by/pictures/357194_original.jpg" width="1200" height="1203" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/357436_original.jpg" width="1200" height="1240" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/357636_original.jpg" width="1200" height="1240" alt="" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Параллельно шла примерка нового фирменного стиля удачи.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/358014_original.jpg" width="1200" height="1240" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Ок, нашел.  Меню будет две штуки. Товары красной цены будут вначале, затем слайдер&lt;br /&gt;
с рекламой, рядом с ним блок с акциями, скидками и всей „халявой“, ниже блок на&lt;br /&gt;
всю ширину будет для удачи в придачу, затем мы неспеша спустимся в подвал.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/358359_original.jpg" width="1200" height="1406" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Начну с шапки.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;div class="fotorama" data-width="1200" data-ratio="4.8780487804878"&gt;
&lt;img src="https://pereverstal.by/pictures/364422_original.jpg" width="1200" height="246" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/364650_original.jpg" width="1200" height="240" alt="" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Готово. Избавился от ненужных логотипов доставки, гипермолла и всего прочего&lt;br /&gt;
не нужного. Исчезла рябь, все стало понятно и доступно. Хотите доставку продуктов на дом?&lt;br /&gt;
А бытовую технику? Вот ссылки в отдельной группе, прямо перед глазами.&lt;br /&gt;
Ах, вы не покупатель, а потенциальный партнер? Ну что ж вот для вас отдельный&lt;br /&gt;
блок во втором меню.&lt;/p&gt;
&lt;p&gt;Как видите, я вставил лого удачи в придачу в шапку, в то время, как для нее и так&lt;br /&gt;
выделил отдельный блок. Да, это дублирование, но необходимое — на тот случай,&lt;br /&gt;
если человек не будет скроллить, а захочет сразу попасть на страницу Удачи в придачу.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/374089_original.jpg" width="1200" height="312" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Вроде ровно.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;div class="fotorama" data-width="1200" data-ratio="3.5398230088496"&gt;
&lt;img src="https://pereverstal.by/pictures/372849_original.jpg" width="1200" height="339" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/373971_original.jpg" width="1200" height="319" alt="" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Далее блок с „халявой“ и слайдер (тоже с „халявой“).&lt;/p&gt;
&lt;p&gt;Эскизный вариант.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/359381_original.jpg" width="1200" height="630" alt="" /&gt;
&lt;/div&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/364817_original.jpg" width="1200" height="613" alt="" /&gt;
&lt;/div&gt;
&lt;div class="e2-text-picture"&gt;
&lt;div class="fotorama" data-width="1200" data-ratio="6.5573770491803"&gt;
&lt;img src="https://pereverstal.by/pictures/359941_original.jpg" width="1200" height="183" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/359887_original.jpg" width="1200" height="186" alt="" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Выбираю плашку для цены.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;div class="fotorama" data-width="600" data-ratio="1.7804154302671"&gt;
&lt;img src="https://pereverstal.by/pictures/361446_600.jpg" width="600" height="337" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/360363_original.jpg" width="922" height="409" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/360620_original.jpg" width="923" height="399" alt="" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Решаю сделать еще один блок с новостями сети, которые не относятся к рекламной игре.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/361892_original.jpg" width="1200" height="895" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;А теперь меняю его местами с блоком про экономию.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/362081_original.jpg" width="1200" height="920" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Вот шапка с блоком „халявы“.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/365482_original.jpg" width="1200" height="750" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;У нас остался блок с игрой „Удача в придачу!“&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/358649_original.jpg" width="1200" height="840" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Беру нормальные фотки, травлю, делаю пачки с деньгами, использую&lt;br /&gt;
элементы нового фирменного стиля для оформления.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/358801_original.jpg" width="1200" height="827" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;И наконец, подвал. Здесь, по-традиции, юридическая инфа о компании.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/362799_original.jpg" width="1200" height="208" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Время перерезать ленточку. Та-даааам!&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/374376_original.jpg" width="1200" height="1605" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;А логотипчик, неплохо-бы сменить.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/374786_original.jpg" width="1200" height="1605" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Пишите комментарии, задавайте вопросы, критикуйте, делайте репосты&lt;br /&gt;
и ставьте лайки. Не будьте равнодушны и вступайте в ряды борцов против&lt;br /&gt;
плохого дизайна!&lt;/p&gt;
&lt;p&gt;UPD&lt;br /&gt;
Нет, предела совершенству. Спасибо комментаторам, утру и трезвому взгляду.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/377744_original.jpg" width="1920" height="2528" alt="" /&gt;
&lt;/div&gt;
</description>
<pubDate>Sat, 24 Nov 2018 18:23:45 +0300</pubDate>
</item>

<item>
<title>Доставка продуктов</title>
<guid isPermaLink="false">27</guid>
<link>https://pereverstal.by/all/dostavka-produktov/</link>
<comments>https://pereverstal.by/all/dostavka-produktov/</comments>
<description>&lt;p&gt;Привет!&lt;/p&gt;
&lt;p&gt;Плохие слоганы повсюду. Спасибо специалистам по рекламе, маркетингу, копирайтингу&lt;br /&gt;
и дебилизму!&lt;/p&gt;
&lt;p&gt;К примеру — «Мы работаем для вас!». Чистейшая ложь. Вы работаете в первую очередь&lt;br /&gt;
для себя, чтобы заработать денег, а потом накупить на них материальных благ, тем самым&lt;br /&gt;
обретя спокойствие и уверенность в завтрашнем дне.&lt;/p&gt;
&lt;p&gt;Слоган одного из банков гласит «Нам важно, что вам важно!». Вранье же! Мне важно,&lt;br /&gt;
чтобы вы, уважаемый банк, дали мне 100 000 долларов кредита на 200 лет под 0%.&lt;br /&gt;
Мне это ох как важно!&lt;/p&gt;
&lt;p&gt;С ложью более менее разобрались. Но существуют еще и бессмысленные слоганы.&lt;br /&gt;
С которых прямо сочится вода. Слоганы бессмысленные настолько, что даже пожелание&lt;br /&gt;
счастья и здоровья начинает обретать какой-то смысл.&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/100757_800.jpg" width="800" height="533" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Ну вот например — «Выбирай удобную жизнь!» Ну охуеть просто! А я-то хотел&lt;br /&gt;
выбрать неудобную. Спасибо реклама! Кстати, а что рекламируем?&lt;br /&gt;
Термобелье? Квартиру рядом с метро? Удобное кресло?&lt;/p&gt;
&lt;p&gt;Ладно, шутки в сторону. У нас тут реклама доставки продуктов от Евроопта.&lt;br /&gt;
Стоит задача — билборд переделать, чтобы с первой секунды было&lt;br /&gt;
понятно о чем все вот это.&lt;/p&gt;
&lt;p&gt;Естественно слоган я выкидываю в помойку. Ему там будет комфортно.&lt;br /&gt;
Чтобы ему там не было скучно выкидываю уродливую рамку.&lt;/p&gt;
&lt;p&gt;И делаю несколько вариантов&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;div class="fotorama" data-width="800" data-ratio="1.5009380863039"&gt;
&lt;img src="https://pereverstal.by/pictures/99140_800.jpg" width="800" height="533" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/99637_800.jpg" width="800" height="533" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/99872_800.jpg" width="800" height="533" alt="" /&gt;
&lt;img src="https://pereverstal.by/pictures/100160_800.jpg" width="800" height="533" alt="" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Можно даже так&lt;/p&gt;
&lt;div class="e2-text-picture"&gt;
&lt;img src="https://pereverstal.by/pictures/100542_800.jpg" width="800" height="533" alt="" /&gt;
&lt;/div&gt;
&lt;p&gt;Просто и понятно.&lt;/p&gt;
&lt;p&gt;Пока-пока.&lt;/p&gt;
</description>
<pubDate>Sat, 24 Nov 2018 18:23:04 +0300</pubDate>
</item>


</channel>
</rss>