Направите свој систем дизајна, део 3: Боје

У овом ћемо чланку погледати како поставити систем боја у ЦСС-у и које су најбоље праксе да бисте били сигурни да је систем једноставан за употребу и одржавање.

Овај чланак је део серије о дизајнерским системима инспирисане нашом библиотеком веб компоненти. Библиотека се ослања на солидан систем ЦСС глобала. Дакле, ово је да делимо ствари које смо научили постављајући глобални стил наше библиотеке!

Артицле Сериес:
- Део 1: Типографија
- Део 2: Решетка и изглед
- Део 3: Боје
- Део 4: Размаци
- Део 5: Иконе
- Део 6: Дугмад

Лаунцхед Покренули смо Едитор боја! Алат за веб дизајн који генерише палете боја и теме компатибилне са ЦодиХоусе Фрамеворк-ом.

Променљиве боје 101

За разлику од других ЦСС глобалиста, стварање система боја је 10% око кодирања и 90% семантичког. Док радите на датотеци _цолорс.сцсс, желите да имате на уму следеће циљеве:

  1. Променљиве боје морају бити лако упамћене → Не желите да проверите глобалну датотеку кад год морате да одаберете боју.
  2. Систем мора бити лако ажурирати → Додаћете, уклањати и преименовати боје. Проверите да то није компликовано.
  3. Систем треба да садржи само основне боје → ову смо чули толико пута ... ипак увек испуњавамо више боја него што нам је потребно! Прави кључ успеха дизајнерског система је уклањање свега што није потребно (укључујући боје).

Семантичке вс декларативне боје

Када је у питању подешавање променљивих боја, постоје два главна приступа: семантичка и декларативна боја.

Семантички приступ изгледа као:

Док је овде пример декларативног приступа:

Ниједно од њих није погрешно. Бирање оног који задовољава ваше потребе зависи од толико много фактора (нпр. Величина пројекта, релевантност боја марке итд.).

Док сам радио на _цолорс.сцсс датотеци нашег оквира, морао сам да узмем у обзир кориснике који ће је уређивати (100%). То значи да чак и ако је декларативни приступ био најлакши за употребу, морао сам да га помешам са семантичким приступом да бих добио систем који је такође лак за одржавање.

Основна палета боја

Први корак је био проглашавање минималног броја боја потребних за креирање веб компоненти. Генерално, палета боја је састављена од:

  1. Главна / основна боја → користи се за везе, боја позадине дугмета итд. Генерално, то је главна боја позива на акцију.
  2. Боја нагласи → користи се за истицање нечег важног на страници. То не би требало да буде варијација примарне боје, већ комплементарна боја.
  3. Лествица неутралних боја → То је опћенито скала нијанси сиве, која се користи за текстуалне елементе, суптилне елементе, обрубе итд.
  4. Боје повратних информација → успех, грешка, упозорење.

Неким од ових боја потребна је варијација (тамнија / светлија верзија), која се често користи за истицање интерактивности (нпр.: Лебдење /: активна стања).

У ЦСС-у то значи:

* напомена: ми користимо додатак постцсс-цолор-мод-функције за превођење функција боја у РГБА код компатибилан са свим прегледачима.

Горњи исјечак представља палету боја: све боје које се користе у пројекту.

Варијације примарних и акцентних боја настају коришћењем функција боја. Овај приступ је користан ако имате демо.хтмл датотеку (а ми то радимо у нашем оквиру) тако да можете подешавати вредности функција док нисте задовољни добијеним бојама. Нијансе (или неутралне) боје се генеришу коришћењем цхрома.јс. У овом случају, коришћење функција није било идеално, јер обично имате две супротне боје (црну и белу), и морате да генеришете скали вредности на основу ове две боје.

Додавање семантичких боја у микс

Након што је палета боја спремна, можемо додати семантичке боје. Стварање семантичких боја не значи повећавање броја боја, већ дистрибуцију боја користећи семантичке референце.

Зашто мислим да је то добар приступ

Пре свега, овај систем се ослања на две основне боје: примарну и акцентну боју. То значи да када вам треба да користите променљиве боје, неће вам бити тешко да се сетите шта представљају те променљиве (чак и ако не користите декларативна имена попут „плава“ и „црвена“).

Можда ће ваш систем морати да укључи више боја (нпр. Секундарну боју). И даље се бавите са само три боје. Управљање системом на основу 10+ главних боја било би тешко без обзира на приступ који користите, па ћете можда размотрити његово поједностављивање.

Боје сиве боје користе другачију конвенцију о именовању: што је већи број на крају променљиве, тамнија је боја.
Овај приступ постаје користан када нисте сигурни коју неутралну боју желите да нанесете. Ако сива-2 изгледа превише суптилно, можете покушати сиве-3. Можда сте приметили да неке нијансе недостају (нпр. Сива-5). Они у нашем случају нису били битни (никада их нисмо користили током прављења веб компоненти), па смо их уклонили из палете боја.

Семантичке боје се додају у комбинацију из три главна разлога:

  1. Датотека _цолорс.сцсс постаје извор истине кад год је потребно да измените боју. Да ли сматрате да би елементи наслова текста требали бити тамнији? Отворите датотеку _цолорс.сцсс и уредите променљиву смеру боја-текст.
  2. Ако, на пример, дефинишете обруб боје, нећете морати да тражите коју сиву боју користите у другим компонентама следећи пут када креирате елемент обруба. Исти концепт се односи на многе елементе, а не само на границе.
  3. То чини комад торте за стварање и одржавање различитих тема.

Тхеминг

Чим будемо могли да користимо ЦСС променљиве без да се ослонимо на додатке или полифилл, стварање тема у боји биће супер једноставно *! Да ли то значи да данас не можемо стварати теме? Не, можемо. Имамо две опције.

* у нашем оквиру користимо додатак постцсс-цсс-варијабле за састављање ЦСС променљивих. Тренутно не подржава ажурирање променљивих у ЦСС класи.

Опција 1 је у сваком случају ажурирање ЦСС променљивих. Прегледачи који не подржавају променљиве приказат ће "задану" тему боја. То није проблем, све док је садржај доступан.

На пример, имате задану тему боје → бела позадина и црна боја текста и .теме-тамна → црна позадина и бела боја текста. Затим креирате две компоненте, једну са заданом темом, а другу с .дарк-темом. Ако обје компоненте са заданом темом не утичу на корисничко искуство, можете да размотрите .дарк тему као побољшање (изборно). У овом случају, има смисла ажурирати променљиве за креирање различитих тема, чак и ако оне нису подржане свуда.

Овако креирате нову тему ажурирајући неке кључне ЦСС променљиве:

Ово рјешење волим јер садржи апстрактну корекцију боја и омогућава вам да теме боја држите у једној датотеци. На тај начин можемо потенцијално променити стање сваке компоненте (од теме-а до теме-б) једноставном применом ЦСС класе.

2. опција би била усмерена на све елементе на чији изглед утиче тема. Предност ове методе је што је подржавају сви прегледачи. Међутим, то није тако лако одржавати у поређењу са оним заснованим у потпуности на ЦСС променљивим.

Ево примера опције 2 на делу:

Сада знате како планирамо да обрађујемо боје у нашем оквиру! Ако имате повратне информације / сугестије, јавите нам у коментару!

Надам се да сте уживали у чланку! За више новости о веб дизајну, пратите нас овде на Медиум или Твиттер.