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

9 советов по проектированию быстрее и эффективнее, чтобы вы не сходили с ума

Да, это список. Но это хорошо.

Примечание автора и «Бесстыдный плагин»: эти приемы я выбрал при создании системы проектирования UX Power Tools. Я активный дизайнер и использую эту систему по 10 часов в день вместе со всеми техниками, упомянутыми в этой статье. Если бы я не верил в это, я бы не писал об этом

1. Используйте стили

Мне больно, как часто это нужно говорить, но я буду повторять это, пока ты не начнешь это делать.

Очень скоро в Sketch произойдут фундаментальные изменения, которые сделают вашу жизнь НАМНОГО ЛЕГКО, если вы просто прогнетесь и начнете использовать стили. Там нет лучшего времени, чем сейчас.

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

2. Сделайте таблицу стилей

Не требующей но-высоко поощрялось чтение:

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

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

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

3. Используйте прозрачность

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

Почему я использую прозрачность вместо шестнадцатеричных значений?

Это небольшая хитрость, чтобы гарантировать, что ваш текст будет отлично смотреться на любом цвете фона. На изображении ниже прозрачность (вторая строка) выглядит намного лучше, чем серая (первая линия), поскольку она приобрела оттенок цвета под ним. Никаких хитростей нет; вторая строка текста одинакова в каждом цветовом сценарии. Именно прозрачность работает для вас, что делает их похожими на разные стили текста. Все по цене одного. Как удобно!

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

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

4. Сделайте пустой государственный символ

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

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

Иллюстрация моего удивительно талантливого коллеги, Паркера МакКаллоу.

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

Что приводит меня к ...

5. Создайте библиотеку иллюстраций

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

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

Создайте отдельный файл Sketch для иллюстраций, затем добавьте его в виде библиотеки:

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

Это позволит вашему иллюстратору работать самостоятельно в любой векторной программе (например, Illustrator или Affinity Designer). Когда они заканчивают иллюстрацию, им просто нужно поместить ее в соответствующий артборд в вашем файле библиотеки иллюстраций. Sketch уведомит вас об обновлениях библиотеки, и все, что вам нужно сделать, это синхронизировать изменения. Теперь ваша блестящая новая иллюстрация во всей красе:

Иллюстрация моего удивительно талантливого коллеги, Паркера МакКаллоу.

Довольно круто, а?

6. Используйте согласованные значки

Nucleo Icons - безусловно, лучшие иконки, которые существуют в Интернете. Мало того, что набор огромен и разнообразен, но их настольное приложение невероятно.

Вы можете переходить с заполненных значков на линейные значки, изменять вес и даже определять цвет акцента:

Как будто этого уже недостаточно, я никогда не находил более простой способ подготовки значков для разработчиков, чем их функция экспорта:

Это серьезно не становится намного легче чем это.

7. Используйте плагин Ale Muñoz's Artboard Organizer

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

Этот плагин был создан одним из ведущих разработчиков Sketch. только что. работает.

Загрузите это здесь:

Нажмите Control-Option-Command-A на клавиатуре, и все ваши монтажные области будут волшебным образом выровнены и сгруппированы по вертикали и горизонтали. Строки монтажных областей представляют группировки (50 пикселей между каждой монтажной областью), а группировки разделены по вертикали на 250 пикселей.

Две лучшие функции этого плагина: Artboard Snapping и Layer Reordering. Когда вы перетаскиваете артборд в новый ряд, он автоматически встанет на место, даже если вы перетянете его между другими артбордами. Более того, этот артборд будет правильно расположен по отношению ко всем остальным артбордам в списке слоев. Я говорю тебе, я никогда не чувствовал себя так организованно в моей жизни!

Так чисто и аккуратно!

8. Создайте архитектуру продукта (см. Выше)

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

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

9. Дайте модам свой собственный артборд

Это небольшой совет, упомянутый в # 8, но перестаньте размещать ваши модалы поверх полноценных артбордов. Хорошо, если вы сделаете это один раз, просто чтобы убедиться, что он выглядит правильно в контексте другого экрана, но после того, как вы определите правильный размер, вам не нужно будет показывать его поверх других экранов.

Почему?

Ну, что произойдет, если вы обновите экран под этим модальным? Теперь вам нужно обновить этот экран дважды: один раз на самом экране и второй раз под этим модальным экраном. Довольно раздражает.

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

Другое преимущество создания автономных модальных артбордов заключается в том, что вы можете ссылаться на них как на модальные диалоговые окна, используя инструмент создания прототипов InVision. Это позволяет пользователю нажимать на кнопку в макете InVision, и созданный вами модал будет фактически анимироваться на экране. Затем они могут щелкнуть вдали от модального окна, и оно будет «закрыто», как в реальном приложении. Клиенты любят это дерьмо!

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

  1. Следите за UX Power Tools в Твиттере
  2. Подпишись на меня в Твиттере
  3. Скажи привет на LinkedIn
  4. Узнайте кое-что и подпишитесь на блог моего агентства