Ръководства за скициране

„Blockframing“ и 31 безплатни оформления, готови за скица, използвайки автоматичното оформление от приложението Anima

Да, можете да ги изтеглите. Да, безплатно.

Бележка от Jon: Има безплатен файл, който можете да изтеглите в долната част на тази публикация, но ако можете да отделите 7 минути (според Medium), мисля, че ще научите нещо или две! Наслади се!

Истински разговор

Единственият път, когато някога създавам „истински“ телени рамки, е когато се опитвам да покажа страхотен процес, заснет на Dribbble ...

... и никога не показвам страхотни снимки на процес на Dribbble.

Момчета, аз просто не съм добър в телените рамки!

Винаги се вълнувам и в крайна сметка добавям твърде много подробности, а това, което трябваше да бъде бърз каркас, завършва с шест часа nitpixeling ™ за перфектно подплънки, великолепни полета и типография на учебници.

Така че не ... не съм толкова добър в телените рамки.

Но това, в което съм добър, е blockframing.

Честно казано, това става по-добре с всеки цикъл.

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

Моят наставник по дизайн ми разказа история за професор, който е имал в училище, който е свалял очилата си, когато е оценявал дизайна им. Той каза, че това му е помогнало да придобие по-добър усет за оформлението и визуалната хармония на дизайна им.

Познайте това приложение!

Истината е, че можете да разкажете доста завладяваща история с този размазан макет. Това е бърз начин за проверка на дизайна, без да е необходимо да се проектира толкова много.

Като идентифицираме най-големите цветови региони по-горе, тук Facebook е представен като блок-рамка:

Гарантирам, че 99% от вас биха могли да ми кажат какво приложение е без намеци. Останалите 1% от вас са на 87 години.

С невероятния плъгин за автоматично оформление от приложението Anima, дори мога да ви покажа как трябва да се държи съдържанието на страницата, когато браузърът е преоразмерен ... какво е фиксирано ... какво е течност ... и какво плава:

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

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

Предимството на blockframing е, че можете да го правите по време на всяка фаза на процеса на проектиране на продукта:

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

Преди проекта (първоначален дизайн)

Blockframing не замества конвенционалните телени рамки. Кадрите просто не се вписват в работния ми процес. Моят дизайнерски екип прави толкова много сътрудничество на бялата дъска с клиента, че нищо повече от това за мен е загуба на време.

Blockframing не замества конвенционалните телени рамки.

Аз лично намирам подробни телени рамки с фиктивен текст, рамки с един пиксел и „X“ изображения на заместители, които да отвличат вниманието. И ако ги намирам за разсейващи (като някой, който знае как да ги чете), тогава клиентът може също.

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

Обикновено ще изпращам нещо подобно на клиента чрез Slack или имейл, за да проверя бързо идеята за нов екран. Говорим за различните области, движим нещата и започваме да играем с цвят и контраст. Това е чудесен начин да бъдете гъвкави и гъвкави с дизайна, преди да се потопите във висока точност, а клиентите винаги са развълнувани да бъдат част от процеса.

Това също така спестява време, защото клиентът няма да разделя косъмчета върху всеки малък детайл на страницата. Според мен, кадровата рамка с клиента или със заинтересованите страни драстично увеличава степента на успех при показване на крайния (ите) дизайн (и), защото клиентът вече знае какво предстои.

По време на дизайна (нови функции)

Нека да кажем, че вече сте доставили продукта и сте в процес на проектиране на нови функции. Към този момент има десетки утвърдени модели и визуалният стил е много добре дефиниран. Възможно е дори да имате изцяло разгъната конструкция като UX Power Tools!

Намирам blockframing за особено полезен през тази фаза, защото мога да създам нещо, което ще изглежда много по-близо до реалния дизайн. Цветовете, които използвам в крайна сметка са доста близки (ако не са идентични) с тези в крайния дизайн.

Ето няколко познати приложения, които отнеха само няколко минути за блокиране на кадрите:

Това може да отнеме само 10 минути, но все още бих могъл да измисля начин да пропиля 7 часа, гледайки видеоклипове с котки.Без връзка: Винаги се сещам за Cinnabon ™, когато чуя думата канбан. Уф, толкова вкусно.Кой е за 19 поредни епизода на паркове и отдих ???

Възможно е да направя и леки телени рамки в допълнение към показаните по-горе блок рамки, но в противен случай съм готов да започна да проектирам с висока точност.

Отново, към този момент в процеса (в средата на дизайна), вече съм проектирал куп екрани и разполагам с много дизайнерски модели, така че това е много подготвително за мен да започна. И има вероятност просто да използвам тези контейнери в истинския дизайн, вместо да изхвърлям нещата, както аз [често] правя, когато вкарам рамка.

