UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Адаптивный дизайн в Sketch, детальный анализ
Редакція
Редакція

Опубліковано • Оновлено

Адаптивный дизайн в Sketch, детальный анализ

Почему адаптивный дизайн именно в Sketch?

Если вы принадлежите к сообществу дизайнеров веб-интерфейсов, в последний год вы вряд ли избежали обсуждений Sketch, так как этот продукт у всех был на слуху. Запуск этого дизайнерского приложение встряхнул индустрию, в которой более 20 лет господствовал Adobe. Возникли длительные дебаты насчет того, что лучше – Sketch или Photoshop и Illustrator (и Fireworks), а также в чем лучше создавать адптивный дизайн. Пользователь Photoshop со стажем, я сам перешел на Sketch в начале 2014 года и даже не оглянулся назад. Мне очень нравятся некоторые особенности программы – простой интерфейс, автосохранение файлов и бесконечная рабочая область. Тем не менее, множество других программ предлагают аналогичные возможности, и до последнего обновления (Sketch 3.2), пользователи приложения бились со множеством багов. Так почему же я продолжаю работать в Sketch? С багами или без, он стал лучшим инструментом для дизайна интерфейсов, включая и адаптивный дизайн в Sketch.

Кейс-стади: Fleet Feet Sports

Посмотрим на недавно запущенный дизайн сайта, над которым я работал для Fleet Feet, магазин для бегунов с более 80 франшиз по США. В отличие от их старого сайта, новый Fleet Feet оснащен ecommerce-компонентом для продажи продуктов онлайн, и он стал адаптивным. С более 15 шаблонов дизайна для множества устройств и несколькими этапами ревизий, проект разросся до огромных размеров. В Photoshop, соблюдение корректной организации всех исходников и ревизий было довольно сложным и затратным по времени. Хотя с инструментами Sketch я мог более гладко и быстро разрабатывать этот проект, чем я бы мог справиться в любой другой программе. Давайте проанализируем, как именно Sketch помогает в разработке адаптивного дизайна сайта.

Основы работы в Sketch

Впервые запустив Sketch, вы сразу же заметите чистый, незахламленный интерфейс. Да, набор инструментов Sketch максимально упрощен по сравнению с другими программами для дизайна. Тем не менее, он включает только то, что можно воссоздать в HTML и CSS3. Таким образом, там нет ненужных фото-фильтров, 3D-инструментов и прочих примочек, которые могли бы замедлить процесс разработки. Приложение располагает только тем, что нужно для веб- и UI-разработки, что способствует максимально быстрому процессу создания дизайна. И все то, чего нет в стандартной сборке Sketch, доступно в плагинах, что делает адптивный дизайн проще. Плагины Sketch похожи на плагины Photoshop, и через них можно получить любой инструмент, начиная с простого редактирования границ и заканчивая продвинутыми генераторами контента. Я несколько месяцев ждал, пока не начал использовать плагины, так как хотел максимально привыкнуть к приложению, чтобы чувствовать себя комфортно. И это была большая ошибка – множество плагинов экономят уйму времени, и стали неотъемлемой частью рабочего процесса. Первое, что я бы порекомендовал скачать для Sketch, – плагин Sketch Toolbox. Этот менеджер плагинов позволяет напрямую искать и устанавливать нужные плагины, и отслеживать, чем вы уже пользуетесь. Адаптивный дизайн в Sketch - Sketch Toolbox. Sketch Toolbox. Вторая главная вещь в Sketch – все, что вы создаете, будет в векторной форме. В век адаптивного дизайна рисование в векторе – это ключевой момент. Дизайнерам всегда нужно думать о высоком разрешении вместо обычного, узких и широких экранах и т.д. Нужно построить дизайн, идеально подходящий под все эти варианты, а создание отдельного макета под каждый конкретный формат занимает очень много времени. Возможность Sketch свободно и легко изменять размер объектов экономит много времени и сил. Отличием Sketch от других векторных редакторов является возможность работы в пикселях. Фигуры, которые вы рисуете, всегда приводятся к ближайшему пикселю, так что не нужно париться по поводу полупикселей и размытых контуров. Это делает программу идеальной для дизайна скринов приложения или веб-ресурса, а также адаптивный дизайн.

