Врата Штейна и часы

Во «Вратах Штейна» были «часы» показывающие смещение текущей временной линии… Если честно я слабо понимаю конкретно эту часть аниме, но устройство миленькое, ламповое. Серёжа нашёл шрифт в точности как на этих часах. Захотелось что‑нибудь с этим сделать… Да хоть бы и часы!

Ну и вот, сделал:
sg.greatmatis.com — показывает время.
sg.greatmatis.com/ns — no seconds, то же, но без секунд.
sg.greatmatis.com/a — для фанатов этого аниме :)

Симпотненько запускать на полный экран и держать как скринсейвер. Мокапов вам.

Фиттс и угловые контролы

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

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

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

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

Полезно спрашивать себя. Почему я хочу очертить область срабатывания именно здесь? Почему какие-то 4−5 пикселей между контролом и пассивной сущностью (например заголовок экрана) не должны реагировать в данном случае? Зачем вообще человек устремляет палец в эту область экрана, и как сильно мы разрешаем недотёпе промазать?

Мысли.

1. Крайние контролы имеют все права реагировать по всей области до ближайших краёв.

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

3. Области срабатывания у визуально равных контролов не обязаны быть равными.

Новый рабочий процесс

В Юду у меня кардинально поменялся рабочий процесс. В основном, конечно, из-за перехода на Скетч. По рабочим и этическим причинам не смогу показать на примере наших боевых дизайнов. Уверяю, что описанные процессы использую постоянно, без надуманной рекламной выдумки.

Понял, какой подлог «векторность» Фотошопа. Ещё в Юзерстори ПМ Женя (в прошлом дизайнер, но показавший мне, что бывших дизайнеров не бывает) приучил меня использовать векторные маски. То было давненько, я много чего не знал, в том числе о таких векторных инструментах в Фотошопе. Женя так и говорил — векторные маски. Я не понимал, почему он так называет эти сущности: вот обычный прямоугольник, вот обычный круг. Понятно почему векторные, но почему маски? Что маскируется-то?

Только теперь стало доходить. Фотошоп, хоть ты тресни, растровый. То, что я понимал под гибридностью, мол, есть место и вектору, есть место и растру, оказалось условной правдой. Когда мы рисуем прямоугольник, Фотошоп именно что создаёт маску, которую потом наполняет самым, что ни на есть, растровым содержимым. Это может быть монотонная заливка, это может быть градиент, это может быть паттерн — суть одна.

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

Отсюда вес фотошоповских макетов, отсюда его неповоротливость по сравнению с Иллюстратором при схожих операциях. Считай векторные маски просто помогают тебе редактировать тот же тяжеловесный растр. Рисовать интерфейсы таким инструментом начинает казаться неуместным. Да, Фотошоп может это делать. Да, при наличии сильного аппарата он может это делать шустро. А в голове всё равно свербит, что работаешь не тем инструментом.

sketch

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

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

После Скетча, где у тебя весь продукт на артбордах в одном лёгком файле, открывать по одному экрану тяжеленным проектным файлом Фотошопа кажется абсурдным. Хочешь поменять что-то общее для всех экранов? В Фотошопе есть вложенные смарт-объекты, но это изменения в разных файлах, а не в одном, как у Скетча. Здесь у Фотошопа проблема на уровне философии. Это лишний раз наталкивает мысль: Фотошоп просто не для того.

Да, в Скетче пока кое-чего нет. Без плагинов геморройно работать с абзацами: нет абзацного отступа, нет настройки интерлиньяжа для конкретной строки блока тектса. Работа с шейпами пока непонятная: не могу на 100% понять как работают булевы операции в Скетче — для рисования иконок использую Иллюстратор, где эта же вещь предсказуема. Да и вообще в каждом чейнджлоге нет-нет да найдёшь фичку, о которой думаешь: «А как они раньше то без этого работали в Скетче?».

Всё ещё не считаю эти проблемы перевешивающими в сторону Фотошопа. С какой-то стороны, и я серьёзно, эти изъяны Скетча можно разглядывать как пользу. Ведь кастумизация каждой конкретной строки абзаца в Фотошопе лишний раз загадывает загадку верстальщику: что за надстроек дизайнер туда понапихал? Скетч заставляет тебя показывать явно. Тупо приходится выделять отдельный текстовый слой: отодвигать его вправо, если это красная строка, двигать текст под ним, если он подразумевает свой особенный отступ. Гемор? Так-то да. Но вот верстальщик пропустил особенность очередного хитронастроенного абзаца, и вот он ты уже тратишь время на объяснение.

Рядом ещё одна тема: связка Скетча и Zeplin. Цеплин расшифровывает макет для верстальщика. Выдаёт ему CSS и ассеты. Цеплиновское представление макета висит в облаке: любой участник цикла может смотреть дизайн где угодно. Таким образом Цеплин выполняет ещё и роль показывалки дизайна: cmd+E из Скетча и все специалисты видят выбранный в Скетче холст.

