Подписаться на блог
В Твиттере

Реплики и ссылки на заметки

В Фейсбуке

Ссылки на заметки

Вконтакте

Ссылки на заметки

В Телеграме

Ссылки на заметки

В Тумблере

Заметки целиком

В Же-же

Заметки целиком

По РСС

Заметки целиком

Если что-то из этого не работает, напишите мне: ilyabirman@ilyabirman.ru.

Студентам

Табы и радиокнопки

Максим Ильяхов обновил Главред: теперь он не только подсвечивает стоп-слова, но и проверяет синтаксис. Между режимами переключают табы:

Табы в Главреде

Но табы — элемент навигации, а не выбора. Переключая табы, мы ожидаем оказаться в другом месте. В данном случае мы остаёмся в том же месте, просто меняется режим. В таком случае правильно использовать радиокнопки:

Радиокнопки в Главреде

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

Табы в настройке Мака

Табами их делает размещение на рамке переключаемой ими области.

В Главреде чтобы превратить табы в радиокнопки, достаточно оторвать их от текстовой области. В этом случае будет плохо понятно, что выбрано сейчас, но это другой вопрос.

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

19 ноября   пользовательский интерфейс   студентам

Дизайнерам: как присылать картинки

Две просьбы тем, кто шлёт мне картинки.

Во-первых, не присылайте большие картинки атачами к письму. На такие мегабайты никаких облаков не хватает. Присылайте ссылки на картинки.

Во-вторых, присылайте нормальные ссылки.

Дропбокс не катит. Дропбокс — самое плохое средство шаринга картинок в мире:

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

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

В итоге единственный способ мне просмотреть макет — нажать Даунлоад, скачать и открыть на компьютере.

Гугль-Драйв — такое же говно.

Я больше всего люблю Дроплер и пользуюсь только им. Ещё хорошо себя ведёт Кибако. В крайнем случае можно Гязу — она хоть и с рекламой, но картинку даёт увидеть.

А идеальный вариант — когда по ссылке открывается сама картинка, безо всякой обёртки вообще.

2016   дизайн   студентам

Киевская лекция о понимании задачи

Весной я читал в Киеве лекцию о понимании задачи:

Все дизайнеры научились говорить «я решаю задачи». Но мало кто понимает, что это значит.

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

Это прям лекция, там больше двух часов с вопросами. Дизайнерам смотреть обязательно. Последние десять минут без видео — что-то сбойнуло в записи.

Ах да, ещё раз спасибо Андрею и Алексею за приглашение и организацию, а Ксении — за съёмку.

На следующий день: Сергей Король законспектировал.

2016   видео   доклады   лекции   студентам

Не используйте Мирьяд-про

Есть такой шрифт — Мирьяд-про. Он знаменит тем, что Фотошоп его включает, когда начинаешь писать по-русски шрифтом, в котором нет кириллицы.

В принципе он нормальный:

Мирьяд-про: Sort of fine

Но по иронии судьбы как раз кириллица в нём совершенно отвратительна:

Мирьяд-про: Какой ужас

Достаточно один раз увидеть его кириллические „ж“ и „к“, чтобы больше никогда его не использовать.

2016   дизайн   студентам   шрифты

Почти, но не совсем

Как можно поставить слово «Март» почти по центру макета, но не совсем?

Почти, но не совсем

Как можно почти попасть вертикалью, но не совсем?

Почти, но не совсем

Как можно почти попасть правым столбиком фоток по высоте в левый, но не совсем?

Почти, но не совсем

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

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

Синие кнопки стоят почти напротив друг друга:

Почти, но не совсем

Почти, но не совсем. Нужно или выровнять идеально, или, наоборот, развязать ещё сильнее, чтобы было ясно, что так и имелось в виду.

Надписи почти выровнялись левыми краями:

Почти, но не совсем

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

У стрелок вправо угол почти равен 90°:

Почти, но не совсем

Почти, но не совсем. Нужно или сделать ровно 90°, или разогнуть ещё сильнее.

Заголовки «Адрес», «Режим работы», «Телефон» почти такого же кегля, как и текст под ними:

Почти, но не совсем

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