Начало работы

Теперь пройдемся по тому, как я использовал Sketch для дизайна нового сайта Fleet Feet. В век адаптивной верстки, работа напрямую над дизайном макета сайта – это своего рода редкость. Так как Fleet Feet собирались добавить новые компоненты на их сайт, на первый план выдвинулась стратегия по контенту. Я поучаствовал в нескольких встречах для обсуждения будущего макета сайта. Мне нравится использовать удобный плагин AEFlowchart для Sketch, который позволяет создать дерево сайта. Для Fleet Feet в особенности было полезно фиксировать нововведения в организации сайта в виде, которым можно было поделиться с командой. Это была отличная помощь в процессе создания дизайна, и я бы ни за что не занялся подобным в другой программе просто потому, что это бы отняло слишком много времени. Адаптивный дизайн в Sketch - плагин AEFlowchart в работе. Плагин AEFlowchart в работе. Sketch также упрощает создание мудбордов и обеспечивает удобный доступ к ресурсам проекта. Все ваши файлы могут жить в одном документе. Sketch содержит список страниц в сайдбаре артборда, и с его помощью можно быстро передвигаться по файлам. Для больших проектов вроде моего возможность быстро переходить по различным компонентам дерева сайта, мудбордам и макетам пришлась как нельзя кстати, так как я постоянно вносил изменения и дополнял свой дизайн новыми элементами. Пройдемся по ранней версии стилей Fleet Feet (вы можете скачать удобный шаблон Sketch с ними). Возможность создавать типографические инструменты очень полезна, так как можно создавать текстовые стили для использования в различных документах, чтобы соблюсти общую стилистику проекта. Если клиент решает, что ему не нравится семейство шрифтов h1, вам придется обновить всего лишь одну сущность стиля, и он будет обновлен во всех файлах проекта. Приложение также использует родной рендеринг текстов (сглаживание), так что текст в браузере отображается точно также, как и в исходниках дизайна. Адаптивный дизайн в Sketch - Стили текста в приложении Sketch Стили текста в приложении Sketch Работа с цветами также упрощена в Sketch. Создайте цветовую палитру на вашем мудборде, и самые используемые цвета появятся впереди всех других свотчей оттенков, чтобы быть всегда под рукой. Вдобавок к обычным цветам, начиная с версии 3.1, вы можете добавлять собственные оттенки в свотчи документа (а согласно анонсу в бета-версии 3.3, вскоре будут доступны и пользовательские палитры). Наконец, помимо легкого перемещения по файлам в одном документе, вы можете также копировать и вставлять объекты и стили объектов (вроде градиентов или цветовых заливок) из одного файла в другой. Этой возможности нет в Photoshop, хотя она чрезвычайно полезна. Возможность копировать и вставлять элементы из мудборда в свой первый макет, и даже копирование объектов из одного макета в другой – это просто здорово.

Дизайн домашней страницы

