Дизайн дневников 2019

[Diary Spirit]

Мы установили новый адаптивный дизайн служебных страниц сайта на тестовом сервере beta.diary.ru. Дизайн самих дневников и сообществ еще в работе. Предлагаем вам походить по обновленным служебным страницам и посмотреть как они выглядят и работают на разных устройствах — компьютерах с большим и малым разрешением экрана, планшетах, смартфонах. Еще раз обращаем внимание на то, что это не мобильное приложение, а веб-сайт, который надо открывать в браузере по ссылке beta.diary.ru/

Последние два месяца мы его тестировали, что-то меняли, отлавливали ошибки. Однако, недоделки и упущения наверняка еще остались. Если у вас есть конкретные замечания и предложения, вступите в наше сообщество Diary-дизайн 2019 и напишите свои предложения там: одно предложение/замечание/пожелание — один пост и комментарии к нему. К посту ставьте тему, по которой вы пишете и старайтесь там сильно не "мусорить". Чем точнее вы изложите ваши конкретные мысли, тем быстрее и лучше мы сможем понять сказанное и отреагировать.

Эмоции и впечатления от дизайна лучше высказать здесь, в комментариях к этому посту.

Важно: на бете и на основном сайте единая база данных юмылов, дизайнов дневников и сообществ, а также библиотеки изображений. То есть, если вы поменяете на бете дизайн дневника, он поменяется и на основном сайте. Если вы удалите из БИ изображения на бете, они удалятся и на основном сайте.

Все остальное, включая посты и комментарии, не имеет общей базы. Так что все, что будет написано на бете в записях или комментариях, останется на бете

Upd по мотивам часто задаваемых вопросов:
1. Бета работает медленнее, потому что она находится на старых серверах.
2. База беты скопирована с основного сайта 26 декабря, поэтому на бете отсутствуют посты, комментарии, дискуссии, появвившиеся позже этой даты. Это нормально, нужно только для тестирования дизайна служебныых и никак не повлияет на ваш дневник/сообщество на основном сайте.
3. Дизайн вашего дневника/сообщества на бете может отображаеться с ошибками, потому что работа по самим дневникам еще не завершена. На основной сайт эти баги отображения дизайна дневника/сообщества переноситься не будут.
4. Новый дизайн пока что касается только служебных страниц:
- Главная
- Настройки
- Списки, которые выводятся на отдельной странице (Все дневники, Мои сообщества, Список Избранных и так далее), и списки, которые выводятся лентой на отдельной странице (Последние записи и так далее)
- Каталог сообществ
- U-mail

Comments

[ninquenaro]

Если будет возможность сохранить старый дизайн и не переходить принудительно на новый всем - будет замечательно.
В целом дайри сейчас единственный блогосайт с действительно удобным дизайном. Очень не хочется, чтобы это менялось.

[Neitent]

Пишу про десктопный вид, очень по верхам, комменты не читала, моё личное впечатление
1. Главная
а. Присоединюсь к тем, кто не хотел бы видеть случайную аватарку при каждой загрузке страницы. Пускай это будет фото из заголовка дневника, пуская дополнительная картинка, просто иконка, только ник или выбранная аватарка. Меняющаяся картинка - это лишнее внимание к тому, что не нужно
б. Мозг очень хочет привязать ширину содержимого к ширине верхнего выглядит случайной. Глаз пытается найти закономерность, но её нет (prntscr.com/m6uoqt - сколько возможных вертикалей!)

2. Настройки
а. Мелковатый шрифт, но при этом огромные поля. Очень светлые рамки полей ввода, их бы чуть-чуть потемнее
б. Баг. Настройки - дизайн дневника - редактировать.
Если после этого нажать на "дизайн дневника", то списка дизайнов нет (появляются только после перезагрузки - prntscr.com/m6uqmi)
в. prntscr.com/m6ur46 у вас плашка в дизайне уехала
г. Как предложение - вместо "редактировать" - "изменить", кажется менее официальным
д. Ой как некрасиво http://static.diary.ru/userdir/1/4/6/4/146485/86117258.png

