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

РСС — лучше всего

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

Дизайн

Профессия

Принципы и методы

Как правильно

Наблюдения

Что-то там

Ворчание

Ещё теги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24 июля   веб-дизайн   дизайн   студентам

Телеграм за неделю 17—23 июля 2017

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

Вторник, 18 июля

Дайджест телеграма за неделю 17—23 июля 2017
Дайджест телеграма за неделю 17—23 июля 2017
Дайджест телеграма за неделю 17—23 июля 2017

Это сегодня. Участники курса «Пользовательский интерфейс и представление информации» делают групповое практическое задание. При этом открыта запись на следующий курс:
http://bureau.ru/educenter/ui/

Дайджест телеграма за неделю 17—23 июля 2017
Это красивый разворот про амурского тигра из темы «Параллельное изложение»
Дайджест телеграма за неделю 17—23 июля 2017
А это красивый московский навигационный тотем. Они теперь уже повсюду
Дайджест телеграма за неделю 17—23 июля 2017
Навигационная карта Хлебозавода 9 — нового модного пространства рядом с «Флаконом»

Среда, 19 июля

Дайджест телеграма за неделю 17—23 июля 2017
Весёлая иконка унисекс-туалета в «Бэд-бро-баре» в Москве

Студентка школы дизайнеров Аля подошла ко мне в Коворкафе задать вопросы про свой макет на тему «Валенки» (завтра дедлайн):

Дайджест телеграма за неделю 17—23 июля 2017

Я рассказал ей всякого по смыслу, что не имеет значения тут (потому что вы не знаете задания), а ещё подвинул пару вещей:

Дайджест телеграма за неделю 17—23 июля 2017

1. У шапки стало больше нижнее поле. Если поля с разных сторон разные — интереснее. Шапка приобрела большую самостоятельность. У меня на сайте тоже большое поле у шапки, но ещё и всё выровнено по верху — так ещё лучше:
http://ilyabirman.ru/

2. Справа от первой фотки другая фотка и какой-то текст. Он стоял непойми как (Аля сказала, что поставила «на глаз»). А теперь он превратился в якорный объект (тяжёлый такой) и встал в центр своего модуля. Магия в том, что прямоугольник, внутри которого стоит этот текст, не нарисован, но прекрасно читается. Подобные штуки я храню под тегом «активация». Любимый пример — вот эта полоса про Трампа:

Дайджест телеграма за неделю 17—23 июля 2017

Ещё теги:

Дайджест телеграма за неделю 17—23 июля 2017

3. Ещё снизу увеличились ценники. Это Миша Нозик мимо проходил и подсказал. Большие цифры всегда хорошо смотрятся:

Дайджест телеграма за неделю 17—23 июля 2017

Навигация в центре инноваций в Порту:
https://www.behance.net/gallery/7613427/Signage-and-Wayfinding-for-Innovation-Center

Вообще в школе дизайнеров общение с преподавателями есть только на третьей ступени (а это задание на второй). Но крутые студенты плевать хотели на правила и просто приходят. Так и надо.

Раз уж такое дело, ссылка на школу дизайнеров (сейчас идёт набор):
http://bureau.ru/school/28aug2017/

Ха-ха, смотрите какая Виктория молодец:

Дайджест телеграма за неделю 17—23 июля 2017
В это время Миша Нозик на «Живых советах» учит рисовать фактоиды

Четверг, 20 июля

Ещё я забыл занести ссылку на недавний совет про схему метро Самары:
http://bureau.ru/bb/soviet/20170718/

Костя Горский в своём канале о дизайне и продуктивности рассказывает о понимании задачи:

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

Всё правильно, но только Костя пишет, что описание должно вмещаться в один лист А4. Я делаю иначе: пишу максимально подробно. Это же не рекламная листовка. В понимании задачи должно быть всё о задаче, что может понадобиться для её решения. Это такой справочник, где качественно разложено по полочкам всё, что обсуждали с клиентом. Смотрите мою киевскую лекцию про это, если ещё не смотрели:
http://ilyabirman.ru/meanwhile/all/understanding-the-task/

Дайджест телеграма за неделю 17—23 июля 2017
Правый верхний угол в Гугль-драйве. Особенно радуют левые две иконки рядом