Тут расстояние между первым и вторым блоком текста почти равно расстоянию между строками текста:

Почти, но не совсем

Почти, но не совсем. Нужно или увеличить, или сравнять, иначе кажется что интерлиньяж съехал случайно.

Надпись «Ручная работа» вписана почти в круг:

Почти, но не совсем

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

Высота поля ввода почти совпала с высотой кнопок:

Почти, но не совсем

Почти, но не совсем. Нужно или сравнять, или увеличить разницу.

На этом макете используются два почти одинаковых цвета:

Почти, но не совсем

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

Правило: или совсем, или совсем не, но без почти.

2016   дизайн   студентам

Список — это однородные члены

В виде списка оформляют однородные члены предложения и однородные придаточные предложения при общем главном. Это было обычное предложение с однородными членами, соединёнными союзом «и». Списки бывают: а) нумерованные; б) ненумерованные. Это было предложение с нумерованным списком, причём в роли «номеров» выступили буквы. Нумерация помогает, когда нужно подчеркнуть порядок элементов или сослаться на элемент по номеру.

Стоит написать список не в строку, а столбик, когда:

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

Часто встречаются списки с несогласованным набором слов и словосочетаний:

Шиномонтаж «Пончик»

  • • Высокое качество!
  • • Мы работаем для вас 24 часа!
  • • Для постоянных клиентов действует гибкая система скидок

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

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

Шиномонтаж «Пончик»: что делает?

  • гарантирует высокое качество,
  • работает 24 часа,
  • даёт скидки постоянным клиентам.

Именными сказуемыми:

Шиномонтаж «Пончик» — это: что?

  • высокое качество,
  • круглосуточная работа,
  • скидки постоянным клиентам.

Дополнениями:

Шиномонтаж «Пончик» отличается: чем?

  • высоким качеством,
  • круглосуточной работой,
  • скидками постоянным клиентам.

Обстоятельствами:

Шиномонтаж «Пончик» работает: как?

  • высококачественно,
  • круглосуточно,
  • со скидками постоянным клиентам.

То есть список — это обычное предложение с однородными членами, просто по-особому оформленное. Если убрать графические признаки списка (двоеточие и переносы), ничего не должно сломаться:

Шиномонтаж «Пончик» работает высококачественно, круглосуточно, со скидками постоянным клиентам.

Пунктуация в элементах списка соответствует пунктуации в предложении. Вместо запятой понадобится точка с запятой, если запятые встречаются в самих элементах.

Элементы списка бывают настолько большими, что:

  1. Каждый из них оформляют как отдельное предложение с точкой в конце. Или даже как несколько таких предложений.
  2. Вводят нумерацию только ради того, чтобы помочь читателю увидеть, что перед ним перечисление.
  3. После самих номеров ставят точку. В роли номеров тут также могут быть и буквы.

Хоть элементы такого списка и оформляют как отдельные предложения, это лишь оформление. Требования согласованности элементов никуда не деваются, и список должен по-прежнему работать как предложение:

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

См. также:

  • Маркированные списки. Почему нельзя ставить буллиты в качестве маркеров списка. Боже, заметке больше десяти лет.
  • О римских цифрах. Ими тоже можно нумеровать элементы списка, но это бесчеловечно.
2016   русский язык   студентам   типографика

Продолжение полуовала у знака рубля

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

Продолжение полуовала у знака рубля

Заодно обратите внимание, что перекладина несимметрична относительно вертикального штриха: налево она торчит чуть-чуть, а направо — довольно значительно. Но при этом даже близко не доходит до того, насколько торчит полуовал.

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

Если вы вдруг забываете, что есть на типографской раскладке, есть плакат.

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

Гантельная шапка обычно не очень

Такую форму шапки на сайте я называю гантелью:

Гантель

Из работ студентов Школы стажёров

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

Если не получается совсем всё переорганизовать, то минимальное улучшающее движение — выравнивание по верху:

Гантель попячена
2016   веб-дизайн   дизайн   студентам   Школа стажёров

Дизайнеры, рисуйте клавиатуру на айфонах

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

Не забледняй

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

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

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

Ctrl + ↓ Ранее