Atomic Design gebruiken in moderne webontwikkeling
Als ik iets heb geleerd dat werkt voor een technologiebedrijf, is het dat om een website te bouwen - een werkelijk verbazingwekkende, mooie en goed functionerende website - een groot aantal verschillende talenten en elementen samen moeten komen en in harmonie moeten werken. Soms kan het voelen als werken aan de Tower of Babel: de ene persoon zift door een palet met hexadecimale codes, de jongens aan de andere kant van de kamer ratelen een alfabetsoep met verschillende coderingsafkortingen en de accountmanager staat naast me aan de telefoon uitleg over het gebruik van een contentbeheersysteem voor een klant, terwijl ik dit artikel in gewoon Engels probeer te schrijven.
Al die elementen hebben een manier nodig om samen te komen zonder dat er iets verloren gaat in de kakofonie, en er is een relatief nieuw concept dat ons echt heeft geholpen beter te werken als een team: ontwerpers, ontwikkelaars, testers ... iedereen.
Het heet Atomic Design .
Wat is Atomic Design?
De componenten van Atomic Design zijn afgeleid van ontwerper Brad Frost Is gefascineerd door chemie; atomen zijn de kleinste eenheid, bindend in moleculen, die op hun beurt complexere organismen vormen en uiteindelijk alle materie in het universum vormen.
Dus, als we ons in het internationale ruimtestation bevinden, kijkend naar het hele project als geheel, hier is de voltooide startpagina van een recent project waarin we Atomic Design hebben toegepast, Route 93 Pizza Molen :
Route 93 Pizza's homepage bestaat uit al onze elementen als een uniforme, functionele website. Als we de site nu onder een microscoop plaatsen, kunnen we de korrelige componenten ervan zien:
Atomen: Hieronder staan de atomen voor de website van Route 93 Pizza Mill. De atomen zijn de basisbouwstenen, zoals tags, formulierlabels, knoppen, kleurenpalet en lettertypen. Hoewel ze op zichzelf niet erg nuttig zijn, zijn atomen je voorlopige referentiepunt - het begin van je creatie.
Moleculen: moleculen zijn waar atomen aan het werk worden gezet - waar het voltooide website-ontwerp tastbaar begint te worden. In de moleculen voor Route 93 ziet u het kleurenpalet, de lettertypen en de iconografie samenkomen in formuliervelden, beeldoverlays en knoppen. Ze zijn, zoals Frost het zegt, jouw hulpmiddel om "één ding te doen en het goed te doen."
Organismen: tegen de tijd dat we bij organismen aankomen, kunnen we de volledige voettekst maken voor Route 93. Het combineert alle bovengenoemde componenten tot een bruikbare, esthetische website.
De interface-inventaris: nu we alle ingrediënten hebben, hebben we een tastbaar menu nodig om ze in iets verteerbaars in te delen; een document dat alle bovenstaande elementen bevat als een leesbare, bruikbare resource - een interface-inventaris.
Hoewel sommige organisaties dit een Patroonbibliotheek of Stijlgids noemen en Interface-inventaris specifiek gebruiken om te verwijzen naar een audit die ze op een bestaande website hebben uitgevoerd, gebruiken we de term Interface-inventaris voor onze eigen projecten (evenals audits van andere sites) als onderdeel van een continu evaluatieproces.
Omdat de workflow van Atomic Design enigszins een dilemma van het kip-of-ei-type nabootst, neemt de interface-inventaris meestal vormelijk enigszins vorm aan na het maken van de startpagina en een andere pagina van de website, maar niet al te lang daarna. Terwijl deze twee eerste pagina's vorm krijgen, zorgt de ontwerper ervoor dat de elementen op beide consistent zijn. Voor alle pagina's daarna hebben ze dan de mogelijkheid om uit de inventaris te putten. Dit levert een canonieke bron op voor hoe visuele stijlen in het hele project moeten worden toegepast, een letterlijke gemeenschappelijke taal, in gewoon Engels, van hex-codes, knopstijlen, opvulbreedten, waarnaar ontwikkelaars - en het hele team - kunnen verwijzen.
Door een Interface Inventory met het Atomic Design-proces te ontwerpen, kunnen we beginnen met primitieve modules en deze samenvoegen tot voltooide elementen. Dit proces verbetert de efficiëntie, de communicatie tussen teamleden en produceert over het algemeen een mooiere website.
Wat Atomic Design voor ons doet
Atomic Design helpt ons zowel solide "waarheden" te ontdekken over het ontwerp van het project waaraan we werken, alsook om een gemeenschappelijk vocabulaire te creëren tussen zijn artistieke en technische aspecten. Het stimuleert een meer robuust systeem in het algemeen dat UX verbetert en biedt een methodologie, zodat ontwerpers zich kunnen houden aan de op componenten gebaseerde richtlijnen van de ontwikkelaars met behoud van creativiteit.
Natuurlijk coderen ontwikkelaars van de grond af, terwijl de aanpak van een kunstenaar meestal begint in een meer vage vorm, die dan na een vormbewerking stolt tot een functionele webpagina. Atomic Design moedigt-en vereist-ontwerpers aan om ook vanaf de basis te werken, om alle componenten van de interface consistent en doelgericht te maken op het laagst mogelijke niveau.
De oprichting van deze gemeenschappelijke taal, vertegenwoordigd door de Interface Inventory, zorgt ervoor dat ontwerpers en ontwikkelaars geen nieuwe oplossingen bedenken voor problemen die al zijn opgelost. Als er bijvoorbeeld een nieuw contactformulier aan een project wordt toegevoegd, zijn de stijlen die nodig zijn om dat formulier te maken al aanwezig en kunnen deze eenvoudig worden gebruikt om de pagina te bouwen, waarbij het niet nodig is dat de ontwerper extra inspanningen levert. Het vereist niet noodzakelijkerwijs werk van de ontwerper, maar maakt het in plaats daarvan gemakkelijker voor ontwikkelaars om snel oplossingen te bouwen in plaats van de ontwerper te verplichten om elke pagina of organisme eerst te bespotten. De rol van de ontwerper wordt vervolgens verplaatst naar iets dat meer op art direction lijkt nadat de pagina's zijn gemaakt. Deze tastbare "waarheden" elimineren ook de noodzaak om de ontwerper als een scheidsrechter te gebruiken. Vragen zoals "is deze ontwerpkeuze opzettelijk?" Of "welke kleur moeten we gebruiken voor dit specifieke element?", Evenals last-minute wijzigingen of toevoegingen aan een pagina worden beantwoord door de interface-inventaris.
De gemeenschappelijke taal gaat ook door met kwaliteitsbewaking. Bij het testen van een webpagina voor zowel inhoud als functionaliteit, trek ik de interface-inventaris als leidraad naar boven in mijn scherm. Hoewel het in de eerste plaats een ontwerperstool is en ten tweede een ontwikkelaarstool, kan iedereen in het team met vertrouwen deelnemen aan gesprekken over ontwerp en consistentie, omdat we ervoor zorgen dat onze sites onberispelijk zijn en klaar zijn om aan de klant te worden overgedragen.
Conclusie
Om een goede uitvoering van een project te garanderen, vooral enkele van de grotere die we vaak aanpakken, is communicatie cruciaal; als je verschillende ideeën over de ruimte tegen elkaar schreeuwt, zal er nooit iets uitvoerbaars van komen. Atomic Design helpt om op te treden als een vertaler voor deze verschillende afdelingen en de "talen" die daarbij horen om de consistentie in het ontwerp te behouden. Het stelt een modulaire resource voor het team vast, zorgt voor coherentie en resulteert in een efficiënte turnaround, minder fouten en een meer gepolijst eindproduct.