Een inleiding tot atoomontwerp voor webontwerpers / UI / UX

modulariteit, herbruikbaarheid, en schaalbaarheid zijn niet alleen codeconcepten, maar je kunt er ook gebruik van maken om te maken beter geoptimaliseerde ontwerpsystemen. Atomic ontwerp is een nieuwe methodologie voor effectieve UI's bouwen van onder naar boven, gebruikmakende van een chemie-analogie.

In plaats van het ontwerpen van verzamelingen webpagina's, atomisch ontwerp begint met de eenvoudigste UI-componenten die worden genoemd atomen (knoppen, menu-items, etc.), en bouwt de hele gebruikersinterface op via nog vier stappen: moleculen, organismen, templates, en pagina's.

Het boek

De methodiek is ontworpen door ontwerper Brad Frost met als doel “het maken van succesvolle UI-ontwerpsystemen”. Atomic Design was uitgegeven als een boek die je gratis online kunt lezen, of bestel als paperback ($ 20.00) of een ebook ($ 10.00).

Atomic design benadert het ontwerp van de gebruikersinterface vanuit een fris nieuw perspectief dat hopelijk zal het webontwerplandschap opschudden een klein beetje. Dit artikel is van plan geef een intro in deze methodologie, maar het boek gaat veel verder in de uitleg, dus lees het als het kan, het is het waard.

Atoomontwerphiërarchie

Atoomontwerp is eigenlijk een mentaal model dat doet ontwerpers denken aan webpagina's als een hiërarchie van herbruikbare componenten. De hiërarchie van atoomontwerp is opgebouwd uit vijf stadia; elke fase bestaat uit een groep componenten uit de vorige fase. De vijf fasen vormen een duidelijk en logisch geheel interface ontwerpsysteem. Ze zijn als volgt:

1. Atomen

Net als in de chemie, atomen zijn de kleinste bouwstenen die kan niet verder worden ontbonden. Daarom zijn atomen de eenvoudige HTML-elementen, zoals knoppen, labels en invoervelden zorg voor de kleinste eenheden van een webpagina.

, enz.) zijn niet (kunnen niet) de kleinste eenheden van een webpagina zijn.

Atomen zijn niet alleen de HTML-elementen, maar ook hun bijbehorende stijlen: lettertypen, kleuren, dimensies en andere CSS-stijlregels. Met Brad's eigen woorden, atomen “toon al je basisstijlen in één oogopslag”.

Atomen - Voorbeeld

Hier is een voorbeeld van onze website. De koppen van aanbevolen berichten kunnen goed zijn voor één type atoom; zij gebruiken de dezelfde HTML- en CSS-code en kan zijn gemakkelijk onderscheiden van de rest van de inhoud.

Merk op dat Hongkiat.com niet was ontworpen met atomair ontwerp in gedachten, hier wordt het alleen gebruikt voor demonstratiedoeleinden.

De essentie van atomair ontwerp is om ontwerp de UI vanaf de basis met behulp van deze vijf fasen, om de atomaire ontwerpcomponenten daarna niet te identificeren.

2. Moleculen

EEN molecuul is gevormd door een groep atomen. Moleculen vormen de volgende fase in de atoomontwerphiërarchie. Denk aan eenvoudigere UI-elementen die al bestaan gemaakt van meer dan één HTML-elementen, zoals een zoekformulier of een aanbevolen bericht in de zijbalk.

Geordend zijn in een molecuul geeft een doel voor elk atoom. In een grotere groep (molecuul) moeten atomen ondersteunen en aanvullen elkaar, ze moeten werk goed samen om een bruikbaar ontwerp te maken.

Bijvoorbeeld, de titel (één atoom) moet meer nadruk krijgen (grotere lettertypen, meer gewicht, etc.) dan de naam van de auteur (een ander atoom) in het aanbevolen berichtblok. Op deze manier zijn de twee atomen “bedoelde” naar werken als een team om het beste resultaat te krijgen.

Moleculen - Voorbeeld

Aan de hand van ons vorige voorbeeld kunt u zien dat in de zijbalk van Hongkiat één blok aanbevolen post als een molecuul kan worden gezien. Een aanbevolen postmolecuul is opgebouwd uit drie atomen: een miniatuur, een titel en een atoomnaam van een auteur.

3. Organismen

Organismen zijn samengesteld uit een groep moleculen, atomen (en soms andere organismen). In webontwerp zijn organismen meer complexe UI-componenten die vertegenwoordigen definitieve secties van de pagina, zoals een koptekst, een voettekst of een zijbalk.

Organismen kunnen worden samengesteld uit verschillende soorten moleculen, een zijbalk kan bijvoorbeeld bestaan uit een zoekbalk en verschillende soorten widgets, of uit hetzelfde molecuul herhaalde meerdere keren, bijvoorbeeld een handvol aan elkaar gerelateerde postblokken onder elkaar. En het kan de combinatie van deze twee zijn.

Organismen - Voorbeeld

Op de website van Hongkiat kan de zijbalk een organisme zijn. Het bestaat uit een zoekbalk (één type molecule, slechts één keer weergegeven) en verschillende aanbevolen berichten (een ander type molecule, vele malen weergegeven).

Het zijbalkorganisme kan echter ook worden gezien als de samenstelling van een molecuul (de zoekbalk) en een ander organisme (de aanbevolen berichtwidget met verschillende aanbevolen berichten). Atoomontwerp is een flexibel model, de regels zijn niet erg strikt, dus in dit geval kunnen we dezelfde bouwsteen definiëren als een molecuul en een organisme.

4. Sjablonen

De volgende fase in de atomaire ontwerphiërarchie is templates. Zoals je kunt zien, is dit het atomaire ontwerp stopt met het gebruik van de chemie-analogie. Brad onthoudt zich van de terminologie op dit punt zoals hij denkt dat het is minder begrijpelijk voor klanten en andere belanghebbenden, en het zijn in feite de twee laatste fasen (sjablonen en pagina's) die ontwerpers moeten verkopen.

templates zijn opgebouwd uit organismen. Zij zijn objecten op paginaniveau maar zonder de definitieve inhoud. Het doel van sjablonen is om vertegenwoordig de structuur van de onderliggende inhoud.

Sjablonen laten zien hoe verschillende atomen, moleculen, organismen “functioneer samen in de context van een lay-out”. Ze vertegenwoordigen in feite het skelet van een pagina.

Sjablonen - Voorbeeld

Denk bijvoorbeeld aan een startpagina sjabloon met plaatshouderafbeeldingen en lorem ipsum-tekstblokken.

Hieronder ziet u een voorbeeld uit het boek Atomic Design. Het is de startpagina-sjabloon van het tijdschrift TimeInc. Atomen, moleculen en organismen zijn allemaal op hun plaats, maar alleen met schematische inhoud.

5. Pagina's

Pages vertegenwoordigen de laatste fase van de atoomontwerphiërarchie. Pagina's zijn het “specifieke exemplaren van sjablonen”. In de paginastadium krijgen sjablonen bevolkt met echte inhoud (kopie, microcopy, afbeeldingen, video's, etc.), net zoals ze in de echte gebruikersinterface verschijnen.

Met pagina's kunnen ontwerpers zien hoe het uiteindelijke gebruikerservaring zal eruit zien als, aan test het ontwerp met echte gebruikers en met meet hoe goed het presteert in termen van bruikbaarheid, conversie, toegankelijkheid en andere statistieken.

Pagina's en sjabloonvariaties

Het andere doel van de paginastadium is om te maken sjabloonvariaties mogelijk. We spreken over sjabloonvariaties als het onderliggende sjabloon is hetzelfde maar de bevolking inhoud is (iets) anders. Bijvoorbeeld als u verschillende inhoud wilt laten zien aan verschillende gebruikersgroepen (bijvoorbeeld voor bezoekers versus ingelogde gebruikers), of als een kop veel langer is dan de andere.

Het gebruik van sjabloonvariaties is cruciaal als we willen maken consistent en veerkrachtig gebruikersinterfaces. Kleinere componenten (atomen, moleculen, organismen) moeten functioneer goed in verschillende scenario's.

Een knop moet bijvoorbeeld klikbaar zijn met welke omringende elementen eromheen. Als het in een bepaalde variant niet bruikbaar lijkt, moet je het knopatoom opnieuw ontwerpen totdat het is veranderd past in alle gebruiksgevallen.

Pagina's - Voorbeeld

Hieronder ziet u de paginastap van de vorige startpagina-sjabloon van TimeInc. Lijkt anders, hè? Dit is gewoon één sjabloonvariatie, though. Om een effectieve gebruikersinterface te hebben, moet het ontwerpteam goed nadenken wat kan veranderen in de echte site. Vervolgens moeten ze het ontwerp voor die sjabloonvariatie (pagina) ook testen.