После того, как вы ознакомились с созданием базовых стилей документа, посмотрим на создание элементов домашней страницы. Адаптивный дизайн в Sketch - Домашняя страница Fleet Feet. Домашняя страница Fleet Feet. Одной из моих любимых возможностей Sketch является встроенная сетка макета. В Photoshop мне приходилось использовать плагин, несколько направляющих линий или отдельные слои с импровизированной сеткой. В Sketch вы можете при необходимости активировать прозрачную решетку, и быстро изменить размеры колонок или интервалами. Для настройки параметров сетки перейдите в меню “View” → “Layout Settings.” Я создал сетку по умолчанию размером 1080 пикселей, 12 колонок с 30-пиксельными интервалами. При необходимости я менял настройки от проекта к проекту. Если мне нужно отобразить или спрятать сетку, я просто нажимал Control + L. Адаптивный дизайн в Sketch - Работа с сеткой в Sketch: все просто! Работа с сеткой в Sketch: все просто! Как я уже говорил, все, что реализуемо средствами CSS, возможно и в Sketch. Создание закругленных углов на кнопке просто требует кликнуть на объекте и настроить размер радиуса в сайдбаре. Градиентный оверлей на изображении можно добавить в один клик, можно не привязываться только к доступным цветам в палитре, моделировать реальную картину, которая будет отображаться в браузере. Так как инструменты CSS3 сейчас на пике моды, несколько других дизайнерских программ предлагают подобные возможности. Sketch идет на шаг вперед, позволяя дизайнерам копировать точные CSS-стили для этих элементов. Можно просто кликнуть правой кнопкой мышки на любом объекте и скопировать его стили, включая название слоя в качестве комментария к коду. Это, безусловно, обеспечивает лучшую согласованность между работой дизайнера и разработчика. Вдобавок к созданию и копированию CSS-стилей, дизайн дублированного контента также упрощается. Sketch позволяет превратить группу объектов в символ, который можно копировать и вставлять в другое место. Любые изменения в этом объекте автоматически подтянутся ко всем его копиям! Посмотрите на посты блога внизу домашней страницы Feel Feet. Так как их всего три, внесение изменений не потребует много времени и сил, но все равно это нудная рутина. Используя символы, можно экспериментировать с размерами изображений, текстом и цветами всех трех сущностей одновременно, упрощая себе жизнь. Символы могут работать даже в разных шаблонах, так что если вы решаете использовать тот же формат поста и на листинге постов блога, достаточно просто скопировать туда символ, и все изменения будут мгновенно синхронизироваться между всеми копиями. Когда вы готовы добавить настоящий контент вроде опубликовать изображение или заголовок, нужно просто кликнуть правой кнопкой мышкой по объекту и отсоединить его от оригинально символа. Адаптивный дизайн в Sketch - Символы могут упростить работу и сэкономить ваше время. Символы могут упростить работу и сэкономить ваше время. Пока я использую символы для таких вещей, как посты блога или листинги продуктов, мне также нравится использовать плагин Dynamic Button для создания кнопок на странице. Плагин создает символ кнопки, но автоматически настраивает отступ по бокам кнопки, в зависимости от длины текстовой надписи на ней. Это также экономит время на страницах с несколькими кнопками, как и эта домашняя страница. Просто создаете текстовый слой для текста кнопки, выделяете плагин, редактируете название слоя, чтобы он отражал желаемые отступы на фоне кнопки (например, 10:20:10:20), нажимаете Command и все! У вас получилась динамическая кнопка, которую можно копировать-вставлять по всему дизайн-проекту, всего лишь редактируя текст. Адаптивный дизайн в Sketch - Динамические кнопки в Sketch. Динамические кнопки в Sketch.

Создание страницы листингов продукта и команды