Фотошоп тоже подключается к Цеплину, но фотошоповские макеты весят по 50–100 мегабайт, а то и больше — экспорт в Цеплин занимает вечность. Скетчевские пара мегабайт прыгают в Цеплин на счёт раз.

Моя любимая фишка Цеплина это выдача графики верстальщику или ещё какому технарю. Наш иос-программист работает в Икскоде. По неведанным причинам эта среда понимает векторную графику только в ПДФ. Мне казалось, что это формат для больших многостраничных документов. Причём тут графика для приложений? Ну может я предвзят и не знаю чего. Как бы там ни было, это не проблема. Указываю в Скетче какую графику отдавать в ПДФ. В качестве фолбека указываю нарезать ещё несколько ПНГ разных разрешений — всё это за 4 клика. Цеплин понимает эти указания, и, где бы я или программист не были, графика легко достаётся из цеплиновского облака. Технарь не ищет в какой группе слоёв у меня спрятана иконка. Он кликает в Цеплине на иконку и получает её во всех нужных форматах.

zeplin

Ещё в инструментарии появился Framer. Ранее, чтобы не объяснять анимации на пальцах, я использовал Афтер Эффектс. Это лучше чем ничего — не прибегаешь к словесному описанию: вот эта фигнюшка сюда вжих, а вон та хреновина такая прыг-прыг… Но технарю по-хорошему этого всё ещё недостаточно. Надо ж увиденную анимацию в код перенести, а гифка применима не всегда. И тут ты либо оставляешь анимацию на откуп его пониманию, либо таки чётко указываешь начальные/конечные координаты, тайминги и кривые анимаций. Здесь и помогает Фреймер. Он позволяет на простом псевдокоде смоделировать анимацию и даже простенькую интерактивность. Технарь смотрит листинг и забирает из него всё что ему нужно.

framer

Что Скетч, что Фреймер быстро показывают дизайн прямо на устройстве. Это совсем кайф. Об удобной области тапа или удобоваримом кегле больше не догадываешься, сразу смотришь на аппарате.

device

Вот такие перевороты, а это только второй месяц на новом месте. То ли ещё будет.

YouDo

Проработав небезынтересный год в Pixl, покинул своё первое рабочее место после переезда в Москву Красногорск. Теперь тружусь в YouDo.

Реклама! Юду — это милейший сервис для найма исполнителей ваших небольших задач. Быстро найти курьера, мастера на час, фотографа, спеца по ремонту игровой консоли — всё это легко сделать прямо на сайте или с помощью мобильного приложения. Такая вот уберификация жизненных задач. Люди ищут помощи как в весьма серьёзных случаях: например, срочно отполировать квартиру перед визитом родителей. Так и в весьма потешных случаях.

love-me-feed-me-never-leave-me

Конец рекламы. Работка интересная, работка сложная. Мне редко приходилось заботиться об одном единственном проекте. Всё-таки я работал в небольших студиях веб-дизайнером — много разных сайтов для множества разных клиентов. А тут один проект с какой-то своей экосистемой и традициями. Ещё чувствую приличное давление — сервисом пользуется очень много людей. Не в обиду предыдущим проектам, здесь каждый шаг взвешиваю по семь раз. В общем, буду делать для Юду хороший сайт и хорошее приложение. Они сейчас несколько застряли в предыдущем поколении, все это понимают.

Есть проблема. Комьют. Селился-то я в Красногорске, когда устраивался в Пиксл. А Юду находится в самой что ни на есть Москве, около метро 1905-го года. Я точно планирую переезжать внутрь МКАДа, а сейчас расскажу какое лютое расстояние я преодолеваю по утрам и вечерам. Не то чтобы я самый героический работник-путешественник. Мне рассказывали и про более далёкие случаи. Но всё-таки «мне из Томска» мой путь представляется драконовским.

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

Выхожу из дома, топаю до автобусной остановки. Сажусь на автобус и еду в противоположную основному направлению движения сторону — от Москвы. Многие знают, что данный метод надёжнее и быстрее. Даже не могу понять, какая упрямость заставляет всех остальных толпиться в столицу напрямую. Доезжаю до станции электрички. Там всё здорово. Билетики продают терминалы с очень шустрыми модулями бесконтактной оплаты (я называю их пепасами, от PayPass, название данной технологии со стороны Мастеркарда). Да, даже спустя год в Москве, меня всё ещё захватывают такие штуки.

На электричке еду до метро Тушинская. Я мог бы приехать сюда сразу на автобусе из дома, но «сразу» здесь громкое слово. Пробки, пробища. А электричке всё нипочём. Да, даже комбо «автобус до электрички + электричка» быстрее, чем автобус напрямую до метро. С метро понятно: там проблем нет, в час-пик не попадаю. Кайф в том, что и Тушинская, и 1905-го рядышком, на одной фиолетовой ветке.

Офис Юду находится совсем рядом с выходом из метро. Мне нравится приходить пораньше утром, пока в офисе тихо. Путь до работы занимает, о мой бог, полтора часа. Вставать приходится рановасто.

