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

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

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

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

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

Бюро

Курс о пиктограммах и системах знаков 12—14 августа

Я обычно анонсирую тут свои курсы и наборы в школу дизайнеров. Но в этот раз хочу анонсировать курс моего коллеги Серёги Чикина. С субботы 12 августа до понедельника 14 в нашем «Коворкафе» на Флаконе (в Москве) пройдёт его курс «Пиктограммы и системы знаков».

Первый день посвящён истории и функциям пиктограмм, второй — поиску метафор, анатомии и дизайну. Третий день — про системы знаков, сетки и ДНК.

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

Курс о пиктограммах и системах знаков 12—14 августа

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

Курс о пиктограммах и системах знаков 12—14 августа

Я когда сам ходил на курс к Серёге, пропёрся от темы про геральдику. Это красивые гербы с Серёгиного сайта:

Курс о пиктограммах и системах знаков 12—14 августа

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

21 июля   Бюро   курсы

Седьмой набор в Школу дизайнеров бюро

Седьмой набор в Школу дизайнеров бюро

Эплы любят рассказывать, что новый айфон — это самое значительное обновление айфона с момента его появления. У нас сейчас такой момент в школах. Расскажу через пару абзацев об этом, но сначала о самих школах.

Я писал о работе в бюро:

В бюро создана система роста: старшие передают знания младшим, причём не только о дизайне, но об организации работы, юридической стороне дела, отношениях с клиентами.

В 2014 году мы открыли Школу стажёров, в которой преподаём это тем, кто хочет стать дизайнерами. С тех пор у нас появились школы редакторов и менеджеров, поэтому дизайнерская школа теперь называется «Школой дизайнеров». Уже защитили дипломы выпускники первых пяти наборов, а студенты шестого учатся на первой ступени. И сейчас идёт новый набор.

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

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

О «Вёрстке и прототипировании» Артём Горбунов пишет у себя в фейсбуке:

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

По поводу школы ещё было лукэтмишное интервью Артёма Горбунова «Как научить дизайнера работать»:

Бывают студии, которые открыли менеджеры, они, как правило, очень успешны. Но если ты смотришь их работы, это ужас. Менеджеров дизайн не волнует, их волнует организация производства. У студий, открытых дизайнерами, хорошие работы, но они живут только 2-3 года, потому что дизайнеры, к сожалению, не очень интересуются управлением проектами, переговорами. Мы сами долго преодолевали эти проблемы и несколько раз оказывались на волоске от закрытия. Но тем не менее мы эти проблемы раз за разом решали и теперь хотим научить этому остальных.

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

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

Учиться у нас дорого. Но польза ещё дороже: посмотрите отзывы участников наших курсов (сложите, кстати, стоимость участия во всех них). В школе есть содержимое наших курсов плюс ещё разные темы (например, предмет «Типографика и вёрстка»). У вас есть возможность просматривать лекции многократно, чтобы разобраться во всех темах. Есть тесты для контроля знаний. Практическая часть сильно расширена. А на третьей ступени студенты вообще получают месяц личного внимания преподавателей. И ещё у нас есть бесплатные места для лучших.

Сама система образования у нас суперпродвинутая — как наша система работы «Ресурс»: к нам не нужно приходить (или прилетать), всё работает через интернет. Вы изучаете теорию и делаете задания в своём режиме, находясь там, где вам удобно учиться. При этом мы знаем, как контролировать успеваемость и не допускать халявы. Заодно эта система даёт понимание того, как работает бюро.

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

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

Занятия начнутся 28 августа, но набор продлится до конца понедельника 24 июля.

14 июля   Бюро   Школа стажёров

Книга «Пользовательский интерфейс»: часть третьего раздела

На этой неделе мы открыли часть третьего раздела электронного учебника «Пользовательский интерфейс». Третий раздел называется «Язык», а новые главы — «Синтаксис», «Элементы управления» и «Пиктограммы».

Книга «Пользовательский интерфейс»: часть третьего раздела

Мы добрались до темы языка интерфейса, и начинаем с синтаксиса. Это про то, что стандартные элементы — это идеальные члены предложения:

Разбираем синтаксические роли элементов:

Пример синтаксической жопы:

Форма слова влияет на смысл и ожидания пользователя:

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

Любимый разворот про пиктограммы:

У тех, кто оформил предзаказ, время подписки пока не тикает, а первые два и теперь часть третьего раздела уже есть. Если это вы, бегите читать!

Книга «Пользовательский интерфейс»: готов второй раздел

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

Книга «Пользовательский интерфейс»: готов второй раздел

Из письма издательства: «Бывало ли у вас такое, что вы приходите в гости, звоните в звонок, но ничего не слышите? Вы звоните ещё раз, но снова тишина. Начинаете стучать в дверь, и тут открывает возмущённый хозяин: „Чё трезвонишь?!“ Проблема в отсутствии обратной связи. Интерфейс дверного звонка прост, а в более сложных интерфейсах вроде управления автомобилем, самолётом или графическим редактором её качество ещё важнее. Из главы вы поймёте, почему руль на автомобиле удобнее, чем стрелки на клавиатуре в автосимуляторах.»