Я вкратце описал, насколько полезны символы на домашней странице, а что по поводу страниц с кучей повторяющегося контента, как, например, листинги продуктов или страничка команды? Символы будут полезными для создания отдельного пункта в листинге и последующего копирования, но контент все равно должен быть разный на всех этих объектах, чтобы клиент видел реалистичную картину при проверке. Добавление контента на 20+ элементов в макете может вызвать определенные трудности. Вдобавок, клиенты редко могут предоставить живой контент до того, как утвержден дизайн. Слава Богу, в Sketch есть несколько плагинов, которые генерируют контент автоматически прямо в дизайне. Для странички листингов продуктов и подобного нам не нужно тратить часы для поиска изображений туфель с белым фоном и заниматься прочей ерундой такого плана. Вместо этого нужно изображение-заглушка. Плагин Day Player отлично заполняет заглушки с помощью различных графических сервисов. Мне нравится Placehold.it, потому что его используют разработчики, с которыми я сотрудничаю, и я также использую Lorem Pixel, чтобы получить конкретные изображения. Выберите плагин и графический сервис, который вам нравится, отредактируйте опции заглушки, включая размер и цвет, и вставьте в группу объекта продукта. Это гораздо проще, чем искать картинки в Google и подгонять их под свои параметры! Адаптивный дизайн в Sketch - Плагин Day Player в действии. Плагин Day Player в действии. Для макетов с более сложным и разнообразным контентом я люблю использовать плагин Content Generator. Страница членов команды, например, нуждалась в фотографиях мужчин и женщин, именах, должностях и контактных данных. Используя плагин, мне нужно было всего лишь выбрать блоки графических заглушек для каждого члена команды, в опциях плагина задать пол аватарки. Заполнение имен, номеров телефона, почтовых адресов было также просто. Функции Sketch не только полезны для макетов и повторяющегося контента, но и для обычных веб-страниц. Скажем, нужно добавить какой-то текст вниз страницы команды. Для такого текста-заглушки, как внизу странички команды Fleet Feet, можно снова воспользоваться плагином Content Generator, который зальет lorem ipsum текст, вместо поиска онлайн-сервиса для генерации текста. Вы заметили в тексте список тезисов? Это еще одна возможность Sketch – встроенная генерация нумерованных или маркированных списков – ее всегда не хватало в других дизайнерских программах (включая всемогущий Photoshop и ориентированный на дизайн скринов Fireworks). Возможность форматировать текст точно в таком же виде, как он отображается в браузере, действительно полезна, и Sketch предоставляет такую возможность! Адаптивный дизайн в Sketch - Маркированные списки в Sketch? Легко! Маркированные списки в Sketch? Легко!

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

Я коснулся создания некоторых элементов для стандартной веб-страницы. Теперь давайте перейдем к тому, почему же Sketch так хорош в адаптивной верстке. Одной из моих любимых возможностей Sketch является возможность создания множества артбордов на одном холсте. Photoshop заставляет вас создавать множество PSD-файлов, а затем переключаться между окнами для работы с разными макетами. Этот процесс сильно напрягал, так что я создавал версии для мобильных и планшета только для проектов с большим бюджетом. В Sketch вы можете видеть десктопную, мобильную и планшетную версии все на одном экране, что позволяет редактировать все макеты одновременно. Для Fleet Feet в особенности возможность работать с множеством артбордов пригодилась из-за большого количества шаблонов. При редактировании символов текстовых стилей и цветов, я мог сразу же видеть, как мои изменения отражались на дизайне. Это также помогает дизайнеру соблюдать постоянство между оформлением десктопной и мобильной версий. Множество артбордов в одном окне Sketch позволяет легко работать над различными версиями дизайна одновременно. Множество артбордов в одном окне Sketch позволяет легко работать над различными версиями дизайна одновременно. Создание всех этих артбордов (десктопная, мобильная и планшетная версии) в Sketch также не представляет сложностей. Просто нажмите А, чтобы создать артборд, и Sketch выдаст список с 28 различными разрешениями экрана и размерами иконок на выбор, включая размеры Retina. Это особенно полезная опция для адаптивного дизайна, так как не нужно париться по поводу правильности размеров при создании макетов. Еще одна отличная функция Sketch – возможность предварительного просмотра дизайнов на устройстве, для которого он создается. Хотя это не встроенная опция, приложение Sketch Mirror позволяет синхронизироваться с открытым документов и протестировать, как выглядит дизайн на iPhone или iPad. Программа также подтягивает изменения из Sketch в реальном времени. Приложение действительно оказалось незаменимым при финальной подгонке дизайна и демонстрации результатов заказчику. Поэтому адаптивный дизайн в Sketch стал еще доступнее. При создании статических макетов в Sketch будет полезно предоставить заказчику или разработчику максимально реалистичный превью того, как должен выглядеть адаптивный дизайн в реальности. Так что интерактивное прототипирование – действительно необходимость для веб-дизайнеров. Пока в Sketch нет встроенного функционала для прототипирования, другие программы охотно интегрируют Sketch в свои модели работы. Хорошо известные инструменты для прототипирования, такие как InVision, UXPin и Marvel могут напрямую работать с файлами Sketch. Возможно, скоро в обиход войдут и плагины для прототипирования. Sketch Framer использует FramerJS для создания интерактивных прототипов прямо с холста, и сейчас он работает с последней бета-версией Sketch (3.3).