Заглянул в гости в Дептранс, а там рай:

Дайджест телеграма за неделю 17—23 июля 2017

Пятница, 21 июля

Проверяю работы студентов школы дизайнеров. Нашёл поддельный знак рубля:

Дайджест телеграма за неделю 17—23 июля 2017

У знака рубля должно быть продолжение полуовала налево:
http://ilyabirman.ru/meanwhile/all/rouble-sign-bowl-continuation/

С таким шрифтом нарисовать хорошо будет непросто: уже и так много всего торчит.

Кажется, авиакомпания «Эль-аль» обновила логотип. Было так:

Дайджест телеграма за неделю 17—23 июля 2017

Стало так:

Дайджест телеграма за неделю 17—23 июля 2017

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

Кстати, что я до сих пор не знаю, какое из ивритских слов «эль», а какое — «аль». С одной стороны, нужно читать справа налево. С другой, теория близости подсказывает, что каждое ивритское слово должно быть рядом с соответствующим английским. И вроде бы самая правая буква — алеф (вероятно, „а“) ¯\_(ツ)_/¯

Расскажите, если вы в курсе. Личка: @ilyabirman

Приходите к Серёге на курс про иконки:
http://ilyabirman.ru/meanwhile/all/icons-course-2017-aug/

Когда я был на курсе, украл у него такую картинку:

Дайджест телеграма за неделю 17—23 июля 2017

Смотрите, как клёво можно нарисовать знак «Обгон запрещён» (справа снизу). Это, вроде бы, японские знаки

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

Что почитать на выходных — 155

Вот:

  1. Тарифы без сносок для Модульбанка. Люда Сарычева навела порядок.
  2. Leaked recording: Inside Apple’s global war on leakers. Непонятно, откуда материал для статьи.
  3. WWDC 2017 — Some Thoughts. Стивен Синофский комментирует ВВДЦ.
  4. Выигрывает всегда казино. Никита Прокопов о дизайне Букинг.кома.
  5. Выключка по знаку. Игорь Штанг.

Хотите стать спонсором рубрики? Пишите: ilyabirman@ilyabirman.ru

1 июля   дизайн   типографика   чтиво   Эпл

Знак о штрафе за парковку на газонах

Сделал дизайн знака о штрафе за парковку на газонах Москвы:

Знак о штрафе за парковку на газонах

Графдизайнер Серёга Чикин помог с травушкой и айфончиком.

Началось с того, что ко мне пришёл Максим Кац и сказал, что есть риск, что кругом понаставят такое:

Знак о штрафе за парковку на газонах

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

В одном месте уже успели поставить адский знак по макету с картинки выше:

Знак о штрафе за парковку на газонах

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

Поэтому на новом знаке мы нарисовали айфончик вместо фотокамеры с дорожных знаков.

Я очень люблю гостовский шрифт русских дорожных знаков и грущу, что на многих знаках в Москве вместо него используют Ариал. У букв есть некая приятная корявость. Для этого знака мне пришлось из разных огрызков собрать нужные буквы и цифры, в том числе из заброшенной оцифровки Александра Сапожникова. Почти всё пришлось допиливать — спасибо Ане Даниловой за советы. Гостовские кратки у „й“ я не смог терпеть и нарисовал другие.

Депутат Настя Брюханова убедила совет депутатов Щукина официально принять этот знак, и сегодня его утвердили. Скоро он начнёт появляться в щукинских дворах. Будет как-то так:

Знак о штрафе за парковку на газонах

Мы призываем и другие районы использовать этот знак — на его странице можно скачать ПДФ. Макет знака без изменений можно свободно использовать во всех дворах Москвы — пишите.

Дизайн беджа для Сейви

В Сейви 1.3 мы добавили фичу с отображением беджа с количеством неразобранных аудиозаписей:

Дизайн беджа для Сейви

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

Это длинная скучная заметка.

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

Мы уже просим два разрешения при первом запуске: микрофон и распознавание речи (это разные вещи, к сожалению). Перед тем, как спрашивать, мы показываем такой экран::

Первый запус Сейви

