В конце августа был брошен клич: дизайнеры, давайте спасём Георгия в шапке сайта, ведь это главный символ современной непреходящей эпохи как оружие возмездия на толстеющего и пожирающего людские ресурсы Змия, а тут он скатился почти до плинтуса - футера сайта. Многие осуждающе качали головами и говорили - негоже, негоже так поступать с нашим символом. И дизайнеры со стилусами наперевес - появились.
Помимо этого, проведено много других работ по доработке дизайна, и вы можете посмотреть на новую версию по адресу design.aftershock.news, в "шапке" сайта (верхней панели), которая окончательно была спроектирована руками камрада дизайнера asim, нашли отражение обсуждавшиеся идеи, в развитии которых принимали активное участие Poligraf, ДК.
Хотите принять участие в доводке проекта до релиза (до момента, когда проект появится на домене aftershock.news) - просто зайдите на design.aftershock.news и начните пользоваться, как обычным Афтершоком. О замеченных багах просьба сообщать в комментарии к этой статье. Их останется меньше к моменту релиза.
Под катом - детали того, что сделано, а что планируется сделать позже, чтобы сайт стал ещё удобнее.
В конце июля уже было обновление сайта, основным автором и исполнителем которого был давний участник сайта Великий Кукурузо, веб-разработчик по специальности. Он сделал замену устаревших стилей CSS для оформления, ввёл 2 варианта цветового оформления темы сайта - светлую и тёмную, написал и использовал скрипты (Javascript) для поддержки мобильных телефонов. За последние годы существования сайта это - большой шаг вперёд, сделанный всего за 2 месяца. Перед этим у него была известная разработка юзерстилей сайта с тёмным оформлением (стили CSS, размещаемые не на сайте, а в браузерном расширении), что помогло сделать эту работу.
В то же время, за такой короткий период нельзя было решить многочисленные и сложные задачи сайта, часть которых остались нерешёнными и сейчас. Я принимал участие в разработке той первой версии в основном как тестировщик предварительных результатов. По окончании разработки в июле мы решили развить успех и продолжить внедрять улучшения и исправления на сайте. Кроме технических доработок, была задача оформить дизайн, прежде всего, верхней части сайта, "шапки", по которой встречают содержание новые посетители.
В статье про шапку, Георгия и дизайн Алекс выбрал камрада asim как исполнителя дизайна верхней части. Остальная часть, кроме технических доработок, была поправлена моим (atorn) скромным вкладом, хотя профессионально дизайном я никогда не занимался, и часть советов по оформлению я получил от asim, а строгую и неподкупную приёмку осуществлял Алекс. Все участники работали на добровольной основе в свободное время, поэтому работа не была столь быстрой, как это бы делали нанятые профессионалы. Интерес у каждого был - сделать посещаемый нами сайт таким удобным, как это представлялось в наших мечтах, юзер-стилях и дизайн-макетах.
Итак, есть некоторые доработки сайта за прошедшие 3 месяца, которые опубликованы для тестирования на design.aftershock.news и через какие-то дни или недели, если не будет критических замечаний, появятся на рабочем сайте aftershock.news.
Есть и достаточно продолжительные планы на 2-4 месяца, чтобы в этом же неспешном режиме расправиться с остальными известными недостатками сайта. По ним я планировал к релизу новой версии сделать отдельную статью, чтобы потом на неё ссылаться и там собирать отзывы и предложения. Но кое-что упомяну и здесь, чтобы показать, что озвученные ранее проблемы не забыты и в планах сохраняются.
Какие новые функции и достижения сделаны в этой доработке?
Есть длинный и скучный рабочий документ, где, в основном, перечислены эти функции и достижения. Он - для будущих разработчиков, поэтому всё описано в суховатом насыщенном стиле. Чтобы было интереснее читать, вытащу из него самое значительное - в текст, а остальное - под спойлер.
-
Зум (увеличение масштаба) страницы - особенно полезен для мобильных устройств. В новых мобильных браузерах обычно уже есть 2 автоматических режима просмотра страниц: мобильный режим с искусственно уменьшенной шириной окна в 4-5 раз, чтобы шрифт был читаемым с экрана, и "десктопный режим", ещё называемый в настройках браузера, "как на ПК". Там шрифт мелкий - вот для этих целей используется "Зум", чтобы стилем CSS zoom увеличить масштаб от 100% до 280%. (Браузер Firefox этой функции не имеет.)
-
Тема оформления - основное, с чего началась работа по настройкам. Есть 2 основные темы: светлая и тёмная, названные как "День" и "Ночь". Одна из них выбирается и по настройке "ОС" - в соответствии с системными настройками операционной системы ПК или смартфона.
-
Кроме названных 3 основных настроек для экспериментов, дальнейшей доработки и по пожеланиям пользователей иметь менее контрастные темы, созданы (для начала) также темы "Рассвет", "Песок", "Море".
-
Второе основное, для чего были задуманы настройки - выбор шрифта. На самом деле, достаточно одного шрифта или максимум 2-3, но для интереса добавлены ещё ряд шрифтов разного рода (рубленые, с засечками, моноширинные), которые можно попробовать для чтения. Всего - 11 вариантов интересных и читабельных шрифтов. Часть из них (7) - загружается с сервера (веб-шрифты), поэтому одинаково будут выглядеть на разных устройствах. Остальные - подбираются на локальных ПК из имеющихся из нескольких вариантов (конкретный приоритет выбора легко можно увидеть в DevTools браузера, но это - скорее, для интересующихся темой и специалистов, а для всех - достаточно просто названия и того, как будут выглядеть тексты со шрифтом этого названия.
Исторически оставлен привычный Arial, но более качественно выполнен Roboto (веб-шрифт), он используется для сайта по умолчанию.
-
Размер шрифта - кроме "Зума", масштаб текстов изменяется размером шрифта. Полезно владельцам крупных или мелких мониторов. Картинки и размеры колонок этой настройкой не меняются, поэтому результат может оказаться более качественным.
- Детальность настроек. 3 градации,. Чтобы новым пользователям в настройках не вываливать сразу десятки пунктов, подробность разделена на 3 градации: базовые настройки, расширенные и "для экспертов". В последней добавляется небольшое число тестовых и экспериментальных функций. Некоторые даже не доработаны, но нужны для тестирования на телефонах. Поэтому спрятаны туда. Можно раскрыть все и познакомиться с подсказками, которые появляются в списке по наведению мыши.
Есть и такие экэотические (были просьбы сделать), как скрытие шапки сайта. То есть, красота оформления, на которую мы лишний месяц потратили, некоторым пользователям не нужна, они хотят голую правду, информацию из статей, без Георгия в голове. И они её получат, в таком урезанном и извращённом виде.
Ознакомившись с тем, что хорошего можно настроить под себя, вы затем один раз настраиваете браузер, и какое-то время настройки будут не нужны - браузер их запомнит. Если установили новую ОС или новый браузер - придётся снова один раз что-то настроить (или импортировать из настроенного) и пользоваться.
Если нужно скопировать настройки в разные браузеры, в настройках есть функция экспорта-импорта. Сначала их экспортируют (в текст), получают примерно в таком виде:
{"_d":"Fri Oct 23 2020 10:37:34 GMT+0300 (Москва, стандартное время)", "themeLastLight": "light", "themeLastDark": "sea", "font": "Segoe", "settDetail": "expert", "toTop": "no", "hideReformal": "hide"}
, а в другой браузер - импортируют. Через секунду они уже применяются к странице и всем вкладкам сайта.
Другие настройки и функции (под спойлером)
Что ещё не сделано и планируется в следующих доработках?
- В редакторе - в поле ввода комментариев и статей - ещё не исправлена "багофича" от разработчиков редактора, про которую они уверяют пользователей, что не показывать нативное контекстное меню по клику правой кнопки мыши - это хорошо. У них даже плагина нет, который это отменяет, придётся делать патч.
- попробуем сделать так, чтобы ответ на комментарий не требовал вызова промежуточной страницы без текста статьи.
- будет настройка, включающая "более воздушный" режим показа, когда между колонками - больше пустого пространства.
- поборемся с багами несохранения частично набранного текста статьи.
- могут появиться режимы (по настройкам) более компактного отображения частей сайта - малые аватары, компактное упоминание подписей администрации, сжатый дизайн комментариев (меньше пустоты вокруг).
* прямая связь с астралом - не, это уже есть* темы оформления "Розовый пони" и "Хакерская консоль"
Задачи для доработоу черпаются из предложений, которые пишут пользователи в комментариях к статьям на АШ на технческие темы оформления сайта (как эта). Полный список задач и планов их выполнения будет опубликован в отдельной статье.
По запуску функций в экзотических средах типа WinMobile
Бывают запросы и на такие работы - в основном - исправить баг, чтобы на каком-то старом устройстве это вообще заработало. Владельцам таких устройств при появлении проблем - просьба связаться со мной напрямую по ЛС или для начала - здесь в комментарии. Наличие у вас такого устройства для тестирования может помочь за несколько шагов решить какую-нибудь проблему (читал, что такая была с новым дизайном и старым устройством в каком-то месте интерфейса).
Просим принять участие в тестировании и использовании сайта на адресе
design.aftershock.news,
чтобы к моменту релиза на нём осталось меньше недоработок! И, может быть, возникнут другие идеи по новым функциям или особые пожелания.
Комментарии
Зуум 70, шрифт -1
Мелковато... Хотя я и в очках.
Для сравнения зуум норм, шрифт средний (как в старом дизайне)
Так нормально, но в экран не лезет.
В темах все нормально.
Есть предложение использовать этот дизайн для "пульса". Там как раз "максимум информации пиксель".
Свайп работает. В смысле что когда свайпаешь "спрятать", другая панель не вылазит.
Но все равно со скайпом плохо. Иногда пролистывание снизу вверх воспринимается как свайп сбоку. Причем что фактически по центру экрана. Зона начала бокового с свайпа должна быть с соответствующего края экрана, а не в любом месте экрана.
Шапка все равно оранжевая. Да - шапка самого браузера, но в старом дизайне такого нет.
Спасибо за работу.
И сделайте, плиз, что нибудь с окошком вставки картинок. Кошмар какой-то.
Я Алексу ЕМНИП на прошлой неделе за окошко вставки картинок уже писал. Как раньше не работает - надо до вставки
сразу уменьшать высоту картинки
Спасибо.
Масштабировать я тоже приспособился.
Но честь по чести такого гимора я со времен Синклера не припомню.
Да я тоже приспособился. Кликаю по обрезку рисунка, вставляю по ОК - опосля в редакторе уже полный вид, который уже масштабирую за края мышью.
С окошком вставки в новом дизайне всё в порядке - проверьте.
(Если не считать того, что оно имеется, а его быть не должно в приличных домах Лондона.)
Проверил - с окошком вставки в новом дизайне всё в порядке.
чтобы увеличить масштаб от 100% до 280%. (Браузер Firefox этой функции не имеет.)
Це не так! Firefox позволяет масштабировать от 30% до 300%. Масштабирование есть в Персонализация (правый клик мышом на свободном месте панели) - его надо перетянуть на панель. Вот как у меня
Клик по масштабу (между - и +) возвращает 100%
Да просто можно Ctrl + для увеличения ио Ctrl - для уменьшения, либо Ctrl 0 для 100%.
Да, но тут - речь о CSS-свойстве zoom, чтобы менять масштаб без настроек (и главное, без жестов пальцами на мобильниках). Оно в Fifefox не поддерживается, а аналоги transform:scale - не подходят для этой задачи.
Не слишком ли мелкий шрифт по умолчанию?
Я делаю масштаб 133%. Если мельче - глаза напрягаться начинают. Возможно, не я один такой. Тут какой-то опрос хорошо бы провести, кому как более комфортно.
В браузере стандарт - 15 (12pt), у нас 14. Хотя на других сайтах с текстами - 13. Так что близко к норме. Но для этого я поставил кастомизацию шрифта от -3 до +3. Ставите +3 - и будет у вас 17px без масштабирования. Это +21% получается. Ещё есть настройка "Зум" на новом дизайне.
Годный срач. Ахтунг - пахнет трольчатиной! Автор, нет ли в обсуждении упырей? Сим повелеваю - внести запись в реестр самых обсуждаемых за день.
глобус из под логотипа убрать и норм. лого никогда не альтерится другими графическими элементами. остальное пойдёт.
Наконец-то! А то Алекс всё печётся о времени пользователя, а самое времязатратное и неудобное почему-то так и остаётся. Чтобы нормально ответить со ссылками на статью приходится дублировать окошко и постоянно лазить подсматривать статью в другом окне, чтобы копировать оттуда фрагменты и смотреть цифры.
Ещё: Сделайте все иконки и значки в высоком разрешении! Пожалуйста! Их не так много, надоело уже на эту мазню смотреть, как будто сайт 20-го века. Вот я вырезал и увеличил в 2 раза, на мониторе 4к посмотрите какой текст красивый, и какие ужасные значки:
> ответ на комментарий
--Но я уже наткнулся на проблемы перемещения редактора, поэтому не знаю, как хорошо это удастся. Редактор тяжёлый - генерировать его на месте под комментом не менее накладно (3-4 сек.), чем вызвать новую страницу. Иначе бы до меня эту задачу бы давно решили.
> значки в высоком разрешении
--делаю постепенно. В тулбаре редактора, кстати, тоже нужно, тоже отдельная плановая задача. Но смайлики останутся в низком. В высоком их просто нет. Или надо менять коллекции все без исключения.
Редактор: подсмотрено на другом сайте (вроде topwar.ru, не помню).Когда нажимаем "ответить", открывается упрощённый textbox вообще без редактора, 90% людей пушут просто текст ответа. И есть кнопка "загрузить полный редактор", если кому надо, они 3 секунды вполне подождут. НО ещё раз: 3 секунды это медленновато, здесь всё быстрее, несмотря на то что я в Бразилии. Интернет 120мб, процессор i7-9700, наверное поэтому, редактор не медленнее остального грузится.
Смайлики понятно, они импортные, но остальные картинки иконки которые наши - это надо бы. Потом надо разрешить загружать аватарки в высоком разрешении. Почему? Я проверил и выяснил следующее:
Допустим нам можно аватарку 100х100 пикселей. А я смотрю страницу в 150%. То есть картинка увеличена на 50%, так? Она как бы стала 150х150 пикселей. Так вот, если картинка была чётко 100х100, она растянется и замылится. Но если же она была 200х200, то браузер сожмёт её уже до 150х150 пикселей, то есть он не даёт пропасть лишним 50 пикселям, картинка становится чётче! Я это проверим эмпирическим методом, это работает. Лучше если все картинки будут иметь дополнительное разрешение, т.к. даже пользователи 1920х1080 добавляют зум до 125-133%, а у кого 4к могут и того больше (хотя у меня 133%).
(кстати, весь этот ответ я написал простым текстом, редактор мне не понадобился.)
На многих сайтах есть простые самописные редакторы, потому что этот медленный, альтернативный TinyMCE - тоже, а CKEditor 5 не подходит по идеологии работы с текстом без исходного HTML. Однако, они интегрированы с Drupal, что подкупает сайтоделателей.
Вставка редактора в тежиме простого текста - хорошая мысль, так можно обойти ошибку от перемещения и быстрее раскрыть. Попробую, когда доберусь до этой фичи.
Всем братский салам!
Григорий и прочий дизайн - это хорошо.
Ну, кто о чём, а вшивый о бане. А я опять про нечитаемость сайтом кириллицы. В новом дизайне тоже. В дискуссии в статье "Развитие отечественной фантастики (и спад интереса к западной) за последнее десятилетие" в посте https://design.aftershock.news/?q=comment/9294877#comment-9294877 была дана ссылка
Но сайт полностью её не увидел (кириллицу обрезал) и вместо этого
330 Леново, 10 Винда, Опера, ежели чЁ.
1. Обрезание кириллических ссылок - этим ещё не занимались. Вот возьмёмся исправлять все баги редактора с контекстным меню недели через 2 - сделаем и это (нужен плагин в редактор).
2. В фразе "страница не найдена" - у вас что-то непонятное на месте ида юзера стоит. Троеточие? Должно быть число. Не могли бы мне передать текст ссылки, которая привела к этой ошибке?
У меня при проверке на Опере, как и на других - всё в порядке. Но имеет значение, с какой страницы вы попытались вызвать комментарии. Этот ид юзера берётся из не очень очевидного места страницы, и где-то на сайте, видно, не срабатывает или неправилен.
У меня за мои комментари то же: Захожу на https://design.aftershock.news/
Выбираю в Личный кабинет
Мои разделы
Мои статьи
Мои черновики
Моя учетная запись
Мои комментарии
Ответ на https://design.aftershock.news/?q=user/_/comments (в старом это https://aftershock.news/?q=user/3994/comments)
Страница не найдена Запрашиваемая страница "/?q=user/_/comments" не найдена.
Числа нет. Вместо моего user/3994/comments стоит user/_/comments
Моя учетная запись открывается нормально
Совершенно вот именно. "Работает" (?) точно так же.
Свят Егорий во броне восседает на коне.
Держит в руце копие, тычет змия в жопие.
(Или: Георгий Победоносец берет у змия мазок на COVID-19)
По графике высказался теперь по функционалу.
тем кто хочет улучшить сайт нужно идти по двум направлениям: читатель и писатель.
1. Читатель.
а) Сайт работает с текстом. Фокус на удобстве чтения текста
б) общий принцип работы сайта, его уникальность - формирования «электронной газеты» под себя.
все улучшения и Настройки должны быть удобны и доступны для индивидуальной Настройки:
- расположения блоков
- выделение, пометки комментов, статей - формирование личной базы информации и круга общения
- сортировать, помечать, сохранять информацию. И иметь к ней быстрый доступ
- инструменты для комментов. Сортировка, структурирование.
Писатель
- формирование среды читателей. Банить разбанить выделять скрывать комменты
- работа со статьями. Сортировка, структурирование, поиск, выбор ссылки на собственную статью из базы.
- мониторинг «»успеха». Рейтинг, анализ своих статей по комментам, просмотрам, рейтингам.
По сути весь инструментарий на сайте есть. Но он сгруппирован как удобно программистам а не пользователям.
Условно - ты зайди в кабинет потом восьмая закладка потом прокрути, потом руками впиши сюда и будет счастье.
Юзабилити на основе предложенной структуры хочется. А не картинки прорисовывать. При этом сохраняя функционал проверенный временем и обсуждённый многократно.
можно создать свою структуру и на основе неё.
Афтершок разросся по объёму. Нужна удобная панель управления морем информации.
это будет шагом вперёд.
Картинки прорисовывать тоже надо, как и шрифты? и типографику. Это основа, и в ней ещё не всё хорошо.
А описанные функции верхнего уровня - с ними серьёзно сложнее. Сайт построен на движке с идеями возрастом лет 10-15 давности. Удобную работу с данными тогда (и сейчас) понимали в программистском и "экселевском" плане. Умеет сайт предоставить доступ к данным админу, как Экселе - это предел мечтаний, всё на этом фронте проблем нет (думали), пойдём дальше дырки закрывать и функции пилить.
И сейчас этот Друпал дорос до 9-й версии, у нас - 7-я, и не сказать ,что в 9-й сильно всё лучше. Идеология осталась, там где "эксель" есть, дальше уже не пилят, есть ряд более критических задач. В других сайтовых CMS - похожая картина.
Браузер "samsung internet". В ленте на странице design.aftershock.news не видны аватары авторов и приложенные картинки.
Сейчас тоже не видны? (Ничего не делал, но у всех браузеров такой проблемы нет, а этот не имею. Может, был случайный сбой?)
К сожалению, нет. Проблема не исчезла.
Android 6. Samsung internet 12.1.4.3
Блокировщик рекламы отключал, не помогает.
Видимо, из-за старости браузера на этом телефоне. И проверить не на чем.
Зашёл сейчас на Самсунге с Андроид 4.1 в Хром - форматирование ленты очень плохое, но аватары и тизеры отображаются.
Без наличия такого телефона отладить, к сожалению, не смогу. Попробуйте использовать другой браузер, может помочь (на старых Хромах примерно до 5-6 Андроида не будут работать свайпы).
Версия браузера самая свежая - обновлялся 29-го сентября, кажется. В маркете сейчас именно эта версия. Свайпы работают.
В своё время выбрал его потому, что надоели мозиллы, хромые, оперы.
При просмотре страниц, постоянно выскакивает правая панель, хотя веду по середине экрана, так понимаю одно неловкое движение влево выдерживает её. На автомате, начинаю её "засовывать" обратно движением пальца вправо, выскакивает левая панель. На мой взгляд очень чувствительны и если бы сделать границы "зацепа" этих панелей, шириной 1 см от края экрана, было бы удобнее. На главной правый край за границей экрана. Нокия 6 Андроид ХЗ какой...
Да, это определние свайпов не настроено. Максимум, что сейчас сделал - запретил слишком короткие свайпы, чтобы таких ошибок было меньше. Двойное срабатывание свайпа сейчас исправлю, к завтра будет выложено. А косые скроллы как свайп - надо отлаживать отдельно, попозже.
Слева в меню "личный кабинет" пункт "мои комментарии" не работает:
"Запрашиваемая страница "/?q=user/_/comments" не найдена."
зашел у себя открылось:
https://aftershock.news/?q=user/5/comments
да и к вам тоже:
https://aftershock.news/?q=user/6254/comments
но я не "личный кабинет" захожу, а "моя учетная запись".
проверьте еще раз и дайте точный скрин, что нажимаете и какая там ссылка.
В самом кабинете всё работает, не работает добавленный на главную страницу пункт "Мои комментарии":
При нажатии показывает пустую страницу:
Там должен быть номер, а в запросе прочерк.
Понял теперь.
atorn - ссылка была добавлена неправильна, это делается средствами Друпал, убери ее и дай мне потом знать, добавлю сам правильно.
Хотелось бы исправить ещё одну особенность, которая раздражает.
Бывает, читаешь статью, и хочется прокомментировать. И тут обнаруживается, что я не залогинен. Т.е., когда-то залогинился, но срок действия логина закончился (не разбирался, зависит ли это от настроек сайта, или браузера, или операционки?), и надо войти заново. Вхожу, а после входа выхожу на страницу своего профиля. Статья и место, которое хотел прокомментировать, потеряна. Пока найду, забуду что хотел сказать.
Поэтому пожелание - после логина не переходить автоматически в профиль пользователя, а возвращаться на исходное место (до логина).
Это есть в не самых близких планах, поскольку для реализации набо писать скрипты, сохранение посещённой страницы и переход на неё только в случае залогинивания.
Я после логина и перехода на страницу профиля 2 раза нажимаю Назад", чтобы вернуться на страницу, на которой был ранее, и затем "Обновить", чтбы пункты меню появились.
И ещё. Особенность, которая не раздражает, но непонятно, зачем она существует. Картинка в правом верхнем углу статьи (тизер). При открытии статьи картинка появляется на секунду, потом исчезает. Если так задумано, то не понимаю зачем. Если это ошибка, то хотелось бы её исправить. Возможно, зависит от браузера (у меня Opera)
Опять этот блевотный Roboto. Ну зачем? Неужели нельзя нормальный шрифт использовать? Если уж менять, то Segoe UI куда лучше подходит для чтения больших текстов. У меня на всех книгочиталках настроен.
Там есть возможность выбрать шрифт в настройках. Мне, например, PTSans нравится, но есть и Sergoe для его любителей.
PT Sans плохо выглядит на маленьких тиглях, а так да, хороший. Сегое к маленьким размерам приспособлен. А Робото просто плохой. Лучше бы по умолчанию Ариал оставили.
Вы бы писали - чем плохой, а то это не всё очевидно. Основная масса людей считает, что Roboto лучше.
Конкретно - чем Arial хуже - в русском языке часто используется буква "л" (эл) и ешё чаше - "п" (пз). В Ариале они сделаны очень похожими, и при лостаточно маленьком шрифте, который часто ставят для чтения, некоторые слова становятся трудно распознаваемыми. Примерно, как трудность различения "э" и "з", но введённая на частоупотребимые буквы. В Roboto и многих других шрифтах эту особенность учитывают. При крупных шрифтах этот недостаток нивелируется, начиная примерно с 15-16px.
Проблема Робото в том, что он жирный - слишком насыщенный и разница между регуляром и болдом не сильно заметна. Ощущение, как будто весь текст написан болдом. Сегое от этого недостатка освобожден. Т.к. 90% сайта - текст, то робото тут смотрится не очень. Вот разница (кстати, Сегое снизил тигль на -1, и даже так он более читаем Робото):
Людям Робото больше не нравится, они просто привыкли к нему, т.к. он по умолчанию установлен в андроид устройствах.
Кукурузо пробовал поэтому ставить Roboto Light (300+500). И пришлось отказаться, потому что на большинстве устройств он плохо выглядит. Можете попробовать у меня в настройках есть (Облегчённый шрифт). Там только 3 шрифта из списка поддерживаются. Можно и на другие имеющиеся было ставить Light, но не думаю, чтобы это было востребовано.
Теперь вообще по дизайну, раз такое дело пошло :)
1 и 2. Не вижу, какие шрифты используются, но это не один и тот же. Моноширность подписи 2 можно заменить с использованием шрифта, который под этот размер приспособлен. Но я бы выбрал шрифт, который бы включался по умолчанию. Т.е. главное акцентное наполнение.
3. Плашка поиска не выравнена по высоте с левым и центральным блоком.
4. Вот эта служебная информация курсивом да еще и в размер основного текста нагружает визуал. Курсив убрать, и на тигль уменьшить: дата, время и автор - вещи нужные, но делать на них акцент не надо.
5. Ну и еще раз про шрифт. Основное наполнение страницы - текстовое. Причем текст перегружен объектами Light, Regular, Bold, курсив. Робото под такой калейдоскоп стилей не подходит. С ним все мешается в одну кучу.
1,2 Используются 1 или 2 шрифта, в зависимости от настроек. Шрифт заголовка можно указать другим. По умолчанию - один.
3. Это здесь центральный блок с кнопками, которые чуть выше. А левый блок в меню имеет невидимые границы. Наведите мышь - увидите. С этими блоками всё примерно выровнено, а точно - нельзя, потому что кнопки не подгонишь под табы и под высоту строки. Или можно, но тогда что-то будет мелко, а что-то крупно. Чтобы решить все проблемы, нужен сначала дизайнерский подход к странице, потом по макетам делать элементы. Пока его не было, или он был, но в том виде, как в старом дизайне. Я по возможности кое-что подравнял, но не всё (вертикальные края статьи смотрите). Да ,и поиска может не быть, отключается в сайтовых настройках учётной записи.
4. Часть людей (Кукурузо) советует уменьшить акцент. В то же время, я сам увеличил акцент, Алекс в этом плане поддержал (частично). Идея в том, что опытный читатель считает автора и дату важной информацией. От жирной даты отказались, но курсив ради акцентирования оставили.
5. Что меня останавливало ставить веб-шрифт Segoe -
Короче, нет законных способов получить лицензию на распространение этого шрифта. Поэтому на сайте шрифт опционален и может не присутствовать на других ОС. Где присутствует и если у вас Windows куплена - использование законное. Где нет - ОС подбирает другой шрифт из списка замещения. А ставить этот шрифт как веб-шрифт - незаконно.
В общем - всё это ждёт ещё нормального дизайна. Пока что решаются частичные и самые насущные задачи. Потом порешаем багофичи редактора. Потом снова баги и фичи сайта. Появится ли среди этого дизайнер интерфейса - не знаю. Последний месяц неоднократно об этом говорю Алексу и команде. Но пока не решены задачи этого релиза - подмешивать туда задачи дизайна страниц ни у кого руки не доходят.
Большая просьба текущую тему оставить для выбора возможности использования. Лично для меня она почти идеальна - она минималистична, эстетична и эргономична. Новая тема в браузере safari на iPhone выглядит ужасно, на мой взгляд. Единственно, чем она хороша - продвинутым меню настроек отображения.
upd. Мои замечания для мобильной версии:
1. Текущий логотип более крупный и читаемый, новый логотип с глобусом - усложнен, несимметричен, визуально тяжелее.
2. На телефоне шапка с нефтяными вышками и Георгием совершенно неинформативна, на ней попросту ничего не разглядеть. На мой взгляд картинку лучше увеличить до всей ширины экрана и перенести в футер. Ее будет там очень хорошо видно, и она таким образом приобретёт смысл девиза.
3. Пиктограммы «возраста» участника и кол-ва просмотров совершенно неинформативны и визуально мусорят общую картинку. После прочтения поста в новом дизайне белые круги вокруг флажков стоят в глазах ещё минут 5, особенно в чёрной теме! Это жуткое безобразие.
4. Шапка в новом дизайне крайне визуально утяжелена и содержит целых 6 элементов - кнопка левого меню, несимметричное лого, тяжелая и нечитаемая шапка с лого Георгия, кнопка настроек, кнопка вызова правого меню. Меню текущей версии симметричное и сбалансированное.
5. Кнопка вызова правого меню в новом дизайне на мой взгляд вообще лишняя, ей будут пользоваться единицы пользователей.
6. Кнопки выбора страниц в верхней части сайта в на первой странице на мой взгляд совершенно лишние - 99% посетителей заходят на сайт чтобы прочитать последние новости, а не чтобы прыгать по страницам. Лучше их отображать со второй страницы и далее.
7. Раздел описания раздела и его хозяина хорошо было бы убрать в спойлер с плюсиком. Думаю подавляющее большинство читает «Пульс», и каждый раз пролистывать часть с описанием, что такое «пульс» - утомительно.
8. Широкие линии разделителей между постами в новой версии вообще рука-лицо с точки зрения эстетики дизайна.
9. В новой версии убраны пиктограммы статей (авторское, мусор и т.д.). На мой взгляд, это совершенно лишнее! По пиктограммам ещё до прочтения статьи можно много понять.
Резюме: новый дизайн это какое-то вредительство и саботаж))))
Подробный и аргументированный обзор, спасибо. Дизайнер с ним познакомится, а пока я дам свои ответы и обоснования решений.
Прежде всего, внимание к мобильной версии было меньше, и она рассматривалась как проекция подробной десктопной. Поэтому в ней основная идея была - преемственность и узнаваемость очертаний, и в то же время, к мобильным экранам добавляются собственные требования к эргономике - не делать больших логотипов и не отнимать пространство, укрупнять кнопки, сокращать графический мусор, не допускать мелких кликабельных фрагментов.
Очевидно многим, что в ней ещё много элементов, которые надо дорабатывать, а я модифицировал имеющиеся, лишь бы отметить перечисленные требования, сохранить основу прежней вёрстки и обеспечить преемственнсть с десктопного дизайна. Далее - оценки на мой взгляд, хотя на дальнейшее сильно повлияет дизайн, к моменту, когда он будет в мобильниках.
1. Лого там можно сократить. Но есть проблема, что оно ешё работает как не очень обязательная кнопка, поэтому укрупнено, и, конечно, преемственно от десктопов.
2. В текущем дизайне - ещё хуже в плане того, что белое поле просто перекрывает часть экрана. Против картинки не один Вы высказываетесь, у Кукурузо аналогичное мнение. Но была идея узнаваемости + невысокая шапка, и только в заголовке, а не всегда. Может быть, лого, в самом деле, достаточно, или шапка - в футере, но это - другой новый дизайн.
3. Есть настройка перевода дуг возраста в старый формат. Но в мобильных он как раз получал наибольшую критику. Можно ввести режим без возраста вообще, но это неопытным читателям лишь нужно или тем, кому комментарии не так важны. В тёмной теме я их не затемнял, но подумаю о затемнении.
4. Шапка играет роль узнавания сайта, и чем меньше начального экрана занимает, тем лучше. С этим соглясны? Из этого - все элементы и нечитаемость. Ну, сделаем адаптированную картинку для мобильников - это улучшит узнаваемость? Совершенно не уверен, зависит от искусства дизайнера. А если уменьшим число активных элементов - увеличится число кликов для доступа. Кому от этого будет лучше?
Посреди статьи - согласен, что нужно уменьшать число кнопок, и сейчас можно убирать настройки. Дизайн и вёрстка сейчас - в процессе изменений, выезжание сайдбара появилось недовно, а в текущей версии его вообще нет, как и поиска. При том, что всё это загружалось и было доступно в портретном просмотре.
5. Там поиск и последние статьи, лента Пульса. Ещё и незавершённые свои бывают.
6. Верно. Или внизу - на вторую ещё надо как-то попасть.
7. Хорошая свежая мысль.
8. Это требует доработки (а у вас есть идеи?), но в десктопной смотрится не хуже прежнего - сравните.
9. Это тоже требует доработки.
Старая версия будет доступна какое-то время, но новая замещает её хотя бы из-за более современного кода страницы. Поэтому движение будет. Если вы умеете делать дизайн-макеты с учётом юзабилити, можете принять участие (за бесплатно, наградой - лишь результат для пользования).
Страницы