28 авг — 3 сен ← → 11—17 сен

Понедельник, 4 сентября

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

Крутилка прилипла к звёздочкам от пинкода. Как будто пять звёздочек, но пятая какая-то не такая. Заменить звёздочки точками, оторвать крутилку подальше.

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

Написал по-английски про иерархию заголовков:
http://ilyabirman.net/meanwhile/all/headings-hierarchy/

Про то, что вот так не надо делать:

Вторник, 5 сентября

Интерфейс нового Пиксельматора-про выглядит очень круто:

Смотрите:
http://www.pixelmator.com/pro/

Электросамолёт прилетел:
https://lilium.com/

Опубликовал железнодорожные фотографии из Берлина:
http://ilyabirman.ru/meanwhile/all/berlin-railroad/

Любимая штука — расписание, конечно:

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

Четверг, 7 сентября

Красота:

Это паттерны для некоего «Лаки 21» (что это — я так и не понял):
http://www.gooddesignmakesmehappy.com/2014/06/project-love-lucky-21.html

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

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

Полочка с баночками:

Плакат про кроссовки. Если бы я скинул один такой кроссовок, он бы вызвал недоумение. А на такой плакат можно залипнуть на несколько минут:

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

У меня на курсе в блоке о представлении информации есть тема «Умножение элементов», которая частично связана с этим. Там я среди прочего показываю Чака Норриса:

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

А, ну и вот ещё крутая вещь — раскадровка:

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

Серёга Чикин выложил свою версию пиктограмм о стирке и глажке:

Тут:
http://sergeychikin.ru/icons/

Видео наглядно объясняет, как работают кривые Безье (4 мин):

Это шапка на странице митапа «Реакт — Израиль»:

Повезло чувакам с логотипом Реакта:

Пятница, 8 сентября

У нас вышла половина последней главы книги «Пользовательский интерфейс»:
http://bureau.ru/projects/book-ui/

Я вам как-то показывал черновик такого разворота. А вот как он выглядит в релизе:

Это из главы «Окна». А вот из главы «Формы», но тоже со ссылкой на попапы:

Суббота, 9 сентября

С ума сойти. Транспорт-фор-Лондон провели исследование и выяснили, что люди едут на метро от Кингс-кросса до Ватерлоо 18 разными способами:

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

Кстати, в паре вариантов там фигурирует бирюзовая Waterloo & City Line — вот уж где неочевидное, но вполне неплохое решение, если не в самый час пик. Эта линия состоит всего из двух остановок. Когда я рисовал свою самую первую схему московского метро, я делал Каховскую линию такой же формы:

Но в релизе уже стало так:

Всё-таки делать изгиб на Замоскворецкой линии только ради того, чтобы передать привет Лондону — это странно. А без него Каховская так не гнётся.

Схема линии Ватерлоо — Сити над дверью в поезде выглядит так:

Оказывается, у меня про это заметка была, а я и забыл:
http://ilyabirman.ru/meanwhile/all/waterloo-and-city-line/

Дайджест подготовила Наталия.

Ещё фотки из Тель-Авива, сегодня Флорентин — район расслабухи и ночных клубов. Обычно такие районы выглядят довольно неухоженными. В Тель-Авиве то же самое, но только это по сравнению с «обычным» Тель-Авивом, который и так трудно назвать образцом городского благоустройства — см. предыдущую заметку.

Пиксельный иврит, прикольно:

1

Стройка:

2

Кафешка:

3

Подъезд с дверью, надо же:

4

5

Красивая блинная:

6

Кафешка на том же бульваре:

7

Гуд вайбс:

8

9

10

Ой, номер отвалился:

11

Редкий случай, когда уровень дороги и тротуара совпадает:

12

Прнкл?.. А, наверное, «Фрэнкель»:

13

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

А, вот, другая фотка:

14

Свадебный салон:

15

Правильный кофе (тоже «Кафеликс», но не тот, что в прошлом рассказе):

16

Барбершоп:

17

Ещё какое-то место:

18

Хорошая фамилия:

19

Жёлтый знак:

20

21

22

23

24

А вот совсем чудесные переулки:

25

26

27

Ааааа:

28

Фотографии из зимовки 2017—2018. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Тель-Авив!

Ещё Тель-Авив:

• Как перезимовал
• Настроение
• Нарезка зимы в Израиле (видео!)
• Пурим
• Тель-авивский автобус
• Поездка в 2009 году

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

Снял вам кино на станции Эджвер-роуд (это ещё в июле, но я медленно такое разгребаю, как вы знаете):

Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Лондон!

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

Через полминуты после прекращения тряски в салоне звучит объявление: «Дамы и господа! Наш самолёт находится в зоне турбулентности. Командир включил табло „Пристегнуть ремни“. Просим вас занять свои места, блаблабла». И после этого ещё 15 минут табло горит и ничего делать нельзя.

Бесит неимоверно.

Отличный доклад про то, что дизайн не является центром вселенной:

