Кофейня в Тбилиси
Это красиво. Не графика-типографика, они вполне базовые, а вот сама идея.
Идёшь по улице и видишь два одинаковых морских контейнера, они поставлены друг на друга, и нижний — это кофейня, а верхний — это её вывеска. Ночью верхний ещё и вот так светится, красота!
Вывеска размером с целую кофейню. Кажется, чтобы такое придумать, нужно мыслить очень нешаблонно, непредвзято, аутсайд зе бокс. А на самом деле достаточно знать много шаблонов, иметь в голове библиотеку «паттернов проектирования».
И тогда там найдётся что-то вроде «сделать маленькую часть размером с большую», или «максимизировать функцию + применить модульность», или «идеальная модель это сам моделируемый объект» — все три дорожки могут привести вот к такому решению.
Творчество — это ремесло.
🙂
Ну посмотрим:
ilyabirman" rel="nofollow">https://www.threads.net/@ilyabirman
Ввв зачем-то в начале, ну и дела.
Тех, кто запнулся об аббревиатуру ПВУ, информируем:
Четыре аббревиатуры
Эти четыре аббревиатуры должен знать любой дизайнер:
ЛВУ — левый верхний угол,
ПВУ — правый верхний угол,
ЛНУ — левый нижний угол,
ПНУ — правый нижний угол.
Прочитал в мае в Москве доклад о своём движке блога «Эгея»:
https://www.youtube.com/watch?v=vrcXLs_PhVA
Встречается мнение, что движок блога — это простейшая задача веб-разработки. Нужно вытащить из базы данных заметки и показать их в определённом порядке. Ну ещё дать интерфейс добавления и редактирования. «Эгею» называют «лёгким» движком. Рассказываю, сколько всего «Эгея» делает под капотом, чтобы быть такой приятной и при этом оставаться «лёгкой» в глазах пользователей.
00:00 Интро
03:32 Обработка текста и содержимое заметок
09:36 Внешний мир: шаринг, сео, урлы, комментарии
16:59 Навигация: поиск, теги, рекомендации, перебивки и меню
25:48 Качество жизни
Смотрите и обязательно покажите знакомым программистам, чтобы настроить их на нужный лад.
Сайт Эгеи:
http://blogengine.ru/
Спасибо организаторам HolyJS — конференции для JavaScript‑разработчиков — за приглашение и запись выступления! Ребята просили передать, что сейчас открыт приём заявок на осеннюю конференцию:
https://holyjs.ru/callforpapers/?utm_source=partner&utm_medium=birman&utm_campaign=cfp
Промо-страничка ивента
Классная тень!
Она как бы настоящая, не из мира компьютерной графики, а из физического. И она моментально создаёт настроение, включает какие-то летние ассоциации. Круто, что летний эффект достигается элегантно, без излишеств, одной только тенью.
И параллакс-эффект уместный, что редкость. И текст хорошо читается.
Удачно, понравилось.
Обнаружил, что минздравовский знак о запрете курения — это кривая перерисовка знака из набора пиктограмм американской ассоциации дизайнеров АИГА. Ухудшенная версия и без того посредственного дизайна.
Ссылки по теме:
• https://ilyabirman.ru/meanwhile/all/obraschenie-v-minzdrav-rossii/
• https://www.aiga.org/resources/symbol-signs
Последний день: 2 июля в 23:59 мск закрывается запись на практический курс Ильи Бирмана и Михаила Нозика «Презентация клиенту и публичные выступления».
Записаться на курс заранее до 2 июля
Презентация клиенту и публичные выступления 3—23 июля
Эта и другие новости на сайте бюро:
https://bureau.ru/news/2023/presentation-online-open-20230703/
Вышли очередные три главы книги Designing Transit Maps — английской версии «Дизайна транспортных схем»: Geometry, Orientation, Scope.
Новость на сайте бюро на английском:
https://bureau.ru/news/2023/book-metro-geometry-orientation-scope-en/
Покупайте и читайте! И там есть бесплатная демоглава про изгибы.
Английская книга выходит сразу с мобильной версией.
Скиньте англоговорящим коллегам.
1. Одна из детских ошибок в дизайне транспортных схем — зафигачить огромную полосу с заголовком. Это почти гарантированный признак того, что вся схема сделана без любви. Это вот Лос-Анжелес какой-то новый.
2. Как минимум можно было бы этот заголовок в свободный угол поставить просто.
В 20:00 мск (это через 40 минут) я проведу бесплатный мастер-класс на тему «Взгляд новичка». Это одна из тем моего курса. Расскажу, о чём речь, и покажу разные примеры того, как связанные с ним принципы используются в хороших интерфейсах. Ну и как плохие (как на рис. 2) сделать получше с их помощью.
Пройдёт всё в зуме:
https://us06web.zoom.us/j/84098173817?pwd=QWJ1QklaWG9hWjJWMVRvNHZYL0lIZz09&utm_source=tg-n-c-junemc-110523
Вроде как надо записаться в новости на сайте бюро:
https://bureau.ru/news/2023/june-masterclasses-birman/
Репостните куда-нибудь туда, где это может быть интересно.
Прокрутка клавиатурными стрелками в Вентуре
Я заметил, что в Макосе Вентуре прокрутка стрелками на клавиатуре стала работать очень плавно, чего нельзя было сказать о прошлых системах.
Речь о документах для чтения, где нет курсора. По идее однократное нажатие на стрелку вниз или вверх должно прокручивать документ на одну строку. Но что такое «одна строка», когда в документе, например, веб-странице, используются разные шрифты, иллюстрации и видео? Это некоторая условность, типа, один сантиметр. Не на пиксель же прокручивать!
Раньше если нажать на стрелку и удерживать её, документы прокручивались дёрганно, этими шагами однострочными. Это очень напрягало; я всё время задумывался о том, как можно было бы сделать плавно. Задача нетривиальная, ведь при однократном нажатии всё ещё надо решительно прокручивать на какой-то фиксированный шаг, на ту самую «одну строку».
Так вот, Вентура научилась прокручивать документы плавно при использовании стрелочек. Для этого предсказуемо пришлось пожертвовать мгновенностью реакции на однократное нажатие: при такой построчной прокрутке система как будто бы подтупливает. Но в целом на мой вкус стало приятнее.
Проверка на аудиофила
Ха-ха, попались! Или нет? «Если вы этого не слышите, вы не аудиофил»: https://www.youtube.com/watch?v=48PxwspDvrE
Посмотрите и послушайте, а потом читайте дальше, а то там спойлеры.
В общем, я считаю себя до какой-то степени аудиофилом; правда обычно аудиофилы покупают дорогущее оборудования, чтобы различать едва уловимые детали в звуке, и для них ценность почему-то представляют случайные детали, возникающие вследствие несовершенства физического мира, например звучание конкретного контрабаса в конкретном помещении в руках конкретного исполнителя, в то время как я наслаждаюсь теми деталями в звуке, которые являются содержательной частью произведения, которые целенаправленно и ювелирно созданы автором.
Тем не менее, мне было интересно понять, услышу ли я «проблему» с кусочком, который поставил автор. Не знаю, считать ли, что я её услышал, — я не смог бы её так точно сформулировать и изолировать, как сделано в видео. Но после первого прослушивания у меня сложилось ощущение «со стерео происходит какая-то противоестественная фигня», а после второго — «да, стерео какое-то искусственное». При этом я не был уверен, что в этом и состоит проблема, это просто то, что я заметил, пока слушал. Оказалось, что проблема в этом, а из видео вы можете узнать даже конкретнее, в чём именно.
При этом в моём мире сама эта «проблема» — никакая не проблема. Автор произведения вполне мог бы захотеть сделать такое стерео частью произведения. Просто для инструментального произведения такая свобода самовыражения, как работа с пространством и физикой звука, не очень принята. Есть такое искусственное ограничение жанра; правило, о котором нужно знать. Это примерно как сделать хаусовый трек и нарушить в нём размер 4:4 в одном из квадратов. Это «проблема» только с точки зрения хаусового диджея, но в мире музыки в целом в этом нет ничего такого. Единственная разница только в том, что слушатели инструментальной музыки намного чаще склонны считать себя представителями «музыки в целом».
Выложил рассказ о проекте, который сделал в 2019 году — дизайн интернет-магазина «Дом Тома»:
https://ilyabirman.ru/dom-toma/
Почитайте, там надо было исхитриться и разнообразие коллекции показать, и индивидуальность товаров. Репостните везде и приходите за хорошим дизайном!
Самый тупой шаблон для мемов
Самый тупой шаблон для мемов:
— X
— Ты хотел сказать Y?
— Нет.
Обычно в X содержится какой-то плохой каламбур. Плохой, потому что сам по себе он не очень считывается. Именно поэтому нужен Y, чтобы объяснить, про что каламбур из X. Например:
— Пригожая Россия будущего.
— Ты хотел сказать «прекрасная»?
— Нет.
Содержательно всё сказано в первой реплике, но автор шутки настолько в ней неуверен, что решает её объяснить во второй реплике. Типа,«пригожая — это примерно как хорошая, а хорошая — это почти прекрасная... ну, понимаете?..» Объяснение убивает даже хорошую шутку, а в случае с плохой результат совсем жалкий.
Придумал каламбур — публикуй без говна вокруг.
Кстати, вот этот экран сразу непонятный, и никаким исследованием это не исследуешь.
Снизу рамочка. Там есть два разных цвета, и они воспринимаются как пара параметр — значение. Типа это выпадайка, где я могу выбрать, каким акаунтом я буду входить, и щас выбран ilyabirman. А кнопки «Войти» нет! Зато зачем-то есть кнопка Switch account (серая, задисейбленная).
А на саммм деле вот эта фигня в рамочке — это и есть кнопка «Войти», не похожая ни на одну кнопку «Войти» в мире.
Проклятие знака рубля
Сколько проверяю студенческих работ, столько вижу кривых знаков рубля. Реально у каждого третьего, если не чаще, знак рубля — не того шрифта, что цена. На зелёной кнопке вот он чуточку менее жирный зачем-то, а у пиццы — вообще другой.
Понятно, что иногда он слетает из-за того, что его нет в шрифте, но почему вы оставляете это так? Думаете, я не замечу?.. Какой тут ход мысли? Я не могу найти этому являнию никакого объяснения, так что обращаю внимание на то, что это никуда не годится совершенно.
Недавно делал мастер-класс про взгляд новичка, а вот вам ещё пример.
1. У Эпла в ПВУ Музыки есть галочка и многоточие. За многоточием какое-то меню, понятно, а что делает галочка? Хрен знает. Жму!
2. Мне предлагают всё удалить. В какой вселенной галочка означает «Удалить»?!
Если знать исходную задумку, то можно её понять. Типа на этом месте в других случаях находится кнопка «Скачать». А когда ты скачал, там появляется галочка, мол, всё скачано, можешь проследовать на посадку в самолёт. При нажатии на неё тебе предлагают обратное действие (а заодно и полное удаление, да).
Но экран сам по себе смысла не имеет.
Видео по вторникам: анимация против математики
Весело, а местами даже драматично, но понятно далеко не всё:
https://ilyabirman.ru/meanwhile/all/animation-vs-math-video/
Участница курса презентаций Ольга Богачёва презентует дизайн стенда для выставки Яндекс.Клауда. Это третья неделя курса, поэтому тут всякие подставы. В данном случае один из клиентов опаздывает, а второй — в полном восторге от всего. Как быть в таких ситуациях? Разбираем, что Ольга сделала классно, а что — рискованно. 23 минуты:
https://www.youtube.com/watch?v=3ldvcnhojj8
00:00 Интро и раздача ролей
00:37 Презентация
09:30 «Вопросы аудитории»
13:57 Разбор
Все детали про курс, включая подробную программу и кнопку «Запись»:
https://bureau.ru/courses/presentation-online/
Сегодня — последний день записи на июльский курс! Приходите обязательно.
Пересмотрел вдруг вчера любимый с детства художественный фильм «Беги, Лола, беги».
Во-первых, убедился, что мне не показалось: он правда классный. Если вы ещё не смотрели, посмотрите! И послушайте — саундтрек там тоже прекрасен.
Во-вторых, теперь, когда я представляю Берлин, не могу не замечать подставы: вот только что она бежала по мосту в сторону Варшауэрштрассе, как вдруг выбегает из-за угла в Митте! Чё за дела, не может так быть.
В процессе обсуждения одной внутренней задачки вспомнили вечный совет Ильи Бирмана о методе предложений. Вспомните и вы:
https://bureau.ru/soviet/20140408/
Написан в 2014 году и всё ещё божественно прекрасен. Покажите знакомым юиксерам.
В аудио по четвергам сегодня такой вот крепкий Увэлл (?), от которого срочно хочется в Бергхайн. На одном дыхании:
https://ilyabirman.ru/meanwhile/drafts/uvall-segment/
🔴 Запись мастер-класса Ильи Бирмана о «взгляде новичка» в интерфейсе
Запись в Ютубе:
https://youtu.be/k8hjctXC1Fk
https://bureau.ru/courses/ui-online/ — практический курс Ильи Бирмана «Пользовательский интерфейс и представление информации»
1. Вот такие вот утоньшения, возникающие из-за скругления элементов на всю ширину экрана, смотрятся фигово.
2. Реально-то там будет чёрная рамка телефона, а не зелёный фон, и получатся какие-то колючие обрезки, как будто ребёнок забыл выкинуть бумагу после вырезания.
3. Вот если бы скруглённая часть была светлой, а фон тёмной, смотрелось бы нормально.
(Случайная картинка из Пинтереса.)
В предыдущем сообщении — голосовой комментарий вот к такой картинке, которую прислал Хаотик Нютрал, когда я приглашал присылать работы для получения голосовых советов.
Хаотик Нютрал пишет, что это редизайн сервиса Варламова «Паствю», и утверждает, что будет признателен за фидбек.
Памяти скеоморфизма посвящается. Откопал у себя в бекапах-архивах папку скриншотов 4-го Айфона, когда впервыве появилась ретина.
Читать полностью…Многие дизайнеры думают, что тормозной интерфейс — это из-за программистов. Но на самом деле ощущение быстроты в большей степени создаётся именно качественным дизайном. Если дизайнер нарисовал макет с шагом «Подождите...», то вся тормознутость будет сконцентрирована в нём. А работа дизайнера — придумать, как распределить ровно то же вычислительное время по другим шагам, чтобы пользователь тормозов не заметил. 4 минутки:
https://www.youtube.com/watch?v=GBj17b4l10s
Я вам эти все фрагменты не просто так выкладываю, а чтобы вы приходили на курс о пользовательском интерфейсе. Он очень классный, и все уходят довольными. Кроме этих семинаров с разборами заданий там 20 часов лекций с фундаментом.
Ближайший курс пройдёт с 1 по 30 июля. Все подробности, отзывы, программа и отзывы:
https://bureau.ru/courses/ui-online/
Олег Андреев поделился фоточкой. Видите, под каждой иконкой про неё что-то написано? Ха-ха, а вот и не про неё! Это просто текст на пяти языках, а иконок тоже пять, но с текстом они никак не связаны.
Это стандартная проблема, когда соседние, не связанные по смыслу этажи кажутся связанными из-за одинаковой сетки. Рассказываю про это на курсе в теме «Близость»:
http://bureau.ru/courses/ui-online/
Но этот пример прям отличный, сохранил в соответствующую папочку! Тут ещё и расстояния между этажами никакого нет: кружочки с языками висят как раз между своим текстом и иконками выше.
В предыдущем сообщении — голосовой комментарий вот к такой картинке, которую прислал Лёве, когда я приглашал присылать работы для получения голосовых советов.
Лёве пишет: «Каждый год математическая школа заказывает у меня вариацию их логотипа для своего летнего лагеря. В этом году сделал пирамидки, но ощущение, что логотип разваливается. Что с этим сделать?».