Nahoru
 

Atomický design aneb jak navrhuji web

Návrh webové stránky je první věc, která se dělá při jejím vývoji. Jak ale začít? Design webu musí být takový, aby se s ním dalo konzistentně pracovat na různých částech webu a někdy i mimo něj (vizitky, plakáty a další). Musí se na to tedy jít sofistikovaně, nechceme na konci vývoje zjistit, že půlka stránky je modrá, druhá růžová, plakát září oranžovou a nic z toho nevypadá, že k sobě patří. Dosáhnout toho můžeme pomocí atomického designu.

Co to je?

Pojmenování vychází z chemie. Atom, aby neztratil své vlastnosti, je nedělitelný (vycházím z jeho latinského názvu) a slouží jako základní stavební blok. Díky němu lze konstruovat větší části, kterým, když zůstanu u chemické analogie, se říká molekuly a pomocí nich se zase sestavují organismy. Přesně toto popisuje postup navrhování webové stránky. Osobně jsem vůbec atomický design jako pojem neznal, ale tuto navrhovací techniku jsem používal intuitivně. Různých technik existuje více, ale tato je mi nejbližší.

Od atomů až po organismy

Praktický postup

Jak vyplývá z definice, tak se začíná u co možná nejmenších prvků např. odrážek, oddělovačů odstavců nebo dalších malých grafických prvků. Při jejich vymýšlení nejčastěji vycházím z loga a jeho barev, kterých když není moc, tak mám větší prostor pro jejich kombinace. Nejsem velkým zastáncem příliš barevných webů. V tomto názoru se často rozcházím s představou většiny. Raději pracuji s odstíny šedi doplněné o jednu až dvě barvy a jejich odstíny.

Poté co mám hotovou základní paletu atomických prvků a vybrané barvy, tak se pustím do designování větších částí. Atomy se mi postarají o to, aby byl obsah konzistentní. Navíc, když se jedná o webové stránky, tak použití stejných nebo podobných prvků usnadní práci i programátorům, kteří také nejraději využívají něco jako atomický přístup k práci.


Atomický design je tedy skvělá technika pro navrhování „velkých“ designů. Zajistí konzistentnost vzhledu a usnadní práci programátorům. V mém případě se dokonce jednalo o intuitivní postup, který vycházel ze zkušeností. Pokud se zajímáte o design, doporučuji tuto techniku vyzkoušet.

Tento článek byl inspirován z Specky boy.