Эскиз Учебники

Пошаговое руководство по запуску нового проекта дизайна приложения в Sketch

И почему я никогда, НИКОГДА не начинаю их с нуля.

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

Начать дизайн-проект сложно.

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

Я работаю в дизайнерском агентстве, которое ежемесячно подписывает новых клиентов. Мое неофициальное название - это что-то вроде Product Concept Designer, что в основном означает, что каждый раз, когда мы начинаем с новым клиентом, я получаю захватывающую работу по созданию концептуальных экранов, которые вдохновляют их на следующий год (или два… или три) ).

Эти концепции поставлены в сжатые сроки и требуют быстрых изменений, поэтому мой ВЕСЬ МИР сосредоточен вокруг эффективности и точности; мои макеты должны решить эту проблему, обеспечить видение и быть доведены до совершенства для плавного перехода к проектированию производства.

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

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

Оглавление / Сокращенная версия / «Я не читаю все это»:

  1. Создайте папки с файлами (да, по-настоящему)
  2. Выбрать цвета
  3. Выберите шрифт (ы)
  4. Настроить сетку
  5. Создайте «Блок-рамку»
  6. Конвертировать в Hi-Fi

1. Создайте папки с файлами

Почему: чтобы мои файлы дизайна и ресурсы были организованы!
Инструменты, которые я использую: Finder + Automation (ниже)

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

Я добавляю _underscore, чтобы убедиться, что эти папки остаются в верхней части списка.
  • _assets: Эта папка обычно используется совместно с внутренними / внешними командами разработчиков. Он включает в себя все, что им нужно для создания приложения (фиктивные изображения / контент, шрифты, значки, изображения и логотипы).
  • _exports: Каждый раз, когда я экспортирую экран в PNG, они идут сюда. Эта папка предназначена для маркетинга, поэтому у них всегда есть новейшие экраны для размещения в различных маркетинговых материалах (колодах, веб-страницах, социальных сетях).
  • UI-дизайн: это мои исходные файлы. Обычно это всего один файл, но если я когда-либо создаю новые, они хранятся здесь.

Я создал автоматизацию, чтобы создать все эти папки для меня ...

... и вы можете получить его здесь бесплатно:

2. Выберите цвета

Зачем: создать базовую палитру дизайна для моего проекта.
Инструмент (ы), которые я использую: Coolors.co

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

Мои дизайнерские системы всегда построены на 5 основных цветах:

  • Марка Первичная
  • черный
  • Акцент 1 (Успех)
  • Акцент 2 (Предупреждение)
  • Акцент 3 (Опасность)

Почему эти цвета? (проверьте раздел 2 в этой статье)

Я использую приложение под названием Coolors от Fabrizio Bianchi, чтобы помочь мне создать палитру. Вы нажимаете пробел, и он будет случайным образом выбирать цвета для вас. Когда вы найдете нужный вам цвет, заблокируйте его и продолжайте генерировать, пока не найдете другие цвета. Если цвет вашего бренда уже определен, вы можете ввести шестнадцатеричное значение, заблокировать этот цвет, а затем нажать пробел, чтобы сгенерировать остальные цвета.

Видите хороший цвет «Успех»? Зафиксируйте его. Продолжайте, пока не найдете цвета для каждого из 5 основных цветов. (см. эту палитру)

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

Мой шаблон также имеет «вторичный» цвет, но он мне не всегда нужен.

Подробнее о том, как создать полноценную таблицу стилей, читайте здесь:

3. Выберите шрифт (ы)

Почему: чтобы придать моему приложению некоторый характер!
Инструменты, которые я использую: Google Fonts and Font Pair

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

Эй, Джон, что делает хороший шрифт для дизайна приложений?

Эй, я рад, что вы спросили: «Вот несколько вопросов, которые я задаю себе, когда выбираю шрифт:

  • Читаемость: это читается в течение длительного периода времени?
  • Масштабируемость: это читаемо, когда оно большое и когда оно маленькое?
  • Изменчивость: есть как минимум две вариации веса?

