{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Переверстал, заметки с тегом: сайт", "home_page_url": "https:\/\/pereverstal.by\/tags\/sayt\/", "feed_url": "https:\/\/pereverstal.by\/tags\/sayt\/json\/", "icon": "https:\/\/pereverstal.by\/user\/userpic@2x.jpg", "author": { "name": "Автор блога", "url": "https:\/\/pereverstal.by\/", "avatar": "https:\/\/pereverstal.by\/user\/userpic@2x.jpg" }, "items": [ { "id": "106", "url": "https:\/\/pereverstal.by\/all\/forma-kalkulyator\/", "title": "Форма-калькулятор", "content_html": "

Иногда бывает зависаешь над, казалось бы,
\nне сложной задачей. Долго сидишь, переставляешь объекты с место
\nна место, а хорошего решения нет и в помине.<\/p>\n

Потом приходит озарение и ты такой — вот оно!
\nНаконец-то нашел!<\/p>\n

Потом приходит утро, ты смотришь на свое «Наконец-то нашел»
\nи понимаешь, что это, увы, плохое решение.<\/p>\n

Плохой дизайнер в таких случаях отчаивается,
\nхороший дизайнер рассматривает эту ситуацию как возможность
\nнайти другие подходы к решению задачи, еще раз пересмотреть
\nвводные данные и попробовать снова найти нужное решение.<\/p>\n

Хочу немного приоткрыть для вас дверь своей дизайн-кухни
\nи показать эпизод работы над одним сайтом.<\/p>\n

\n\"\"\n<\/div>\n

Первое решение, это то, которое мне казалось лучшим в мире.
\nОднако утром я понял, что карточки занимают неоправданно много места
\nпо высоте + три кнопки и две формы это же просто бред.<\/p>\n

Второе решение оказалось более удачным — карточки стали занимать меньше
\nместа, вместо трех кнопок стала одна. Клиент остался доволен. Я доволен.
\nВсе довольны.<\/p>\n", "date_published": "2020-03-14T15:24:04+03:00", "date_modified": "2020-03-14T15:22:47+03:00", "image": "https:\/\/pereverstal.by\/pictures\/Forma_calculator_7.jpg", "_date_published_rfc2822": "Sat, 14 Mar 2020 15:24:04 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "106", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/pereverstal.by\/pictures\/Forma_calculator_7.jpg" ] } }, { "id": "69", "url": "https:\/\/pereverstal.by\/all\/bolshaya-pereverstka-evroopta\/", "title": "Большая переверстка Евроопта", "content_html": "

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

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

\n\"\"\n<\/div>\n

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

Ощущение, что сайт сейчас кааак...<\/p>\n

\n\"\"\n<\/div>\n

Начнем разбор полетов.<\/p>\n

\n\"\"\n<\/div>\n

1)<\/h2>\n

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

2)<\/h2>\n
\n\"\"\n<\/div>\n

Когда в последний раз вы звонили по такому телефонному аппарату?<\/p>\n

3)<\/h2>\n

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

4)<\/h2>\n

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

\n\"\"\n<\/div>\n

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

\n\"\"\n<\/div>\n

Причем баннер просто мега-уродливый.<\/p>\n

\n\"\"\n<\/div>\n

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

\n\"\"\n<\/div>\n

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

\n\"\"\n<\/div>\n

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

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

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

Задачи передо мной стоят следующие:
\n1) Убрать нахрен всю анимацию.
\n2) Убрать ненужное дублирование — снизить плотность информации, сохранив главное.
\n3) Переделать модуль игры „Удача в придачу!“
\n4) Изменить структуру ссылок, меню — разбить на группы по назначению.
\n5) Привести все к единому стилю.
\n6) Получить на выходе красивую, понятную главную страницу для крупной сети ритейла.<\/p>\n

И начну я с логотипов.<\/p>\n

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

\n\"\"\n<\/div>\n

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

\n
\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Желтый вариант больше не вариант. Оставляю красный и синий.<\/p>\n

\n\"\"\n<\/div>\n

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

\n
\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Фу.<\/p>\n

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

\n\"\"\n<\/div>\n

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

\n\"\"\n<\/div>\n

Кручу, верчу.<\/p>\n

\n\"\"\n<\/div>\n

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

\n
\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Готово.<\/p>\n

\n\"\"\n<\/div>\n

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

\n\"\"\n<\/div>\n

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

\n
\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Параллельно шла примерка нового фирменного стиля удачи.<\/p>\n

\n\"\"\n<\/div>\n

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

\n\"\"\n<\/div>\n

Начну с шапки.<\/p>\n

\n
\n\"\"\n\"\"\n<\/div>\n<\/div>\n

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

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

\n\"\"\n<\/div>\n

Вроде ровно.<\/p>\n

\n
\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Далее блок с „халявой“ и слайдер (тоже с „халявой“).<\/p>\n

Эскизный вариант.<\/p>\n

\n\"\"\n<\/div>\n
\n\"\"\n<\/div>\n
\n
\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Выбираю плашку для цены.<\/p>\n