След дизайна (разкриване на концепцията)

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

След като завършим дизайн, създаваме блок-рамка директно върху него, за да можем бавно да разкриваме различни секции от дизайна. Според нашия опит показването на целия дизайн наведнъж е СУПЕР ПРЕГЛЕД ЗА КЛИЕНТА и те ще започнат да задават всякакви въпроси, за които не сте готови.

Чрез блокфилминг през потребителския интерфейс, ние по същество разкриваме едно ястие наведнъж, сякаш организираме вечеря на викторианска ера за нашите буржоазни приятели:

В моята къща ще има Twinkies и Hot Dogs под тези сребърни куполи. Класен, нали?

Ето как бихме представили YouTube:

Пълен блок кадър! Все още не сме показали висока точност. Ние едва започваме нашата история.

След като направим бързо резюме на регионите на страниците, тогава ще започнем да разкриваме потребителския интерфейс, раздел по раздел:

Бавно започваме да разкриваме раздели. Тук бихме направили пауза и обясним глобалната навигация.

Показваме само един раздел наведнъж. Това ни помага да насочим вниманието на клиента към мястото, на което искаме да се съсредоточи:

Тук спираме, за да се обърнем към зоната на видеото и контролите за възпроизвеждане. Може да останем тук 15 минути, просто да си поговорим как всичко работи ... и това е наред! Извикайте към Пабло Стенли и страхотната му поредица „Скицираме заедно“.

Нека продължим да се движим. Сега ще разгледаме подробностите за видеото. В този конкретен пример страницата е доста кратка. В реален сценарий вероятно ще имаме по-дълга страница, за да покажем секцията с коментари.

Вашите видеоклипове вървят наистина добре, Пабло! Поздравления! Вижте всички тези абонати

Накрая стигаме до „Свързани видеоклипове“ и секция. В разговор с клиент вероятно бихме поговорили за това как се попълва този списък и как предложените видеоклипове като тези ще помогнат да се доведат потребителите в БЛОКЪЛ НА ВАЛУТИТЕ ЗА МЛАДЕЖ ЗА СЛЕДНИТЕ ПЕТИ ЧАСОВЕ.

Не че това ми се е случвало ...

Гледам много видеоклипове с храни на BuzzFeed и този човек Тини Тим Брадбъри прави няколко забавни клипа.

Само след като приключим с разкриването на всеки раздел, ще покажем целия интерфейс:

Тада! Подкрепа на дизайнерския екип в YouTube. Изглежда добре!

Клиентът е грундиран и очите им инстинктивно ще разделят всеки регион на страницата. Сега те имат перфектно разбиране за какво е предназначена всяка област на страницата и разговорите оттук нататък ще бъдат много по-продуктивни. Клиентите ще задават по-добри въпроси, ще предоставят по-добра обратна връзка и ще представят дизайна (сами) на външни заинтересовани страни много по-интелигентно от преди.

Ъг, така че къде са безплатните неща?

Добре, добре.

Автоматичното оформление е страхотно средство, а тяхната нова "стека" функция подражава на CSS поведението на флешбокс точно вътре в Sketch.

Допинг е. *

* За неамериканците „допинг“ означава наистина много готин.
Допингът също означава хероин ... но не в случая. Автоматичното оформление не е хероин.

Създадох куп стандартни оформления на приложения за интернет и мобилни устройства, а също блокирах рамка от куп популярни приложения, за да можете да видите как да пресъздадете тяхното поведение в съдържанието.

Можете да получите всички 30+ оформления ГОЛЯМО БЕЗПЛАТНО веднага след това. Това ще ви струва нула долара, освен ако не искате да финансирате бурито на Chipotle ¯ \ _ (ツ) _ / ¯

(Свързано: Знаехте ли, че има емоции от бурито? Това е много подробно.)

Добре, но наистина в момента, ето файла:

Промъкнете се надникнете!

Последно нещо…

И накрая, наскоро актуализирах UX Power Tools, за да работя с Auto Layout, така че сега е още по-бързо да се използва! Мисля, че ще го копаеш Ако се интересувате, можете да прочетете повече за това тук.

Когато не пиша, работя върху инструменти за дизайн на скици като UX Power Tools, за да ви направя по-добър, по-ефективен дизайнер. Всички най-добрите дизайнери и екипи на Sketch го използват и мисля, че и на вас може да ви хареса. Вижте го на Marvel!

Следвайте UX Power Tools в Twitter
Последвай ме в Туйтър