Дизайн система за малък бизнес: как да спрете да измисляте сайта наново всеки път
Сценарият е познат на почти всяка компания, която развива сайт повече от година. Нужна е нова целева страница. Дизайнерът я рисува от нулата, защото старите макети „не съвсем стават“. Разработчикът пише нови стилове, защото в наличните липсва нужният вариант бутон. След половин година сайтът има четири различни бутона, три нюанса синьо и пет начина за оформяне на заглавие.
Дизайн системата е начинът да спрете този цикъл. И противно на разпространеното мнение, тя не е само за големи компании с екип от двадесет дизайнери.
Какво е това всъщност
Дизайн системата за малък бизнес не е библиотека с петстотин компонента, нито документ от сто страници. Това е набор от договорки за това от какво се сглобяват страниците, записан на две места едновременно: в макетите и в кода.
Ключовата дума е „едновременно“. Библиотека във Figma, на която не отговаря нито един ред CSS, работи точно до първата разработка. Реалната икономия започва тогава, когато компонентът съществува в двете среди и се променя и в двете.
Минималният набор
| Ниво | Какво включва | Какво се чупи без него |
|---|---|---|
| Токени | Цветове, размери на шрифта, отстъпи, радиуси | Три нюанса на един цвят в сайта |
| Типография | Стилове за h1-h4, основен текст, надписи | Всяка страница изглежда посвоему |
| Базови елементи | Бутони, полета, връзки, икони | Дублиране на код при всяка корекция |
| Блокове | Карта, формуляр, банер, списък с предимства | Нова страница означава нов дизайн от нулата |
| Правила | Мрежа, точки на пречупване, поведение на мобилно | Оформлението се разпада на нестандартни екрани |
За компания със сайт от двадесет-тридесет страници това е достатъчно. Всичко останало се добавя при нужда, а не „за всеки случай“.
Токени: най-евтината стъпка с най-голям ефект
Токенът е променлива вместо конкретна стойност. Вместо #3362FF на тридесет места в кода се използва --color-primary, обявена веднъж.
Практическата полза се вижда веднага: смяната на фирмения цвят спира да бъде проект за седмица и става корекция на един ред. Същото важи за отстъпите: набор от шест стойности вместо произволни числа премахва ситуацията, в която между блоковете ту има 40 пиксела, ту 43.
Разумен минимум: осем цвята, шест размера на шрифта, шест отстъпа, три радиуса. Повече в началото не е нужно, по-малко вече е неудобно.
Кои компоненти се изплащат първи
Подредени по съотношение полза към усилие:
- Бутонът. Най-честият елемент и най-честият източник на разнобой. Три варианта: основен, второстепенен, текстов. Плюс състояния при посочване и натискане.
- Полето на формуляра. Заедно със състоянията за грешка и подсказка. Формуляри има навсякъде и навсякъде изглеждат различно.
- Картата. Универсален контейнер: за услуга, казус, статия. Един компонент покрива три задачи.
- Заглавието на секция. Тази двойка от заглавие и подзаглавие се повтаря на всяка страница.
- Формулярът за контакт. Сглобява се от вече готови полета и бутон, затова се прави бързо.
Как се смята това в пари
Оценката е проста. Вземете колко часа отнема сега създаването на нова целева страница. Обикновено от двадесет до четиридесет: дизайн, разработка, свързване.
С дизайн система същата страница се сглобява от готови блокове за шест-десет часа. Разликата се умножава по броя страници, които правите за година. За компания, която пуска по една страница месечно, системата се изплаща за около три-четири пускания.
Втората част от икономията е по-незабележима, но по-голяма: изчезват корекциите, породени от разнобоя. Никой не губи време във въпроса „а защо тук бутонът е друг“.
Грешки, от които системите умират
- Прекалена подробност в началото. Половин година описване на всички възможни състояния и нито една сглобена страница за това време.
- Системата живее само в макетите. Дизайнерът е обновил компонент, в кода нищо не се е променило. След три месеца разминаването е толкова голямо, че системата спира да се използва.
- Няма отговорник. Ако никой не отговаря новите елементи да влизат в системата, тя застива на първата версия.
- Забрана на изключенията. Понякога страницата наистина има нужда от нестандартен блок. Правилната реакция е да го добавите в системата, а не да го забраните.
- Копиране на чужда система. Готовите набори от големи компании са направени за техните задачи и носят чужд визуален език.
Откъде да започнете за седмица
Не с нов проект. С инвентаризация на това, което вече имате:
- Ден 1. Съберете снимки на всички бутони, полета и карти в сайта. Обикновено се оказват два-три пъти повече варианти от очакваното.
- Ден 2. Изберете по един правилен вариант от всяка група. Останалите отбележете за замяна.
- Ден 3. Фиксирайте токените: цветове, шрифтове, отстъпи. Изнесете ги в променливи в кода.
- Ден 4-5. Уеднаквете бутоните и полетата в целия сайт.
След това системата расте естествено: всеки блок, който се прави втори път, става компонент.
Дизайн системата не е за красота и не е мода. Тя е за това след година сайтът да остане цялостен, а новата страница да струва по-малко от предишната, а не повече.
