Содержание
- Каркас в Sketch
- 01. Создайте компоненты в Sketch.
- 02. Используйте сетку и направляющие.
- 03. Создание символов в Sketch
- Улучшайте свои прототипы Sketch
- 04. Добавление анимации в Sketch.
- 05. Отметьте свою стартовую страницу.
- Совместная работа в Sketch
- 06. Используйте Sketch Cloud
- 07. Прототипы в Sketch Cloud
- 08. Включите комментарии в Sketch Cloud.
- 09. Основные горячие клавиши в Sketch Cloud
- Создайте дизайн-систему в Sketch
- 10. Оставайтесь организованными
- Создать дизайн страницы
- 12. Создайте четкую визуальную иерархию.
- 13. Разумно используйте цвета.
- 14. Эффективно используйте типографику.
- 15. Используйте значки, чтобы добавить контекст
- 16. Дизайн кнопок и входов.
- 17. Сложные компоненты и разделы
Стадия создания идеи и каркаса любого дизайна позволяет вам учитывать макет и взаимодействие с пользователем с самого начала вашего проекта. Используя только основные компоненты вашего веб-дизайна - верхний колонтитул, нижний колонтитул, навигацию, кнопки - для начала, вы всегда можете убедиться, что ваше внимание сосредоточено на пользователе, не отвлекаясь на цветовую палитру, которую следует использовать.
Существует множество инструментов для создания каркасов, но сегодня многие веб-команды используют Sketch. Удобство использования и непревзойденная скорость делают его очевидным выбором.
Начиная с заголовка, что нам нужно, если мы сначала подходим к этому проекту с мобильных устройств? Логотип в центре внимания? Следует ли нам рассмотреть возможность использования «гамбургерной» навигации, чтобы обеспечить лучшую практику? Это вопросы, которые любой дизайнер должен задавать себе на протяжении всего процесса создания каркасных компонентов и дизайна страницы. Вот как можно ответить на эти и другие вопросы с помощью Sketch. Хотите разные инструменты для создания сайтов? Подумайте об использовании конструктора веб-сайтов или взвесите варианты веб-хостинга.
Щелкните значок в правом верхнем углу каждого изображения, чтобы увеличить его.
Каркас в Sketch
01. Создайте компоненты в Sketch.
Первым шагом должно стать создание монтажной области для мобильных устройств или настольных компьютеров и начало создания компонентов на странице с помощью простых форм, чтобы определить контур компонентов, например заголовок.
Слишком много цветов может отвлекать, поэтому сведите к минимуму цветовую палитру, чтобы четко обозначить важные элементы в ваших каркасах. Выделение важных вещей (кнопок с призывом к действию, текста заголовка) более жирными цветами - это тонкий, но эффективный способ создания визуальной иерархии при совместном использовании дизайнов с коллегами и клиентами (легко делиться с приличным облачным хранилищем).
Например, вставка в заголовок логотипа и навигации, выделенных жирным синим цветом на пастельно-синем фоне, представит их как важные элементы в вашем компоненте.
Также стоит отметить, что можно обновить цвета ссылок в настройках Sketch, на случай, если в дизайне возникнет конфликт цветов с оранжевым цветом по умолчанию.
02. Используйте сетку и направляющие.
Также важно как можно скорее рассмотреть сетку, отступы и поля при определении каркасов. Чтобы отобразить линейки в файле эскиза, выберите «Просмотр»> «Холст»> «Показать линейки» (или ctrl+р). Нажатие на эти линейки (внизу слева и над монтажной областью) создаст направляющие, что, в свою очередь, избавит от стресса при совместном использовании дизайнов, поскольку согласованность является ключевым моментом при определении системы дизайна.
03. Создание символов в Sketch
Планируете использовать эти компоненты в нескольких монтажных областях? Почему бы не создать символ? Символы - это, безусловно, лучшая функция в Sketch, они действуют как суперкомпоненты, обновляющие все монтажные области, на которых они в настоящее время находятся. Чтобы создать компонент, щелкните элемент правой кнопкой мыши и выберите «Создать символ». Он будет сохранен в одном упакованном элементе, которым можно управлять со страницы символов.
Улучшайте свои прототипы Sketch
04. Добавление анимации в Sketch.
Под целевой областью на правой панели есть опция для добавления анимации между вашими монтажными областями. Использование анимации - отличный способ оживить ваш прототип. Однако текущие варианты больше ориентированы на прототипы приложений и не предлагают большой гибкости при демонстрации дизайна веб-сайта. Тем не менее, ожидается, что в будущих обновлениях Sketch список будет расширяться за счет таких опций, как, например, затухающие переходы.
05. Отметьте свою стартовую страницу.
При предварительном просмотре прототипа значок флажка, который находится в заголовке всплывающего окна рядом с раскрывающимся списком выбора, является отличным способом указать, какая из монтажных областей является домашней страницей. После выбора каждый раз при открытии прототипа этот артборд будет первой страницей. Это также установит домашнюю страницу при публикации прототипа в облаке.
Совместная работа в Sketch
06. Используйте Sketch Cloud
Последняя облачная функция Sketch - это онлайн-демонстрация всех страниц и монтажных областей в одном месте. Любой желающий может подписаться на использование Sketch Cloud для просмотра, загрузки и комментирования файлов Sketch, к которым предоставлен общий или частный доступ прямо из Sketch.
Страницы действуют как разделы в вашей ссылке Sketch Cloud и отображаются в Sketch в порядке их структуры (сверху вниз). Артборды на этих страницах делают то же самое, поэтому убедитесь, что структура правильная (для артбордов, порядок слева направо), чтобы отображать дизайны в определенном порядке. Это также отличная платформа для проведения пользовательского тестирования после того, как вы поделились ссылкой на облако.
Когда прототип будет готов, щелкните значок облака, зарегистрируйтесь с помощью учетной записи и загрузите дизайны в облако. С этого момента ссылка останется прежней, поэтому любые будущие поправки, добавленные к проекту, будут загружены при нажатии на значок облака и выборе Обновить во всплывающем окне общего доступа. Панель управления в облаке не требует пояснений с прототипами, монтажными панелями и символы, доступные для просмотра по порядку.
07. Прототипы в Sketch Cloud
Если вы ранее просматривали свой прототип в файле Sketch и отметили одну из своих страниц как стартовую, Sketch Cloud создаст новый раздел с этим прототипом, готовым к работе.
Не видите прототип? Просто вернитесь к своему файлу Sketch, выделите монтажную область, которую вы хотите сделать стартовой страницей, нажмите «Предварительный просмотр», чтобы увидеть всплывающее окно, и, наконец, нажмите значок флажка. При следующем переходе в облако этот прототип будет ждать вас.
08. Включите комментарии в Sketch Cloud.
Все пользователи, у которых есть доступ, могут оставлять комментарии на каждой монтажной области, что позволяет хранить все отзывы в одном месте, поэтому больше нет необходимости в этом длинном письме. Если вы хотите получить отзывы о своем прототипе или дизайне или хотите поделиться прототипа по общедоступной ссылке, щелкните значок шестеренки в правом верхнем углу облачной панели управления. Здесь вы можете включить комментарии (которые появятся при просмотре дизайна, щелкнув значок в правом нижнем углу), и создать общедоступную ссылку для ваших дизайнов для публикации.
Вы можете сохранить дизайн в секрете и предоставить доступ по электронной почте нескольким счастливчикам. Чтобы поделиться прямой ссылкой на ваш прототип без необходимости навигации в облаке Sketch, добавьте "play" или захват URL-адреса в режиме прототипа и включите общедоступную ссылку для общего доступа. Например: sketch.cloud/s/1abc2/all/website/home/
09. Основные горячие клавиши в Sketch Cloud
Отправьте последние изменения в облако, выбрав этот значок - ваш браузер откроет ссылку после завершения.
Расчистите ссылку в облаке Sketch, выбрав только ту страницу, которую вы хотите показать в верхнем левом раскрывающемся списке, и вместо этого поделитесь URL-адресом отсюда.
Во всплывающем окне панели настроек отметьте «Использовать как библиотеку», чтобы автоматически сообщать вашей команде, что произошли изменения.
Отметьте открывающуюся монтажную область в режиме предварительного просмотра, прежде чем нажимать на облако, чтобы оно появилось первым в ссылке на облако Sketch.
Создайте дизайн-систему в Sketch
10. Оставайтесь организованными
Организуйте цвета своего бренда в палитре документа, выбрав указанный цвет и щелкнув значок «+».
Держите ваши любимые символы в нескольких состояниях, используя косую черту при именовании символов, например, если вы назовете символы «Кнопка / Активен» и «Кнопка / Отключено», ваши символы будут сгруппированы в одну категорию.
Создайте страницу системы дизайна, разделив все элементы, определяющие ваш бренд, на отдельной странице в Sketch. Это простой способ показать всем, где они могут забрать активы.
Вы можете перезаписать содержимое ваших символов, например текст на вашей кнопке (см. Выше), поэтому вам не нужно беспокоиться о создании новых элементов, если это всего лишь небольшое изменение.
Создать дизайн страницы
12. Создайте четкую визуальную иерархию.
Сильная визуальная иерархия обеспечивает ясность любого ориентированного на пользователя дизайна. Для начала спроектируйте наиболее универсальные компоненты, такие как цвет и типографику, а затем переходите к более мелким, таким как кнопки и компоненты ввода.
Чтобы вставить что-нибудь в свой дизайн, наведите указатель мыши на вкладку «Вставка» в верхней части пользовательского интерфейса Sketch, щелкните и затем начните импортировать элементы на свои монтажные области. Помните о своей системе каркаса и дизайна, чтобы обеспечить единообразие в работе.
13. Разумно используйте цвета.
Цвет, пожалуй, самый важный элемент в любом дизайнерском рабочем процессе. С помощью цвета мы можем задать общий вид, ощущение и тон дизайна, поэтому всегда убедитесь, что вы используете его в соответствии с важностью элементов, которым они назначены.
Попробуйте сгруппировать цвета так:
- Основные цвета: основные цвета бренда, используемые для создания основной цветовой схемы проекта, а также важнейшие элементы, такие как кнопки.
- Вторичные цвета: они сопровождают основные цвета и компрометируют различные оттенки, градиенты и оттенки от основных цветов.
- Третичные цвета: важная группа, которая отображает системные сообщения, такие как предупреждения, предупреждения и уведомления.
Чтобы сделать цвета максимально эффективными, создавайте каждый цвет как символ в файле Sketch, чтобы гарантировать, что любые изменения обновят элементы всего вашего дизайна.
14. Эффективно используйте типографику.
Важно разработать стиль и размер всех заголовков (H1, H2, H3 и т. Д.) И абзацев, чтобы создать визуальную иерархию. Обычно типографика не имеет многих стилистических вариаций, таких как цвет или вес, поэтому подумайте об эффективном использовании ваших цветов, чтобы представить индивидуальность бренда.
Как только вы будете довольны, определите свои стили текста на правой панели, щелкнув раскрывающееся меню «без стиля текста» и выбрав «новый стиль текста». После сохранения вы можете использовать этот типографский стиль во всем своем дизайне, как символы.
15. Используйте значки, чтобы добавить контекст
При эффективном использовании значки добавляют контекст более сложным компонентам, таким как кнопки, метки или таблицы. Значки в вашем дизайне могут быть функциональными, поощряя пользователей к взаимодействию - например, с помощью символа «X» на кнопке, обозначающего действие «Удалить».
Рассмотрите возможность создания набора значков пользовательского интерфейса в виде вложенных символов Sketch, чтобы помочь дополнить другие элементы пользовательского интерфейса в структуре дизайна, например стрелки, которые можно использовать в ползунках, кнопках «Назад» и «Далее» и разбиении на страницы.
16. Дизайн кнопок и входов.
При разработке кнопок и входов убедитесь, что вы разработали их индивидуальные «состояния». Каждый из них имеет несколько состояний и обеспечивает визуальную обратную связь для пользователей, чтобы указать текущее состояние (например, наведение, нажатие). Хорошая практика - создавать каждое состояние как отдельный символ, поскольку это добавляет гибкости.
17. Сложные компоненты и разделы
На данном этапе дизайн можно считать завершенным, поскольку в нем есть все необходимое для создания работающего продукта. Однако стоит потратить больше времени на создание компонентов для инфраструктуры пользовательского интерфейса, таких как карточки, таблицы и формы. Затем они могут быть объединены для разработки разделов, формирующих блоки, на которые опираются наши веб-сайты и приложения, такие как заголовки, элементы навигации и баннеры.
Эта статья впервые появилась в 277-м выпуске Web Designer. Купить выпуск 277 здесь или подписываться.
