Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Веб-дизайн

Валидация форм и незаполненные поля

Этот выпуск видеоблога-подкаста — для веб-разработчиков. Рассказываю, как нормально валидировать формы и что делать с незаполненными полями. Обязательно покажите коллегам:

Подкаст-версия для тех, кто в дороге:

Сначала — догонка, а тема начинается с 4:56.

Ссылки из выпуска:

Кстати, на подкаст-версию теперь можно подписаться по РСС и слушать в подкастных программах:

https://ilyabirman.ru/meanwhile/tags/podcast/rss/

В Айтюнс-каталог пока не добавил — там надо ещё доработать разное, но по прямому урлу добавляется и работает, попробуйте!

Хочу задачу: конфигуратор Мерседеса

Когда-то я писал совет, где сравнил присланный дизайн сайта с дизайном сайта Мерседеса. С тех пор сайт Мерседеса изменился, но как был, так и остался удивительной лажей:

В начале картинка с бессмысленным заголовком и текстом «Перейти к предложению». Сразу-то нельзя предложение сформулировать? В меню видим пункты «Модельный ряд» и «Купить». Куда мне идти, если я хочу купить, выбрав из модельного ряда? Снизу стоят четыре микроскопических машинки и больше ничего нет. Зачем прятать остальные за ссылку «Показать больше»?.. Ну да ладно, тут можно про каждую деталь писать отдельный пост о том, почему это всё бред.

В принципе, такая же история и у Ауди:

— В каком браузере вы проверяли вёрстку?
— В смысле, а её надо ещё в браузере проверять?

И у БМВ не лучше:

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

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

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

«Фильтр (0), Сортировать по..., Загрузить онлайн-код» — такое ощущение, что я попал в программу управления складом фанеры, написанную 15 лет назад и с тех пор ни разу не тронутую. Вёрстки нет нигде никакой, особенно посмотрите на прямоугольники с машинами! Полная жесть, основные характеристики вывалили просто из базы данных как есть, как будто это сайт для оптовой закупки метизов в Саратовской области. Хотя чего это я обижаю Саратовскую область? Там бы по-любому сделали сайт получше.

Ткнул в первую тачку, и попал сюда:

Специальная модель, Специальная модель, Специальная модель! Что специальная модель? Нихрена непонятно: три аббревиатуры, милипусечная картинка, 220 штук. Весь смысл спрятан хрен знает куда. Слева от большой тачки сверху неведомые иконки. Просто мрак какой-то.

Кручу ниже, и там начинается самый смак — опции:

Это безумие одинаковое у всех. Во-первых, у всех опций максимально тупые, бессмысленно «продающие» названия, из которых нереально понять, в чём суть опции. Во-вторых, картинки нихрена не иллюстрируют и не объясняют. В-третьих, опции уложены по-масонски, чтобы я в них заблудился. И там такой хреноты восемь экранов.

Имеется пакет курильщика, но не пакет здорового человека:

Видите, целая куча фигни, которая стоит 0. Казалось бы, надо брать? Ну, может, кроме «[SA-634] Отсутствие аптечки». Но нет, дело в том, что на самом деле все указанные тут цены ничего не значат. Вот ставлю я галочку у «[SA-B24] Пульта д. у.», а мне говорят:

То есть да, пульт-то бесплатный, но это потому что он входит в опцию «Стояночное отопление», которая стоит 117 штук. Ёлки, так нахрена вы мне тогда пульт отдельно предлагаете?

И оно всё так. После включения любой галочки сайт 5 секунд думает, и потом может её включить, а может сказать, что для её включения нужно выключить три других.

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

Но я бы вот очень хотел такую задачу. Сделать конфигуратор Мерседеса. Чтобы он сам стал Мерседесом среди конфигураторов. Мне непонятно, почему выбор машины должен быть формой пытки. Я уверен, что с него уже должен начинаться кайф.

Мерседес, давай попробуем сделать?

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

 7 комментариев    1657   2018   автомобиль   веб-дизайн   хочу задачу

Серый текст на белом и на чёрном

Сейчас расскажу вам о том, как можно относиться к серому цвету на белом и на чёрном фоне.

