Атомен дизайн: 10 причини да го използвате

Атомен дизайн
(Кредит на изображението: Джим Макколи)

Вероятно сте чували за Atomic Design, ако от известно време сте в общността на разработчиците отпред. Atomic Design е методология, вдъхновена от химията. Точно както цялата материя се състои от атоми, които се комбинират, за да образуват молекули, които от своя страна изграждат по-сложни организми, Atomic Design включва разбиване на уебсайт на основните му компоненти и след това работа от там за създаване на сайт.

Има много предимства от използването на атомния дизайн; прочетете, за да откриете 10 причини, поради които това ще улесни живота ви.

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



в далеч далеч галактика шрифт

01. Можете да смесвате и съчетавате компоненти

Чрез разбиване на компонентите на основни атоми е лесно да се види кои части от сайта могат да бъдат използвани повторно и как те могат да бъдат смесени и съчетани, за да образуват други молекули и дори организми.

Атомен дизайн: елементи

Тези пет основни елемента могат да се ремиксират, за да се създаде набор от страници

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

02. Създаването на ръководство за стил е лесно

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

03. Лесно за разбиране оформление

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

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

04. Кодът е по-последователен

Атомен дизайн: Pattern Lab

Pattern Lab е колекция от инструменти, които улесняват атомния дизайн

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

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

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

05. Без фокус върху перфектни пикселни дизайни

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

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

бамбукова писалка и сензорен таблет

06. По-бързо прототипиране

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

07. По-лесно актуализиране и премахване на части от сайта

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

08. По-модулна файлова структура

Въпреки че Atomic Design е много разпространен, когато става въпрос за маркиране (HTML), аз вярвам, че тези техники могат да се използват и за CSS, JavaScript или други езици, използвани за създаване на сайт, за да направят цялостния код по-модулен и многократно използваем.

Аз самият използвам атомен CSS за уебсайтове, които създавам и открих големи ползи от този подход. Вярвам обаче, че с пристигането на неща като HTML компоненти би имало смисъл да се отделят CSS и JavaScript, специфични за атом, в собствената му папка заедно с HTML, така че ако нещо се нуждае от актуализиране или изтриване, вие знаете точно къде да отидете и какво да се промени.

09. По-малко компоненти като цяло

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

Ако за заглавие се изисква заглавие с размер на шрифма 4.5em, но вече съществува заглавие с размер 4em от списъка с атоми, по-вероятно е създателят да избере 4em, отколкото да създаде напълно ново заглавие. Това ще доведе до по-малко използване на атоми като цяло, което ще направи по-чист и по-лек уебсайт.

10. Разгледайте Pattern Lab

Атомен дизайн: Pattern Lab

как да си намеря работа в анимационните студия на Дисни
Pattern Lab е генератор на статични сайтове, също от Brad Frost

Това всъщност не е предимство на Atomic Design, а страхотен инструмент, създаден от Брад Фрост (който е въвел термина атомен дизайн) и Дейв Олсен за да помогне с процеса. По същество това е статичен генератор на сайтове, който използва мустаци за шаблони и преглед на JavaScript за интерактивност. Създаден е с първоначален дизайн за мобилни устройства с опции за преоразмеряване на страници, добавяне на коментари към раздели на сайта и кодови фрагменти.

Оригиналната версия е написана на PHP, но има две версии на Node: едната за gulp и другата за Grunt. Силно препоръчвам да се забъркате с демото на Pattern Lab сайт, за да ви даде по-добро разбиране за това как работи и атомния дизайн като цяло.

Искате ли да знаете повече? Прочетете оригиналната публикация на Брад Фрост за Атомен дизайн .

Свързани статии: