E-commerce
Abonnementssystemen
Chatbot
Online cursussen
Reservering
Reisgids
Evenementen
Content creators
Lokale bezorging en afhalen
Kranten
Radio
Scholen
Religie
Organisaties
Restaurant
Boodschappen
Zelf bouwen
Interne communicatie
GEEN CODE APP BOUWER
TECHNOLOGIE
WAAROM GOODBARBER?
Ontwerp
PRODUCTBRONNEN
ONDERWERPEN
RESELLERS VAN MOBIELE APPS
ONTDEKHoe stel ik de schaduw in mijn app in?
In een GoodBarber-app valt een goed ingestelde schaduw niet op: hij tilt de inhoud van de achtergrond en geeft het scherm diepte. Hij is klaar voor gebruik: één klik zet hem aan, onze instellingen kalibreren hem. En wil je hem naar je eigen smaak, dan is elke waarde instelbaar.
Zo stel je de schaduw in een GoodBarber-app in, van de klik die hem aanzet tot het fijn instellen, tot op de pixel.
Een schaduw met één klik
In het ontwerppaneel van een lijst, een widget of een categoriebalk is een schaduw één klik werk, zodra de layout het toelaat: ‘Schaduweffect inschakelen’. De weg: Mijn App › Structuur › je sectie › Het ontwerp bewerken › STIJLOPTIES. De standaardinstellingen van GoodBarber doen de rest (3 px verschuiving, 6 px vervaging, zwart op 20 %). Discreet tilt de schaduw elk element van de achtergrond zonder de aandacht te trekken.
De TabBar en de zwevende knop hebben hun schaduw vanaf het begin, een hogere (6 px verschuiving, 12 px vervaging), omdat ze vóór de inhoud liggen.
Een schaduw heeft een vlak nodig om op te tillen, zoals de achtergrond van een cel, een miniatuur of een knop. Op een tekst of een icoon komt hij nooit, om de leesbaarheid niet te storen.
Jij zet de schaduw aan; het systeem weet waar hij mag liggen, en op welk niveau. Deze standaardinstelling maakt je leven makkelijker en houdt je schaduwen in de hele app consistent. Dat is ons principe ‘No design burden’: design mag nooit een last zijn.
Wat een schaduw maakt
Leg een vel papier op je bureau: de schaduw blijft eronder plakken, scherp. Til het een paar centimeter op, en de schaduw glijdt naar beneden en wordt zachter. Op het scherm is het hetzelfde verhaal, met drie instellingen:
- De verschuiving: de schaduw schuift weg van het element, aan de kant tegenover het licht. Standaard zakt hij 3 px onder een lijst, 6 onder de TabBar. Hoe verder hij wegschuift, hoe hoger het element lijkt.
- De vervaging: ze maakt de rand van de schaduw zacht. Standaard 6 px onder een lijst, 12 onder de TabBar. Hoe groter ze wordt, hoe meer de schaduw opgaat in de achtergrond.
- De kleur, en haar kracht: de schaduw krijgt een tint en een dekking. Standaard zwart op 20 %. Een tint uit je palet geeft hem jouw karakter.
Deze waarden stel je in per lijst, widget of categoriebalk. De TabBar, de zwevende knop en de formuliervelden stel je daarentegen één keer in voor de hele app.
En voor velden: de binnenschaduw
Een schaduw heeft ook een positie. Buiten, de standaard, tilt hij het element op; binnen holt hij het uit. De binnenschaduw bewaren we voor formuliervelden, want een holte nodigt uit om te schrijven. De waarden blijven dezelfde, alleen de positie verandert (external of internal).
Pas je schaduw aan in GoodBarber
Om de schaduwwaarden zelf in te stellen, opent de extensie Advanced edition de JSON, de volledige lijst met instellingen. Daar stel je de schaduw tot op de pixel in. Daarna is het aan jou om van lijst tot lijst dezelfde schaduw aan te houden.
De extensie is gratis en installeer je via het menu ‘Extensiewinkel’, op de pagina ‘Advanced edition’. Je ontwerpschermen krijgen dan rechtsboven de knop { EDITIE }.
- Zet in het ontwerppaneel van je sectie of je widget de schaduw aan met de knop ‘Schaduweffect inschakelen’. Die maakt het object shadow aan.
- Open de JSON met de knop { EDITIE } en klap het object shadow open. De sleutels staan op alfabetische volgorde.
- Begin met de kleur. Klik onder shadow op ‘+ Voeg toe’. Typ in het veld newKey color, laat ‘Waarde’ geselecteerd, vul de hexadecimale code in (hier #7A542E), dan ‘Voeg toe’. Sla op, en de schaduw krijgt de tint en behoudt zijn verschuiving en vervaging.
- Ga over op vrij instellen: voeg op dezelfde manier type toe, met de waarde custom. Zonder die waarde worden de volgende instellingen genegeerd.
- Voeg blur toe, de vervaging in pixels (hier 16), en opacity, de kracht van de kleur, van 0 tot 1 (hier 0.3). Dan offset, de verschuiving, als ‘Object’: voeg er op dezelfde manier x en y aan toe (hier 0 en 8, de schaduw zakt 8 px).
- Sla op, je schaduw staat.
Een valkuil om te kennen: de dekking schrijf je met een punt, 0.3 en niet 0,3. Met een komma valt de waarde terug op de standaardinstelling.
Voor, na: de schaduw neemt jouw kleur aan
In het echt is een schaduw nooit helemaal zwart. Hij neemt de kleur aan van het licht en van het vlak dat hij raakt. Onze standaardschaduw is zwart om een goede reden: hij past bij elk palet, en dat maakt hem veilig vanaf de eerste klik. Een getinte schaduw gaat een stap verder. Op een crèmekleurige achtergrond blijft een bruine schaduw in de toon van de achtergrond.
Hier hetzelfde scherm twee keer. Eén waarde is veranderd, de kleur van de schaduw, van het standaardzwart naar het bruin van het palet (de sleutel color uit stap 3). Dezelfde verschuiving, dezelfde vervaging, dezelfde kracht. Links komen de cellen los van de achtergrond. Rechts lijken ze op de pagina te liggen, en de hele pagina past bij het palet. Voor één sleutel lijkt de app uit één stuk getekend.
Om een instelling te beoordelen, doe je zoals hier. Verander één waarde tegelijk, sla op, en beoordeel in de voorvertoning, met de hele pagina in beeld. Een geslaagde schaduw voel je meer dan je hem ziet.
De schaduw, van de meest discrete tot de meest uitgesproken
Dezelfde cel in dezelfde app kan heel verschillende schaduwen dragen. Op 5 % is de schaduw nauwelijks te zien: hij tilt de cel op en verder niets. Zonder vervaging tekent hij zich scherp af achter de cel, en de app krijgt karakter. De afbeelding toont er vier, van de meest discrete tot de meest uitgesproken, allemaal met type custom behalve de standaard:
| Schaduw | offset | blur | opacity (0 tot 1) | color |
|---|---|---|---|---|
| 1. Nauwelijks zichtbaar | x 0, y 4 | 16 | 0.05 | #000000 |
| 2. Standaard (level2) | x 0, y 3 | 6 | 0.2 | #000000 |
| 3. Hard | x 6, y 6 | 0 | 1 | #282727 |
| 4. Gekleurd | x 0, y 8 | 32 | 0.35 | #B9FF00 |
De standaardrij herinnert alleen aan haar waarden: om die te krijgen hoef je niets in te vullen. De drie andere neem je ongewijzigd over in de editor, sleutel voor sleutel.
Geen van deze schaduwen is beter dan een andere. Elk geeft de app een karakter, en alle stel je in met dezelfde sleutels. De harde schaduw alleen al verandert het karakter van een app, zoals in onze mock-up van een kunstgalerie-app in neobrutalisme op Dribbble, met een verschuiving op beide assen, vervaging nul en een volle kleur.
Mijn favoriete instelling, een schaduw in de kleur van de knop
Onder een gekleurde knop een schaduw in dezelfde kleur. Dat is mijn favoriete instelling: 10 px verschuiving, 24 vervaging, een kracht van 38 %. Hij drukt niet op de knop, hij laat hem stralen, als een gloed, en het oog begrijpt dat dit de actie is die telt. Ik bewaar hem voor één actie per scherm. Als alles straalt, springt er niets meer uit.
De zwevende knop stel je één keer in voor de hele app, onder App-Stijl, met dezelfde knop { EDITIE }, onder floatingButton, dan button, dan shadow, met dezelfde sleutels.
De schaduw in het kort
- Eén klik om hem aan te zetten, ‘Schaduweffect inschakelen’, in het ontwerppaneel van een lijst.
- Drie instellingen, de verschuiving, de vervaging, de kleur en haar kracht.
- Standaard 3 px verschuiving, 6 px vervaging, zwart op 20 %; 6 en 12 px onder de TabBar en de zwevende knop.
- Eén gratis extensie voor fijn instellen, Advanced edition, knop { EDITIE }.
- Eén sleutel om de schaduw te tinten zonder de rest aan te raken, color.
- Twee posities, buiten (reliëf) of binnen (holte, voorbehouden aan formuliervelden).
- Eén valkuil, de dekking schrijf je met een punt, 0.2 en niet 0,2.
Nu jij
De volgende stap is simpel. Open het ontwerppaneel van een van je lijsten en schakel het schaduweffect in. Krijg je zin in een schaduw in jouw kleuren, dan staat de knop { EDITIE } op dezelfde plek, en één sleutel is genoeg om te beginnen.
De pagina van het Shadow-atoom van het GoodBarber Design System geeft de volledige referentie, niveaus en sleutels. Nog geen app? Maak de jouwe met GoodBarber, de Mobile App Builder.