Белый фон — это бумага, а текст на нём — это оттиск набора с краской. Поэтому серого текста на белом фоне быть не может: краска-то одна! Серый на белом выглядит компромиссно и поддельно:

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

Чёрный фон — это темнота, а текст на нём — это свет. Поэтому серый цвет — это просто приглушённый свет. Серый на чёрном выглядит естественно, потому что яркость света может быть совершенно любой:

Он как бы не «серый», а просто темнее. А вот жирность на чёрном работает плохо — разницы между заголовком и текстом почти не видно:

Я ещё в самом тексте одно из слов выделил жирным, но сделал бледнее на четверть — оно полностью растворилось среди соседних.

У меня на сайте на всех страницах на белом фоне заголовки жирные (пример: документация по Жуэлю). Но есть несколько страниц на тёмном, и там жирности недостаёт для выделения заголовков. Чтобы они зажглись, приходится делать текст «тусклее» (пример: Вайрлесс-диджей).

Итого: серый на белом — искусственно; тусклый на чёрном — естественно. Это полезное знание на случай, если вы делаете разные светлый и тёмный скины для какой-то программы или сайта. Нужно, чтобы ваша система скинов умела менять и цвета, и жирность.

Ещё про серый текст:
Не забледняй

 11 комментариев    4954   2018   веб-дизайн   дизайн   типографика

Ещё штуки в Зерулсе 2.0

Хочу ещё рассказать про пару дизайнерских фокусов в новом Зерулсе.

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

Во-вторых, у сайта нет ни логотипа, ни даже заголовка. Кто бы мог подумать, что так можно? Роль логотипа-заголовка играет поле поиска сверху, в котором написано «Поиск по правилам русского языка». Этот текст работает и как подпись к полю, и как название сайта. Подобные подписи в полях обычно пишут бледно-серым, но мы тут сделали исключение именно из-за второй функции этого текста. Сравните со старым сайтом — там я ещё не догадался, что заголовка можно не делать.

В-третьих, смотрите, как это поле подвисает при прокрутке. В Сафари оно становится матово-прозрачным, но при этом в узкой полоске над полем прокручивающийся текст не просвечивает. Это нелогично, но так красивее.

В-четвёртых, смотрите, как ведёт себя этажик ссылок на Эгею-Раскладку-Главред снизу. При растягивании окна он не тянется, а выравнивается по центру. Но в окне 1024 он левым краем выравнивается строго по левой колонке оглавления. Если бы мы просто оставили так, то при ширине, скажем, 1038, этажик бы «почти, но не совсем» выравнивался с левой колонкой, а это отстой. Поэтому на самом деле он выравнивается с ней строго до некоторой ширины, а после этого уже резко прыгает в центровку. Попробуйте поизменять ширину окна.

В-пятых, поводите мышкой по ссылкам на главной. Обратите внимание, что там непрерывная зона клика, между ссылками нет дыр. Это чтобы Фиттс был доволен.

Наверняка что-то забыл.

См. также страничку о проекте.

 1 комментарий    37   2018   веб-дизайн   видеоблог   этот сайт

Текст поверх фотографии

Дизайнер иногда ставит текст поверх фотографии, и получается нечитаемо:

Текст поверх фотографии

Если дизайнер это замечает, он пытается спасти ситуацию. Затемняет фотку под текстом:

Текст поверх фотографии

Или кладёт контрастную плашку:

Текст поверх фотографии

Или делает полупрозрачную плашку, но размывает фотографию под ней:

Текст поверх фотографии

Это всё костыли: в результате хуже видно и фотку, и текст.

Ставить текст на фотографию можно, когда она специально сделана или подобрана для этого. То есть на ней есть чистые места — голубое небо, тёмная ночь или другой равномерный фон:

Текст поверх фотографии

Здесь почти весь текст читается нормально без костылей (много других проблем, но сейчас не о них речь):

Текст поверх фотографии

Здесь нормально читается всё, что выше горизонта в зоне расфокуса:

Текст поверх фотографии

Здесь фон вполне позволял поставить текст без проблем, но автор сделал его светло-оранжевым, поэтому он всё равно не читается:

