Увод у атомски дизајн за веб дизајнере

Атоми нису само ХТМЛ елементи, него и такође припадајућим стиловима: фонтови, боје, димензије и друга правила ЦСС стила. Са Брадовим сопственим речима, атомима “демонстрирајте све своје основне стилове на први поглед”.

Атоми - Пример

Ево примера са нашег сајта. Наслови препоручених постова могу бити одговорни један тип атома; они користе исти ХТМЛ и ЦСС код и може бити лако се разликују од остатка садржаја.

Имајте на уму да Хонгкиат.цом није био дизајниран са атомским дизајном на уму, овде се користи само у сврху демонстрације.

Суштина атомског дизајна је у томе дизајнирајте УИ од дна према горе користећи ове пет фаза, не идентификовати компоненте атомског дизајна након тога.

2. Молекуле

А молекула је формиран групом атома. Молекули чине следећу фазу у хијерархији атомског дизајна. Размислите о једноставнијим елементима корисничког интерфејса који су већ направљене су од више од једног ХТМЛ елемента, као што је форма за претрагу или препоручена порука на бочној траци.

Бити организован у молекул даје сврху на сваки атом. У већој групи (молекули) атоми морају подршка и допуна међусобно, морају добро раде заједно како би се створио употребљив дизајн.

На пример, наслов (један атом) мора добити већи нагласак (већи фонтови, већа тежина, итд.) него име аутора (други атом) у препорученом пост блоку. Овако, два атома су “значило” до радити као тим да бисте добили најбољи резултат.

Молекуле - Пример

Користећи наш претходни примјер, можете видјети да се у Хонгкиатовој бочној страни један блок препорученог поста може видјети као молекул. Препоручени пост молекул је изграђена од три атома: минијатурни приказ, наслов и име аутора.

3. Организми

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

Организми могу бити састављени различите врсте молекула, на пример, бочна трака се може састојати од траке за претрагу и различитих виџета, или од исти молекул се понавља неколико пута, на пример, прегршт повезаних блокова који се налазе један иза другог. И то може бити комбинација ова два.

Органисмс - Екампле

На Хонгкиатовој веб страници, сидебар може бити организам. Састоји се од а сеарцх бар (један тип молекула, приказан само једном) и неколико препоручених постова (други тип молекула, приказан много пута).

Међутим, организам бочне траке се такође може видети као састав а молекула (трака за претрагу) и други организам (препоручени пост видгет са неколико препоручених постова). Атомски дизајн је флексибилан модел, правила нису веома строга, тако да у овом случају можемо дефинисати исти грађевни блок и као молекул и као организам.

4. Темплатес

Следећа фаза у хијерархији атомског дизајна је темплатес. Као што видите, ово је атомски дизајн престаје да користи аналогију хемије. Брад се уздржава од терминологије у овом тренутку док мисли да је то мање разумљиво за клијенте и друге заинтересоване стране, и то су у суштини две последње фазе (шаблони и странице) које дизајнери треба да продају.

Темплатес су изграђени од организама. Су објекти на нивоу странице али без коначног садржаја. Сврха шаблона је да представљају структуру основног садржаја.

Предлошци приказују како се различити атоми, молекули, организми “функционишу заједно у контексту распореда”. Они у основи представљају костур странице.

Предлошци - Пример

На пример, размислите о а хоме паге темплате са сликама резервисаних места и блоковима текста лорем ипсум.

У наставку можете видети пример из књиге Атомиц Десигн. То је шаблон за почетну страницу часописа ТимеИнц. Атоми, молекуле и организми су на свом месту, али само са шематским садржајем.

5. Пагес

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

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

Варијације страница и предлошка

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

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

На пример, дугме мора изгледати као да се може кликнути без обзира на околне елементе. Ако не изгледа у одређеној варијацији, потребно је да редизајнирате атом дугмета до њега одговара свим случајевима употребе.

Пагес - Пример

У наставку можете видети фазу странице претходног шаблона ТимеИнц почетне странице. Изгледа другачије, ха? Ово је само једна варијација шаблона, ипак. Да би имао ефикасан кориснички интерфејс, дизајнерски тим мора да добро размисли шта се може променити у реалном сајту. Затим, морају тестирати и дизајн за ту варијацију шаблона (страница).