Benut de overruimte!

STIJLPREVIEW · DIGITAAL

Maak ruimte
voor morgen.

Een voorbeeld van hoe een toegankelijke, energieke website of applicatie eruit kan zien met de visuele identiteit van Benut de overruimte.

Bekijk componenten

VAN OVER  →  VAN WAARDE

Schuif de wand.
Maak een tweede thuis.

Veel woningen hebben kamers die nauwelijks worden gebruikt. Ontdek wat er gebeurt als je een deel van die ruimte zelfstandig bewoonbaar maakt.

0 m²

Sleep, klik of gebruik de pijltjestoetsen. Vanaf 18 m² ontstaat een zelfstandige woonplek.

SplitcoachZiet waar ruimte kan ontstaan.
WoonkoppelaarBrengt ruimte en bewoner samen.

Nog één grote woning. De overruimte wacht op een nieuwe bestemming.

01 / OVERZICHT

Een systeem met karakter.

De basis: hoge leesbaarheid, duidelijke hiërarchie en speelse accenten die de route door de applicatie ondersteunen.

0vierkante meter potentie+ 12% t.o.v. vorig kwartaal
0actieve initiatieven24 wachten op een eerste gesprek
00expertrollenvan splitcoach tot tekenaar

02 / COMPONENTEN

Acties, keuzes en feedback.

Knoppen

Status en tags

In behandelingNieuw initiatiefAandacht nodigAfgerond
Goed bezig.

Je hebt alle gegevens voor deze stap ingevuld.

Tabs

KaartweergaveBekijk kansen per buurt en pand.

UITGELICHT

Vind de ruimte die al bestaat.

Gebruik een royale call-to-action voor de stap die de meeste aandacht verdient.

03 / UI-CATALOGUS

25 bouwstenen voor een webapp.

Framework-onafhankelijke voorbeelden van componenten die je ook kent uit React-bibliotheken. Klik, typ en probeer ze uit.

01

Button

Primaire, secundaire en tekstactie.

02

Icon button

Compacte acties met toegankelijk label.

03

Text input

Normale, gevulde en foutstatus.

✓ Beschikbaar
04

Textarea

Meerregelige invoer met limiet.

0 / 120
05

Select

Een keuze uit een vaste lijst.

06

Combobox

Zoekbare keuzelijst met autocomplete.

07

Checkbox

Meerdere opties kunnen actief zijn.

08

Radio group

Precies één keuze binnen een groep.

Urgentie
09

Switch

Zet een instelling direct aan of uit.

Updates ontvangen
10

Date picker

Kies een datum met native kalender.

11

Time picker

Kies een tijdstip in vaste stappen.

12

File upload

Upload via kiezen of slepen.

13

Range slider

Een numerieke waarde binnen bereik.

120 m²
14

Tabs

Wissel tussen verwante inhoud.

SamenvattingDe belangrijkste projectinformatie bij elkaar.
15

Accordion

Open één of meer verdiepende antwoorden.

Onbenutte ruimte in, op of rondom bestaande gebouwen.
16

Breadcrumb

Laat de positie in de structuur zien.

17

Pagination

Navigeer door meerdere pagina’s.

18

Dialog

Gerichte taak boven de huidige pagina.

19

Drawer

Contextpaneel vanaf de zijkant.

20

Dropdown menu

Meerdere acties achter één knop.

21

Tooltip

Korte hulp bij een compacte actie.

Meer uitleg over dit veld
22

Toast

Tijdelijke bevestiging zonder onderbreking.

23

Alert

Belangrijke, blijvende feedback.

24

Data table

Vergelijk gestructureerde gegevens.

NaamFasePotentie
De GarageVerkenning88 m²
Het AchterhuisPlanvorming146 m²
25

Progress & stepper

Maak voortgang en volgende stappen zichtbaar.

✓Gegevens
2Verkenning
3Advies

04 / FORMULIEREN

Vriendelijk en duidelijk vragen stellen.

Start je verkenning
Waar wil je hulp bij?
0 / 240

05 / GEGEVENS

Informatie die snel te scannen is.

Overzicht van initiatieven
InitiatiefLocatieFasePotentieActie
De bovenste verdiepingReferentie BDO-024HaarlemVerkenning220 m²
Ruimte op het erfReferentie BDO-019HilversumPlanvorming184 m²
Een extra woonlaagReferentie BDO-011AlkmaarAfgerond96 m²

STAP 1 VAN 2

Waar wil je ruimte voor maken?