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

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

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

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

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

Студентам

Как работает обучение

Умники всё время победоносно приводят примеры хорошего дизайна, в котором нарушаются правила: «А вот крутой плакат, где не соблюдается правило внутреннего и внешнего! А вот удобный сайт, где ссылки не подчёркнуты! А вот красивая и понятная таблица с чересполосицей!»

Это как прийти на занятие по карате, и начать рассказывать: «А я видел, как во дворе один чувак другого сильно побил, не крича „кия“!» Причём рассказывать с искренней убеждённостью, что тренер не в курсе, что так бывает.

Задача преподавателя — научить и повысить разрешение. Для этого и нужны законы и правила. А если объявить: «Можно делать всё, что угодно, лишь бы был хороший результат», будет честно, но совершенно бесполезно.

См. также:

30 октября   дизайн   студентам

Лекция по теме «Модальность»

Для школ бюро снял лекцию «Модальность»:

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

Только в моём предмете («Интерфейс и информация») таких лекций пара десятков, а самих предметов у нас восемь. Ну и кроме лекций есть ещё литература, тесты и задания. Это на первой ступени. А потом ещё вторая и третья ступень.

Ну короче, смотрите видос.

А ещё у нас появилась демоверсия школы. Там ещё несколько открытых лекций, тестов и заданий.

Сейчас идёт набор в наши школы.

Спросить имя, чтобы обратиться по имени

Проектировщики часто ставят в формах поле «Имя», а на вопрос «зачем?» отвечают: «Чтобы можно было обратиться к клиенту по имени».

Приятно же, когда к тебе обращаются по имени. Приходишь в кофе-бар, а тебе: «Привет, Илья» — и делают флетвайт, не спрашивая про сахар и сироп. Чувство, что другим на тебя не наплевать, согревает. Хочется ходить в такой кофе-бар. Обращение по имени помогает удержать клиентов.

Да нихрена! В Старбаксе тоже обращаются по имени. У тебя его спрашивают, переспрашивают, потом пишут на стаканчике, и потом кричат. Это такой стандарт. Всем плевать, как тебя зовут. Обращение по имени не влияет на удержание клиентов.

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

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

10 октября   веб-формы   студентам

Одно предложение — один стиль

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

Два цвета ни к чему:

Три кегля ни к чему:

Особенно плохо, когда разные кегли встречаются в одной строке:

Выделять цифры ни к чему. Нужно было просто вынести «Заправить» за скобку:

Два кегля, да ещё и едва отличаются — почти, но не совсем:

Клинический случай:

Простое правило: одно предложение — один стиль.

26 сентября   дизайн   общий дизайн   студентам   типографика

Не используйте аккордеон

Есть такой элемент интерфейса — аккордеон. Это когда в вертикальном списке есть распахивающиеся секции:

Из работы студента школы дизайнеров

Этот элемент очень неудобен.

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

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

На телефоне, где экран маленький, с аккордеоном особенно тяжёло. Недаром такого элемента нет среди стандартных элементов интерфейса Эпла и ни в одном их приложении.

Не используйте аккордеон.

29 августа   пользовательский интерфейс   студентам

Прямоугольнее

Один из способов улучшить вёрстку — запрямоугольнить всё, что можно.

Вот случайная фотка с моего телефона — какая-то питерская табличка:

Почему она такая уродская? Потому что в ней всё выровнено по центру.

Представьте, что вам в комнате нужно поставить стол. Можно поставить к стенке, а можно и посередине, если это столовая. Если у вас есть один главный объект, его можно смело ставить посередине, и никто не спросит «почему посередине»:

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

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

Но всё, пора остановиться. На питерской табличке по центру стоит всё, и это ад:

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

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

Или вот книжка из инстаграма «Носков поэта»:

Так можно, но это сложно. Если у вас нет опыта, не используйте выравнивание по центру.

Выравнивайте всё по левому краю:

Так форма текста уже начинает хоть чуть-чуть дружить с форматом.

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

Теперь у нас два прямоугольника.

Слова «туристическая фирма» сейчас кричат громче всех. Прибьём их к своему логотипу. Тогда можно будет чуток увеличить поля:

Постепенно уберём всё лишнее и разобьём группы сильнее. Предполагаю, что номер 10 относится к обеим фирмам:

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

Это не шедевр вёрстки, просто с прямоугольниками проще сделать аккуратно.

А ещё можно так:

Задействован правый верхний угол прямоугольника. Линейки тут используются по прямому назначению — объединять, а не разделять.

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

2017   вёрстка   студентам

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вертикальные отступы заголовков

По теории близости мы ставим заголовки ближе к своему тексту, чем к чужому:

Отступы у заголовков
Раздаточный материал курса Ильи Синельникова «Переговоры и отношения с клиентами»

А Брингхерст ставит заголовки ровно посередине между фрагментами текста:

Отступы у заголовков
Книга Роберта Брингхерста «Основы стиля в типографике»

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

Отступы у заголовков

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

2017   студентам   типографика
Ранее Ctrl + ↓