\n
\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

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

\n\"\"\n<\/div>\n

А теперь меняю его местами с блоком про экономию.<\/p>\n

\n\"\"\n<\/div>\n

Вот шапка с блоком „халявы“.<\/p>\n

\n\"\"\n<\/div>\n

У нас остался блок с игрой „Удача в придачу!“<\/p>\n

\n\"\"\n<\/div>\n

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

\n\"\"\n<\/div>\n

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

\n\"\"\n<\/div>\n

Время перерезать ленточку. Та-даааам!<\/p>\n

\n\"\"\n<\/div>\n

А логотипчик, неплохо-бы сменить.<\/p>\n

\n\"\"\n<\/div>\n

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

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

\n\"\"\n<\/div>\n", "date_published": "2018-11-24T18:23:45+03:00", "date_modified": "2018-11-10T00:09:34+03:00", "image": "https:\/\/pereverstal.by\/pictures\/377744_1000.jpg", "_date_published_rfc2822": "Sat, 24 Nov 2018 18:23:45 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "69", "_e2_data": { "is_favourite": false, "links_required": [ "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js" ], "og_images": [ "https:\/\/pereverstal.by\/pictures\/377744_1000.jpg", "https:\/\/pereverstal.by\/pictures\/375383_original.jpg", "https:\/\/pereverstal.by\/pictures\/367943_800.png", "https:\/\/pereverstal.by\/pictures\/376120_original.jpg", "https:\/\/pereverstal.by\/pictures\/377017_original.jpg", "https:\/\/pereverstal.by\/pictures\/377407_original.jpg", "https:\/\/pereverstal.by\/pictures\/368812_original.jpg", "https:\/\/pereverstal.by\/pictures\/369733_900.jpg", "https:\/\/pereverstal.by\/pictures\/370581_900.jpg", "https:\/\/pereverstal.by\/pictures\/370346_900.jpg", "https:\/\/pereverstal.by\/pictures\/343896_800.jpg", "https:\/\/pereverstal.by\/pictures\/345051_800.jpg", "https:\/\/pereverstal.by\/pictures\/345146_800.jpg", "https:\/\/pereverstal.by\/pictures\/370705_900.jpg", "https:\/\/pereverstal.by\/pictures\/349129_600.jpg", "https:\/\/pereverstal.by\/pictures\/349420_800.png", "https:\/\/pereverstal.by\/pictures\/346561_800.jpg", "https:\/\/pereverstal.by\/pictures\/371793_600.jpg", "https:\/\/pereverstal.by\/pictures\/349584_800.jpg", "https:\/\/pereverstal.by\/pictures\/349931_800.jpg", "https:\/\/pereverstal.by\/pictures\/350098_800.jpg", "https:\/\/pereverstal.by\/pictures\/350343_800.jpg", "https:\/\/pereverstal.by\/pictures\/367538_800.jpg", "https:\/\/pereverstal.by\/pictures\/357000_original.jpg", "https:\/\/pereverstal.by\/pictures\/357194_original.jpg", "https:\/\/pereverstal.by\/pictures\/357436_original.jpg", "https:\/\/pereverstal.by\/pictures\/357636_original.jpg", "https:\/\/pereverstal.by\/pictures\/358014_original.jpg", "https:\/\/pereverstal.by\/pictures\/358359_original.jpg", "https:\/\/pereverstal.by\/pictures\/364422_original.jpg", "https:\/\/pereverstal.by\/pictures\/364650_original.jpg", "https:\/\/pereverstal.by\/pictures\/374089_original.jpg", "https:\/\/pereverstal.by\/pictures\/372849_original.jpg", "https:\/\/pereverstal.by\/pictures\/373971_original.jpg", "https:\/\/pereverstal.by\/pictures\/359381_original.jpg", "https:\/\/pereverstal.by\/pictures\/364817_original.jpg", "https:\/\/pereverstal.by\/pictures\/359941_original.jpg", "https:\/\/pereverstal.by\/pictures\/359887_original.jpg", "https:\/\/pereverstal.by\/pictures\/361446_600.jpg", "https:\/\/pereverstal.by\/pictures\/360363_original.jpg", "https:\/\/pereverstal.by\/pictures\/360620_original.jpg", "https:\/\/pereverstal.by\/pictures\/361892_original.jpg", "https:\/\/pereverstal.by\/pictures\/362081_original.jpg", "https:\/\/pereverstal.by\/pictures\/365482_original.jpg", "https:\/\/pereverstal.by\/pictures\/358649_original.jpg", "https:\/\/pereverstal.by\/pictures\/358801_original.jpg", "https:\/\/pereverstal.by\/pictures\/362799_original.jpg", "https:\/\/pereverstal.by\/pictures\/374376_original.jpg", "https:\/\/pereverstal.by\/pictures\/374786_original.jpg", "https:\/\/pereverstal.by\/pictures\/377744_original.jpg" ] } } ], "_e2_version": 3254, "_e2_ua_string": "E2 (v3254; Aegea)" }