Hoe een ontwerpsysteem te bouwen

Een ontwerpsysteem is in wezen een bibliotheek van componenten die wordt geleid door een duidelijke reeks standaarden en richtlijnen, en is helemaal niet als een statische stijlgids die koppelingen naar specificaties bevat. We maken componenten terwijl we de productmogelijkheden ontdekken en deze continu aan de bibliotheek toevoegen voor toekomstig gebruik.

Deze bibliotheek is herbruikbaar, dus wanneer soortgelijke componenten in de toekomst op verschillende niveaus nodig zijn – atomair, moleculair, organisme, sjabloon – kunnen ze opnieuw worden gebruikt om snel pagina’s te maken. Ontwerp – het systeem is altijd klaar voor gebruik, maar nooit voltooid, daarom noemen sommigen het een levend document.

Wat is het belang van een ontwerpsysteem?

Het creëren en onderhouden van een ontwerpsysteem betekent het creëren en onderhouden van het product zelf. Het ontwerpsysteem vereist onderhoud en updates gedurende de gehele levenscyclus van het product. Het is belangrijk om speciale inspanningen te leveren om schaalbare systemen te ontwerpen die naadloze consistentie bieden op het platform en de bijbehorende apparaten. Andere voordelen zijn:

Wat zijn de doelen van een ontwerpsysteem?

Ontwikkelaars kunnen naar het ontwerpsysteem verwijzen voor componentspecificaties die vergelijkbaar zijn met hun ontwikkelingsrepository. Ter referentie op de lay-out kunnen ze linken naar goedgekeurde schermen, zodat ze verbinding kunnen maken en kunnen werken met componenten om indien nodig een nieuw scherm te maken.

Atomic Design begrijpen

Atomic Design, ontwikkeld door Brad Frost, is een techniek waarbij de lay-out van een website wordt opgesplitst in de belangrijkste componenten. Deze componenten worden vervolgens op de hele site hergebruikt. De naam voor atomair ontwerp komt van het concept van hoe alle materie in het universum kan worden opgesplitst in een eindige verzameling kleine elementen die atomen worden genoemd. Evenzo kan het worden toegepast bij het creëren van ontwerpsystemen, waarbij onze interfaces kunnen worden onderverdeeld in een eindige reeks elementen. Deze elementen werken vervolgens samen om effectieve interface-ontwerpsystemen te creëren in een model dat niet lineair maar mentaal is. Dit helpt ons om gebruikersinterfaces te zien als holistische objecten en het feit dat ze zijn gemaakt met sets van onderdelen.

Tien jaar geleden stonden ze bekend als patroonbibliotheken, vóór atomair ontwerp, dat een vollediger begrip van ontwerpsystemen opleverde. Nadat Google in 2014 Material Design introduceerde, is het concept van ontwerpsystemen eindelijk volwassen geworden. Nu, na de opkomst van veel van dergelijke systemen, wordt het principe van atomair ontwerp gebruikt als een mentaal model bij het creëren van een systeem dat werkt in combinatie met de repository van de ontwikkelaar.

Het gebruik van het ontwerpsysteem is echt indrukwekkend. Het kan worden gebruikt om een ​​nieuw product, een e-commerce website, enz. Te maken. Zolang u het team en de tijd heeft om een ​​ontwerpsysteem te bouwen en te onderhouden, kunt u er zeker van zijn dat u van de voordelen kunt profiteren.

Ontwerpproces:

Begin met het bestuderen van ontwerprichtlijnen en het analyseren van bestaande applicaties die met dit ontwerpsysteem zijn gebouwd. Dit zal u helpen het doel te bepalen van het ontwerpsysteem dat u wilt maken.

Typografie

Deze thema-editor bestaat ook uit typografische schalen en gewichten die kunnen worden gegenereerd met behulp van de plug-in. U kunt het gewenste Google-lettertype selecteren in het bewerkingspaneel en het genereert automatisch alle koptekstgroottes en -gewichten volgens het geselecteerde lettertype, zoals hieronder wordt weergegeven. Hiërarchie- of gewichtsaanpassingen kunnen worden gemaakt op het canvas / stijlgidsdocument.

Kleuren

Over het hele paneel kunnen we de primaire en secundaire kleuren wijzigen in de gewenste merkkleur, en elk element in de stijl- en componentengids wordt automatisch vervangen door de nieuwe merkkleuren. Dit is de magie van het gebruik van geneste en bedrade componenten. Tot nu toe stond de thema-editor twee kleuren toe, we kunnen meer toevoegen aan het stijlgidsdocument, maar dit wordt nog niet weerspiegeld in het paneel.

Icon bibliotheek

Materiaalontwerp biedt u 4 soorten systeemsymbolen die gevuld, puntig, afgerond en tweekleurig zijn. Net als andere dingen, kunnen we meer aan deze bibliotheek toevoegen met onze aangepaste pictogrammen.

Raster

Het ontwerpmateriaal maakt gebruik van een 8-punts rastersysteem. Dit betekent dat het, ongeacht welk platform u bouwt, een basiseenheid van 8 en een veelvoud van 8 gebruikt om een ​​evenwichtige vormgeving op alle platforms te behouden. Omdat alle apparaten waarvoor we ontwerpen een schermbreedte hebben in veelvouden van 8, is dit rastersysteem erg populair geworden in de branche.

Andere schermsjablonen en componenten

Materiaalontwerp biedt verschillende weergavesjablonen die zijn gebouwd met behulp van atomen (symbool van het eerste niveau) en moleculen (geneste symbolen).

Net als bij een kleursysteem kunnen we typografie maken met een specifieke schaal en gewicht die past bij een kop of tekstlink of hoofdtekst, en ook een nieuwe laagstijl of een nieuw symbool maken voor hergebruik. Om een ​​nieuwe typografische schaal toe te voegen, kunnen we de bestaande stijl dupliceren, wijzigen en hernoemen.

Als uw team meerdere ontwerpers heeft, kunt u de functie Schetsbibliotheek gebruiken om iedereen met dezelfde bron te synchroniseren. Dit betekent dat je een hoofdsysteembestand hebt dat in de cloud wordt opgeslagen, zoals in Dropbox of Google Drive. Dit bestand is alleen-lezen en alle ontwikkelaars in het team hebben van daaruit toegang tot het hoofdbestand, zodat als een update of toevoeging aan het systeem nodig is, u dit met goedkeuring van het team in het hoofdbestand kunt doen. Deze wijziging wordt als downloadbare update weergegeven in de miniatuurbestanden van elke gebruiker. Zo wordt het beheren van schetsen en hun verschillende versies eenvoudig en overzichtelijk.

U kunt uw ontwikkelaars alleen-lezen toegang geven tot het hoofdsysteembestand, zodat ze de specificaties van atomen, moleculen en organismen van daaruit kunnen lezen en hun opslagplaatsen kunnen maken. U kunt uw schermen ter referentie naar hen overbrengen. Ontwikkelaars kunnen vervolgens verwijzen naar lay-outs en schermen maken met behulp van de repository die ze in hun coderingssysteem hebben gebouwd. Zo ontwerpen we voor praktische eindresultaten en lopen we altijd synchroon met de ontwikkelprocessen.

Systeemontwerp en -ontwikkeling is een handig hulpmiddel voor ontwerpers! Door de bovenstaande richtlijnen te volgen, kunt u een ontwerpsysteem maken waarmee u indien nodig toegang hebt tot de componentenbibliotheek. Zodat u componenten kunt gebruiken en wijzigen om nieuwe te maken met ankerpunten.

 

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

website maken prijs

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

Comments have been closed/disabled for this content.