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

9 съвета за проектиране на по-бързи и по-ефективни, така че да не се вбесявате

Да, това е списък. Но това са добри.

Забележка на автора и безсрамна щепсела: Това са техники, които взех при изграждането на UX Power Tools система за проектиране. Аз съм активен дизайнер и използвам тази система в продължение на 10 часа на ден, заедно с всяка техника, спомената в тази статия. Ако не вярвах в това, нямаше да пиша за това

1. Използвайте стилове

Боли ме колко често трябва да се казва това, но ще продължа да го казвам, докато не започнете да го правите

Фундаментални промени идват в Sketch много скоро, които ще направят живота ви ТАКА МНОГО ПОЛЕЗНА, ако просто се закопчавате и започнете да използвате стилове. Няма по-добро време от сега.

Използването на текстови стилове и стилове на слоя прави дизайна ви по-последователен и вярвате или не, ще свършите работа по-бързо.

2. Направете стилен лист

Не-е необходимо, но-силно насърчавано четене:

Стиловите таблици са изключително важни в CSS, защото ви позволяват да управлявате централно как визуално изглеждат нещата в един уебсайт. Направете промяна на стила на бутоните и всеки бутон в целия сайт ще се актуализира.

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

Системата за проектиране на UX Power Tools е изградена върху централна таблица стилове. Можете да промените шрифтове и цветове на една страница, да синхронизирате промените си и цялата система ще се актуализира, за да отразява вашите актуализации. Доста е готин и ми спестява много време, когато работя върху масивни клиентски проекти.

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

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

Защо използвам прозрачност вместо шестнадесетични стойности?

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

Този малък трик може да се използва и за рамки с бутони. Знаете как понякога искате червен бутон с малко по-тъмна червена рамка? Опитайте вътрешна граница с 25% черно:

Прозрачна черна рамка ви помага да имитирате по-тъмна цветна граница без главоболие с шестнадесетична стойност.

4. Направете символ на празно състояние

Започнах да го правя едва наскоро, но наистина е много приятно спестяване на време. За неща като мрежи от данни или страници, където има или не може да има данни в зависимост от това, което е създадено или конфигурирано, чудесна идея е да имате хубаво празно състояние, за да уведомите потребителя, че не всички надежди са загубени!

Проектирайте стандартен символ за празно състояние, след което можете бързо да го използвате повторно по-късно. Обикновено имам заглавие, описание, илюстрация и бутон за действие:

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

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

Което ме довежда до ...

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

Това е малко усъвършенствана техника, но е проста концепция, която ще улесни живота ви и живота на любимия ви илюстратор също по-лесно (благодаря, Паркър)!

Библиотеките за скици вече не съществуват от известно време, но повечето хора ги използват за управление на техните дизайнерски системи. Препоръчвам да го използвате и за управление на вашата библиотека с илюстрации!

Създайте отделен файл на скица за илюстрации, след което добавете това като библиотека:

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

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

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

Доста готин, а?

6. Използвайте последователни икони

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

Можете да промените от запълнени икони до икони на линии, да промените теглото и дори да определите цвят на акцента:

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

Това сериозно не става много по-лесно от това.

7. Използвайте Plugin за организатор на борда на Ale Muñoz

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

Този плъгин е създаден от един от водещите разработчици на Sketch, така че. просто. върши работа.

Изтеглете го тук:

Натиснете Control-Option-Command-A на вашата клавиатура и всички ваши платки магически ще се подравнят и групират вертикално и хоризонтално. Редовете с дъски представляват групиране (50 px между всяко табло), а групирането е разделено вертикално с 250 px.

Двете най-добри характеристики на този плъгин са: Плъзгане на Artboard и пренареждане на слоевете. Когато плъзнете таблото за управление в нов ред, той автоматично ще се постави на мястото си, дори ако го плъзнете между други платки. Още по-добре е, че тази дъска ще се окаже в правилна връзка с всички други платки в списъка със слоеве. Казвам ви, никога през живота си не съм се чувствал толкова организиран!

Толкова чисто и подредено!

8. Създайте продуктова архитектура (вижте по-горе)

След като инсталирате приставката от # 7, архитектурите на продуктите (вероятно има по-добро име за това) стават наистина лесни за изграждане. Снимката по-горе е истинска продуктова архитектура, която създадох за клиентски проект. Редовете представляват функции, а всяко табло представлява екран, който сме идентифицирали и който трябва да бъде проектиран. Малките са модали.

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

9. Дайте на модалите своя собствена дъска

Това е малък съвет, споменат в №8, но спрете да поставяте модалите си над пълните платки. Добре е, ако го направите веднъж, само за да сте сигурни, че се чувства правилно в контекста на друг екран, но след като определите правилния размер, няма нужда да го показвате на други екрани.

Защо?

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

Ако направите актуализация на екрана отляво, ще трябва да актуализирате и екрана отдясно. Това става истински досадно, ИСТИНСКО БЪРЗО.

Другото предимство за създаването на самостоятелни модални платки е, че можете да свържете към тях като модални диалози, като използвате инструмента за прототипиране на InVision. Това позволява на потребителя да кликне върху бутон във вашия макет InVision и създаденият от вас модал действително ще анимира върху екрана. Тогава те могат да кликнат далеч от модалния режим и той ще бъде „затворен“ точно както би направил в реалното приложение. Клиентите обичат това лайно!

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

  1. Следвайте UX Power Tools в Twitter
  2. Последвай ме в Туйтър
  3. Кажете здрасти на LinkedIn
  4. Научете някои неща и се абонирайте за блога на моята агенция