Текст поверх фотографии

Правило: если фотография не подходит для размещения текста на ней, то размещать текст на ней не стоит. Поставьте текст под фотографией. Следствие: если вы не контролируете фотографию (скажем, её загружают пользователи вашего сайта), то ставить на ней текст — плохое решение.

Читайте также секрет дизайнерских правил.

В заметке использованы работы студентов-дизайнеров.

 992   2017   веб-дизайн   дизайн   студентам

Фактоиды должны отличаться от товаров

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

Дизайнеры, которые уже научились этому, иногда допускают такую ошибку:

Фактоиды должны отличаться от товаров
Студенческая работа в Школе стажёров

Они делают фактоиды слишком похожими на товары. Из-за этого оба эффекта ослабляются: вёрстка выглядит однообразнее, а фактоиды не привлекают внимание.

Правильно — делать фактоиды совсем другими, чем товары:

 516   2017   веб-дизайн   дизайн сайтов   студентам

Новости сайта: январь 2017

За последний месяц на моём сайте случилось два важных обновления.

Новый дизайн

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

Новости сайта — 2017

А в «Музыке» — другие релизы того же жанра, например, соседние альбомы:

Новости сайта — 2017

Под заголовком раздела по-прежнему может появиться ещё одна строка меню — эта строка нужна для версий одного и того же, например, схем метро:

Новости сайта — 2017

Туда же идут всякие подразделы с общим заголовком.

Всякие такие провязки делаются автоматически — см. как работает мой сайт.

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

Новости сайта — 2017

Картинки в рассказах о поездках, в блоге и в некоторых работах и раньше умели резиниться. Но меню всё время мешало: распирало и ломало страницу. Новое меню заставило меня прошерстить остальной сайт, поэтому теперь весь «Мир», почти весь блог и большинство проектов влезают на телефоне. Я сделал себе всяких инструментов для быстрого обеспечения влезаемости чего угодно. Некоторые страницы, конечно, выглядят не так, как выглядели бы, если бы их изначально верстали для телефона, но, по крайней мере, влезают.

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

Раздел проектов стал лучше. Раньше там проекты выводились бессмысленной матрицей, отсортированной по времени добавления. А сейчас проекты разделены на смысловые кучки:

Новости сайта — 2017

Я, конечно, хочу ещё лучше, но пока успел так. Когда-нибудь улучшения доберутся и до «Мира».

А ещё я прикрутил новые шрифты. Ну, вы видели.

Новый поиск по блогу

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

Новый поиск склоняет слова и учитывает всякие там разные факторы, чтобы нашлись варианты получше. «Берлин»:

Новости сайта — 2017

Выдача поиска тоже переделалась: теперь вместо полных заметок там кусочки найденного текста и картинки пачкой, потому что по ним заметку легко узнать. Как видите по заметке «Трезор и Бергхайн», оно умеет вытаскивать и кадры видосов, и обозначать, что в заметке есть аудио.

Круче всего, когда в заметке много картинок. «Автобан германия»:

Новости сайта — 2017

Пока там всё равно много что работает не так, как надо. Но уже сильно лучше, чем было, поэтому новый поиск я выкатил.

Про него я ещё напишу отдельно подробнее, пока лишь скажу, что решающую роль в его появлении сыграл Роман Парпалак — это с ним мы в своё время делали умный поиск для Зерулса.

 53   2017   веб-дизайн   дизайн   проекты   этот сайт

Новый сайт Эгеи

Запустили с Ильёй Страйковым новый сайт Эгеи:

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

Теперь вот нормальный сайт, где нормально объяснено, что за Эгея, и почему она клёвая. Отдельное спасибо Максиму Ильяхову.

Документация переехала в Гугль-док — ссылки на статьи живут в разделе «Помощь». Если вы увидите ошибку в документации, сможете написать комментарий прямо там. И мне будет проще её дополнять.

 57   2016   веб-дизайн   продукты   релиз   Эгея
 85   2016   веб-дизайн   дизайн   чтиво   шрифты
Ранее Ctrl + ↓