Google Fonts обновили свой интерфейс в прошлом году, и его использование действительно фантастично. Я всегда проверяю все на белом и черном фоне, чтобы убедиться, что все работает.

Настройки на правой панели - это то, как мне нравится охватывать поиск.

Если вам нравятся несколько гарнитур - скажем, одна для заголовков, а другая для контента - тогда вы будете копать пару шрифтов. Они проделали тяжелую работу для вас и прямо в строке покажут, как выглядят два шрифта рядом друг с другом. Это позволяет легко выбрать красивую пару. Кроме того, он получает все шрифты из Google Fonts, так что вам не нужно беспокоиться о том, что вам нужно что-то платить.

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

После того, как вы выбрали свой шрифт (ы), создайте стили текста внутри Sketch для таких вещей, как заголовки, содержимое тела и ссылки. Вы никогда не должны добавлять текст в дизайн, если он не привязан к текстовому стилю. Если вы решите изменить шрифт в будущем и у вас будет «неназначенный» текст, они не будут обновляться при синхронизации изменения шрифта.

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

4. Настройте сетку

Почему: чтобы установить согласованность во всем приложении.
Инструмент (ы), которые я использую: эскиз и калькулятор

Стало достаточно распространенным, чтобы сетки строились из кратных 8.

Почему 8?

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

Более подробная информация здесь: https://spec.fm/specifics/8-pt-grid

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

  • Полная ширина: приложение полной ширины от края до края. Если это веб-приложение, ваш дизайн расширится до самых краев браузера.
Мне нравится устанавливать желоба не менее 24 пикселей. В этом случае желоба делятся на 8, а столбцы - нет. Не огромная сделка.
  • Плавающее: плавающее приложение придерживается сетки фиксированной ширины, обычно в центре окна.

Для плавающих приложений мне нравится, когда мои желоба и столбцы делятся на 8. Вот простое уравнение:

(12 столбцов * ширина) + (11 желобов * ширина) = общая ширина макета

  • Гибрид: гибридное приложение представляет собой смесь полноразмерных и плавающих элементов. Веб-сайт Medium представляет собой гибридное приложение, поскольку верхний колонтитул имеет полную ширину, а область содержимого имеет размер 740 пикселей.
Этот макет представляет собой плавающий макет с некоторыми элементами полной ширины.

Последнее замечание По умолчанию Shift + → расстояние в Sketch составляет 10 пикселей. Это будет СУПЕР раздражает, когда вы работаете с сеткой 8px. К счастью, Sketch позволяет вам изменить это в настройках.

5. Постройте «Блок-рамку»

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

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

Вот блок-фрейм, который я сделал для приложения чата, которое я проектирую:

Там нет рассуждений за цветами. Видимо, я чувствовал себя патриотично.

Это заняло у меня всего около 90 секунд, но это все руководство, которое мне понадобится, чтобы начать разработку интерфейса. Я предпочитаю это полноценному каркасному построению, потому что я склонен переходить на hi-fi, когда пытаюсь каркасировать каждый элемент на экране. Может я просто плохой дизайнер? Я просто вижу множество каркасов, которые уже настолько подробны, что вы могли бы сделать это с полной визуальной точностью в первый раз - в любом случае. Просто мое мнение!

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

6. Конвертировать в Hi-Fi

Поэтому я не хочу оставлять тебя в покое ...

... но это то, где ты делаешь свою магию!

Самая важная вещь на этапе проектирования hi-fi - это придерживаться всего, что мы настроили на шагах 1–5.

  • Сохраните вещи в нужную папку (ы).
  • Используйте только цвета в вашей палитре.
  • Не отклоняйтесь от своих текстовых стилей.
  • Всегда соответствуйте своей сетке.
  • Блокфрейм новых макетов, прежде чем делать их с высокой точностью.

Резюме

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

Когда я не пишу, я работаю над инструментами дизайна Sketch, такими как UX Power Tools, чтобы сделать вас лучшим и более эффективным дизайнером. Все лучшие дизайнеры и команды Sketch используют его, и я думаю, вам это тоже понравится. Проверьте это на Marvel!

Следите за UX Power Tools в Твиттере
Подпишись на меня в Твиттере