Урок за скица

Кратко ръководство за системата за проектиране на Cabana

Научете как лесно да подобрите вашия работен поток в Sketch тук, точно сега!

Върна се през ноември 2017 г. (бия малко леко странна музика и трептящ екран избледнява) Реших да започна да създавам Дизайн система / Sketch Starter File, наречен Cabana. Можете да прочетете оригиналната ми статия за това тук.

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

  • Как да създадете система за проектиране в скица
  • Създаване със система за проектиране в скица

Но знаете какво (и въпреки че инструкциите, включени в Cabana са доста подробни сами по себе си), не бих дал на потребителите на Cabana по-подробно ръководство за инструкции ...

... но това е, което искам да направя тук, и да ви дам инструкции по-подробно, за да можете да скочите в Кабана и да кажете: "Гореща дигиталност, по дяволите, съм Cabana Design System Pro, просто изчакайте, докато останалата част от екипа вземете парче от мен, промоция тук идвам ”, или евентуално нещо малко по-сдържано от това?

С тази статия искам да можете да излезете не само с увереността да използвате Cabana Design System в ежедневния си работен процес, но и с разбирането за това колко полезна за вашия работен процес може да бъде система като Cabana.

Преди да започнем, вземете си кафе, копие на Cabana и нека ви покажа как да приложите тази малка дизайнерска система на радостта.

Първи неща първо

  • Вземете копие на Кабана тук
  • Инсталирайте както Poppins, така и Open Sans шрифтове
  • Запалете вашето копие на Sketch
  • Да го направим!

Когато за първи път отворите Cabana, ще бъдете представени с 4 Страници неподправена страхотно ...

  • Моля, започнете от тук
  • Ръководство за стил
  • елементи
  • Демонстрационна система на дизайна
  • Символи

Нека първо се съсредоточим върху страницата Моля, започнете тук. Има перфектен смисъл нали?

Моля започнете от тук

На тази страница се намира по-голямата част от магията на Design System. Оле-ле!

Тук ще намерите 3 отделни Artboards ...

  • Цветове
  • книгопечатане
  • различни

Основни цветове

Нека да разгледаме как да коригираме базовите цветове вътре в Кабана?

Тук ще се съсредоточим върху основния цвят и ще ви покажа колко е просто да направите само една корекция на тази страница и да я разпространите по цялата система. Тук е някаква магьосница на Sketch / Design System!

Просто плъзнете курсора около блока Основен цвят, това от своя страна ще избере както Fill, така и Border Color. Не се притеснявайте, че тези малки етикети са избрани, всички заглавия и етикети са заключени, не селектират и не се движат никъде!

След това от инспектора просто актуализирайте Fill & Border Color до нещо по-подходящо за вашия проект под ръка и след това щракнете върху иконата Sync за тези нови стилове, за да приложите промените.

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

Този вид спестяване на време със сигурност ще накара „Док Браун“ да се върне в бъдещето да извика „Страхотна скица!“.

Вътре в Cabana DS (Design System) имате и следните цветове, които да ви помогнат от самото начало ...

  • Втори
  • третичен
  • черно
  • сив
  • светло сив
  • успех
  • Внимание
  • грешка

С останалите налични цветове можете да използвате само онова, което е необходимо за проекта, и да оставите останалите такива, каквито са. Не е проблем. Рядко се оказвам, че използвам третичния цвят например, но той е просто там, когато даден проект може да се обърне към него, и вие гарантирате, че не е там, следващият проект ще изисква това! Знаеш ли как върви?

Цветни наслагвания

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

За да поставите наслагване, например основното наслагване, просто трябва да преминете към инспектора и да изберете шестнадесетичната (#) стойност на цвета, която в момента сте задали за основния си основен цвят, и след това с избраната паста за наслагване в това Hex Value и кликнете върху иконата Sync. Готово!

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

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

Типография

Не позволявайте това множество шрифтове пред вас да ви изпрати да кандидатствате за копие на Photoshop. Запазете спокойствие и слушайте. Всичко ще е наред, обещавам :)

Системата за дизайн на Cabana в момента използва 2 семейства на шрифтове; Poppins, за заглавия, бутони и т.н. ...

... и Open Sans, за Body, Lead и т.н. ...

Те се наричат ​​семейство шрифтове №1 (Poppins) и семейство шрифтове №2 (Open Sans).

Това просто ви позволява лесно да промените семействата шрифтове на нещо по-подходящо за вашия проект, без да е необходимо да преминавате през текстовите си стилове и да променяте имената на фамилията на шрифтове.

За всяко семейство на шрифтове имате стилове, вариращи от Uber (за онези, които са по-големи от живота заглавия, подходящи за използване в мрежата), чак до Tiny (по-подходящ за по-малък текст на мобилно устройство).

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

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

Отново не се притеснявайте да изберете някое от заглавията (т.е. семейство на шрифтове №1 (черно)), всички те са заключени.

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

