Рубрика: Дизайняши

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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