3. Умыл
а. Если я хочу поставить несколько смайлов, то это как-то уж очень неудобно выходит. В нынешнем дизайне любимые смайл доступны сразу. - три нажатия мышкой. И девять в новом. Плюс подгрузка смайлов каждый раз (куки, Карл!). Восхитительно.
б. Написать письмо - Редактирование папок - Чёрный список. Жёлтая подложка необоснованно широкая.
И это меню в момент написания письма выглядит странно - это же обычное подменю, зачем оно жёлтое? Выглядит сущностью, относящейся к текущему письму, от которой не ждёшь такой подлянки, что она выкинет в настройки без просьбы сохранить.
в. Призрачный силуэт собаки похож на что угодно, но не на собаку

4. Разное.
а. Сообщения об ошибках в новом окне, с кучей места, не отцентрованные - не гуд. Вы же теперь делаете всплывающие окна, ну так оставляйте на текущей странице, пусть окно всплывает (у меня было "вы не выбрали ни одного письма")
б. В списках хотелось бы выделять строчку по клику на свободном месте (например, список упоминаний), а не целиться в галочку
в. А почему в дискуссиях чёрные ники?

[Roldo]

Интуитивно понимается с трудом. С подсказками уже лучше, думаю привыкнуть можно, но:
Как жуткий эгоцентрист хотел бы видеть кнопку "Мой дневник" в более легкодоступном месте)

[Victory_Day]

Neitent, вы бы это постом в сообщество по дизайну дайри отнесли, в посте есть ссылка. тут потеряется и не факт, что на ваш комент (очень полезный!) ответят.

[Neitent]

Victory_Day, да мне лень, честно говоря мб донесу потом

[Tinka1976]

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

[Алонсо Кехана]

Стильно, удобно. Мне нравится.

[Мива]

Прочитала комментарии, появившиеся за время моего отсутствия, и заодно просмотрела все разделы, которые до этого еще не успела сама потестить, но по которым уже были замечания. На самом деле большинство людей пишут одни и те же замечания и пожелания, что объективности ради все же подсказывает необходимость их учета. Но надо понимать, что если у администрации есть конкретное общее видение, то вряд ли что-то сильно будет меняться в сторону пожеланий пользователей. В связи с этим, думаю, наиболее важным сейчас отстоять несколько ключевых моментов в возможном дизайне.
С учетом написанного всеми, на мой взгляд, это все же:
1) U-mail. Совершенно неприемлемый функционал в бете. Зачем ломать то, что сейчас является одним из самых удобных вариантов почты, какие только встречаются. Неоднократно в обсуждениях говорилось о том, что дайри, прежде всего, уникален своим внутренним функционалом, который нужно сохранять, а не ломать.
2) Последовательность пиктограмм в черном блоке. Она должна соответствовать реальным ежедневным и многолетним потребностям пользователей ресурса, а не дизайнерскому видению сторонних людей.
3) Баланс шрифтов и цветовых схем. Пользователи обсуждали цветовые схемы "шапки" главной страницы и отдельных элементов, которые, конечно, с одной стороны можно отнести к личному вкусу, но с другой - все же есть конкретные моменты, связанные с комфортом для зрения, и их просто нельзя не учитывать.
- Со зрением у меня все в порядке, но сочетание серого/красного шрифта на темном фоне всегда было для меня физически некомфортным, даже болезненным. И на дайри я физически старалась избегать чтения дневников в подобном оформлении, потому что видеть такое сочетание цветов утомительно для глаз. В связи с этим, думаю, что возможность изменения цветовых схем хотя бы этого блока просто физически необходима, к примеру, на вариант черные/коричневые пиктограммы на бежевом фоне.
- Да, со вкусами не спорят. Да, на дайри в оформлении служебных страниц всегда присутствовали определенные цвета. Но ведь дело не в их наличии, а в их балансе. В оформлении никогда не было такого обилия темно-серого/черного цвета (кто как видит). Этот цвет присутствовал, но дозировано, в цвете шрифтов, оформлении границ блоков и других незначительных элементов дизайна, тем самым как раз его дополняя, но не делая "кричащим". Сейчас же по факту даже в мобильном варианте первое, что видит незарегистрированный пользователь: это темную верхнюю панель и свернутое в красный квадрат с полосками подменю, при нажатии на который появляется то самое подменю с серым и красным шрифтами на темном фоне. Дизайнеры серьезно считают, что такая цветовая схема комфортна, читабельна и будет привлекательна для нового потенциального пользователя - случайного человека, заглянувшего на ресурс? Возможно, я не знаю всех соц. сетей, но, насколько могу судить, ведущие из них точно отдают предпочтение конкретным цветовым сочетаниям, которые комфортны для глаз, и вообще очень аккуратно относятся к использованию объемных элементов темных цветов, особенно темно-серого и черного.
- Баланс цветов в бете - это не цветовая схема дайри. В нынешнем дизайне она действительно мягкая, сбалансированная и не "бьющая" по глазам. Возможно, под той самой "ламповостью" и "атмосферой дайри" какие-то пользователи подразумевают и ее. Это пишет человек, который в принципе не любит красный цвет и тем более шрифты этого цвета. Но то сочетание цветов, которое было на дайри, когда я пришла сюда в 2009 году, меня не оттолкнуло. Та цветовая схема, которую же я вижу сейчас в бете, меня физически отталкивает и "бьет" по глазам. А для кого-то из написавших в обсуждении она является еще и психологически некомфортной, и их тоже можно понять, потому что для большинства людей такое сочетание цветов сложно назвать позитивным по умолчанию и формирующим соответствующее настроение. Не стоит забывать о том, что дайри для многих как раз то место, куда люди приходят, чтобы написать то, что они больше нигде не смогут написать, и не всегда это радостные посты. Не конструктивно еще и в оформлении множить мрачность. Ресурс, может, и асоциальный, но не настолько.
4) Собачка. Точнее ее иконка, которая ставится перед ником. Не понимаю, как можно вот это  Diary Spirit поменять на то, что предлагается в бете: серую кляксу, в которой каждый может увидеть, что угодно, кроме той самой собаки. Нынешняя иконка прекрасна, в тест Роршаха играть не надо и обезличивать главный символ дайри.