Пол смешно сравнивает диаграммы со словом «ю-икс» посередине со средневековыми изображениями вселенной с Землёй в центре.

И ещё одна вакансия.

Реклама. Текст предоставлен клиентом

Привет, меня зовут Стас Биченко, и я собираю команду дизайна в QleanLabs. Я ищу дизайнера, который будет делать наши продукты человечными и кайфовыми.

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

Кого мы ищем

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

В разработке продукта мы ориентируемся на знания. Поэтому мы проводим кастдевы, юзабилити-исследования, смотрим в аналитику и делаем А/Б-тесты. У нас настроен процесс продуктовой работы, в котором дизайн решает задачи людей и бизнеса.

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

Что надо уметь

Мы ищем дизайнера-универсала, который будет вести дизайн продукта от начала до конца. Важно уметь:

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

Условия работы

Мы работаем в Москве, в бизнес‑центре «Фактория» рядом с метро Савеловская. У нас гибкий график. Работаем на рабочих макбуках или аймаках — на выбор. Можно начать работать удаленно, но потом придется переехать. Мы поможем с релокацией в Москву, в том числе из-за границы.

Зарплата — 150 000 ₽ после налогов

Как к нам попасть

Напишите письмо по адресу sbichenko@qleanlabs.ru с темой «Вакансия дизайнера». Расскажите в нём о себе и приложите ссылку на портфолио, в котором есть лендинги и мобильные приложения. Дальше — собеседование по скайпу, интересное тестовое и собеседование в офисе.

Это уже третье видео студии «Фьюче-делюкс», но это совсем не похоже на два предыдущих:

21—27 авг ← → 4—10 сен

Среда, 30 августа

Паша Омелёхин дополнил схему московского метро:

Инстаграм Эпла — отличный пример умной рекламы в соцсетях. Вместо того, чтобы лепить на айфоны подписи с фичами, они просто публикуют клёвые фотки и видосы, снятые на айфон:
https://www.instagram.com/apple

Ещё, если не видели, посмотрите страницу «Как снимать на Айфон»:
http://apple.com/iphone/photography-how-to/

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

Пятница, 1 сентября

Я уже показывал, но покажу ещё. Любая схема метро превращается в арт, если выключить случайный набор слоёв:

Вот так было сначала, и меня парило, что рядом с примером про поиск стоит поиск от самой книги:

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

Вот пример из другой области на эту же тему. Ворд:

Есть стандартный элемент: выпадающее из тулбара меню со списком стандартных опций и пунктом «Больше...» в конце, за которым прячется диалоговое окно, где можно ввести точное значение. Но в этом контексте он читается совсем по-другому, как будто там продолжится прогрессия: 3,5 · 4,0 · 4,5 и так далее. Надо было сделать исключение и написать «Другое значение...», например.

В интерфейсе «Мимика», который я делал, есть слева список моков. Там можно добавлять и удалять моки и есть поиск:

Подробнее о проекте:
http://ilyabirman.ru/projects/mimic/

В однои из промежуточных макетов получилось, что поиск, удаление и добавление встали на тулбаре рядом:

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

А вот что обращает на себя внимание в Ютюбе:

(Не знаю, может, ваше не обращает.)

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

У Ютюба на днях случился ребрендинг, кстати. Фиг знает почему — может, просто эффект новизны — но есть реальное ощущение, что стало круче и взрослее. Вся петрушка тут:
https://www.youtube.com/yt/about/brand-resources/

Заодно: терпеть не могу, когда говорят или пишут «Ютуб» (просто тупо, в буквальном смысле) или «Ютьюб» («миньет»).

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

Заодно небольшой секрет продуктивности. Когда пишу «смогу исправить через несколько часов» это значит просто, что я решил, что пока не буду на это отвлекаться от того, чем занимаюсь. Никто не умрёт из-за этих пятен, а то, что чуть больше людей увидит, что я накосячил — ну, подумаешь.

Суббота, 2 сентября

Теперь в последних четырёх миксах не просто показан плейлист, а по нему бежит курсор, пока играет музыка, ну и можно тыкать, чтобы прыгнуть в нужный трек. Это так умеет пока не выпущенный Жуэль. Зацените:

http://ilyabirman.ru/mixes/catch-my-flow/
http://ilyabirman.ru/mixes/loophole/
http://ilyabirman.ru/mixes/design/
http://ilyabirman.ru/mixes/use-me/

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

Воскресенье, 3 сентября

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

Попадаю на страницу, где последние несколько, а не все! В подвале этой страницы листалка с цифрами, не имеющими никакой связи с номерами выпусков. Жму куда попало (потому что у меня нет причин тыкнуть на конкретное число и листалки по цифрам делают только мудаки и роботы)

Мимо. Перебирать неохота. Замечаю, что на странице 10 выпусков. Раз на первой был 169-й, а мне надо 138-й, то мне на четвёртую страницу.

Ура, нашёл!

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

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

Варламов опубликовал подборку клёвых пешеходных переходов:
https://varlamov.ru/2542161.html

Дайджест подготовила Наталия.