В выходные был выложен новый дизайн сайта, со светлой и тёмной темами и 2 вариантами шрифта. В то же время, идёт работа над следующей версией, в которой будут учтены все замечания, прозвучавшие в теме "Новые стили АШ" . Выполняю доработки я (atorn), а основу выполнял Великий Кукурузо и сейчас он закончил исправление критических замечаний в своей версии. У меня - следующая задача - доработать его стили (уже сделано много за 1.5 месяца в свободное время), а также учесть более сложные замечания, прозвучавшие в указанной теме "Новые стили АШ". Среди них - тема про возвращение Георгия (Победоносца) на своё привычное место - в пользу этого было сразу несколько пожеланий.
Мне она виделась наиболее сложной, потому что размер шапки стал 60 пикселей, а высота картинки-гравюры из старого дизайна АШ - 123. Сжать и наклонить - никак нельзя, теряется или искажается смысл.
И место уже занято разными кнопками. Ставить в правый сайдбар тоже не хотелось, потому что оно в верху страницы весьма ценное для ссылок.
Хотел даже объявить конкурс на лучший дизайн шапки, но к концу 2-го дня придумал вот что (скриншоты). Посмотреть и подвигать эту версию пока нельзя, потому что она на тестовом сервере. Но дня через 3 будет можно, когда закончу другие доработки и Алекс выложит её на design.aftershock.news. Поэтому пока - скриншоты и приглашаю к обсуждению.
Может быть, кто-то предложит другое оформление шапки АШ. Нужно достаточно профессиональное дизайнерское решение уровня не хуже, чем бывшее в старом дизайне. Может быть, стоит подправить кое-какие мелочи имеющегося решения - бледность рисунков и другие тонкие настройки. Пока вариант рассматривается предвариательным, но, вероятно, баланс с размещением картинки и элементов угадан.
Для дизайнеров
Почему я пришёл к такому решению. Исходная шапка выполнена в чёрно-белых тонах и представляет сюжет, взятый с ещё более старого дизайна АШ. Слева - карта РФ, сообщающая, что тематика затрагивает Россию, на ней - логотип сайта, а справа - Георгий победоносец, убивающий змея как символ применения "Периметра" или чего-то там ещё по отношению к силам, олицетворяющих в христианстве Дьявола. ) В середине композиции - НПЗ, который легко спутывается с ландшафтом индустриального города. Возможно, что Георгий имеет более глубокую связь с названием сайта, ассоциирующегося с потрясениями после основного катастрофического события, и Георгий, по преданию, совершил своё "чудо" после своей смерти.
Так или иначе, многие посетители сайта прочно ассоциируют каноническое изображение с сайтом и его тематикой и несколько раз из сотен комментариев беспокоились о его исчезновении с привычного места (в шапке справа). Но, как уже говорилось, принятая новая высота шапки не оставляет шансов поместить весь сюжет в неё. Однако, было найдено решение, как на скриншотах, поместить картинку между кнопок, немного заходя в сайдбар. Вероятно, это единственное место для сохранения старого сюжета дизайна.
Но, чтобы улучшить ассоциацию левой части с тематикой сайта (говорить о проблемах экономики и политики мира), я заменил карту РФ на карту мира. возможно, выглядит мелко и нужен чуть больший масштаб. Ещё, нужна была контурная ч/б карта, но, увидев цветную карту с облаками, а в ночном режиме - с освещением городов, я вставил её, хотя для поддержиния цветового решения пришлось сильно снизить насыщенность цвета, т.к. не хотелось полностью от него отказываться.
Не слишком хороша вертикальная граница карты. Возможно, её стоит предельно сгладить до прозрачного, если хотим оставить бледно-синий цвет моря в дневной теме.
В общем, жду оценки и предложений по более профессиональному решению композиции шапки.
Ещё, замечание по лого - его сейчас нет. Красный ореол текста, символизирующий тревожность ожидания, я добавил к простому тексту, но реальный логотип ещё не существует и ждёт своего автора.
Красный скребок, в котором угадываются буквы А и Ш, в будущем станет опальным символом в глазах политтехнологов, так как сейчас его подняли на знамя борьбы за объективность оценки текущих событий .) Возможно, и он успеет видоизмениться в свете ещё не созданного более нового дизайна шапки.
Алекс - думаю, согласится с более качественным дизайном шапки на фоне принятого сейчас. Начнём обсуждать?
Как выглядит шапка в другой теме оформления и с раскрытием меню настроек. (Всё кликабельно до масштаба 1:1.)
Мобильный режим:
Другие обсуждаемые проблемы работы сайта я записал, расставил по приоритетам, и очень многое можно выполнить работами на фронтенде (Javascript) в браузере. Но приоритет первый сейчас - доработка дизайна и выкладывание в лучшем виде, чтобы потом не возращаться (кроме исправления багов).
Комментарии
Это параллельная задача. не связанная с дизайном. У меня исправление уже есть, но в распакованной версии этого редактора. Осталось пропатчить упакованную, протестировать и выложить. Примерно в течение 3 дней.
logo которое клипарт хорошо
шрифт афтершока нет
нужно чтобы с текущим (или предыдущим смотрелось)
Весьма неплохой подход, на мой взгляд. Я бы не двоил надпись сайта, оставил бы в каком-то одном из стилей. В правой части, видимо, останутся 5 кнопок, или ещё можно Гугл-поиск туда засунуть.
Кстати, сразу скажу, почему не Яндекс - он хуже ищет, я месяца 3 назад проверял. Гугл, сделанный на сайте - тоже плохо (на уровне месяца-года), хотя по последним дням нормально. Лучше всего и релевантенее ищет Гугл по сайту через сайт Google. Вторая кнопка рядом на скриншоте - это именно она.
Чисто визуально - неплохой вариант. Сразу решается задача с размещением Георгия и вроде как сохраняется общая стилистика оформления. Но тут же возникает вопрос - а где собственно логотип? Идея использовать в виде логотипа картинку с Георгием - так себе. Георгиев много куда ставят, а афтершоковские "грабли" уникальны и хорошо узнаваемы. Опять же, хорошо различимы при любом разрешении (в виде фавикон, например). Так что если вдруг имеется идея поменять или освежить логотип, то я бы не стал далеко уходить от того что есть сейчас.
с учетом замечаний
Использован шрифт Roboto в начертаниях normal и black, добавлен глобус, но вот эта большая фирменная А сдвинула Георгия вправо. Можно еще попробовать сделать его (Георгия) черным.
А получится совместить ваши наработки с левой частью и этим дизайном ДК внизу в этой теме https://aftershock.news/?q=comment/9059571#comment-9059571 ? Георгий - белый на красном, лого - видимо, тоже. Справа Георгий убирается, остаётся место на значки соцсетей и поиск. Сначала надо спросить Алекса, как ему шапка на красном фоне и белый лого по этой причине. Но, наверное, норм. Ещё 1 человек в личку Алексу обещал выдать свою версию или подумать над ней. Не совсем понятно, какая тогда будет тёмная тема, но это вторичный вопрос.
Честно говоря, с бордовым фоном получилось что-то в буквальном смысле адское :) Я понимаю тональность сайта, алармизм, но не до такой же степени.
меня тоже тянуло на бордо, но сделал более поздний вариант без барды - бордо не катит
О в шрифте логотипа должно быть полностью круглым. никаких овалов или квадратов - нужен шрифт вроде футуры или поинтереснее - робото точно не подходит
два графических значка друг другу мешают - георгия надо вправо в конец хэдера
логотип должен говорить "АФТЕРШОК" а не "ФТЕРШОК" - потому что значок могут не опознать - будут издеваться - уже сто раз так было
большой вопрос что писать под логотипом - есть несколько вариантов.
Я как бы не веб-дизайнер, но к графике имею самое прямое отношение. На днях могу прикинуть свой вариант оформления шапки. Основная проблема в том, что за основу ее дизайна взята узкая полоса, которая вообще не предназначена для размещения картинок. На ней хорошо смотрятся логотипы, иконки и текст. Графика, тем более полноцветная плохо сочетается с такой версткой. Тем не менее можно что-то придумать даже в таком варианте, хотя это и будет попытка совместить ужа с ежом. Единственный вопрос – 60 px по высоте это предел? Хотя бы до 80 увеличить совсем никак? Можно, понятное дело, и в существующий размер все вписать, но небольшое увеличение дало бы больший простор для творчества.
Что касается предложения разместить Георгия на стыке верхней полосы и правого сайдбара, то это, прямо скажем, ни два ни полтора. И стилистически что-то непонятное и как при адаптации верстки к разным разрешениям себя поведет неизвестно. Лучше все-таки попробовать его целиком уместить в блок шапки.
Идея с песцом мне лично понравилась. Как ни крути на АШ Полярный Лис примерно такое же негласное тотемное животное, как например, Скайшип. Но с другой стороны – не вечно же ему резвиться. Так что в виде постоянного элемента он точно не нужен. Другое дело, что иногда он может появляться по праздникам. Например, на Хэллоуин или День Независимости США )) Или по случаю какого-нибудь очередного биржевого обвала...
P.S. Попробовал читать сайт с разным шрифтовым оформлением. Roboto в светлой теме у меня выглядит абсолютно кошмарно. В темной – вполне нормально. Arial хорошо воспринимается в обоих вариантах. Так что как минимум хотелось бы иметь возможность выбора между шрифтами и в будущем.
Да, это - основная проблема, но это сознательное "спортивное" ограничение. Можно больше. Сайт несколько лет жил с высотой шапки примерно в 140. Для практичности - лучше меньше (40-60, как сейчас; 40 - это высота в мобильной версии, последний скриншот. Для дизайна тоже важно, мобильных юзеров много, и, как видите, для мобильников дизайна, считайте, на сейчас вообще нет.).
Шрфтов сейчас всего 2, я тоже заметил бедность выбора и вставил много вариантов. Потом (месяца через 3-4) их надо утрясти, оставив удачные, а пока - поиск. Конечно, можно не искать, а использовать 1 из решений и 2-3 варианта, но хочется попробоавать, и чтобы было удобно выбирать, на скриншотах видите действующую систему выбора шрифтов. Раньше был только Ариал, он откровенно утомлял неразличимостью "эл" и "пе".
Робото сейчас кошмарен, потому что font-weight:300 - лайт шрифт выбран за основной. Если поставите body {font-weight: normal}, бкдет "нормал". Лайт - он для более крупного шрифта удачнее, здесь нужен рабочий шрифт размером 13-14, а это, в частности, Roboto 400, равно normal (я сам не знал про особенность 300, по факту здесь увидел, а в своей версии отлаживал только 400, иначе раньше бы предупредил разработчика о проблеме).
Вёрстку Георгия я уже сделал и проверил на рабочем проекте. Было много пожеланий в теме поднять Георгия в шапку, не устраивало то, что его сейчас видят возле футера. Привычка нескольких лет сказывается.
Заменить на другое - конечно, можно. Я это говорю не как от имени владельца сайта Алекса, а глядя на его политику с обновлениями. Он сейчас не против поставить другое, высказывался в ЛС с разработчиками.
Но понятно, что дизайн нового должен быть не менее сильный, чем прошлый (можно видеть на https://desktop.aftershock.news/ ). И выражать не иные идеи, чем выражал прежний дизайн, или те, которые выражает реальная политика сайта. Тогда пользователи будут морально согласны принять в жертву Георгия (думаю) и с энтузиазмом перейдут на новый. Вот ради этих соображений хочется сделать не хуже.
Песец тут - без Георгия мог быть в тему, но как заметили выше - меняет символику на несовместимую. В первую очередь - это же эвфемизм матов, а маты на сайте запрещены, в том числе в иносказательном виде. Уже по одному этому он отпадает. Может быть, мог быть вдвое меньше, но есть и другие, вероятно, не менее сильные образы, отражающие тематику сайта. Какие - пока не знаю. Чёрный лебедь - отдалённо да, надо сильно обыгрывать. Типа пруд на фоне индустрии с парой таких лебедей в углу. Но это не точно ). Что ещё может символизировать ожидание грядущего мирового кризиса?
Я, честно говоря, не замахивался на какие-то глобальные перемены. Для начала собирался просто предложить свой вариант красивой компоновки имеющихся элементов. Так чтобы и поместилось все и общий стиль оставался узнаваемым. Хотя если есть какие-то ценные идеи по изменению или дополнению смыслового ряда – можно обсудить в процессе. А жертвовать ничем не надо. При правильном подходе место в шапке найдется всем. И Георгию Победоносцу и Большому Песцу (или кто там будет за место него ))
В общем как будет время – сделаю эскиз и скину в личку. А что касается шрифта Roboto, то light однозначно нужно менять на normal. Хотя у меня, например, и с восприятием Ариала нет никаких проблем. Такого, чтобы можно было спутать "эл" и "пе" как-то ни разу не замечал
Небольшое дополнение насчет Ариала: Объективно некоторые сложности с различением "эл" и "пе" в нем конечно имеются. Но дальше все зависит от способа восприятия текста. Люди умеющие бегло читать (а таковых, я думаю среди читателей АШ большинство) воспринимают текст не по буквам а по словам. И для них даже случайная перестановка "л" и "п" местами будет просто незаметна. Настоящие проблемы могут быть у тех для кого русский язык не родной. Ну или у тех кто только учиться читать )) Но это недостаточно веский повод, чтобы отказываться от практичного и проверенного шрифта, там где в первую очередь требуется удобство подачи большого объема информации, а не красота ее оформления.
Я спотыкаюсь редко, но даже пару раз в день это мешает. Отличается на точку, и кернинг скрадывает пробел. В остальном проблем с ним не вижу, он ровный, не Tahoma. Как вариант, есть Segoe UI, но менее ровный по толщине линий. А Roboto 400 исправлен от этих недостатков. Возможно - и другие, но надо подбирать на большом массиве чтения.
Некоторые дизайнеры в статьях сильно не рекомендуют Arial. Вердану-Тахому - ещё сильнее. Ну, с ними понятно.
вот георгий - змея добавить по вкусу
Да, этот Георгий, зеркально повёрнутый и без змея может пойти в правую часть, если там кнопки сильно мешать не будут. Если решение со 120 пикс как на скриншотах, чем-то не устроит. Правда, не очень понятный символ. Ну, часть памятника. Дальше у юзера остаются вопросы: зачем памятник здесь? Что порезан - понятно, шапка узкая, но зачем памятник? Сайт как-то связан именно с ним и местом, на котором он расположен? Не все воспримут его как Георгия. С текущим рисунком - как раз понятно, что отсылка к мифическому персонажу раннего христианства, пришедшему на помощь в нужный момент. (Правда, тут тоже вопрос, пришёл он исаключительно в преданиях христианства и исключительно ради прославления христианства. А прославлять ЧТО он призывается на сайт? И помощь "во славу" кого символизируется? Стандартный ответ - это типичный российский православный символ, это - образ слогана "Россия придёт на помощь в борьбе с силами зла". Не больше, не меньше.)
ок, даю больше информации :)
Хорошо, думаю, увидят заинтересованные дизайнеры, делающие аналогичные решения. asim в том числе.
Мне нравится, но вертикаль на значки бесполезно потрачена. Тогда уж лучше унести их в сайдбар над Гуглом. А Настройки - в шапку. Ссылки личного раздела всё равно занимают вертикаль сайдбара слева и её не жалко.
Песец я думаю излишнее, его и так поминают в каждой второй статье. Георгия нужно вернуть наверх. Ваша идея мне нравится. Идея Poligrafа тоже.
При нажатии кн. "старая версия сайта" открывается не статья в старой версии, а главная.
Я понимаю, шапка, дело важное.
Но все таки на АШ не на шапку смотреть заходят.
Можно как то поправить?
В своей версии я поправил, но она через 3-7 дней.
До того времени, как допилится новая версия, хотелось бы, чтобы старая работала стабильно.
Вот еще несколько мелких косяков.
При переходе по ссылке из старой версии, комент или статья открываются в новой версии.
То же происходит и при переходе по ссылке из почты.
Мое мнение, что следовало бы оставить:
- активные ссылки в профиле (закладки, баны и пр.), страница "Сообщения", выделить цветом. Сейчас для меня (слабое зрение), они почти неразличимы с остальным текстом.
- интервалы в профиле, сейчас растянут до неприличия.
- стр. "сообщения" оставить как было. Там нечего улучшать.
Надеюсь, что учтете. Спасибо.
когда наследие давит и мешает развиваться, ему нужно говорить спасибо и идти дальше без него
Мне верхний вариант нравится больше. Ещё логотип решить с идеями Poligraf выше, правую освободить на функции с кнопками. Решающий плюс, что он свежий и уладывается в 60. (Нужен ещё упрощённый вариант на 40 для мобилок). Но уже из этого можно стартовать. Я за; ещё, если согласится Алекс.
ты за потому что меньше возиться :)
но иногда лучше таки повозиться :) второй вариант боле графичен и сохраняет исконного георгия.
Нет, в данном случае - переделывать вёрстку всё равно придётся, но это несложно. Главное - что маленькая шапка не потребует потом дополнительно её скрывать через юзерстили, да и на мобильниках будет занимать мало места. А так - да, можно сделать высокую красивую, но будет описанный недостаток.
40 px для мобильников - вообще удобно из-за того, что системная шапка у Моб. Хрома занимает такую же высоту. И при прокрутке назад вылезают сверху примерно одинаковые 2 шапки, не сильно заслоняя место (это в мобильном режиме на мобильнике).
Может быть, переместить Георгия на белое пространство у левого меню "Кладовая - Главная - Пульс"? И сделать его бледнее / полупрозрачным / чуть наметить контуры?
Еще вариант - поменять Георгия на более узкого, примерно такого:
Поиск Гугл поместить над драконьим хвостом :)
я тут вижу как весь из себя добрый георгий кормит с копья благодарного змея.
Это в футер можно заложить.)
И да, на конец копья нужно курицу, а то не очень понятно, что он там делает.
И вариант в негативе:
да, так неплохо.
только мы так исподволь выкинули родное лого. георгий - это не лого, по крайней мере на данный момент.
место георгия было справа всегда, его туда по идее и надо. а родное лого нигде не представлено.
с ним есть небольшие бока - оно центрально симметрично и ему нужен из-за этого собственный объём вокруг, поэтому внутри текстового лого оно никак - только рядом на некотором расстоянии.
Родное (новое) лого начинает путаться с аватаркой Алекса, и я уже успел заметить, что это мешает ). Так что я только "за", чтобы его убрать или изменить цвет (граблей-скребка) на белый. А в этом первом варианте - вообще отличный уход от граблей. Мне вообще нравятся все решения Полиграфа. А уж если из них выбрать лучшее...
> только рядом на некотором расстоянии.
Меня вполне устраивает идея изменения Георгия и его места [в истории]. Не знаю, как других. Asim тоже представил малого Георгия посередине нового индустриального пейзажа, только они сегодня почему-то только в личке общаются. Попросил их перейти в общую тему или лучше - создать новую, чтобы поднять обсуждение среди топиков.
в любом случае всё что я вижу лучше чем есть. если ворочаться в 60-80 пикселях - сложно сделать намного лучше. остаётся только избежать явных ошибок, остальное приемлемо.
я за коренную переделку с переносом меню в хедер. да, при дизайне меньше 768 надо прыгать по разным дивам а не респонсить. просто мне важнее реализовать идею а не сохранить подход. если боремся за 60-80 мне как-бы всё равно.
если будет что-то явно не стыковаться - я скажу. пока все не страшно, а местами даже неплохо. продолжайте :)
С помощью новых настроек сайта я могу легко прикрутить основу для голосовалки о том, сколько пользователей выбрали ту или иную шапку. Правда, придётся заверстать их все. И в настройках поставить пункт выбора шапки. Чтобы подвигнуть тех, кто не кликнул - выбрать через неделю другую шапку за умолчательную и попросить тех, кому не нрвится, вернуться к старому варианту.
И ещё к этой системе нужно собирать статистику на сервере, иначе незачем. И сервер покажет, какой процент сознательно выбрал какой вариант. Старого быть не должно, т.к. по привычке очень многие останутся на старом. Затем, можно оставить (через месяц) самый популярный дизайн или пару.
Это всё чисто теория, есть, действительно дела поважнее, чем выбор шапки ,но если бы это было единственной оставшейся крупной проблемой, то предложил бы так ).
мне сверстать часа 3-4 на всё с порезкой и стилями. если нужно - не вопрос.
Верстать я и сам любое могу, тут больше вопрос, что длительное время на не столь важное дело (по сравнению с проблемой сохранения отвергнутых сервером сообщений, например) будут тратиться силы не одного человека (фронт и сервер статистики), плюс ещё посетителей статей развлекать будет каждый дизайнер стремиться и тоже тратить своё время.
Так красиво.
Poligraf : а что, если Георгия на этом скриншоте перенести вправо от надписи? Потому что в мобильной версии надо будет вставлять кнопку меню и смещать всё вправо, и тогда хочется Георгия перенести направо (от надписи ,а не вообще). Пейзаж у Asim получился хороший, но пока он сам не выложит, не публикую - мало ли по каким соображениям копирайта он показывает вариант только в личке (мне и Алексу).
Ещё, мне показалась интересной идея бордового фона в тональности, как у ДК. Она алармистски не выглядит, а самое то. А люди по центру не пройдут - Алекс за индустриальный пейзаж. Причём в центр его Asim поместил Георгия в круге.
Добавил слева функционал выбора цветовой темы: день/ночь/Апокалипсис
Тем может быть больше, причём не в сторону причудливых, а в сторону практичных - серый фон, отбивки сайдбаров, разные палитры. Поэтому тремя кнопками - не ограничиться. На моём скриншоте в статье показаны 4 темы в настройках.
Сейчас вытащу результаты (часть) в новую статью и там добавлю вариант из лички от asim. Если к концу пятницы успеем установиться на окончательном итоге, то к субботе выложу всю вёрстку рабочего сайта с новой шапкой на обсуждение. А то он нарисовал, но между вами нет взаимодействия идей, а результат должен нарисовать кто-то один, и пропадут разные наработки. Мне вот нравятся - бордовый фон от ДК, ваш логотип и индустриальный город от asim.
Продолжение в "Техническое: (2) Каким будет завтра дизайн для АШ?".
Страницы