Люблю приводить старые примеры:

И, наоборот, новые:

И снова старые:

И снова новые:

Хотя вроде мода на такую фигню быстро прошла.

В конце опубликованных глав — тест по материалу из них.

У тех, кто оформил предзаказ, время подписки пока не тикает, а первый и теперь часть второго раздела уже есть. Если это вы, бегите читать!

Книга «Пользовательский интерфейс»: часть второго раздела

На этой неделе мы открыли часть второго раздела электронного учебника «Пользовательский интерфейс». Второй раздел называется «Взаимодействие», а новые главы — «Близость», «Прицеливание» и «Информативность».

Книга «Пользовательский интерфейс»: часть второго раздела

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

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

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

Ещё привлекаем внимание к мелочам:

В конце опубликованных глав — тест по материалу из них.

У тех, кто оформил предзаказ, время подписки пока не тикает, а первый и теперь часть второго раздела уже есть. Если это вы, бегите читать!

Книга «Пользовательский интерфейс»: первый раздел

На этой неделе мы открыли первый раздел книги «Пользовательский интерфейс». Раздел называется «Принципы».

Книга «Пользовательский интерфейс»: первый раздел

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

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

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

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

Книга «Пользовательский интерфейс»: предзаказ

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

Видосик:

Любимый разворот, где можно попробовать в действии «эффект бесконечных углов»:

Тоже любимый разворот:

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

Предзаказывайте книгу, будет круто.

Книга «Пользовательский интерфейс»: скоро

Вова Колпаков нарисовал клёвую обложку:

Книга «Пользовательский интерфейс»

Книга «Пользовательский интерфейс» скоро выйдет в издательстве бюро, а пока там можно посмотреть оглавление и некоторые развороты.

Это про лечение технозависимости:

На примере Ангстрема (интерактивчик, справа показывается в динамике по мере чтения — обожаю эту фишку нашего книжного движка):

А это про следствия закона Фиттса:

Оставляйте там почту, чтобы мы вам сказали, когда откроется предзаказ. С наступающим!

Шестой набор в Школу стажёров бюро

Шестой набор в Школу стажёров бюро

Я писал о работе в бюро:

В бюро создана система роста: старшие передают знания младшим, причём не только о дизайне, но об организации работы, юридической стороне дела, отношениях с клиентами.

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

По поводу школы было лукэтмишное интервью Артёма Горбунова «Как научить дизайнера работать»:

Бывают студии, которые открыли менеджеры, они, как правило, очень успешны. Но если ты смотришь их работы, это ужас. Менеджеров дизайн не волнует, их волнует организация производства. У студий, открытых дизайнерами, хорошие работы, но они живут только 2-3 года, потому что дизайнеры, к сожалению, не очень интересуются управлением проектами, переговорами. Мы сами долго преодолевали эти проблемы и несколько раз оказывались на волоске от закрытия. Но тем не менее мы эти проблемы раз за разом решали и теперь хотим научить этому остальных.

Мой предмет — «Интерфейс и информация». Среди тем лекций — технозависимость, привычки, информационные слои, навигация на сайтах (всё из курса «Пользовательский интерфейс и представление информации»). Практические задания — проектирование сайта и интерфейса веб-сервиса. Плюс дипломный проект.

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

Учиться у нас дорого. Но польза ещё дороже: посмотрите отзывы участников наших курсов (сложите, кстати, стоимость участия во всех них). В школе есть содержимое наших курсов плюс ещё разные темы (например, предмет «Типографика и вёрстка»). У вас есть возможность просматривать лекции многократно, чтобы разобраться во всех темах. Есть тесты для контроля знаний. Практическая часть сильно расширена. А на третьей ступени студенты вообще получают месяц личного внимания преподавателей. И ещё у нас есть бесплатные места для лучших.

Сама система образования у нас суперпродвинутая — как наша система работы «Ресурс»: к нам не нужно приходить (или прилетать), всё работает через интернет. Вы изучаете теорию и делаете задания в своём режиме, находясь там, где вам удобно учиться. При этом мы знаем, как контролировать успеваемость и не допускать халявы. Заодно эта система даёт понимание того, как работает бюро.

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

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

Занятия начнутся 30 января, но набор продлится только неделю — до 28 ноября.

2016   Бюро   Школа стажёров

Окно Бирмана

В бюро есть термин — «окно Бирмана».

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

Окно Бирмана

Ширина — 1024 ровно, высота — сколько влезет (справа от браузера я люблю располагать остальные окна). Такие пропорции необычны: у большинства браузер широкий, а не высокий. Поэтому при сложной вёрстке, зависящей от пропорций, можно и проглядеть, что страница ломается.

Пользоваться термином так:
— А в окне Бирмана как это будет выглядеть?

Или так:
— У тебя в окне Бирмана фон разъехался.

При разработке книги Артёма Горбунова об окне Бирмана приходилось думать регулярно.

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

Окно Бирмана

Разумеется, я сразу же попробовал превратить его в «экран Бирмана». Выглядит странненько, но что-то в этом есть.

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

Ранее Ctrl + ↓