Если вы член в Интернете или UI дизайнерского сообщества, это было трудно не говорить о
Sketch 1 за последний год.Запуск этого проекта приложения встряхнул отрасли, где доминируют Adobe на протяжении более двух десятилетий, и это вызвало продолжающиеся дебаты о том, Sketch лучше, чем Photoshop и Illustrator (и Fireworks 2 ).
Давний Photoshop пользователь сам, я сделал выключатель эскиз в начале 2014 года и не оглядывался назад.Я люблю некоторые особенности программы, такие как простой интерфейс, файл автосохранения и бесконечной холсте.Тем не менее, множество других программ, там есть схожие черты, и до самого последнего обновления (эскиз 3.2), пользователи не боролись много ошибок в приложении .
Итак, почему я продолжаю использовать эскиз?Ошибки или нет ошибки, он стал лучшим инструментом для разработки пользовательского интерфейса, в том числе Адаптивный веб-дизайн .
Case Study: Fleet Feet Sports
Давайте посмотрим на недавно созданной веб-дизайна, что я работал на протяжении Флот Feet 3 , работает магазин с более чем 80 франшиз по всей территории Соединенных Штатов.В отличие от своего старого сайта, новые Ноги флота компонент электронной коммерции, чтобы продавать товары онлайн, и это реагировать.С более чем 15 шаблонов для разработки различных устройств и нескольких раундов пересмотра, этот проект был огромен .
В Photoshop, оставаясь организованный среди всех документов и туров изменений было бы сложной и трудоемкой.Тем не менее, с помощью инструментов Эскиз, я был в состоянии работать в рамках этого проекта от начала до конца более плавно, легко и быстро, чем я мог бы сделать с помощью другой программы.Давайте посмотрим на то, как создать веб-сайт в Sketch значительно улучшает реагировать процесс проектирования .
Look At The Basics
Розжига эскиз, вы сразу же заметите, чистый, unbloated интерфейс.Да, набор инструментов Sketch, безусловно, является урезанной по сравнению с некоторыми другими программами проектирования.Тем не менее, она включает в себя только то, что может быть воссоздана с HTML и CSS3.Таким образом, нет никаких лишних фото фильтры, 3D-инструменты или другие инструменты, которые бы замедляет работу.Приложение обеспечивает только то, что нужно делать и веб-интерфейса работу, что делает для гораздо более быстрыми процесса проектирования .
А что не хватает Эскиз, его plugins 4 наверстать.Эскиз плагины сродни в Photoshop и все, начиная от простой инструмент, который меняет местами границу и заливку цветом, чтобы завершить генераторы контента.Я ждал несколько месяцев, чтобы начать использовать плагинысам, потому что я хотел быть абсолютно комфортно с программой.Большая ошибка — многие из этих плагинов огромные экономии времени и стали неотъемлемой частью моей работы .
Первое, что я рекомендую скачать, когда, начиная с эскиза Эскиз Toolbox 5 .Этот менеджер плагин позволяет напрямую просматривать и устанавливать плагины и отслеживать то, что вы используете .
6 Вторая основная вещь, чтобы отметить, что все, что вы создать в эскиз вектор.В возрасте реагировать дизайн, создание дизайна в векторах является ключевым фактором.Дизайнеры постоянно приходится думать о высокой четкости по сравнению с нормальным разрешением дисплеев, узкие по сравнению с широких экранов и так далее.Строительные конструкции, что масштабирование для всех этих форматов является существенным, но создания отдельного макет для каждого размера является утомительным и занимает много времени.Возможность Sketch для свободно изменять размеры объектов экономит время и энергию .
Что отличает эскиз отдельно от других программ векторную является то, что это также пиксель-в курсе.Формы вы рисуете всегда привязываются к ближайшему пикселу, то есть вы больше не придется беспокоиться о полутора-пикселей или нечеткости линий.Это делает программу идеально подходит для дизайна экрана .
Получение Started
Теперь давайте пройдемся по, как я использовал эскиз для разработки нового веб-сайта флота ступней.В возрасте ответного дизайна, будучи в состоянии прыгать прямо в проектировании макет довольно редко .
Из-за флота Ноги бы добавлять новые компоненты для своего веб-сайта, впервые приехал в содержание стратегии.Я сидел в на нескольких встречах на ранней стадии, чтобы обсудить, как новый веб-сайт будет выложен.Мне нравится использовать удобный Sketch плагин называется AEFlowchart 8 создать сайт деревья для веб-сайтов, я работаю на.Для флота Ноги в частности, было бы полезно для отслеживания новой организации веб-сайта и за то, что то, что я мог бы сравнить с моей командой.Это было таким полезным ссылки помощь в процессе проектирования, и я никогда бы не потратил время на создание его в другой программе, просто потому, что это было бы слишком много времени .
9 Эскиз также делает moodboards проще создавать и более ресурс проекта.Прежде всего, обратите внимание, что все ваши файлы могут живут в одном document.Эскиз содержит страницу ящик в монтажной области боковой панели, что позволяет быстро прокручивать между файлами.Для крупных проектов, как этот, это было особенно приятно иметь возможность быстро перейти туда и обратно между Дерево сайта, мой Moodboard и моих набросков, как я разработанные или внесены изменения .
Давайте ходить по ранней версии одного из __20 флота ступней | стиль tiles 11 (из которых удобно Эскиз template 12 уже доступен для скачивания),Будучи в состоянии создать типографских элементов очень полезно, потому что вы можете создать текст styles для встроенных стилей, таких как заголовки и блоков цитат, а затем применить эти стили позже к тексту в других документах.Если ваш клиент решает, что они ненавидят h1 ‘ы семейство шрифтов позже в процессе проектирования, все, что вам нужно сделать, это обновить один экземпляр стиля, и она будет обновить каждый экземпляр в файлах вашего проекта.Приложение также использует собственные визуализации текста (сглаживания), так что текст не появляется в браузере как именно оно появляется в дизайн файла — не более интересно, если облегченная версия гарнитуры вы выбрали для заголовков можно будет прочитать на экране .
13 Цвет management также упрощается с Sketch.Создать цветовую палитру в вашем Moodboard, а также наиболее распространенные цвета будут выведены выше всех образцов для быстрого последующего использования в процессе проектирования.В дополнение к обычным цветов, обновление 3.1 позволяет добавлять пользовательские цвета для вашегоОбразцы документов (и в соответствии с 3,3 в бета-нот, пользовательские цветовые палитры в ближайшее время) .
Наконец, как можно прокручивать каждый из ваших файлов в одном документе, вы также можете копировать и вставлять объекты и стили объектов (таких как градиенты и заливок) из одного файла в другой.Эта функция была невозможна в Photoshop, но это очень полезно.Будучи в состоянии скопировать и вставить элементы из Moodboard к вашему первому макета, и даже объекты из одного макета к другому, является большим .
Проектирование дома Page
Теперь, когда вы увидели, как создать несколько основных стилей в документе, давайте посмотрим на то, как я создал некоторые элементы на главной странице .
15 Один из моих любимых особенностей эскиз встроенный в макет сетки.В Photoshop, я бы полагаться на плагин, в серии руководств или отдельных слоев с импровизированной сетки, которые не должны быть легко доступны для редактирования.В Sketch, можно легко переключаться прозрачный руководство макета и быстро изменить столбцов и желоба размеры.Чтобы изменить разметку сетки, перейдите в раздел “Вид” → “Параметры разметки.” Я создал по умолчанию 1080 пикселей, 12-столбца сетки в 30-пиксельных водостоков, о которой я только меняться от проекта по мере необходимости к проекту.Всякий раз, когда я хочу, чтобы увидеть сетку или выключить его, я просто нажмите Control + L .
17 Как упоминалось, все возможно в CSS можно в Sketch.Создание закругленных углов на кнопку действия так же просто, как нажать на объект и регулировки радиуса в боковой панели.Градиент накладки на изображениях принять всего один клик добавить, зависят не только от цвета в образцы, и сделать верно то, что браузер будет показывать .
В то время как CSS3 инструменты отличный, несколько других дизайн программы там есть те же самые инструменты.Эскиз занимает еще один шагдальше, позволяя дизайнерам скопировать точные стили CSS для этих элементов.Просто щелкните правой кнопкой мыши на любом объекте, чтобы скопировать стили, в том числе имени слоя в качестве комментария выше кода.Это делает для более тесную опытом между проектирования и разработки .
В дополнение к созданию и копирования стилей CSS, проектирование дублированный контент легче.Эскиз позволяет превратить группу объектов в symbol!, Которые могут быть скопированы и многократного и любые изменения в этом объекте автоматически синхронизируются для всех экземпляров
Посмотрите на сообщения в блоге на дне домашней странице чувствовать себя ступней.Потому что есть только три, внесение изменений для всех из них не будет огромное дело, но это все равно будет утомительным.Использование символов, мы можем поиграть с размерами изображения, текст и цвета для всех трех одновременно, делая жизнь немного легче.Символы работать даже между шаблонами, так что если мы решим использовать тот же макет на блоге страницу со списком, все, что мы должны сделать, это скопировать экземпляр символа там, и изменения будут синхронизироваться между всеми ними.Когда вы будете готовы, чтобы добавить в реального содержания, как: Изображение или заголовок, все, что вам нужно сделать, это щелкните правой кнопкой мыши и снимите объект из его своеобразным символом .
19 В то время как я использую символы для таких вещей, как сообщения в блоге и списки продуктов, я хотел бы использовать Dynamic Button 21 плагина для кнопок на странице.Плагин существу создает символ для вашей кнопки, но автоматически регулирует padding по бокам в зависимости от длины текста.Это здорово экономит время со страницами, которые имеют несколько кнопок, таких как этой домашней странице.Просто создайте текстовый слой с исходным текстом кнопки, выберите плагин, изменить имя слоя, чтобы отразить отступ фоне вашей кнопки (например 10:20:10:20), нажмите Command + J и та-да!Теперь у вас есть динамический кнопку, вы можете повторить последовательно всей конструкции только путем редактирования текст кнопки .
22 Создание продукта и его команда Листинг Page
Я коснулся кратко о том, как полезно символы могут быть на главной странице, но то, что о со страницами с большим количеством повторяющихся содержания, как продукции и командных список страниц?При использовании символа, чтобы создать отдельный элемент в список было бы полезно, содержание в конечном счете должны быть добавлены для всех этих объектов для того, чтобы выглядеть реалистично клиенту .
Добавление содержимого на 20 пунктов в макете будет огромная боль.Кроме того, клиенты редко имеют содержание готов до утверждения дизайна.К счастью, эскиз имеет несколько плагинов для создания контента автоматически в конструкции .
За то, как страницы со списком продуктов, мы не хотим тратить много времени на поиск обуви изображений с белым фоном до первого раунда изменений;Вместо этого, мы просто нужно шаблон изображения. День Player 24 плагин большой ресурс, который заполняет заполнителей из различных служб изображения.Мне нравится Placehold.it 25 потому что это то, что разработчики, которые я работаю с использованием, и я использую Lorem Pixel 26 получить конкретные образы.Выберите плагин и службу изображения вы хотели бы использовать, редактировать параметры для заполнителя, такие как размеры и цвета, а затем вставьте его в целевой продукт группы.Это гораздо проще, чем поиск изображений на Google, чтобы использовать в качестве заполнителей
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров