Použití atomového designu v moderním vývoji webu
Pokud je něco, co jsem se naučil pracovat pro technologickou společnost, je to pro to, aby bylo možné vytvořit webové stránky - opravdu úžasné, krásné a vysoce fungující webové stránky - množství různých talentů a prvků se musí shodovat a pracovat v harmonii. Někdy se může cítit jako pracovat na Babelské věži: jedna osoba prošívá paletou hexadecimálních kódů, chlapci po celé místnosti se zřítí z abecední polévky různých kódovacích akronymů a vedoucí účtu je vedle mě na telefonu vysvětluje, jak používat systém správy obsahu zákazníkovi, a to i když se snažím napsat tento článek v obyčejné angličtině.
Všechny tyto prvky potřebují způsob, jak se spojit, aniž by se v kakofonii něco ztratilo a existuje poměrně nová koncepce, která opravdu pomohla lépe pracovat jako tým: návrháři, vývojáři, testery ... všichni.
Jmenuje se to Atomový design .
Co je Atomic Design?
Komponenty Atomic Design byly odvozeny od návrháře Brad Frost Fascinace chemie; atomy jsou nejmenší jednotkou, spojují se s molekulami, které zase tvoří složitější organismy a nakonec vytvářejí ve vesmíru veškerou hmotu.
Takže pokud jsme v Mezinárodní kosmické stanici a podíváme se na celý projekt jako celek, je zde dokončená tvorba domovské stránky pro nedávný projekt, který jsme použili pro Atomic Design, Route 93 Pizza Mill :
Route 93 Pizza homepage je složena ze všech našich prvků jako sjednocené, funkční webové stránky. Pokud umístíme místo pod mikroskop, vidíme jeho zrnité komponenty:
Atomy: Níže jsou atomy pro webové stránky Route 93 Pizza Mill. Atomy jsou základními stavebními kameny, jako jsou značky, štítky formulářů, tlačítka, paleta barev a písma. Přestože nejsou samy o sobě velmi užitečné, atomy jsou váš předběžný referenční bod - počátky tvého stvoření.
Molekuly: molekuly jsou místem, kde se atomy dají do práce - kde se dokončený design webových stránek začíná cítit hmatatelný. V molekulách pro cestu 93 můžete vidět paletu barev, písma a ikonografii dohromady do polí formuláře, překryvných obrázků a tlačítek. Jsou to, jak to Frost říká, váš nástroj, "udělat jednu věc a udělat to dobře."
Organizmy: v době, kdy dorazíme na organismy, můžeme vytvořit celou zápatí pro Route 93. Slouží ke spojení všech výše uvedených komponent do funkční, estetické webové stránky.
Inventář rozhraní: nyní, když máme všechny ingredience, potřebujeme hmatatelné menu, na kterém je uspořádáme do něčeho strávitelného; dokument, který obsahuje všechny výše uvedené prvky jako čitelný, použitelný zdroj - inventář rozhraní.
Zatímco některé organizace nazývají knihovnu vzorů nebo průvodcem stylu a používají inventář rozhraní speciálně pro odkaz na audit, který provedli na existujícím webu, používáme termín Interface Inventory pro vlastní projekty (stejně jako pro audity jiných webů) jako součástí procesu průběžného hodnocení.
Vzhledem k tomu, že pracovní postup Atomického designu poněkud napodobuje dilema typu kuře nebo vajec, po vytvoření domovské stránky a jedné další stránky webové stránky obvykle dochází k vytvoření ekologického inventáře, avšak nikoliv příliš dlouho poté. Vzhledem k tomu, že se tyto dvě počáteční stránky formují, návrhář zajišťuje, že prvky na obou stránkách jsou konzistentní. Pro všechny následující stránky potom mají možnost čerpat z inventáře. Toto vytváří kánonický zdroj toho, jak by měly být v celém projektu použity vizuální styly, doslovný společný jazyk, v prosté angličtině, hexadecimálních kódů, stylů tlačítek, šířky polštářků atd., Na které se vývojáři - a celý tým - mohou odvolávat.
Při navrhování inventáře rozhraní s procesem Atomic Design můžeme začít s primitivními moduly a sestavovat je do dokončených prvků. Tento proces zvyšuje efektivitu, komunikaci mezi členy týmu a celkově vytváří krásnější webové stránky.
Jaký Atomic Design dělá pro nás
Atomový design nám pomáhá objevovat pevné "pravdy" o návrhu projektu, na kterém pracujeme, a také vytvářet společný slovní zásoba mezi jeho uměleckými a technickými aspekty. Podporuje robustnější systém, který zlepšuje UX a poskytuje metodiku, aby se návrháři mohli držet pokynů vývojářů založených na komponentách při zachování tvořivosti.
Vývojáři samozřejmě kódují od základů, zatímco přístup umělkyně obvykle začíná ve více mlhavé podobě, která se po tvarování zpevňuje na funkční webovou stránku. Atomic Design povzbuzuje a vyžaduje od projektantů, aby pracovali i od základů, aby všechny komponenty rozhraní byly konzistentní a účelné na nejnižší možné úrovni.
Vytvoření tohoto společného jazyka, který je součástí rozhraní Inventory, zajišťuje, že návrháři a vývojáři nevynalezli nová řešení problémů, které již byly vyřešeny. Pokud je například do projektu přidán nový kontaktní formulář, styly potřebné k vytvoření tohoto formuláře již existují a mohou být snadno použity k vytváření stránky a považují za zbytečné, aby návrhář dal další úsilí. Nevyžaduje to nutně práci od návrháře, ale místo toho urychluje vývojářům rychlé vytváření řešení spíše než vyžadovat od návrháře, aby nejprve posměšnil každou stránku nebo organismus. Role designéra se potom posunuje do podoby uměleckého směru po vytvoření stránek. Tyto hmatatelné "pravdy" také eliminují potřebu použít návrháře jako rozhodčího. Otázky, jako je "je tato volba návrhu záměrná?" Nebo "jakou barvu bychom měli používat na tomto konkrétním prvku?", Stejně jako změny nebo přidání na poslední chvíli na stránku odpovídá Inventory rozhraní.
Společný jazyk zajišťuje také zajištění kvality. Při testování webové stránky jak pro obsah, tak i pro funkcionalitu vytahuji zásobník rozhraní na obrazovce jako vodítko. Přestože je to především návrhářský nástroj a za druhé nástroj pro vývojáře, umožňuje všem týmům, aby se s důvěrou podíleli na konverzacích o designu a konzistenci, protože jsme se ujistili, že naše stránky jsou bezchybné a připravené předat klientovi.
Závěr
Aby bylo zajištěno řádné provedení projektu, zejména některé z větších, které často čelíme, komunikace je klíčová; pokud křičíte celou řadu různých nápadů v místnosti na sobě navzájem, z toho nikdy nedojde. Atomic Design pomáhá působit jako překladatel pro tato různá oddělení a "jazyky", které s nimi vedou k udržení konzistence v designu. Vytváří modulární prostředek pro tým, který umožňuje soudržnost a vede k efektivnímu obratu, méně chyb a dokonalejšímu dokončenému produktu.