ds_banner_alt

GoodBarber
Ontwerpsysteem

Het ontwerpsysteem van GoodBarber Apps

Waarom deze ontwerprichtlijnen?

GoodBarber is sinds 2011 een no-code appbouwer. Hiermee kan iedereen intuïtief en zelfstandig zijn eigen persoonlijke app of Progressive Web App maken, ongeacht zijn technische vaardigheden.

Toen GoodBarber van start ging, was UX-design nog niet gedemocratiseerd zoals nu en werden de ontwerpen voor nieuwe functies in bitmap gemaakt.

Sindsdien zijn de methodes en tools van ontwerpers aanzienlijk veranderd doordat de gebruiker een centrale plek heeft gekregen in het ontwerpproces en het productieproces is geoptimaliseerd.

Het was daarom ook noodzakelijk om het ontwerp van templates geheel te herzien ten behoeve van visuele consistentie op de platforms en een snelle ontwikkeling.

Na een selectie van de meest gebruikte templates zijn ze geheel aangepast volgens de lay-outrichtlijnen van dit ontwerpsysteem. Deze manier

Developers hebben toegang tot de technische specificaties van de pagina's en de componenten daarvan: hun grootte, positie, gedrag en eigenschappen.

Ontwerpers kunnen nieuwe pagina's maken met behulp van een serie afstandsregels, lettergroottes, beeldverhoudingen en kleurverdeling.

Doelstellingen

ds_objectives_principles_alt

Stroomlijn het maken en produceren van templates door toepassing van constructieprincipes.

ds_objectives_consistency_alt

Zorg voor visuele consistentie tussen de pagina's van een app op verschillende platforms.

ds_objectives_smoothux_alt

Zorg voor een soepele en optimale gebruikerservaring

Wat is een goed ontwerp?

Goed ruimtebeheer

Witruimte', of negatiefruimte, wordt te vaak als synoniem voor verspilde ruimte gebruikt, terwijl het een basisregel voor een goed ontwerp is. Te veel informatie kan voor verwarring en een negatieve ervaring zorgen.

Door elementen op dezelfde afstand van elkaar te plaatsen wordt op een eenvoudige manier gerealiseerd dat pagina's visueel consistent zijn. Uitlijning is essentieel om vlot te kunnen lezen, en daarom gebruiken we hiervooreen raster. Er moet ook gebruik worden gemaakt van dezelfde tussenruimtewaarden zodat verschillende secties op alle apparaten consistent blijven.

Duidelijke hiërarchie

Een goed contrast tussen de verschillende tekstniveaus draagt bij tot de visuele organisatie en vergemakkelijkt het lezen.

In ons ontwerpsysteem wordt de verhouding tussen de grootte van een titel en de tekst gebaseerd op de golden ratio, waardoor er een harmonieus contrast ontstaat.

Goed lettertype- en kleurenbeheer

Een ontwerp dat te veel lettertypen en kleuren gebruikt, kan een verkeerd beeld geven en verwarring veroorzaken. Het is daarom goed om deze elementen te beperken zodat de inhoud duidelijker wordt.

In onze backoffice selecteren de gebruikers eerst een thema, dat ze vervolgens kunnen aanpassen voor het creëren van de visuele identiteit van hun app. Voor deze gebruikersflow wordt met een vast kader gewerkt: de aangeboden thema's zijn namelijk opgebouwd uit een beperkt aantal lettertypen, die al voorgeselecteerd zijn zodat de titel en de tekst goed bij elkaar passen.

De kleurenpaletten zijn beperkt tot 4 hoofdkleuren en de goede verdeling hiervan speelt een rol bij de hiërarchie van de informatie (bijvoorbeeld een primaire kleur voor het merk en de knoppen, één of twee secundaire kleuren voor de minder belangrijke knoppen, de links, etc.).

Dit kader maakt het mogelijk om een efficiënt standaardontwerp toe te passen op apps, maar bij GoodBarber kunnen gevorderde gebruikers hun product ook op een hele specifieke wijze aanpassen, buiten de basisaanbevelingen.

Het ontwerpsysteem van GoodBarber

Het ontwerpsysteem van GoodBarber is een kader, evenals een toolbox en een grafisch charter. Het is een set van veranderende richtlijnen waar ontwerpers en developers op kunnen vertrouwen.

Grondbeginselen

principes voor het bouwen van een template

Componenten

uitgebreide beschrijving van de componenten

Middelen

bibliotheek voor prototypes en technische specificaties van templates