Обучение ui/ux дизайну

Дизайнеры Google о Sketch и его будущем

Tuto.com, обучающий веб-сайт, провел интервью с тремя дизайнерами — Филиппом Хонгом, Жан-Марком Дэнисом и Себастианом Габриэлем. Обсуждался Sketch, а также дизайн в общем. Ответы собеседников были довольно интересными, поэтому я перевел это интервью для вас.

Прежде чем мы начнем, следует познакомиться с нашими собеседниками.

1-pz3SU3HryGizsJzbHnF52w

Жан-Марк Дэнис

Жан-Марк работал дизайнером для Sparrow, а также не так давно в Google для Inbox/Gmail. Долгое время проповедует философию Sketch.

 

1-XoDsPgQtVwDY2qOYp-DXtw

Филипп Хонг

Разработчик-самоучка и дизайнер, Филипп очень тщательно заботится об UI/UX-дизайне в собственных проектах. Кроме того, он является арт-директором по разработке уникального фирменного стиля. Он выиграл ряд профессиональных наград, включая Dope Award, CSS Design Award, а также Best Mobile Application за “Bemyapp special Dailymotion”.

Себастиан Габриэль, автор оригинальной статьи, работает дизайнером для браузера Google Chrome. В свободное время часто создает бесплатные визуальные элементы и .psd шаблоны.

Итак, начнем)

Почему вы используете Sketch, а не Creative Cloud?

C.Г: Я до сих пор пользуюсь Creative cloud для определенных вещей, но Sketch просто более гибкий для ежедневной работы, которая для меня заключается в создании интерфейсов и управлении большим количеством исходников. Photoshop стал очень универсальным, а Sketch отлично подходит под наши конкретные потребности создания пользовательских интерфейсов.

Ф.Х: Я перешел на Sketch, так как эта программа адаптирована под мои потребности. И она довольно эффективна в своей сфере. Sketch работает гладко, и что главное, без множества лагов.

Ж-М.Д: Я никогда не применял средства Creative Suite на все 100%. Кроме того, их цена кажется очень преувеличенной. На своем рынке данный пакет никогда не был конкурентоспособным, поэтому люди обычно использовали Illustrator, Photoshop или Fireworks.

Безусловно, у каждого инструмента есть свои минусы и плюсы. Вдобавок есть очень много ресурсов для полноценного изучения работы с Photoshop; это одна из тех причин, почему именно программа Photoshop на сегодняшний день является программой «по умолчанию» для любого дизайнера, с которыми я имел дело.

Photoshop не задумывался изначально, как средство для дизайна интерфейсов.

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

Sketch получил статус-кво.

Многие дизайнеры ждали выхода более эффективной альтернативы Creative Suite. Начало вовсе не было грандиозным, тем не менее, это было довольно удачное решение за счет родного Mac-овского интерфейса и изумительной простоты работы, в особенности в манипуляциях с различными элементами дизайна.

Принятие дизайнерами Sketch можно также объяснить энтузиазмом относительно новых функций, таких как свекторный режим, мартгайды, клавиши «alt» для показа размеров, динамическое изменение элементов и экспорты.

Первоначальная стоимость программы в $30 (сегодня $99), была крайне привлекательной для тех дизайнеров, которые были, как и я, фрилансерами.

В чем его слабость и сила?

Ж-М.Д: У Sketch есть множество достоинств, которые нравятся дизайнерам.

Для меня, одной из самых сильных сторон этого приложения является ее отличная скорость. Оно полностью векторное, функционирует на родном языке MAC OS.

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

Операции не удаляют исходные объекты, в связи с чем любые манипуляции по трансформации и объединению векторных фигур обратимы.

Функция Sketch mirror также крайне полезна, поскольку дает возможность дизайнеру визуализировать макет дизайна на девайсе в режиме реального времени. Это существенно ускоряет итерацию.

Команда работает довольно быстро и реально прислушивается к своим пользователям.

К примеру, разработчики удивительно быстро среагировали добавлением опции Symbols (символы) в программы. Она появилась уже в третьей версии.

Будучи и так эффективным и удобным, Sketch можно бы было улучшить в нескольких направлениях.

С.Г: Sketch быстрый, легкий и простой.

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

Кто-то может предъявить претензию, что в программе Sketch не хватает определенных инструментов типа модификации растровой графики. Здесь важно понимать то, что приложение Sketch — нишевый продукт, и его разработчики прилагают невероятные усилия для его развития в необходимом направлении.

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

Ф.Х: В Sketch действительно очень много преимуществ.