Так мы готовим пользователя к вопросу и увеличиваем шанс того, что он согласится. Микрофон:

Ай-ОС спрашивает про микрофон

Распознавание речи:

Ай-ОС спрашивает про распознавание речи

Заметьте, что тут мы ещё можем добавить отсебятины в текст, чтобы лучше объяснить, почему это окно появилось.

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

И тогда что дальше, если человек нажмёт Don’t Allow? Разрешения можно спросить только один раз.

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

Открой настройку

Но с беджем мы так сделать не можем, потому что бедж необязателен. Кому-то нужен, кому-то нет. Так что если человек нажмёт Don’t Allow, нам надо будет где-то объяснить, как включить его позже. А у нас ни эбаута нет, ни настройки.

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

Настройка Сейви

Если тут включены уведомления, то показываем бедж, если нет, то нет (ну нам и не дадут). А где настроить — объяснили бы в описании приложения.

Так тоже не вышло. Оказалось, что нельзя добавить пункт Notifications в список разрешений приложения, не спросив разрешения сперва. То есть даже чтобы получить ответ «Нет», нужно спросить разрешения! Бесит ещё, что сам текст окна начинается со слов «Sayve Would Like to Send You Notifications», не соответствующих действительности:

Ай-ОС спрашивает про уведомления

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

Но на это всё мы не можем влиять — вопросы задаёт Ай-ОС, а не мы.

Поэтому мы добавили в правый верхний угол иконочку:

Иконка про бедж

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

Это, конечно, снова не сработало. Что если пользователь откажется уже в первом окне? Нам придётся не показывать второе, а тогда мы не сможем добавить саму возможность включить уведомления, как я уже объяснял выше. Выходит, нам нельзя спрашивать, хочет ли человек бедж, а нужно просто сказать, мол, «сейчас система спросит про уведомления, а ты ответь, не хочешь ли ты бедж» (жесть).

В итоге в вышедшей недавно 1.3 если нажать в правый верхний угол, вы увидите такое:

Сейви объясняет про бедж

И когда вы нажмёте «OK» (мы его ещё и написали неправильно), тогда уже вы увидите системный диалог про уведомления.

Уже после релиза мы поняли, что лучше было написать что-то вроде Continue вместо «OK», а то кажется, будто мы вынуждаем человека согласиться.

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

Мы — это я и разработчик Сейви — Михаил Рубанов.

Кнопка:

Скачать в Апсторе

Долина монументов 2

На ВВДЦ вышла новая «Долина монументов» — это самая прекрасная компьютерная игра в мире. Я её прошёл и наскриншотил по пути:

Долина монументов 2

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

11 июня   Айфон   дизайн

Что почитать на выходных — 153

Вот:

  1. Как бесплатно есть пиццу. Илья Сидорчик стал тайным покупателем Додо-пиццы и в подробностях рассказывает об организации процесса проверки качества.
  2. Восприятие. Женя Арутюнов нормально написал про эффекты гештальта.
  3. John Oliver is wrong about Net Neutrality. Сетевая нейтральность — это шляпа.
  4. Почему цифровой детокс  —  бредовая идея.
  5. Преодоление кризиса среднего возраста. Интересно про то, откуда он берётся.

Спасибо спонсору рубрики — рассылке «Дизайнерский дайджест».

10 июня   дизайн   жизнь   общество   чтиво

Видео по вторникам: песочные часы Марка Ньюсона

Какие офигенные! Очень надо:

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

30 мая   видео   дизайн   жизнь

Что почитать на выходных — 151

Вот:

  1. A design lesson 3.5 billion years in the making. Костя Горский.
  2. Пара особенностей дизайна схемы метро Екатеринбурга. Паша Омелёхин написал про варежку, глаз, выходы и центр.
  3. Просто ответьте на вопросы. Люда Сарычева объясняет, как написать нормальный текст.
  4. Как работает метафора. Саша Волкова.
  5. Нельзя запрещать открывать ссылку в новой вкладке. Серж Николаев.

Хотите стать спонсором рубрики? Пишите: ilyabirman@ilyabirman.ru

Вёрстка неформатированного текста

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

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

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

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

2017   вёрстка   дизайн   студентам
Ранее Ctrl + ↓