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

«Blockframing» и 31 бесплатное создание эскизов с использованием автоматического макета от Anima App

Да, вы можете скачать их. Да, бесплатно.

Примечание от Джона: есть бесплатный файл, который вы можете скачать в нижней части этого поста, но если вы можете сэкономить 7 минут (в зависимости от среднего), я думаю, вы узнаете одну или две вещи! Наслаждайтесь!

Серьезный разговор

Единственный раз, когда я создаю «настоящие» каркасы, это когда я пытаюсь показать классный процесс, снятый на Dribbble…

… И я никогда не показываю классные технологические снимки на Dribbble.

Ребята, я не очень хорош в каркасах!

Я всегда волнуюсь и заканчиваю тем, что добавляю слишком много деталей, а то, что должно было быть быстрым каркасом, в итоге превращается в шесть часов nitpixeling ™ для идеального заполнения, великолепных полей и типографики из учебников.

Так что нет ... я не очень хорош в каркасах.

Но то, что я хорошо умею, это блок-фреймы.

Честно говоря, с каждым циклом это становится лучше.

Блок ... обрамление?

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

Угадай это приложение!

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

Выявив самые большие области цвета выше, вот Facebook представлен в виде блок-кадра:

Я гарантирую, 99% из вас могли бы сказать мне, что это приложение без каких-либо подсказок. Остальным 1% из вас 87 лет.

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

Центральный контейнер Facebook остается фиксированной ширины и плавает в центре, а поток чата остается направо.

Когда использовать Blockframing

Преимущество блок-фреймов в том, что вы можете делать это на каждом этапе процесса разработки продукта:

  1. До (Первоначальный дизайн)
  2. Во время (Новые функции)
  3. После (раскрытие концепции)

Перед дизайном (начальный дизайн)

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

Создание кадра не заменяет обычное создание.

Я лично нахожу подробные каркасы с фиктивным текстом, однопиксельными границами и изображениями-заполнителями «X» отвлекающими. И если я нахожу их отвлекающими (как кто-то, кто знает, как их читать), то клиент тоже может.

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

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

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

Во время проектирования (новые функции)

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

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

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

Это могло занять всего 10 минут, но я все еще мог бы найти способ потратить 7 часов на просмотр видео с кошками.Не связано: я всегда думаю о Cinnabon ™, когда слышу слово канбан. Тьфу, так вкусно.Кто снился в 19 эпизодах «Парков и отдыха» подряд ???

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

Опять же, к этому моменту процесса (в середине разработки) я уже разработал несколько экранов, и у меня уже есть множество шаблонов дизайна, так что мне нужно подготовиться к этому. И есть вероятность, что я просто в конечном итоге использую эти контейнеры в реальном дизайне, а не выбрасываю вещи, как я [часто], когда делаю каркас.

После дизайна (раскрытие концепции)

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

Как только мы закончим дизайн, мы создадим блок-фрейм прямо поверх него, чтобы мы могли медленно раскрывать различные разделы дизайна. По нашему опыту, демонстрация всего дизайна за один раз является СУПЕР-ОГРОМНЫМ для клиента, и они начнут задавать все виды вопросов, к которым вы не готовы.

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

У меня дома были серебряные купола под Twinkies и Hot Dogs. Классно, верно?

Вот как мы представим YouTube:

Полный блокфрейм! Мы пока не показываем высокую точность. Мы только начинаем нашу историю.

Сделав краткий обзор областей страницы, мы начнем раскрывать пользовательский интерфейс, раздел за разделом:

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

Мы показываем только один раздел за раз. Это помогает нам сосредоточить внимание клиента на одном месте, на котором мы хотим, чтобы он сосредоточился:

Здесь мы остановимся, чтобы обратиться к области видео и элементам управления воспроизведением. Мы могли бы остаться здесь на 15 минут, просто поговорив о том, как все это работает ... и это нормально! Привет Пабло Стэнли и его удивительной серии «Зарисовка вместе».

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

Твои видео идут очень хорошо, Пабло! Congrats! Посмотрите на всех этих подписчиков

Наконец, мы достигли «Связанные видео» и раздел. В разговоре с клиентом мы, вероятно, поговорим о том, как заполняется этот список, и о том, как предлагаемые видео, подобные этим, помогут привести пользователей в BLACKHOLE OF YOUTUBE VIDEOS НА СЛЕДУЮЩИЕ ПЯТЬ ЧАСОВ.

Не то, чтобы это когда-либо случалось со мной ...

Я смотрю много видео еды BuzzFeed, и тот парень, Тини Тим Брэдбери, делает несколько веселых видео.

Только после того, как мы закончим показ каждого раздела, мы покажем весь интерфейс:

Тада! Реквизит для команды дизайнеров на YouTube. Хорошо смотритесь!

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

Тьфу, так где же бесплатные вещи?

Хорошо хорошо.

Auto Layout - это потрясающий инструмент, а их новая функция «стеки» имитирует поведение CSS flexbox прямо в Sketch.

Это наркотик. *

* Для неамериканцев «допинг» означает действительно круто.
Допинг также означает героин ... но не в этом случае. Авто макет не героин.

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

Вы можете получить все 30+ макетов совершенно бесплатно прямо там. Это обойдется вам в ноль долларов, если вы не хотите финансировать буррито Chipotle ¯ \ _ (ツ) _ / ¯

(Связанный: Вы знали, что был смайлик буррито? Это дико подробно.)

Хорошо, но на этот раз вот файл:

Красться!

Последняя вещь…

Наконец, я недавно обновил UX Power Tools для работы с Auto Layout, так что теперь его использование стало еще быстрее! Я думаю, что вы будете копать это. Если вам интересно, вы можете прочитать больше об этом здесь.

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

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