Он написан на родном языке, поэтому работает невероятно гладко; это векторный пакет, поэтому масштабирование будет удивительно точным; он предлагает целую систему “артбордов”, что дает возможность иметь полный обзор проекта, разделять его на странички (очень полезная функция для сбора всего проекта в один единственный файл);

файл Sketch редко выходит за пределы 100 Мб, тогда как аналогичный файл программы Photoshop может с легкостью перевалить за 1 Гб. Плюсов у Sketch намного больше, и более подробно о них я рассказываю в собственном вводном уроке по работе со Sketch.

По поводу минусов программы: Это достаточно молодое приложение, и в нем есть некоторые баги, тем не менее, с каждым новым обновлением ситуация улучшается. Есть несколько довольно коварных нюансов, к примеру, поведение символов при изменении параметров. Однако я дам приложению Sketch время повзрослеть.

Вы используете Sketch самостоятельно; это коллективное решение команды Google или индивидуальный выбор?

С.Г: Я вовсе не единственный пользователь программы Sketch. Все больше и больше команд решают интегрировать его в свой рабочий процесс. Любое изменение привычек людей в такой крупной компании, как Google, может занять довольно много времени, так как все наши старые документы созданы в программах Adobe, и Sketch еще необходимо окрепнуть, чтобы доказать свою высокую эффективность в перспективе.

Он также не лучшее средство для любого типа дизайнера, работающего в компании Google (брендинг, иллюстратор). Я бы сказал, что достаточно большая часть наших UI/UX разработчиков уже перешла на Sketch.

Ж-М.Д: Я начал пользоваться программой Sketch еще задолго до того, как стал сотрудником Google. Я всегда его «проповедовал». Присоединившись к корпорации, я много говорил о нем, предлагал обучить дизайнеров полноценной работе в Sketch. Многим он пришелся по вкусу, и они перешли на данную программу.

Когда я стал работать в команде Inbox/Gmail, то был единственным пользователем приложения Sketch, однако моему примеру последовал еще ряд дизайнеров.

Сейчас десять из нас работают в этой программе. Этот инструмент стал полнофункциональным производственным пакетом. Inbox iOS, Android, а также обновленный Gmail для Android на 100% выполнены при помощи Sketch.

Многие дизайнеры из других команд используют его, поэтому Google выпустил специальные публичные файлы-исходники для Material design.

1-5_IE1S2Trmtq6dfJ7WsGxQ

Скриншот моего 01 урока Sketch tutorial 01, который показывает векторный интерфейс.

 

1-wt4MqJdhvjHP52shXjL9tg
Скриншот моих бесплатных исходников, “Sketch icons”

Каковы позиции Sketch касательно конкурентов, в частности Illustrator и Photoshop?

С.Г: Как я уже говорил ранее, Sketch — это нишевый продукт, и в этом его главная сила. Команда разработчиков очень тесно сотрудничает с сообществом пользователей, и в данном аспекте, по моему скромному мнению, Adobe немного проигрывает. Они обладают той удивительной гибкостью и скоростью, которая позволена маленьким командам, и которой лишены крупные игроки рынка, такие как та же Adobe.

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

Ф.Х: Я абсолютно согласен. Программа Sketch обслуживает нишевый рынок, в отличие от популярного Photoshop, который пытается охватить всех и сразу. Программа Sketch предоставляет собой более свежую альтернативу всему тому, что мы все длительное время использовали, то есть Photoshop.

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

Ж-М.Д: Creative Suite чуть улучшился в последней версии, однако он по-прежнему очень массивный из-за довольно старого кода. Правда здесь необходимо понимать, что это точно не то средство для дизайна интерфейсов, с которого следует начинать.

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

По поводу другого ПО, я встречался с Марком Эдвардсом и с нетерпением жду его релиз нового проекта Skala. Я его очень уважаю и знаю, сколько пользы его опыт и удивительное внимание к мельчайшим деталям принесут этому приложению.

Как Sketch будет развиваться в своих будущих версиях? Какое развитие хотели бы видеть именно вы?

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

Я очень хочу, чтобы эта талантливая команда выпустила специальный «Sketch для интерактивного дизайна», который станет функционировать параллельно с главным приложением. Для меня это бы был идеальный «Sketch Creative Suite». Тем не менее, я не думаю, что вскоре появится что-нибудь такое, поскольку разработчики, наверное, полностью заняты доработками уже имеющейся программы.

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

