Аудио по четвергам: «Пиксель-вояджер»
У Тои Дои-то, оказывается, не так давно новый альбом на «Сантрипе» вышел. И там такое:
Toï Doï: Pixel Voyager
Ранее я писал о его прекрасном ипишнике Mother Pitch.
Позднее
Ctrl + ↑
У меня новый трек под именем Ninth Of Kin (под этим именем я делаю пситранс). Предыдущий такой был аж четыре года назад
Утренне-фулоновый микс из 14-го подкаста без голосовых комментариев называется «Кристал-смайл»
Прямоугольнее
Один из способов улучшить вёрстку — запрямоугольнить всё, что можно.
Вот случайная фотка с моего телефона — какая-то питерская табличка:
Почему она такая уродская? Потому что в ней всё выровнено по центру.
Представьте, что вам в комнате нужно поставить стол. Можно поставить к стенке, а можно и посередине, если это столовая. Если у вас есть один главный объект, его можно смело ставить посередине, и никто не спросит «почему посередине»:
Если кроме стола есть ещё диван, то поставить их оба посередине уже будет трудно. Может, только в очень большой комнате. В вёрстке с этим чуть проще из-за того, что текст обычно имеет форму полосок. Две полоски посередине — нормально:
Поставить ещё что-то посередине — сложно. Но можно поставить посередине стен. С одной стороны — тумбочка с телевизором, чтобы удобно смотреть с дивана, с другой — книжный шкаф:
Но всё, пора остановиться. На питерской табличке по центру стоит всё, и это ад:
Люди, незнакомые с дизайном, любят выравнивать всё по центру — им кажется, что это наиболее простой способ что-то оформить. Но на самом деле наоборот: сверстать что-то с центровкой намного труднее, чем расставив по углам.
Вы можете сказать: но ведь книжные титулы часто оформляют с центровкой. Да, в классическом стиле титулы порой делали весьма многоэтажными. Вот фотка с курса Игоря Штанга по вёрстке — смотрите как интересно слева:
Или вот книжка из инстаграма «Носков поэта»:
Так можно, но это сложно. Если у вас нет опыта, не используйте выравнивание по центру.
Выравнивайте всё по левому краю:
Так форма текста уже начинает хоть чуть-чуть дружить с форматом.
Но сейчас это всё один прямоугольник, а здесь речь о двух фирмах — «Ленконцерте» и «Ленконцерт-туре». Вы уже знаете, что чёрточки не разделяют, а склеивают. Уберём чёрточки, добавим расстояния, чтобы разбить всё на две группы:
Теперь у нас два прямоугольника.
Слова «туристическая фирма» сейчас кричат громче всех. Прибьём их к своему логотипу. Тогда можно будет чуток увеличить поля:
Постепенно уберём всё лишнее и разобьём группы сильнее. Предполагаю, что номер 10 относится к обеим фирмам:
Заметьте, что прямоугольники видны даже несмотря на то, что подчёркнуты только левые углы — форма самой таблички помогает нам достроить прямоугольники в голове. В результате получается такая конструкция:
Это не шедевр вёрстки, просто с прямоугольниками проще сделать аккуратно.
А ещё можно так:
Задействован правый верхний угол прямоугольника. Линейки тут используются по прямому назначению — объединять, а не разделять.
Приучите себя «по умолчанию» использовать выравнивание по левому краю и прибегать к центровке только тогда, когда вы в ней уверены.
Курс о пользовательском интерфейсе и представлении информации 19—23 августа
Четырёхдневный курс «Пользовательский интерфейс и представление информации» пройдёт в Москве, в нашем «Коворкафе» на Флаконе с 19 по 23 августа. Это наиболее крутой курс из всех дизайнерских курсов: спросите или почитайте отзывы наших участников.
Первый день полностью посвящён пользовательскому интерфейсу, второй — представлению информации, хотя эти темы и сильно пересекаются. Третий день — практические задания и разбор результатов. После трёх дней в классе — однодневный перерыв на домашку. В последний день — её разбор.
Запись открыта до 13 августа, если свободные места не кончатся раньше.
В школе нас учили, что вежливо поднять руку, если хочешь спросить учителя
Берлин: знаки, вывески, плакаты
Номера домов иногда совмещены со светильниками, как в Хельсинках:
1
Популярны таблички со стрелочками, помогающие найти дома внутри кварталов:
2
Ещё:
3
Если идти по тропинке справа, то придёшь в Бергхайн:
4
Нестандартная уличная табличка и план квартала:
5
Навигация внутри квартала с цветными фигурками:
6
Улица подписана крупно на доме. Шведтер-штрассе:
7
Бернауэр-штрассе:
8
По городу куча велопроката с такими вот левыми табличками (при том, что есть цивилизованный общегородской):
9
«Вот такие жалюзи ставить запрещено»:
10
Табличка:
11
Табличка:
12
Табличка:
13
Штендер:
14
Неоновая вывеска:
15
Обжарочная:
16
Кажется, тут будет бургерная:
17
Красиво:
18
Крутые плакаты:
19
Сумасшедшие плакаты:
20
Берлинский драматический театр. Смотрите, какие крутые афиши:
21
Если нарушать правило внутреннего и внешнего, то так:
22
Фотографии из поездки в мае 2016.
Ещё Берлин:
В аэропорту Кольцово в Екатеринбурге некоторое время назад появилась новая система навигации. Не знаю, какую задачу решали авторы, но новая система получилась более мусорной
Помочь запустить хостед-версию Эгеи
Мне нужен человек, с которым мы вместе запустим хостед-версию Эгеи.
Эгея уже умеет из одного дистрибутива поддерживать несколько блогов. На моём сайте русский и английский блоги работают именно так. Поэтому допилка Эгеи, скорее всего, понадобится незначительная.
Но мне нужно, чтобы вы понимали всё про настройку серверов, тарификацию трафика и так далее, помогли осмысленно выбрать площадку, установить на неё нужный софт, чтобы всё работало быстро и хорошо.
При этом нужно, чтобы сам этот сервер был дешёвым.
Ещё важнее, чтобы затраты были предсказуемыми. Представьте, что блог на такой Эгее заведёт фотограф, будет выкладывать фотографии десятками, а потом на его удачный пост даст ссылку Лебедев. Что делать, чтобы я при этом не разорился?
Если вы предложите хранить саму Эгею в одном месте, а все медиафайлы пользователей — в другом, то надо будет научить Эгею загружать файлы на другой сервер, чем её собственный. Пока не знаю, насколько это сложно.
Если пользователь заведёт хостед-Эгею, он должен иметь возможность привязать её к своему домену или поддомену, а в идеале — даже к конкретному собственному урлу. Я даже примерно не представляю, как это настраивается, но мне надо, чтобы вы это знали.
Если вы готовы предложить свою помощь, напишите мне, пожалуйста, письмо (почта — в подвале каждой страницы). Сразу же расскажите о том, что хотите взамен.
Мне не душно
Когда вы говорите, что вам «не хватает кислорода» и «нужно проветрить комнату», я не понимаю, что вы имеете в виду:
Книга «Пользовательский интерфейс»: готов третий раздел
На прошлой неделе мы открыли оставшийся кусок третьего раздела электронного учебника «Пользовательский интерфейс», но у меня только сейчас дошли руки про это написать тут. Третий раздел называется «Язык», а новые главы — «Слова» и «Язык роботов».
Вы наверняка слышали о стоп-словах — мусорных словах, которые удаляют или заменяют информативными. Термин появился в бюро, когда мы собирали примеры слов из навигации и интерфейса, которые малоинформативны и даже сигнализируют о проблемах в дизайне. В главе «Слова» приведены примеры стоп-слов, которые встречаются в заголовках экранов, подписях кнопок и меню, текстах сообщений об ошибках. Рядом даны хорошие формулировки — однозначные, информативные и человечные — которые потребуют изменений в интерфейсе.
Это выглядит примерно так:
Глава «Язык роботов» посвящена побочному эффекту технозависимости — машиноподобному языку в интерфейсе:
Компьютеры приучают нас понимать, а иногда и вынуждают самих начинать говорить на противоестественном для человека языке. А должно быть наоборот.
В конце опубликованных глав — интерактивный тест по всему третьему разделу, начиная с глав «Синтаксис», «Элементы управления» и «Пиктограммы»:
У тех, кто оформил предзаказ, время подписки пока не тикает, а первые три раздела уже есть. Если это вы, бегите читать!
Лайкли 2.2.3
Лайкли — клёвые социокнопки.
На днях вышла версия 2.2.3, где починили счётчик Гугль-плюса.
Такое ощущение, что я забыл написать заметку, когда вышла версия 2.2, а там было такое:
Улучшена поддержка одностраничных приложений: кнопки автоматически обновляются при переходах по History API, добавлен метод ручного обновления. Также добавлены кнопки ЛинкедИна. Размер файла уменьшен вдвое.
Ещё ссылки:
- гитхаб с документацией (там подробнее написано, что в каком релизе изменилось),
- Иван Акулов (ведёт проект на Гитхабе).
Готова Эгея 2.7 (сборка v3239) с трансляцией на центральный сервер, большими улучшениями в темах, клавиатурным управлением в редакторе и другими штуками
Текст поверх фотографии
Дизайнер иногда ставит текст поверх фотографии, и получается нечитаемо:
Если дизайнер это замечает, он пытается спасти ситуацию. Затемняет фотку под текстом:
Или кладёт контрастную плашку:
Или делает полупрозрачную плашку, но размывает фотографию под ней:
Это всё костыли: в результате хуже видно и фотку, и текст.
Ставить текст на фотографию можно, когда она специально сделана или подобрана для этого. То есть на ней есть чистые места — голубое небо, тёмная ночь или другой равномерный фон:
Здесь почти весь текст читается нормально без костылей (много других проблем, но сейчас не о них речь):
Здесь нормально читается всё, что выше горизонта в зоне расфокуса:
Здесь фон вполне позволял поставить текст без проблем, но автор сделал его светло-оранжевым, поэтому он всё равно не читается:
Правило: если фотография не подходит для размещения текста на ней, то размещать текст на ней не стоит. Поставьте текст под фотографией. Следствие: если вы не контролируете фотографию (скажем, её загружают пользователи вашего сайта), то ставить на ней текст — плохое решение.
Читайте также секрет дизайнерских правил.
В заметке использованы работы студентов-дизайнеров.
Самое дурацкое сантехническое изобретение — кнопки смыва в стене на уровне пояса
Телеграм за неделю 17—23 июля 2017
На прошедшей неделе я переключился в режим нормального ведения своего телеграм-канала. Теперь там не только ссылки на заметки тут, но и всякие наблюдения про дизайн, навигацию и городскую среду. Вот как выглядела неделя (я был в Москве как раз):
Вторник, 18 июля
Это сегодня. Участники курса «Пользовательский интерфейс и представление информации» делают групповое практическое задание. При этом открыта запись на следующий курс:
http://bureau.ru/educenter/ui/
Это красивый разворот про амурского тигра из темы «Параллельное изложение»
А это красивый московский навигационный тотем. Они теперь уже повсюду
Навигационная карта Хлебозавода 9 — нового модного пространства рядом с «Флаконом»
Среда, 19 июля
Весёлая иконка унисекс-туалета в «Бэд-бро-баре» в Москве
Студентка школы дизайнеров Аля подошла ко мне в Коворкафе задать вопросы про свой макет на тему «Валенки» (завтра дедлайн):
Я рассказал ей всякого по смыслу, что не имеет значения тут (потому что вы не знаете задания), а ещё подвинул пару вещей:
http://ilyabirman.ru/
Ещё теги:
Навигация в центре инноваций в Порту:
https://www.behance.net/gallery/7613427/Signage-and-Wayfinding-for-Innovation-Center
Вообще в школе дизайнеров общение с преподавателями есть только на третьей ступени (а это задание на второй). Но крутые студенты плевать хотели на правила и просто приходят. Так и надо.
Раз уж такое дело, ссылка на школу дизайнеров (сейчас идёт набор):
http://bureau.ru/school/28aug2017/
Ха-ха, смотрите какая Виктория молодец:
В это время Миша Нозик на «Живых советах» учит рисовать фактоиды
Четверг, 20 июля
Ещё я забыл занести ссылку на недавний совет про схему метро Самары:
http://bureau.ru/bb/soviet/20170718/
Костя Горский в своём канале о дизайне и продуктивности рассказывает о понимании задачи:
Если у меня и есть какое-то одно самое важное знание про продуктовый дизайн, то это знание о том, что хорошо поставленная задача — больше половины успеха... (в канале — цитата целиком)
Всё правильно, но только Костя пишет, что описание должно вмещаться в один лист А4. Я делаю иначе: пишу максимально подробно. Это же не рекламная листовка. В понимании задачи должно быть всё о задаче, что может понадобиться для её решения. Это такой справочник, где качественно разложено по полочкам всё, что обсуждали с клиентом. Смотрите мою киевскую лекцию про это, если ещё не смотрели:
http://ilyabirman.ru/meanwhile/all/understanding-the-task/
Правый верхний угол в Гугль-драйве. Особенно радуют левые две иконки рядом
Заглянул в гости в Дептранс, а там рай:
Пятница, 21 июля
Проверяю работы студентов школы дизайнеров. Нашёл поддельный знак рубля:
У знака рубля должно быть продолжение полуовала налево:
http://ilyabirman.ru/meanwhile/all/rouble-sign-bowl-continuation/
С таким шрифтом нарисовать хорошо будет непросто: уже и так много всего торчит.
Кажется, авиакомпания «Эль-аль» обновила логотип. Было так:
Стало так:
Очень люблю такие редизайны, когда становится лучше, но никто из обычных людей не замечает разницы.
Кстати, что я до сих пор не знаю, какое из ивритских слов «эль», а какое — «аль». С одной стороны, нужно читать справа налево. С другой, теория близости подсказывает, что каждое ивритское слово должно быть рядом с соответствующим английским. И вроде бы самая правая буква — алеф (вероятно, „а“) ¯\_(ツ)_/¯
Расскажите, если вы в курсе. Личка: @ilyabirman
Приходите к Серёге на курс про иконки:
http://ilyabirman.ru/meanwhile/all/icons-course-2017-aug/
Когда я был на курсе, украл у него такую картинку:
Смотрите, как клёво можно нарисовать знак «Обгон запрещён» (справа снизу). Это, вроде бы, японские знаки
Я не буду делать такие дайджесты каждый раз, так что подписывайтесь в Телеграме. Если вы ещё не пользуетесь Телеграмом, то включайтесь. Это самый нормальный месседжер в мире, и там куча интересных каналов.
Недавно я писал о работе в бюро
Ранее
Ctrl + ↓