Личное итого:
- я "за" то, чтобы у людей был выбор, на каком дизайне им остаться.
- мне комфортно на нынешнем дизайне.
- могу перейти на новый дизайн, если администрация пойдет на встречу пользователям хотя бы по указанным 3 пунктам, потому что ненужные и неудобные изменения в функционале для меня все же перевесят даже некомфортные цветовые схемы.

[Собака серая]

Alonzo Silvery, умыл отправьте кому-нибудь)) Из беты))

Tinka1976, это всплывашки пытались всплыть и вешали всю страницу в целом. После убиения их антивирусом эффект прекратился.

[Air Force Felicity]

Ну...в целом, понятно, о чем дизайн. Он о "Мы хотим выглядеть современно". Взяли все известные ресурсы (буквально) и скопировали с них все, что выглядит трендово, сильно не вникая.

Про десктопную версию:

1. Верхняя полоса.
Очень странная сборка и порядок элементов, система оповещений. Можно в качестве примера взять беханс или артстейшн и посмотреть, какое там расположение кнопок, как они влияют на дизайн и юзабилити. Как оформлены оповещения.
2. К телу много вопросов. По сути осталось столько же пустоты, только по-новому.
И в данной концепции непонятно решение оставить весь список избранного валяться посреди избы с такими огромными междустрочный интервалами.
3. Если уж обновлять дизайн, то и шрифт с засечками можно убрать и поставить что-то актуальное. Ну и с сочетанием шрифтов можно поаккуратнее немного.
4. В выпадающем меню кмк лучше заменить выравнивание по левому краю на выравнивание по центру и распределить по колонкам, опрятнее будет смотреться.
5. Избранное еле нашла, его бы куда-нибудь поближе и повыше, оно ведь очень часто просматривается.

Это пришло в голову при виде главной страницы. Внутрь сильно пока не смотрела.

[Tenno Seremel]

Кстати о новом дизайне. В элементе sсript можно не писать language="javasсript" (атрибут устарел и его значения всяко нестандартизованы), да и type="text/javasсript", что уж (это дефолт). Можно поэкономить байтики

[нос]

было бы реально интересно почитать пост про то, какие задачи решали при редизайне и почему именно так

Мистер Бартон, хороший вопрос) Попрошу команду сформулировать))

[нос]

