Hoe onderscheid te maken tussen ontwerpsysteem, atomair ontwerp, richtlijn en UI-kit

software developer wiki

Welke tools worden waarvoor gebruikt, hoe ze niet door elkaar halen en precies krijgen wat u nodig heeft voor uw project? Je kunt het niet overdrijven bij het optimaliseren van je ontwerpwerk. U kunt het probleem globaal benaderen en de atomaire ontwerpmethodologie gebruiken, of u kunt uzelf beperken tot de UI-kit. Laten we uitzoeken welke tools waarvoor gebruikt worden, hoe ze niet door elkaar gehaald moeten worden en precies krijgen wat u nodig heeft voor uw project.

Ontwerpsysteem

Een ontwerpsysteem is een set regels voor het maken van interfaces en productontwerp. Het integreert stijlen, componenten, gedragspatronen en vormt de beeldtaal van het merk. Het systeem wordt gebruikt wanneer het merk naast de site ook een applicatie, een persoonlijk account, een webwinkel heeft en daar verschillende teams mee bezig zijn. De componenten van het systeem kunnen per geval verschillen, maar meestal zijn dit richtlijnen, UI-kit, patronen, documentatie voor front-end ontwikkelaars en zelfs een toegewijd team van ontwerpers. Het ontwerpsysteem komt tot stand na voltooiing van het project en vormt de basis voor het maken van nieuwe webpagina’s. Dit helpt front-end ontwikkelaars en ontwerpers in de volgende fase van het werk bij het ontwikkelen van visualisatie van een nieuw product en verkort de testtijd. Het creëren van een ontwerpsysteem zal inspanning en tijd vergen, maar in de toekomst zal het mogelijk zijn om nieuwe websitepagina’s in een enkele vorm veel sneller te maken dan met alleen de UI-kit.

Atoomontwerp

De belangrijkste eigenschap van atomair ontwerp is dat het geen technologie is, maar een methodologie op basis waarvan producten worden gemaakt. Met atomisch ontwerp kunt u een compleet ontwerpsysteem maken, ongeacht het programma waarmee u gewend bent te werken. Dit systeem bevat informatie over de componenten van de interfaces en maakt het mogelijk om snel van het abstracte niveau naar het concrete te gaan. In 2013 werd deze methodologie voorgesteld door Brad Frost en beschreven in het boek Atomic Design. Hij trok een analogie tussen grensvlakken en chemie: net zoals alle stoffen in het heelal uit atomen bestaan, zijn alle grensvlakken gemaakt van componenten. Deze elementen kunnen worden opgesplitst in 5 niveaus.

  • Atomen zijn de kleinste elementen: een vorm, een invoerveld en meer abstracte elementen zoals animaties. Atomen zorgen voor een consistente interfacestijl en worden de bouwstenen van de pagina.
  • Moleculen zijn combinaties van atomen die samen nuttiger worden dan afzonderlijk. Bijvoorbeeld een combinatie van titel, link, afbeelding.
  • Organismen vormen een groot deel van de interface: een logo, een koptekst met alle knoppen, een zoekveld, een lijst met sociale netwerken.
  • Sjablonen zijn elementen van verschillende organismen, het frame van de pagina, het prototype ervan.
  • Pagina’s zijn de laatste fase met relevante inhoud, die de effectiviteit van het hele ontwerpsysteem test.

Nadat de atomen zijn gemaakt, kunt u er nieuwe pagina’s van verzamelen. De atomaire benadering is handig in gebruik bij grote en snelgroeiende projecten. Als er door gebruikers veel vraag is naar een kleine site, zal deze binnen een maand nieuwe secties verwerven en zal de belasting toenemen. Als de ontwerper een kant-en-klaar systeem heeft, zullen er bij het maken van nieuwe pagina’s geen vragen zijn over kleuren of het aantal inspringingen.

UI-kit

UI-kit een set interface-elementen: navigatie, knoppen, tabbladen, tabbladen, banners. Het belangrijkste is dat alle stijlen, maten, hun interactiegedrag en toestanden worden geregistreerd in de UI-kit. U hoeft niet elke keer opnieuw te beginnen als het vereiste element in de UI-kit is opgeslagen. Het is een belangrijk hulpmiddel voor het aanpassen van ontwerpen op basis van uw publiek, het bijwerken van ontwerpen en het creëren van een consistente stijl voor meerdere producten. Zonder de UI-kit is het bij het maken van nieuwe pagina’s mogelijk om de kleuren en lettertypen die in de gids worden aangegeven te behouden, maar tegelijkertijd kunnen knoppen en velden in grootte verschillen. Voor maximale werksnelheid moet de kant-en-klare UI-kit worden vertaald in code waartoe de lay-outontwerper toegang heeft.

Richtlijn