Ако погледнете изображението по-долу, ще видите, че влязох с курсора от горния ляв край на Artboard, без да се притеснявате да избера някое от тези досадни (но удобни за справка разбира се) заглавия. Честит избор на дни!

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

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

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

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

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

Моля, не забравяйте, че слоевете на слоевете и текстовите стилове са 2 отделни единици вътре в Sketch и цветът, който сте задали например основния си основен цвят, няма да се разпространява в типографията с основното заглавие. Ще трябва да копирате и поставите през шестнадесетичната стойност, след това да синхронизирате, за да видите промените. Това е точно начина, по който слоят и текстовите стилове работят в Sketch. Съжалявам, че разочаровам хората.

Сенки

Тук можете да избирате от селекция от фини, меки сенки за подобряване на елементи във вашия проект. За да премахнете сянка от елемент, просто изберете опцията No Shadow от панела Shared Styles.

За да направите корекции на която и да е от опциите на Shadow, можете да редактирате стойностите X, Y, Blurand Spread в панела Shadows, а за всички промени в Opacity просто кликнете върху Color и коригирайте стойността на Alpha там. След като направите промени, ще видите иконата за синхронизиране, щракнете върху нея, за да актуализирате промените. Готово и Готово!

Ако решите да направите някакви корекции в силата на сенките, просто не забравяйте да щракнете върху иконата Sync, след като промените са направени.

За да използвате Shadow Layer Style във вашия проект, просто създайте Shape Layer и това може да бъде контейнер или изображение и след това от панела на инспектора изберете стилове на слой Shadow Layer, например Shadow> Shadow 40%.

Ако решите, че Shadow просто не е подходящ за избрания от вас елемент, можете просто да преминете към Shadow> No Shadow Layer Style.

Просто с поръсване!

Градиенти

Помислете за градиентите вътре в Cabana Design System като друга незадължителна екстра. Те не са задължени, проектът, върху който работите, може да няма нужда от тях, но те са там, ако някога е необходимо да ги повикате. Просто се опитвам да ви спестя малко време, ако някога се нуждаете от тях по проект. Винаги мислете напред!

За да промените просто някой от градиентите в Кабана, просто продължете напред и изберете градиента, който искате да промените (например Purple Rain), след това коригирайте Gradient Fill в инспектора и след като сте доволни от резултатите, вие градиент. Съветник ви, щракнете върху иконата Sync, за да заключите в ощипания си градиент.

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

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

🖼 Duotone Image

Сега, като Gradients преди, можете да разгледате стиловете на Duotone Image като малка незадължителна екстра и не е задължително да се изисква за проекта, който сте готови да стартирате, но като тези Gradients, които току-що споменах, те са там, ако имате нужда тях (Да. Duotone все още е в тенденция) и ви спестява допълнителната работа по създаването им на по-късна дата.

За да редактирате Duotone изображения, които вече са налични, просто изберете едно (например Blue Moon) и след това от инспектора ощипвайте при различните опции за смесване на цветовете. Тук можете да избирате от опции за смесване като Screen, Multiply и Lighten, за да намерите нещо, което се съчетава добре с избраните от вас Цветни стойности.

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

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

8 точкови мрежови водачи

И накрая, на 8-точкова система за грижи, на която съм истински защитник и използвам в почти всички мои проекти.

Защо? Е, тъй като създаването на естетически приятна и структурирана композиция на Проект всеки път е трудно да се направи без такава Grid система, а „летящият сляп“ не е начинът да правите нещата, когато работите върху клиентски проект.

„Хайде 16pt тук, и, ъ-ъ-ъ, да отидем с 15,75pt тук, и, хайде тогава, 14,5pt тук за добра мярка“.

Не. Не е готино!

Със силна Grid система като 8pt, използвана вътре в Cabana, можете да се почувствате сигурни в знанията, че елементите в рамките на вашия проект са дефинирани, последователни взаимоотношения помежду си и не само това, но това самите вие ​​и разработчиците са в състояние да работи от същата посочена Grid System от проектирането до разработването и да избягва проблемите с разстоянието и подравняването по целия път през производството. Щастливи хора навсякъде!

С ръководствата за 8pt Grid в Кабана можете да продължите напред и да вмъкнете споделените стилове в проект, да ги групирате и след това да покажете / скриете групата, както се изисква при работа. Ако вие и вашите разработчици използвате инструмент като Zeplin, тогава можете да направите стилове 8pt Share d видими за вашия разработчик, така че след това лесно да ги посочите в производството.

Надявам се това Ръководство за бързо стартиране на използването на Cabana, както ви помогна да започнете по някакъв начин пътуването си по Design System.

И ако случайно сте от онези хора, които не са имали удоволствието да използват такава система като Кабана (Наистина ли?), Можете да вземете лъскаво, ново копие на Кабана точно долу ...

Искате ли бързо да подобрите вашия работен процес в Sketch? Вземете копие от Cabana Design System тук.

Използвайте кода на офертата MEDIUM25, за да получите 25% отстъпка.

Благодаря, че прочетохте статията,

джибри

Дизайнер, автор, баща и любител на Слънчевите дни