Комментарии и идеи насчет Sketch, его месте в дизайне, использовании и будущем.
24 ноября tuto.com, французский обучающий сайт, провел интервью с тремя дизайнерами - Жан-Марком Дэнисом, Филиппом Хонгом и Себастианом Габриэлем. Обсуждался Sketch и дизайн в общем. Сами вопросы и ответы собеседников были очень интересными, поэтому мы решили перевести это интервью для наших читателей.
Эта статья - отличное продолжение моего предыдущего поста о Sketch, “Месяц со Sketch 3.0". Также она позволяет лучше познакомиться с программой для тех, кто пока не имеет представления, о чем идет речь.
Перед тем, как мы начнем, давайте познакомимся с нашими собеседниками.
Жан-Марк Дэнис- @jm_denis
Жан-Марк работал в качестве дизайнера для Sparrow и не так давно для Inbox/Gmail в Google. Долгое время проповедуя философию Sketch, он предлагает свой видео мастер-класс для изучения Sketch на Sketchdesign.io.
Филипп Хонг - @philippehong
Дизайнер и разработчик-самоучка, Филипп тщательно заботится об UI/UX-дизайне в своих проектах. Он также является арт-директором по разработке фирменного стиля. Он выиграл несколько профессиональных наград, включая CSS Design Award, Dope Award и Best Mobile Application за “Bemyapp special Dailymotion”.
Автор оригинальной статьи, Себастиан Габриэль работает дизайнером для Google Chrome, в свободное время создает бесплатные .psd шаблоны и визуальные элементы.
Итак, начнем.
Почему вы предпочли использовать Sketch вместо Creative Cloud?
C.Г: Я до сих пор использую Creative cloud для некоторых вещей, но Sketch попросту более гибкий для ежедневной работы, которая заключается в разработке интерфейсов и управлении огромным количеством исходников. Photoshop стал чересчур универсальным, а Sketch подходит под наши конкретные нужды разработки пользовательских интерфейсов.
Ф.Х: Я решил перейти на Sketch, потому что программа адаптирована под мои нужды. И она эффективна в своем направлении. Sketch работает гладко, и самое главное, без лагов.
Ж-М.Д: Я никогда не использовал инструменты Creative Suite на 100%. Более того, их цена кажется сильно преувеличенной. На своем рынке этот пакет никогда не был конкурентоспособным, потому люди пользовались обычно Photoshop, Illustrator либо Fireworks. Конечно, каждый инструмент имеет свои плюсы и минусы. Вдобавок есть множество ресурсов для изучения работы с Photoshop; это одна из причин, почему именно Photoshop является программой “по умолчанию” для каждого дизайнера, с которым мне приходилось иметь дело.
Photoshop изначально не задумывался, как инструмент для дизайна интерфейсов. Функционал для ретуширования растровой графики, слишком тяжеловесный движок делают его инструментом, который ненавидят многие, но продолжают пользоваться им каждый день. Illustrator - достойная альтернатива, но для работы с ним следует еще очень многому обучиться. Что касается Fireworks, предполагалось, что он как раз восполнит потребности дизайна интерфейсов, но Adobe прекратил его развитие.
Sketch приобрел некий статус-кво, многие дизайнеры с нетерпением ожидали выхода более выгодной альтернативы Creative Suite. Начало не было грандиозным, но это было действительно удачное решение благодаря родному Mac-овскому интерфейсу и невероятной простоте работы, особенно в манипуляциях с элементами дизайна.
Принятие многими дизайнерами Sketch также можно объяснить и энтузиазмом в отношении новых функций, таких как смартгайды, клавиши “alt” для отображения размеров, векторный режим, экспорты и динамическое изменение элементов. Первоначальная цена программы в $30 (сейчас $99), была невероятно привлекательной для дизайнеров, которые, как и я, были фрилансерами.
В чем его сила и слабость?
Ж-М.Д: У Sketch есть масса преимуществ, которые нравятся дизайнерам, но это программное обеспечение все еще слишком молодо, и команде его разработчиков, так хорошо реагирующей на отзывы новыми релизами, предстоит еще очень много работы.
Для меня, одной из сильнейших сторон программы является ее скорость. Она полностью векторная и работает на родном языке MAC OS. Благодаря этому в ней уже предусмотрены такие важные функции, как контроль версий, автосохранение, движок визуализации шрифтов гораздо более точен, чем в любом другом пакете. Все операции не разрушают исходные объекты, поэтому любые манипуляции по объединению и трансформации векторных фигур являются обратимыми.
Опция Sketch mirror также невероятно полезна, так как позволяет дизайнеру визуализировать его макет дизайна на устройстве в режиме реального времени. Это значительно ускоряет итерацию.
Команда работает очень быстро и действительно прислушивается к своим пользователям. Например, разработчики очень быстро среагировали добавлением функции Symbols (символы) в программы. Она появилась в 3 версии.
Будучи итак удобным и эффективным, 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, но моему примеру последовало еще несколько дизайнеров. Сейчас 10 из нас работают в Sketch. Эта программа стала полнофункциональным производственным пакетом. Inbox iOS и Android, а также новый Gmail для Android выполнены на 100% с помощью Sketch.
Многие дизайнеры из других команд пользуются им, поэтому Google выпустил публичные файлы-исходники для Material design (MD sticker sheet).
Скриншот моего 01 урока Sketch tutorial 01, показывающего векторный интерфейс
Каковы позиции Sketch относительно конкурентов, в частности Photoshop и Illustrator?
С.Г: Как я уже сказал ранее, Sketch - нишевый продукт, и в этом его сила. Команда разработчиков тесно сотрудничает с сообществом пользователей, и в этом аспекте, по моему мнению, Adobe слегка проигрывает. Они обладают той скоростью и гибкостью, которая позволена небольшим командам, и которой лишены большие игроки рынка, такие как Adobe.
Если Sketch продолжит следовать своему направлению и будет слушать своих пользователей так же хорошо, как и раньше, он станет (если уже не стал) ведущим инструментом для своей целевой аудитории, вырвавшись намного вперед от своих конкурентов.
Ф.Х: Я полностью согласен. Sketch обслуживает нишевый рынок, в отличие от Photoshop, который хочет охватить всех и сразу. Sketch предоставляет более свежую альтернативу тому, что мы все долгое время использовали, т.е. Photoshop, Photoshop, Photoshop…
На рынок приходят и другие конкуренты, например, Affinity Designer, который я с нетерпением жду и представлю в своем будущем уроке по дизайну…
Ж-М.Д: Creative Suite немного улучшился в последней версии, но он по-прежнему довольно массивный из-за старого кода. Но здесь нужно понимать, что это явно не тот инструмент для дизайна интерфейсов, с которого стоит начинать.
Illustrator также используется многими. Это очень солидная программа, но будучи заточенным больше под печатные проекты, она не так идеально подходит дизайнерам чисто цифровой графики.
По поводу другого программного обеспечения, я встречался с Марком Эдвардсом и очень жду его релиз проекта Skala. Я очень его уважаю и представляю, сколько пользы его опыт и внимание к деталям принесут этой программе.
Как Sketch может развиваться в будущих версиях? Какое развитие хотелось бы видеть именно вам?
С.Г: Я считаю, что Sketch обязательно должен оставаться простым в использовании и развиваться в полном осмосе со своей нишей рынка. Одним из самых больших рисков для Sketch является слишком большое разнообразие функционала. Я думаю, что на данном этапе он очень хорош в том, для чего он предназначен, и как только будет исправлено несколько багов, Sketch станет практически идеальным решением в области дизайна интерфейсов.
Мое сокровенное желание - чтобы эта невероятно талантливая команда выпустила “Sketch для интерактивного дизайна”, который будет функционировать параллельно с основным приложением. Для меня это был бы идеальный “Sketch Creative Suite”. Но я не думаю, что в ближайшее время появится что-то такое, так как разработчики, должно быть, полностью заняты доработками уже имеющегося продукта.
Ф.Х: Я надеюсь только, что они исправят несколько багов, и я также знаю, что они работают над улучшением нескольких функций, чтобы их было еще легче использовать. Я думаю, они все делают правильно, так как хорошая программа - это программа, простая в использовании.
Ж-М.Д: Я бы очень хотел, чтобы развитие продукта шло по пути коллективной работы. Мне бы хотелось иметь возможность легко экспортировать библиотеку символов, чтобы переслать иконки своей команде и убедиться, что у всех нас единый набор элементов. Давайте сходить с ума: почему бы не добавить возможность типа Github, чтобы библиотеки были доступны всем в одном месте, и каждый мог обновлять их при необходимости? То же самое касается цветовых палитр и других эффектов.
Если пойти еще дальше, почему бы не разработать какой-нибудь Sketch store для обмена исходниками с командой и продажи наших библиотек иконок по всему миру? Я обещаю, эта идея бесплатная ☺. Кстати, сейчас подобная возможность успешно реализована в каком-то пакете для 3D-графики, таком как unity.
Что нового эта программа привнесла в ваш творческий и производственный процесс?
Ф.Х: На мой взгляд, Sketch привнес больше сплоченности в творческий процесс. Мы можем пользоваться предопределенными стилями, иметь доступ ко всему проекту в одном файле - это очень полезные особенности. Благодаря им нам не нужно постоянно рыться в куче файлов для поиска нужного элемента, и это очень круто!
Ж-М.Д: Я думаю, что здесь больший упор сделан на личных ощущениях, чем на технической новизне. Открытие Sketch больше похоже на открытие обычного Блокнота в Windows, в то время как Photoshop больше смахивает на Word. Когда открываешь программу, первое, что видишь - пустой холст, и сразу же фокусируешься на процессе создания дизайна. Интерфейс Sketch достаточно легкий, чтобы постоянно не спотыкаться о панели инструментов. В результате, вы тратите гораздо меньше времени на работу над дизайном, так как не приходится постоянно искать нужный инструмент, все под рукой.
С.Г: В логике процесса создания дизайна разница небольшая, но Sketch привносит гибкость и скорость, которую ранее не давало ни одно специализированное приложение. Простота, с которой Sketch позволяет управлять производством макета и его масштабированием - это просто небо и земля в сравнении с Photoshop.
Скриншот интерфейса Sketch, на котором показан один из проектов Филиппа.
Качество CSS-кода, генерируемого Sketch, отвечает ожиданиям разработчиков, с которыми вы работаете?
С.Г: Я не использую эту функцию в Google.
Ж-М.Д: Я редко использовал эту возможность в своем продукте, потому что я не работаю напрямую с разработчиками. В тех редких случаях, когда я все-таки ею пользовался, код получался приемлемым. Я думаю, что с тех пор создатели программы улучшили эту функцию.
Ф.Х: Мне приходилось опробовать CSS-код, сгенерированный в Sketch, и он не плох, но и не достаточно совершенен, как по мне. Это, возможно, будет доработано в будущем.
Как адаптивность влияет на ваш подход к работе? Другими словами: мобильная версия в приоритете или нет?
Ф.Х: Адаптивный дизайн стал для меня обязательной частью работы, учитывая количество мобильных пользователей на сегодняшний день. Я не большой сторонник ориентирования в первую очередь на мобильные устройства. Много кто обсуждает это, но я не думаю, что приоритет в сторону мобильности должен применяться ко всему и всегда. Здесь моду на выбор подхода диктуют пользователи. Мобильные в приоритете, да, но не всегда.
С.Г: “Пользователи в приоритете” - вот что приходит на ум вместо “мобильные в приоритете”. Ориентированность в первую очередь на мобильный устройства диктуется динамикой развития нашей индустрии в сторону мобильности.
Быть в курсе привычек, потребностей и поведения ваших пользователей, и принятие адаптированных решений на основе этой информации - вот что всегда в приоритете.
Ориентированность на мобильность - это то, что стоит рассматривать в начале проекта, и в большинстве случаев приоритет в сторону мобильной версии имеет смысл, но такой подход нужно применять в отношении продукта без ущерба в удобстве использования на других платформах/в других форматах, в которых он реализован.
Ж-М.Д: Приоритет на мобильность! Это очевидно и общеизвестно!
Любое исследование покажет это, мобильные устройства поедают десктопный рынок, еще с прихода смартфонов. Продукты, которые я разрабатываю, начинаются с мобильной реализации, но быстро создаются версии для каждого востребованного размера экрана, будь то планшет или настольный компьютер. Идея проста, если вы разрабатываете мобильный интерфейс, то всегда начинайте с самой компактной версии. Доработки для больших экранов всегда проще, они позволят использовать дополнительное пространство для усовершенствования удобства использования. В этом заключается сила Material design, и именно так мы создаем наши продукты (смотрите видео внизу).
Вы используете Sketch Mirror в своей работе?
С.Г: Да.
Ж-М.Д: Да, это очень важная часть моего рабочего процесса. Возможность визуализировать дизайн в реальном времени позволяет уделять больше времени итерациям. Ты более сконцентрирован и вовлечен в творческий процесс.
Ф.Х: Да, конечно, и это экономит мое время. Можно автоматически проверить, правильно ли подобраны размеры. Отличный инструмент.
Расскажите свое мнение о плоском дизайне. Что для вас является следующими ожидаемыми трендами? Можно ли сейчас ожидать возвращения скевоморфизма, после того, как мы достигнем максимального упрощения графики (как цикл развития дизайна и динамики трендов)?
Ф.Х: Для меня плоский дизайн достиг своего пика. Очень много новых дизайнов уходит слегка в скевоморфизм; например, в Твиттере кнопки не являются полностью однотонными, в них есть особый градиент. Я заметил в собственных проектах, что монотонные кнопки постепенно отходят, и я заменяю их на более сложные. Но я не думаю, что мы станем свидетелями полного возвращения скевоморфизма даже в далекой перспективе.
Ж-М.Д: Мне очень нравится эта цитата Сент-Экзюпери, которая отражает мой взгляд на развитие дизайна:
“Идеал достигнут не тогда, когда нечего добавить, а когда нечего убрать”.
Смартфоны объединили людей через прикосновение. Скевоморфизм был вынужденной эволюцией для поддержания этого изменения и придания ему большей естественности. Мы знаем кнопки, текстуры, и как люди с ними взаимодействуют. Сейчас, когда люди уже познакомились и наигрались с этими метафорами, проще убрать визуальные эффекты и сфокусироваться на том, что важно, на контенте.
Плоский дизайн - это интересный шаг, в котором упор сделан как раз на плоские элементы. Мы возвращаем эту технику, и она позволит нам по-новому связать интерфейс и контент.
Я почему-то думаю, что будущее интерфейсов заключается в 3-мерности. Расширение физической среды хорошо повлияет на ментальную связь пользователя с экраном. Можно представить себе конфигурацию источников освещения, выбор ракурсов камеры, добавление интерактивности контента в пользовательский интерфейс. Apple начал внедрять подобное в своем iOS7. Когда вы в телефоне, обои движутся на основе координаты гироскопа.
Виртуальная реальность - это огромный шаг, и люди, которые пробовали работать с Oculus, знают, о чем я говорю. Никто еще не смог успешно реализовать интерфейс в трехмерном поле зрения. Гулять по улице в контактных линзах, которые проектируют интерфейс, как в “Железном человеке” - это не совсем пригодное решение для каждодневного использования.
С.Г: “Плоский дизайн” - это термин, возникший в ответ на “скевоморфизм”. Как и любые другие кардинально противоположные понятия, эти термины как бы обобщают то, чем на самом деле является плоский дизайн и скевоморфизм, разделяя их на две совершенно отдельные категории, игнорируя некоторые накладывающиеся тонкости.
Я думаю, то, что мы сегодня называем “плоским дизайном” основано на искаженной интерпретации сущности скевоморфизма. Первый термин - неточный ответ на неправильно истолкованный последний. Другими словами, если дизайн не имитирует дерево или кожу, он плоский.
Термин “плоский” представляет что-то безразмерное. Следовательно, большая часть того, что сегодня называется “плоским”, на самом деле, им не является. Очень многие дизайнеры используют метафоры из реальной жизни в своем дизайне. Например, это может быть источник света, генерирующий цветовые градиенты и тени, а также размытие, которое имитирует либо недостаток фокуса, либо эффект “за стеклом” и т.д.
Интересно то, что находится посередине, “умный” дизайн, основанный на грамотных решениях, который работает независимо от того, какие термины нынче в тренде.
Я думаю, дизайн развивается циклично, как и многие другие вещи. Он эволюционирует, следуя резким реакциям, противоположным установленному тренду.
Интересен поиск вашего собственного места, правильное взвешивание хорошего и плохого.
Позиционируя себя посередине, наблюдая, анализируя, беря хорошее и избегая плохого, дизайн “развивается” вместо “революционизирования”. Это гораздо менее сексуальная стратегия, но значительно более конструктивная.
Является ли Sketch ответом на эти технические (адаптивный дизайн) и эстетические изменения (плоский дизайн)?
С.Г: Sketch - это идеальный пример продукта, выпущенного в ответ на конкретную потребность в идеальное время. Он рос и развивался по мере роста важности UX и UI (user experience - взаимодействие с пользователем и user interface - пользовательский интерфейс) в нашей индустрии. Отчасти, он символизирует то, чего мы пытаемся добиться в своей работе: предложение элегантного и эффективного решения, в ответ на срочную необходимость.
Ж-М.Д: Да, 100% для адаптивного и плоского дизайна, и всего 2-мерного, появляющегося на экране. Но это не ответ для всего 3-мерного дизайна.
Ф.Х: Sketch - это ответ, но не единственный…
Выдержит ли Sketch более графически сложные проекты?
Ф.Х: Для веб-проектов Sketch - отличный инструмент. Но сфера его применения ограничена UI-дизайном и, возможно, для более сложных проектов вам понадобится что-то еще.
С.Г: Sketch и его чистый стиль может показаться слишком простым для выполнения более сложных графических задач, но его не стоит недооценивать. Как только вы освоите этот пакет, с его помощью можно достичь очень многого.
Sketch очень силен в его сфере применения. Слишком большое расширение функционала может навредить продукту. Photoshop по-прежнему остается мастером редактирования растра, а Illustrator - не имеющем аналогов редактором для векторных проектов и иллюстраций.
Sketch - превосходная программа для UX/UI дизайна с отличными возможностями. Вне этой сферы, ответ скорее всего кроется в чем-то другом.
В заключении, я думаю, что для будущего Sketch (и других программ) важно максимизировать оперативную совместимость между всем ПО (чтобы была общая файловая система, например, .svg, и прямой импорт с другого дизайнерского ПО, как это реализовано в Framer.js). Это сложная задача, особенно учитывая конкуренцию между различным ПО.
Желание разработать программу, которая может все, может закончиться продуктом, который не будет эффективным ни для чего конкретно.
Ж-М.Д: Да, бесспорно! В частности, дизайн Gmail и Gmail Android был практически полностью разработан в Sketch. Вы можете представить, сколько итераций и скринов мы спроектировали. Мы обменивались нашими Sketch-файлами внутри команды (интерактивный дизайнер, разработчики прототипов, инженеры и продукт-менеджеры), чтобы каждый участник процесса мог выразить свои идеи в более конкретизированных дизайнах.
Philippe Hong: His portfolio and his tuto.com profile (in french)
Jean-Marc Denis: His portfolio and his Sketchdesign.io project.
To learn more on Sketch on tuto.com (in french): Sketch complete training.
Перевод статьи Sebastien Gabriel
Найновіші коментарі (0)