office

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

ter

Ну да вернёмся ко мне. Работаю теперь на маке — опыт во многом непривычный.

mac

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

Работы в Юду много. Запускаются новые сервисы и новые сферы, где заказчики могут искать исполнителей. Пока мы не занимаемся тотальным редизайном (знаем, надо бы) и балансируем между современным штуками и уже проработанными, оттестированными и привычными людям решениями. Иногда среда легко принимает современные методы. Например, хорошо зашли новые поля ввода аля гугловый материал — когда по тапу на поле, его заголовок уменьшается и улетает вверх, и мы пишем прям под него.

textfield_general

Некоторые новшества приходится хорошенько подточить напильничком. Некоторые пока не встают вовсе.

Работа в Скетче от резкой наприязни быстро перешла в кайф. Используем клёвую связку из Скетча и Цеплина — прощайте долгие часы подготовки макета к вёрстке. Нравится, как Скетч работает с текстом, с артбордами. Ловчее Фотошопа нарезает картинки. Проектные файлы у него лёганькие, в Цеплин запрыгивают быстро. В целом процесс рисования в Скетче — это больше дизайн-вёрстка, чем дизайн-дизайн. Такое у меня ощущение. Этот метод привносит большей точности в работу дизайнера. Сложнее что-то упустить и обречь себя на неприятные разговоры с верстальщиком.

Домой езжу менее путано: сразу с метро сажусь на автобус до дома. Вечером на дорогах как-то полегче, хотя иногда случаются неприятные исключения. Всё хотел рассказать про забавное отличие от Томска в автобусном процессе. Во-первых, тут платят на входе, но интересно другое. Не знаю по всей ли области так, но вот какой фокус на сообщении Москва—Красногорск. Автобус отходит от Тушинской и едет до Красногорска (кстати, очень удобно останавливается почти около моего дома). Так вот на Тушинской люди очень нехотя заходят в автобус, если нет сидячих мест. На полном серьёзе: горожане не просто смотрят, чтобы было не сильно забито, они лучше подождут на улице следующего автобуса, чтобы поехать сидя. Автобус стоит у станции, ждёт пока наберётся народ. Кто-то, ну надо же, соглашается постоять и заходит в автобус, хотя, по меркам оставшихся на остановке, автобус полон. Мне это кажется милым и забавным. Я, по томской привычке, никогда не прочь постоять.

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

Собрав оплату, кондуктор уходит из автобуса и идёт обслуживать следующий, а наш выезжает. Заходящие на последующих остановках пассажиры расплачиваются сразу с водителем, также на входе. Пока все не заплатят и не зайдут, автобус не трогается. Это как бы дольше. Но при таком процессе ощущается как-то больше уважения к пассажиру. Не нужно в трясущемся автобусе пытаться изловчиться достать деньги и передать водителю или кондуктору.

Вот так. Теперь на носу переезд из Красногорска в черту Москвы. Пока оно в ленивой стадии, но всё же думаю до нового года управлюсь.

Ловим покемонов

Мы тут вот таким замечательным составом очень весело ловим покемонов.

trainers

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

pokemons

Мне было катастрофически лень верстать все картинки покемонов с их подписями, так что я просто сделал три скриншота с Википедии :)

Если смотреть по общим усилиям, то всё весьма неплохо: есть несколько редких, а всего на момент написания поста нами поймано 64 из 150 покемонов.

Каждый новый покемон отмечается за своим первооткрывателем. Рядом с именем тренера ставится дата поимки. Ещё в игре есть деление на команды — показалось любопытным отмечать нас и по этому признаку. Благо у команд есть цвета и логотипы. Чтобы совсем шустро, решил встроить логотип команды в шрифт и «писать» его перед именем тренера. Ладно, по-другому. Я злостно надругался над шрифтом DIN и заменил символы фигурных скобочек {} на логотипы команд Вейлор и Мистик соответственно.

pokefont

pokefont2

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

Премьеру Спироу и Зубата установить уже скорей всего не получится: таких покемонов быстро обменивают на конфеты, так что первенцов, с подписанной на них датой, теперь не сыскать. Но, если честно, не велики баре.

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

haunter

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

Последняя ещё ничего, а вот первые две не нравятся: первая просто какая-то через чур, а у второй косячно размечена третья группа (яйца на 10 км). Решил перерисовать. Теперь приятнее.

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

Annie Atkins

Крутейший рассказ Анни Аткинс про графический дизайн для фильма «Отель „Гранд Будапешт“». Например, интересен принцип: если исторический фон картины подразумевает рисованный от руки дизайн — делаем от руки. Если в этом времени уже есть печать — делаем под печать.

Ещё круто: в «Гранд Будапеште» люди заметили ошибку в настенном календаре за октябрь 1932 года. Некоторые дни в сетке были обозначены, как воскресенье, хотя на самом деле, в реальном октябре 1932, эти дни выпали на среду.