Но счетчика таки на бете не видно
Асмела, какого счетчика?

[Асмела]

нос, упоминаний. Он совсем крохотулечка.

[OxanaKara]

упоминаний. Он совсем крохотулечка.

И дискуссий, который является одной из наиболее используемых ссылок. Целиться сложно.

[Black Moon Cat]

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

Я постоянно хожу на сайт через главную страницу, именно она висит на постоянном обновлении, и вся нужная с неё информация, это:
- новые комментарии
- новые дискуссии
- Избранное
- свой дневник
- свои темы
- новые записи в свой дневник
- черновики
- новые записи в сообщества
- библиотека изображений
- счёт еп.
- настройки
На новой главной странице эта информация занимает меньше 10% экрана, вынесена в "второсортный" правый угол и в половине случаев ещё и требует доп.клика — теперь по непонятному многоточию. Я искренне надеялась, что в новом оформлении доступ к темам и черновикам, которые нужны постоянно, станет удобнее, а не наоборот.

В целом, это версия для телефона, и она так и выглядит. На компьютере даже на 13" с разрешением 1440х900 она выглядит так, я уж не говорю про 24" — при взгляде на эту зияющую пустоту веет ностальгией сайтов самого начала нулевых, оптимизированных под 800х600.


Понимаю, что нельзя одновременно усидеть на всех стульях, и то, что лучше для десктопа, будет хуже для смарта и vice versa, но хотелось бы иметь возможность самому выбирать, где терпеть, а где радоваться. Как я увидела в комментариях, многие, как и я, готовы пожертвовать смартфонным удобством ради внятного меню на десктопе.

Всё вышесказанное относится к функционалу.
Что до дизайна, то характерный момент — заменяя понятные слова на пиктограммы, в то же время отказались от "настоящей" графики: отлично сидевшая в углу страницы собака куда-то пропадает, логотип ужимается до пиктограмки же.

...Обрезанный ник, вы серьёзно? Притом даже на 1440х900 свободного пространства в этой панели хватает на то, чтобы трижды написать его полностью? А чтобы вставить туда 18+ (повторяющееся на странице), места не пожалели...

Аватар на главной странице, как идея, мне нравится, но реализация убивает на корню: его уменьшение в размер мелкого мусора на экране, да ещё и с противоестественной обрезкой под круг. Может, сделать отображение аватара (нормального размера) такой же настраиваемой опцией, как вывод остальных блоков, вроде "популярного" etc?
Адаптивная вёрстка на телефоне спокойно "подъедает" даже условно-осмысленные элементы вроде "дневник-сообщества-помощь"; почему бы не сместить красно-чёрную границу и выделить больше места на важные вещи (я вообще тоже за то, чтобы поменять блоки местами; в чёрном есть польза и применимость для всех, в красном... для кого-то, наверное, да...)? Вообще объединение трёх существующих строчек в одну привело к предсказуемой потере удобства и понятности; непонятно только, почему жертвовать решили тем, чем пользуются абсолютно все, в пользу изредка-полезных-элементов и пустот.

Потерялась гармоничная и уникальная цветовая схема @дневников, за это очень обидно. Набор ч/б+бордо навевает мысли о "100 бесплатных готовых дизайнерских решений для вашего сайта".

Я бы очень хотела закончить на оптимистичной ноте и что-нибудь похвалить, но не могу найти ничего, что было бы заслугой именно нового дизайна.
Да, я часто пользуюсь компьютером и телефоном в темноте, и серое-на-чёрном меню радует меня лично, но претензии тех, кому оно нечитаемо, тоже могу понять — и по организации оно однозначно уступает существующему.
Да, доступ к черновикам со смартфона стал проще на одну загрузку страницы — но остался скрытым за кликом по какому-то многоточию.

Ничего не могу пока сказать про новые счётчики комментариев и дискуссий, а также у-мылы, по причине их отсутствия.

[Tenno Seremel]

Black Moon Cat,

Понимаю, что нельзя одновременно усидеть на всех стульях

На самом деле можно. CSS позволяет применять стили в зависимости от доступного разрешения, что там и делается. Нужно просто позволить этому блоку быть больше на больших разрешениях. Как по мне, так его ширину дальше можно вообще не фиксировать, пусть занимает сколько есть пространства (width: auto). Либо, если хочется, чтобы растягивалось до определённого предела, сделать width: auto; max-width: 1920px; ← здесь это CSS пиксели, которые могут быть не равны реальным пикселям на устройстве, это фича.

