Компонентен работен поток за скица

Начинът, по който проектираме, се променя, както и нашите инструменти.

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

През последното десетилетие дизайнерите започнаха да преоценяват своя подход и да се насочат към работен процес, базиран на компоненти. Photoshop представи Smart Objects (може да „постави“ други Photoshop файлове в PSD). Тази нова функция позволи на дизайнерите да споделят централизирана версия на компонент, без да се притесняват дали дублират този компонент в своите файлове. За съжаление, това никога не се превърна в работен процес в дизайнерските екипи - беше по-скоро изключение, отколкото правило.

Когато Sketch въведе символи, стойността на компонентите стана по-ясна. Въпреки че са ограничени до един файл, символите правят компонентите изключително лесни: създайте компонент и след това го използвайте безкрайно в целия файл в дъските и страниците. Първоначално статичните символи скоро се превърнаха в по-здрава характеристика с отзивчиво преоразмеряване и възможност за презаписване на стойности. Убеден съм, че символите ще имат по-мощни опции за персонализиране в бъдеще.

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

Една от силните страни на „Абстракт“ е предоставянето на начин дизайнерите да представят и управляват работата си. Абстрактни проследяват промени, направени във всеки компонент в Sketch файл, което позволява на вас и вашия екип да сравнявате различни версии на ниво компонент. Това означава, че колкото повече символи във файл на Sketch, толкова по-малко вероятно е вие ​​(или някой от вашите колеги) да се сблъскате с някакви конфликти. С „Абстракт“ редактирането на икона, използвана на всеки отделен слой, не трябва да предизвиква конфликти с други, които работят върху същия файл. И ако се случи конфликт, Абстрактно се справя с тази ситуация изящно.

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

Примитивните

Цветове

Всеки проект започва с определяне на цветова палитра. Цветове на марката, цветове на текста, цветове на потребителския интерфейс, цветове за различни видове действия ... От този момент нататък обикновено не е добра идея да използвате цвят, който не е част от палитрата, освен ако няма наистина, наистина добра причина (която означава, че вероятно така или иначе трябва да влезе в палитрата).

Текстови стилове и слоеве на слоеве

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

Добавянето на някои модификатори към стиловете на текста отнема този списък с една стъпка по-нататък (цвят, тегло на шрифта, трансформации на текст ...), но това също прави или списъка трудно сканиращ, като добавя всички различни престановки, или ще наложи постоянна персонализация на елементи от списък. (Това е област, в която смятам, че Sketch може и ще се подобри с течение на времето. Просто презаписване на подравняването не трябва да прекъсне връзката с определения стил на текст.)

елементи

Ето къде нещата стават наистина вълнуващи. Вграждането на символи във вътрешността на други символи създава нива и нива на компоненти, лесни за поддържане и актуализиране.

НИВО 1: Фондация

Символите от ниво 1 не включват други символи. Те са най-ниското ниво в нашия набор от компоненти.

  • Иконография: Тъмни, светли и тонирани варианти на нашия набор от икони, с подрязване, създадено по начин, който разработчиците могат лесно да отворят файла Sketch и да вземат необходимите активи
  • Аватари: Набор от 8 аватара, които използваме в приложението. Те са несъвършени снимки от разнообразен набор от хора.

НИВО 2: Блокове от по-ниско ниво

Символите от ниво 2 съчетават примитиви и символи от ниво 1.

  • Елементи на формуляра: Бутони, входове, квадратчета, радио контроли ...
  • Клетки: Хора, коментари, комити, файлове, страници, дъски ...
  • Субнавигация: Заглавки с незадължителни действия или икони
  • Банери: Комбинира текст, икони и бутони

НИВО 3: Блокове от средно ниво

Символите от ниво 3 комбинират символи от ниво 2 и ниво 1. Това са по-усъвършенствани символи, които обикновено се използват в действителния дизайн.

  • Странични ленти: Списъци с клетки, може да служи като навигация
  • Основни области на съдържанието: Всичко от мрежа от проекти до детайл за ангажимент, включително действия, заглавие, описание, визуализации и коментари
  • Заглавки на приложения: Wayfinders, помагащи на хората да знаят къде се намират вътре в приложението, комбинация от текстови етикети и икони
  • Режими: Действия, потвърждения за действие, пълни потоци…

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

НИВО 4: Състави

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

И така, как ще се промени дизайна?

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

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

Изграждането на висококачествени продукти е усилие на екипа и всички ние тук в „Абстракт“ се вълнуваме да играем критична роля в развитието на този процес.

В момента абстрактът е в Private Alpha. Ние работим за Public Beta в края на Q2. Обратната връзка от нашите тестери беше изключително полезна, тъй като ние усъвършенствахме потоците и подобряваме цялостното изживяване. Повече от всякога вярваме, че сега е времето дизайнерите да разполагат с подходяща инфраструктура, която да подчертае стойността на дизайна. Всяка седмица излизат нови партиди покани. Благодаря ви за подкрепата и насърчението. Очакваме да направим невероятни неща заедно.

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