Переход к разработке

Как только дизайн Fleet Feet был готов для разработки, настало время экспорта исходников. Когда я только начал использовать Sketch, никто из разработчиков в моей команде не имел этого приложения, и я не собирался заставлять их покупать программу, которую я только начал тестировать. Тем не менее, мне предстояло нарезать все исходники для проекта. К счастью, Sketch делает процесс экспорта всех файлов суперпростым. Возьмем, к примеру, иконки мобильной навигации. Просто кликнув на группу слоев и нажав кнопку Export в правом нижнем углу, я могу сохранить иконки для веб в формате SVG или PNG, или в PNG @2x для экранов Retina. Так можно подготовить исходники под любые устройства и под адаптивный дизайн. Экспорт исходников в Sketch. Экспорт исходников в Sketch. Я предоставил разработчикам все нужные исходники, но как именно они начнут работу, не зная всех цветов, шрифтов и их размеров? Sketch и тут все максимально упрощает. Используя плагин Sketch Style Inventory, вы можете создать список всех свотчей и HEX-кодов цветов, используемых на странице. Шрифты можно передать разработчикам в таком же виде. Мне нравится использовать этот плагин для создания списка текстовых стилей в качестве справочника для разработчиков. Также, помните, я упоминал, что вы можете скопировать CSS-стили для каждого элемента в документе? Чтобы получить эти текстовые стили в форме, перевариваемой программистами, вам нужно просто выделить все слои, скопировать CSS-стили и вставить их в список стилей. Используя Sketch, вы можете предоставить разработчикам все исходники и стили, так что у них будет все необходимое для работы, даже без необходимости открыть приложение!

Чего не хватает?

Я много уже сказал по поводу преимуществ Sketch для своей работы, но какие же есть недостатки? В целом, приложение до сих пор не может быть единственной программой для дизайна в вашем арсенале. Инструменты для редактирования растра в Sketch оставляют желать лучшего. То, что есть сейчас, обычно не работает для меня, так что я по-прежнему вырезаю или удаляю фоны в Photoshop. И хотя большая часть работ по иллюстрированию может быть сделана в Sketch, она довольно ощутимо замедляет работу приложения. Еще один недостаток Sketch – его плагины. Хоть я и хвалил многие из них в этом посте, я бы предпочел, чтобы большинство их возможностей были интегрированы непосредственно в Sketch. Так как эти плагины созданы сторонними разработчиками, банальное обновление Sketch или самого плагина может привести к сбою в работе. Это означает, что вы не сможете полностью положиться на них в своей работе. И, наконец, эта программа все еще ограничена совместимостью только с Mac OS X. И это не только проблема для тех, кто работает в Windows, это также делает почти невозможной задачей поделиться родным файлом приложения с разработчиком, проект-менеджером или клиентом, не имеющим этого ПО.

Заключение

Несмотря на то, что Sketch все еще находится на стадии становления, он продолжает быть моим главным помощником в веб-дизайне. Его инструменты и интерфейс приоритизирует дизайн для веб. Такие штуки, как пресеты артбордов, символы и простой функционал для экспорта исходников разительно ускорили мой рабочий процесс и сделали создание дизайна гораздо более легким. Sketch также улучшил все стадии моей работы вплоть до ранних стадий работы программистов над интеграцией дизайна в код, и стал оптимальным инструментов для адаптивного дизайна. Вы уже попробовали Sketch? Стал ли он вашим выбором среди инструментов для создания адаптивного веб-дизайна? Может, у вас есть свои трюки и советы по оптимизации подобной работы? Делитесь своими находками и мнениями в комментариях!


Перевод статьи Ashley Bennett

Топ коментарі (0)