Например, выставка .container { width: auto; } даёт такое:



При этом, если окошко сжать, то ничего не ломается.

[*Bacca*]

Мива, Air Force Felicity, Black Moon Cat, подписываюсь по всем высказанным вами пунктам, что стоит поменять.
И все-таки, зачем убрали собаку. Она совсем не мешала, а даже наоборот. И новый дизайн она не сломала бы.
ВЫПУСТИТЕ собаку из будки!

[My Precious]

Всё-таки в новом дизайне больше всего напрягает обилие чёрного. Взгляд рефлекторно скользит слева направо - и из кровищи резко упирается в гроб-гроб кладбище, и сверху вниз тоже. А на мобилке столько черного вообще вгоняет в депрессию - эта тяжелая плита, висящая сверху, давит... Корявая и неудобная пда.дайри выглядит гораздо позитивнее

[*Bacca*]

Tenno Seremel, это ты админам предлагаешь или пользователям у кого ЦСС есть?

[Мива]

И все-таки, зачем убрали собаку. Она совсем не мешала, а даже наоборот. И новый дизайн она не сломала бы.
ВЫПУСТИТЕ собаку из будки!

Bacca., она есть над черным блоком, ее "режут" блокираторы рекламы. Если их отключить, вместе с рекламой появляется и собака. Но, на мой взгляд, присутствие на главной странице символа дайри точно не должно быть привязано к включению/отключению рекламы.

[Tenno Seremel]

Bacca., админам, разумеется. Там ещё допилить, конечно, придётся другие блоки (в шапке, например), но всё-таки.

ВЫПУСТИТЕ собаку из будки!

[AniSkywalker]

Неудобно кнопочки вместо букв. Особенно на мобильном.
Соответственно навигация становится сложнее и замороченней непонятно зачем?
Ну и соглашусь с теми, кто против круглых аватарок. Это сильно ограничивает выбор.

Было бы хорошо, если бы можно было выбирать, с каким дизайном жить: с новым или старым. и да, я бы выбрала старый

[Black Moon Cat]

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

Что до предъявленной картинки — меня, очевидно, больше напрягает меню на камчатке и пустота под ним. И это вопрос не ширины контейнера, а расположения его и других, в принципе. Адекватно было бы делать постоянную развёртку там, где место это вполне позволяет.

[Tenno Seremel]

Black Moon Cat, хромать? CSS как раз предназначен, чтобы решать эти проблемы. Естественно, всё решается не одним правилом, а многими, но идея то ясна должна быть. Или вы думаете я тут сразу готовое решение всего напишу? Это же времени всё требует

[*Bacca*]

она есть над черным блоком, ее "режут" блокираторы рекламы.

У меня нету никаких блокираторов, а собака спрятана под косточкой. И это очень жаль, она отлично сидела в углу.
Tenno Seremel, надеюсь они прислушаются, твоя идея выглядит хорошо. Авка класс!

[Victory_Day]

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

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

[Мива]

Black Moon Cat, ну, по факту там все же не пустое место, а рекламный блок. Но вверху есть тоже рекламный блок, и при подключении блокиратора он просто схлопывается до самой панели с меню. А вот с боковым блоком рекламы такого не происходит, поэтому остается так много пустого места.

[la_Distance]

Описание для гостей на главной страницы зачем-то скрыто под море. Там не так много текста, чтобы скрывать.

[Victory_Day]

Tenno Seremel, ты делала пост в том соо, дайри-дизайн? если да, то стаскивай все свои предложения туда и поднимай его, если нет - сделай, пжлст. к тем постам, я так поняла, отношение будет уже серьезней, чем к разговорам здесь.

Black Moon Cat, и вы тоже, пжлст, продублируйте свой комент в дизайн-соо. пусть он повторяет другие посты, но это не страшно. чем чаще повторять о неприемлемых новшествах, тем больше шанс на то, что с нами хотя бы их доработку обсудят. ну и вообще, до некоторых только с 3-5-10 раза доходит XD