Ж-М.Д: Мне бы хотелось, чтобы развитие данного продукта шло по пути коллективной работы. Я бы хотел иметь такую возможность: легко и просто экспортировать библиотеку символов, чтобы переслать значки своей команде и убедиться в том, что у нас всех единый набор элементов. Почему бы также не добавить возможность вроде Github, чтобы библиотеки стали доступны всем в каком-то одном месте, и тогда каждый мог обновлять их при потребности? То же касается цветовых палитр и прочих эффектов.

Если же пойти еще дальше, то почему бы не создать какой-то Sketch store для быстрого обмена исходниками с командой, а также продажи наших библиотек значков по всей планете? Я обещаю, данная идея бесплатная. Кстати, подобная возможность сейчас очень успешно реализована в каком-то специальном пакете для 3D-графики.

Что нового это приложение привнесло в ваш производственный и творческий процесс?

Ф.Х: Sketch привнес в творческий процесс больше сплоченности. Мы можем использовать предопределенные стили, иметь доступ к целому проекту в одном файле — это весьма полезные особенности. За счет их нам не надо постоянно рыться в огромной куче файлов для поиска необходимого элемента, и это круто!

Ж-М.Д: Я считаю, что больший упор здесь сделан на личных ощущениях, нежели на технической новизне. Само открытие Sketch похоже больше на открытие Блокнота в Windows, тогда как Photoshop больше смахивает на громоздкой Word. Когда открываешь приложение, первое, что видишь — это пустой холст, и сразу же фокусируешься на создании дизайна.

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

С.Г: В логике создания дизайна разница небольшая, однако Sketch привносит скорость и гибкость, которую раньше не давало ни одно приложение.

Простота, с которой программа Sketch позволяет управлять всем производством макета, его масштабированием — это небо и земля по сравнению с Photoshop.

1-tjTgEw5hlwF1w4ncLo_-bg

Скриншот интерфейса Sketch, где показан один из проектов Филиппа.

Качество CSS-кода, которое генерирует Sketch, отвечает ожиданиям тех разработчиков, с которыми вы работаете?

С.Г: Я не применяю эту функцию.

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

Ф.Х: Мне приходилось опробовать CSS-код, который был сгенерирован в программе Sketch, и он не плох, однако и не достаточно совершенен. Это, полагаю, будет обязательно доработано в будущем.

Каким образом адаптивность влияет на ваш подход к работе? Иными словами: мобильная версия в приоритете или же нет?

Ф.Х: Адаптивный дизайн для меня стал обязательным элементом работы, учитывая огромное количество мобильных пользователей. Я не сторонник ориентирования прежде всего на мобильные аппараты. Многие сейчас обсуждают это, но я не считаю, что приоритет в сторону мобильности должен обязательно применяться всегда и ко всему. Моду на выбор определенного подхода диктуют именно пользователи. Мобильные сегодня в приоритете, да, правда не всегда.

С.Г: «Пользователи в приоритете» — именно это приходит на ум вместо “мобильные в приоритете”. Ориентированность прежде всего на мобильный устройства диктуется развитием сегодняшней индустрии в сторону мобильности.

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

Ориентированность на мобильность — то, что следует рассматривать в начале проекта, и в подавляющем большинстве случаев приоритет в сторону мобильности имеет смысл, правда такой подход необходимо использовать относительно продукта без ущерба в комфорте использования на остальных платформах/в иных форматах, где он реализован.

Ж-М.Д: Приоритет на мобильность! Это общеизвестно и очевидно!

Любое исследование покажет, что мобильные устройства просто поедают десктопный рынок, еще с начала прихода смартфонов.

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

Идея очень проста, если вы занимаетесь разработкой мобильного интерфейса, то всегда начинайте с наиболее малой версии. Доработка для больших дисплеев всегда проще, она позволяет применять дополнительное пространство для дальнейшего усовершенствования комфорта использования. В этом вся сила Material design. И именно таким образом мы создаем все наши продукты.

Вы используете в своей работе Sketch Mirror?

С.Г: Да.

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

Ф.Х: Да, безусловно, и это хорошо экономит время. Можно автоматически проверить, верно ли выбраны размеры. Превосходный инструмент.

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

Ф.Х: Для меня плоский дизайн уже достиг своего пика. Довольно много новых дизайнов слегка уходит в скевоморфизм; к примеру, в Твиттере кнопки сейчас не полностью однотонные, в них есть специальный градиент. В собственных проектах я заметил, что монотонные кнопки уже отходят, и я их заменяю на более сложные. Тем не менее, я точно не думаю, что мы будем свидетелями полноценного возвращения скевоморфизма даже в очень далекой перспективе.

