ds_banner_alt

GoodBarber
Ontwerpsysteem

Het ontwerpsysteem van GoodBarber Apps

Waarom deze ontwerprichtlijnen?

GoodBarber is een no-code appbouwer die sinds 2011 op de markt is. Met GoodBarber kan iedereen zijn of haar native app of Progressive Web App bouwen zonder te coderen. Het is een krachtige tool voor mensen die een app willen bouwen maar niet over de daarvoor benodigde technische vaardigheden beschikken. Het zit al vanaf het begin in ons DNA om de technologie en middelen te leveren om een ontwerp voor een app om te zetten in een verbluffende werkelijkheid. We streven ernaar voortdurend de beste oplossingen te bieden voor het bouwen van prachtige apps.

Bij de lancering van GoodBarber was UX-design nog niet zo wijdverbreid bekend of overgenomen als nu. In het verleden – voor dat er ontwerpsystemen bestonden – was het bouwen van mobiele apps voor ontwerpers en ontwikkelaars vaak een uitdagend proces. Zonder een set consistente richtlijnen en beste praktijken die men kon volgen, was het moeilijk om visuele consistentie en gebruiksgemak op verschillende schermen/apparaten te garanderen. Ook het creëren van nieuwe functies verliep inefficiënt, omdat ontwerpers en ontwikkelaars vaak vanaf nul moesten beginnen. Dit heeft gezorgd voor heel wat verspilde tijd en middelen. Daarnaast waren ook samenwerking en communicatie lastig, omdat teamleden niet over een gemeenschappelijke taal of set standaarden beschikten.

Sinds die tijd hebben de methoden en tools van ontwerpers zich aanzienlijk ontwikkeld. Ontwerpsystemen hebben bijgedragen aan het overwinnen van deze uitdagingen, door te voorzien in een set richtlijnen en beste praktijken die ontwerpers en ontwikkelaars kunnen volgen. Naarmate het platform van GoodBarber zich verder ontwikkelde, realiseerden we ons dat het ontwerp van onze sjablonen in zijn geheel moest worden herzien om visuele consistentie op de platforms te realiseren en het ontwikkelproces te versnellen. Dit hebben we gedaan door het ontwikkelen van het GoodBarber-ontwerpsysteem, een set richtlijnen en beste praktijken om consistentie, efficiëntie, samenwerking, schaalbaarheid, branding en toegankelijkheid in het ontwerpproces te waarborgen.

Door het GoodBarber-ontwerpsysteem openbaar te maken, delen we onze ontwerpprincipes – die in de loop der jaren verder zijn ontwikkeld en verfijnd – met iedereen. Hierdoor kunnen ook gebruikers consistentie, efficiëntie en schaalbaarheid realiseren bij het maken van aangepaste plugins of bij vergaande personalisering van hun app.

Voor het GoodBarber-team betekent het GoodBarber-ontwerpsysteem een gestroomlijnd app-ontwikkelproces, een gegarandeerd consistente gebruikerservaring en een algeheleverbetering van de kwaliteit van de apps die u bouwt met onze technologie

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

Bij vormgeving verwijst witruimte, of negatiefruimte, naar de lege ruimte tussen elementen op een pagina. Het wordt vaak als verspilde ruimte beschouwd, terwijl het juist een grote rol speelt bij het creëren van een helder en overzichtelijk ontwerp. Het helpt verschillende elementen te scheiden en te benadrukken, waardoor ze eenvoudiger te lezen en te begrijpen zijn. Daarbij kan witruimte ook hiërarchie aanbrengen en het oog van de gebruiker naar de belangrijkste informatie op de pagina leiden.

Door elementen op dezelfde afstand van elkaar te plaatsen, wordt op een eenvoudige manier gewaarborgd dat pagina's visueel consistent zijn. Het gebruik van een raster om uitlijning van een tekst te garanderen, is een techniek die vaak bij grafisch ontwerp en typografie wordt gebruikt. Uitlijning is essentieel om vlot te kunnen lezen en daarom gebruiken we een 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 is essentieel voor het creëren van een visueel overzichtelijke en goed leesbare lay-out. Het gebruik van verschillende tekstgrootte en -stijl, zoals koppen en hoofdtekst, helpt om een hiërarchie in de informatie te creëren en het oog van de gebruiker door de lay-out te leiden.

In ons ontwerpsysteem gebruiken we de gulden snede om de verhouding tussen koppen en tekst te bepalen. De gulden snede, ook wel “Divina Proportia” (goddelijke verhouding) genoemd, is een wiskundige verhouding die bij vormgeving vaak wordt gebruikt om visueel aangename en harmonieuze ontwerpen te creëren. Door de gulden snede te gebruiken voor het bepalen van de verhouding tussen koppen en tekst, kunnen we een contrast creëren dat zowel aantrekkelijk als functioneel is.

Daarnaast gebruiken we ook andere technieken voor typografie zoals gewicht, kleur en ruimte om contrast tussen verschillende tekstniveaus te creëren. Zo kunnen we ervoor zorgen dat de koppen zich onderscheiden van de tekst en de aandacht van de gebruiker sturen. Met behulp van deze technieken kunnen we een visueel overzichtelijke en goed leesbare lay-out creëren die de gebruiker op een duidelijke en soepele manier door de content leidt.

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 GoodBarber-ontwerpsysteem is een allesomvattende oplossing die dient als een kader, toolbox en grafisch charter voor ontwerpers en ontwikkelaars. Het is een verzameling van ontwikkelende richtlijnen die een consistente en samenhangende ontwerptaal voor het hele platform bieden, dat ontwerpers en ontwikkelaars consistentie, efficiëntie en schaalbaarheid van hun werk garandeert. Het is een gids die bijdraagt aan een gemeenschappelijk begrip van de ontwerpbeginselen en -patronen, en die waar nodig ruimte laat voor flexibiliteit en maatwerk. Al met al is het GoodBarber-ontwerpsysteem een krachtige tool die helpt om het app-ontwikkelproces te stroomlijnen en prachtige en functionele apps te creëren.

Grondbeginselen

Ons ontwerpsysteem bevat richtlijnen voor het maken van sjablonen die consistent, efficiënt en gebruiksvriendelijk zijn

Componenten

De componenten in ons ontwerpsysteem zijn bouwblokken die kunnen worden gebruikt voor het maken van een samenhangend en consistent ontwerp voor uw app.

Middelen

Ons ontwerpsysteem bevat een bibliotheek met prototypen en technische specificaties voor de verschillende schermen van het product. Deze specificaties zijn voor intern gebruik door onze ontwerpers en ontwikkelaars.