Het merkenboek van het bedrijf bevat waarden, merkmissie, de belangrijkste symbolen en attributen. Een richtlijn is een analoog van een merkboek voor een digitale omgeving, waarin de basisregels voor het werken aan een project zijn vastgelegd. Het bestaat uit richtlijnen en visuele taalstandaarden – kleuren, spaties, logo-keuzes, kleurenschema’s en lettertypen. Daarnaast zijn er tips over de stijl van de tekst en wordt in tegenstelling tot de UI-kit de opstelling van elementen ten opzichte van elkaar beschreven. Om een ​​richtlijn te maken, moet u nadenken over de inhoudsarchitectuur, de benadering van afbeeldingen en prototypes die het beste werken voor uw publiek. De richtlijn kan worden onderverdeeld in basisvereisten en aanvullende eisen – specifieke elementen van een bepaald project en hun gedrag op verschillende apparaten.

Waarom zijn deze concepten door elkaar gehaald?

Een ontwerpsysteem, inclusief een systeem dat is gemaakt met behulp van de atomaire ontwerpmethodologie, is een combinatie van regels voor het maken van een product, en niet alleen een bibliotheek met componenten. Het impliceert een meer globale benadering en begrip van de elementen op een ander niveau – van minder naar meer.

Een gedetailleerd ontwerpsysteem combineert zowel deze methodologie als de UI-kit. Maar de methodologie waarmee het ontwerp zal worden ontworpen, wordt gekozen voordat met het werk wordt begonnen. Vervolgens wordt het ontwerp gemaakt van de kant-en-klare atomen en modellen. En aan het einde wordt de UI-kit getypt met kant-en-klare elementen om deze te gebruiken voor de ontwikkeling van de site en het gemak van lay-out.

Een UI-kit zal niet zo compleet zijn als een systeem dat is gebouwd met behulp van atomaire ontwerpmethodologie. En als u alleen de Ui-kit volgt, kan er een sjabloon op de site verschijnen die iets anders is, niet past.

Als je het niet helemaal begrijpt en de concepten door elkaar haalt, loop je het risico om alleen een UI-kit te krijgen – een grote bron met een reeks moleculen, wachtend op een uitgebreid systeem. Maar wat u ook kiest aan het einde van het project, zowel de UI-kit als het atomaire ontwerpsysteem zullen het verdere werk aan het ontwerp versnellen.

Atomic design betekent een meer globale benadering en nadenken over elementen op een ander niveau – van minder naar meer. Begin met atomen en eindig met een pagina met verzamelde inhoud. Als het resultaat niet harmonieus is, begin dan opnieuw op atomair niveau. Welke methodologie of tool u ook gebruikt, u moet deze up-to-date houden.

Belangrijkste verschillen tussen ontwerpsysteem, atomair ontwerp en UI-kit

UI-kit en richtlijn zijn producten, en ontwerpsysteem en atomair ontwerp zijn methodologieën;

UI-kit wordt geassembleerd na voltooiing van het projectontwerp;

In atomair ontwerp is er een pagina met het hoogste niveau van specificiteit, in een UI-kit is er nooit zo’n niveau;

Atoomontwerp wordt vanaf het allereerste begin van het ontwerpwerk geaccepteerd als een methodologie;

Een ontwerpsysteem wordt gemaakt wanneer ten minste één project is voltooid en er gegevens zijn voor analyse;

Atomic design is een uitgebreid ontwerpsysteem en de UI-kit maakt er deel van uit;

In de UI-kit is er alleen de stijl en staat van elementen, en de richtlijn beschrijft ook de interactie van elementen, basisprincipes van lay-out, inhoudsvereisten;

De richtlijn komt tot stand nadat een deel van het werk aan het project al is gedaan, de basispagina’s zijn ontwikkeld. Alle oplossingen voor het aanpassen van de huisstijl aan het web zijn daar geschreven;

Heeft u weinig pagina’s en inhoud, dan kunt u zich beperken tot de UI-kit, en in andere gevallen dient u het gedrag van elementen en projectregels vast te leggen in de richtlijn;

Wanneer u met meerdere projecten onder één merk werkt, heeft u uw eigen ontwerpsysteem nodig om het werk in de toekomst te verenigen en te vereenvoudigen. Denk aan een uitgebreide, atomaire versie.

Met behulp van deze gegevens kunt u beslissen hoe u uw project ontwikkelt, het ontwerp harmonieus maakt en de interface gebruiksvriendelijk maakt. Welke methodologie of technologie u ook kiest voor uw project, een geïntegreerde ontwerpbenadering optimaliseert de prestaties en verbetert de merkperceptie.

Neem contact met ons op en we bespreken verschillende mogelijkheden.

E-mail: info@webdevelopmentapp.com 
BE: +32 499 41 46 24 
Franklin Rooseveltplaats 12, 2060 Antwerpen, Belgie

https://webdevelopmentapp.com/nl/development.html

About