Ж-М.Д: Мне нравится цитата Сент-Экзюпери, отражающая мое отношение к развитию дизайна:

«Идеал достигнут совсем не тогда, когда уже нечего добавить, а когда нечего убрать».

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

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

Я думаю, что ближайшее будущее интерфейсов в трехмерности. Расширение физической среды отлично повлияет на ментальную связь человека с дисплеем. Можно представить выбор ракурсов камеры, конфигурацию источников освещения, добавление большей интерактивности контента в интерфейс пользователя. Apple начал внедрять такое в iOS7. Когда вы в телефоне, то обои движутся на базе координаты гироскопа.

Виртуальная реальность — очень большой шаг, и люди, которые работали с Oculus, хорошо знают, о чем я говорю. Никто пока не смог удачно реализовать интерфейс в 3-мерном поле зрения. Ходить по улице в специальных контактных линзах, проектирующих интерфейс — это не очень пригодное решение для ежедневного применения.

С.Г: «Плоский дизайн» — термин, который возник в ответ на «скевоморфизм». Так же, как и другие противоположные понятия, данные термины обобщают то, чем на самом деле является скевоморфизм и плоский дизайн, разделяя их на две абсолютно отдельные категории и игнорируя некоторые тонкости.

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

Термин «плоский» представляет собой что-то безразмерное. Таким образом, большая часть всего того, что сейчас называют «плоским», на самом деле, им точно не является. Многие дизайнеры используют разнообразные метафоры из жизни в своем дизайне. К примеру, это может быть какой-то источник света, который генерирует тени и цветовые градиенты, а также размытие, имитирующее недостаток фокуса или эффект «за стеклом».

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

Я думаю, что дизайн развивается циклично, так же, как и другие вещи. Он постояно эволюционирует, следуя каким-то резким реакциям, которые противоположны установленному тренду.

Интересен поиск вашего места, правильное взвешивание плохого и хорошего.

Позиционируя себя посередине, анализируя, наблюдая, избегая плохого и беря хорошее, дизайн «развивается» вместо «революционизирования». Это менее сексуальная стратегия, однако гораздо более конструктивная.

Является ли Sketch ответом на эти эстетические (плоский дизайн) и технические (адаптивный дизайн) изменения?

С.Г: Sketch — это тот идеальный пример продукта, который выпущен в ответ на определенную потребность в идеальное время.

Он развивался и рос по мере роста важности UI и UX (user interface — пользовательский интерфейс и user experience — взаимодействие с юзером) в нашей индустрии.

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

Ж-М.Д: Да, 100% для плоского и адаптивного дизайна, и всего двухмерного, появляющегося на дисплее. Но это не ответ для всего трехмерного дизайна.

Ф.Х: Sketch — это ответ, правда не единственный…

Выдержит ли приложение Sketch более сложные графические проекты?

Ф.Х: Для интерфейсов программа Sketch — это прекрасный инструмент. Но область его применения ограничена UI-дизайном и, вероятно, для более сложных проектов вам потребуется что-нибудь еще.

С.Г: Sketch и его чистый стиль вполне может показаться очень простым для выполнения каких-то более сложных графических задач, тем не менее, его не следует недооценивать. Когда вы освоите данный пакет, с его помощью сможете достичь действительно очень многого.

Sketch довольно силен в его области применения.

Слишком сильное расширение функционала способно навредить продукту. Программа Photoshop по-прежнему остается настоящим мастером редактирования растра, Illustrator — не имеющем на данный момент аналогов редактором для векторных иллюстраций.

Sketch — это превосходное приложение для UX/UI дизайна с уникальными возможностями.

Вне данной сферы, ответ скорее всего кроется в чем-либо другом.

Я считаю, что для будущего такого инструмента, как Sketch (и остальных программ) очень важно увеличить оперативную совместимость между всем программным обеспечением (чтобы была одна общая файловая система, к примеру, .svg, и прямой импорт с иного дизайнерского программного обеспечения, как это сделано в Framer.js). Это довольно сложная задача, в особенности учитывая сильную конкуренцию между разным ПО.

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

Ж-М.Д: Да, конечно! В частности, дизайн Gmail Android и Gmail был почти полностью создан в Sketch. Вы можете себе представить, сколько скринов и итераций мы спроектировали.

Мы обменивались файлами Sketch внутри команды (разработчики прототипов, интерактивный дизайнер, продукт-менеджеры и инженеры), чтобы каждый из участников процесса мог выразить собственные идеи в чуть более конкретизированных дизайнах.

Перевод Medium

Понравилось? Расскажите друзьям: