Design system

Design system

Alle bouwstenen van deze site, opgebouwd volgens atomic design: atomen, moleculen, organismen, templates en pagina’s. Wat hier staat, is de echte component, met de aanroep die je in een pagina gebruikt.

Atomen

De kleinste onderdelen: kleur, letter, link en label.

Kleuren

Rood en zwart dragen de site. Blauw komt terug in het logo, de footer en de titels van het contactblok.

Letters

Koppen

Elke pagina heeft één h1: de paginatitel uit de front matter. Die is smal gezet (zo’n twintig tekens per regel), zodat hij op een regel of drie valt. Daaronder werk je met h2 en h3.

Links en knoppen

<a href="/begeleiding/" class="button" style="display: block; width: 100%; text-align: right">Meer over begeleiding</a>

Label

Een klein rood label boven een grote kop, om een sectie aan te duiden. Hetzelfde label staat boven elke paginatitel: “Tiltshift” op de home, de naam uit het menu op de hoofdpagina’s (“Sessies”, “Begeleiding”), en een vaste naam per soort pagina (“Sessie”, “Resultaat”, “Post”, “Materiaal”, “Opdrachtgever”). Overschrijven kan met label: in de front matter.

Moleculen

Een paar atomen samen, met één taak.

Quote

“Als het makkelijk was, dan kon je het zelf wel.”

Pierre Groenen, timmerman (en vader van Johan)

> "Als het makkelijk was, dan kon je het zelf wel."
>
> <small>Pierre Groenen, timmerman (en vader van Johan)</small>

Beeld

Een foto die breder is dan de tekstkolom (1024 pixels). Alle beschikbare foto’s, met beschrijving, staan in de image library. Foto’s zijn zwart-wit met hoog contrast en korrel.

<div class="article-image">
    <img src="/assets/img/foto/..." alt="">
</div>

Resultaatblok

Digitaal Indelen Straatmarkten

De marktverordening digitaal toegepast zodat ondernemers transparant hun plaats op de Amsterdamse markt krijgen.

Een resultaat: de foto van het project (image, niet featured_image) in grijstinten met extra contrast, de titel wit over een donker verloop en de korte omschrijving eronder. Bij hover zoomt de foto iets in.

{% include image-link-block.html image=project.image title=project.title excerpt=project.excerpt url=project.url %}

Organismen

Zelfstandige blokken die je los op een pagina zet.

Foto-paneel (valprop)

Het kenmerkende blok van de site: foto, gekanteld rood vlak, witte tekst en een zwarte knop. Zonder url en button linkt de knop naar /contact/.

{% include valprop.html title="..." description="..." image="/assets/img/foto/…" url="/begeleiding/" button="Meer over begeleiding" %}

Workshopkaart

Een foto-paneel gevuld met de gegevens van een workshop: titel, uitkomst, duur en prijs. Staat er “Vraag om offerte”, dan blijft de prijs weg.

{% include sessie-kaart.html sessie=sessie %}

Waardepropositie

Naar het landingspagina-template van Strategyzer: pijn en winst naast elkaar. Links “Herken je dit?” (de pijn van de klant), rechts “Wat het oplevert” (de winst). Het product zelf staat in de sectie erna, “Wat we gaan doen”. De bullets maken het verschil zichtbaar: een rood vierkantje bij de problemen, het onderbroken blauwe frame uit het logo bij wat het oplevert. Het vierkantje staat recht, het frame in dezelfde hoek als in het logo. Het frame staat los in assets/img/frame-blauw.svg, en dikker voor kleine maten in frame-blauw-bullet.svg. Op een workshoppagina staat dit direct na de opdrachtgevers; de lijsten komen uit herkenning: en meenemen:, de tekst uit aanpak_intro:.

{% include propositie.html pijn=page.herkenning winst=page.meenemen %}

Herken je dit?

Drie herkenbare situaties op een lichtgrijs, schuin gesneden vlak: een gekanteld rood blokje, een grote zwarte uitspraak en een korte toelichting. Bewust niet zwart, want een zwarte band leest als de footer. Op een workshoppagina komen de items uit herkenning: in de front matter. Met label geef je de band een eigen label, en met kolommen=2 staan de items twee bij twee, zoals bij “Hoe we werken” op Over ons. De tekst van een item mag markdown zijn, met meer alinea’s.

{% include herkenning.html items=page.herkenning %}

Twee bij twee, met een eigen label (op Over ons):

{% include herkenning.html label="Hoe we werken" items=page.hoe_we_werken kolommen=2 %}

Stappen

1. 1

   Kies een workshop

   Elke workshop beantwoordt één vraag en levert één concreet resultaat op.

2. 2

   Korte intake

   We scherpen samen de vraag aan en zorgen dat de workshop past. Daarna krijg je een vrijblijvende offerte.

3. 3

   De workshop

   Met je team, bij jou op kantoor of op een locatie die wij regelen. Je gaat naar huis met iets waar je verder mee kunt.

Genummerde stappen. De stappen staan in de front matter van de pagina. Met start=0 begint de telling bij 0.

{% include stappen.html items=page.stappen %}

Stappen, kort

Genummerde stappen met alleen een titel en één korte regel (kort: per stap). Op een workshoppagina staan ze als “Wat we gaan doen” in een sectie met een foto (aanpak_beeld:).

{% capture stappen %}{% include stappen-kort.html items=page.stappen start=0 %}{% endcapture %}
{% include sectie.html label="Aanpak" kop="Wat we gaan doen" inhoud=stappen beeld=beeld %}

Praktisch

{% include praktisch.html duur=page.duur deelnemers=page.deelnemers locatie=page.locatie investering=page.investering %}

Contactblok

In dezelfde beeldtaal als de mensenrijen: portret met het gekantelde rode vlak, een rood label en een grote kop, de naam als zwarte strook half over de foto, en het telefoonnummer groot. Het portret en de naam horen bij wie het nummer opneemt (zie het adresboek). Het e-mailadres is altijd het persoonlijke adres van die persoon, nooit info@ of administratie@: die staan alleen op /contact/ en in de footer. Zonder header is de kop “Even bellen?”.

Contact

Wat kunnen we voor jouw organisatie betekenen?

Tijdens een vrijblijvend intake- en adviesgesprek bespreken we jouw situatie en hoe we daarbij kunnen helpen.

Johan Groenen

+31 (0)20 722 02 07 johan.groenen@tiltshift.nl

De foto is het portret uit _data/mensen.yml (veld portret). Het veld img is het kleine plaatje voor de e-mailhandtekening; dat gebruikt het contactblok alleen als er geen portret is. Er staat altijd een foto in het contactblok: zonder portret en zonder img valt het terug op een standaardfoto.

{% include cta.html header="..." description="..." persoon="johan" %}

Sectie

Een losstaand blok op een pagina: label, kop, tekst en link, met een beeld ernaast. Met knop=true wordt de link een zwarte knop, voor de belangrijkste actie. De tekst kan uit meer alinea’s bestaan: maak hem dan met capture en zet elke alinea op een eigen regel, zoals bij “In-house teams” op /begeleiding/. Secties wisselen vanzelf af: de eerste heeft de tekst links en het beeld rechts, de volgende andersom. Je geeft dat niet zelf aan. Past een lang woord in de kop niet in de tekstkolom (zoals “uitvoeringsdomeinen”), zet er dan zelf een ­ in: uitvoerings­domeinen. De browser breekt het woord dan alleen daar af, en alleen als het nodig is.

• Vanaf 1280 pixels: twee kolommen. De tekst staat op de inhoudskolom, het beeld loopt door tot de schermrand en het rode vlak steekt uit naar de schermrand. Tekst en beeld lijnen boven uit, met veel ruimte boven de sectie.
• Tussen 768 en 1280 pixels: onder elkaar, het beeld schermbreed in 3:2.
• Het beeld is meestal een foto-paneel. Zonder title toont de valprop alleen de foto met het rode vlak, zodat de tekst niet dubbel staat: {% include valprop.html image="..." alt="..." %}.
• Mobiel: onder elkaar, het beeld schermvullend.

{% capture beeld %}{% include valprop.html ... %}{% endcapture %}
{% include sectie.html label="Begeleiding" kop="..." tekst="..." link="/begeleiding/" linktekst="Meer over begeleiding" beeld=beeld %}

Tekstsectie. Zonder beeld maar met inhoud (markdown, via capture) staan label en kop links en de inhoud rechts. De kop blijft altijd links en schuift mee tijdens het scrollen. In inhoud werken alinea’s, lijsten en quotes gewoon. inhoud werkt ook in een sectie met beeld, in plaats van tekst.

{% capture inhoud %}
Alinea's, lijsten en quotes in markdown.
{% endcapture %}
{% include sectie.html label="Onze aanpak" kop="Durven doen" inhoud=inhoud %}

Met breed=true staat het beeld niet naast de tekst maar eronder, over de volle breedte. Het tekstblok verspringt dan links en rechts. Zo staan opdrachtgevers en resultaten op de home.

{% capture opdrachtgevers %}{% include klanten-uitgelicht.html %}{% include logos-relaties.html %}{% endcapture %}
{% include sectie.html breed=true label="Opdrachtgevers" kop="Voor wie we werken" tekst="..." beeld=opdrachtgevers %}

Blokken

Eén groot blok met twee kleine blokken ernaast, boven elkaar. Bijvoorbeeld een uitgelichte workshop met twee andere workshops. Het grote blok heeft het gekantelde rode vlak, de kleine blokken niet. Met blokken--gespiegeld staat het grote blok rechts. Op mobiel staan de blokken onder elkaar en worden ze zo hoog als de tekst nodig heeft.

Crazy 8's-workshop Je team schetst ideeën en werkt de beste samen uit. Aan het eind ligt er een concept waar iedereen achter staat. Bekijk workshop → Empathy map-workshop Interviews samenvatten in wat gebruikers denken, voelen, zien en doen. Bekijk workshop → Design sprint Van probleem naar getoetst prototype. Bekijk workshop →

Groot blok rechts Dezelfde blokken, gespiegeld. Link → Klein blok Link → Klein blok Link →

<div class="blokken container-md">
    {% include blok.html titel="..." tekst="..." afbeelding="/assets/img/..." url="..." linktekst="Bekijk workshop" %}
    {% include blok.html ... %}
    {% include blok.html ... %}
</div>

Boekbalk

Een balk die onderin beeld vast blijft staan op de workshoppagina’s: links de naam, duur en prijs van de workshop, rechts de knop “Boek deze workshop” naar /boeken/?workshop=…. Op mobiel alleen de naam en de knop. Omdat hij vast staat, is hij hier niet als voorbeeld getoond.

{% include boek-balk.html titel=page.title tekst="Eén dag · Vraag om offerte" link="/boeken/?workshop=crazy-8s" %}

Reeks

Workshops die bij elkaar horen langs de looptijd van een opdracht, zoals de drie publieke-codeworkshops. Ze staan als blokken in leesvolgorde: stap 1 en 2 klein links, stap 3 groot rechts (blokken--groot-laatst), met een rood stapnummer en het moment boven de titel. Op een workshoppagina van de reeks staat bij de huidige stap “Je bent hier”. Een workshop hoort bij een reeks met reeks:, reeks_stap: en reeks_moment: in de front matter. Op /workshops/ krijgt een reeks een eigen sectie. Label, kop en tekst van de reeks staan in _data/reeksen.yml.

1 Bij de start van een project Publieke Code Kick-off Na de kick-off zijn governance, werkplek en afspraken helder en vastgelegd. Zo werk je vanaf dag één open. Bekijk workshop → 2 Tussentijds Publieke Code Check-up Is het project nog op koers, of kan het beter? Bijsturen kan nu nog makkelijk, in één dag. Bekijk workshop → 3 Bij oplevering of overdracht Publieke Code Review Bij oplevering of overdracht organiseren we een onafhankelijke beoordeling van de codebase langs de Standaard. Zo weet je wat er nog moet gebeuren. Bekijk workshop →

{% include reeks.html reeks=page.reeks huidig=page.url %}

Checklist

Een lijst met lege vinkvakjes, voor wat er geregeld moet worden. Op een workshoppagina uit checklist: in de front matter, als tekstsectie “Wat je bij de start regelt”.

Terugbelformulier

Twee velden: “E-mail of telefoon” (verplicht) en “Extra info” (optioneel). Zonder API opent het een vooraf ingevulde e-mail aan het adres bij mail in _data/terugbellen.yml (joris.boeren@, die de workshops doet). Staat er een adres bij endpoint in _data/terugbellen.yml, dan stuurt het een POST met JSON naar de eigen mini-API (contact, info, pagina, url). Mislukt dat, dan valt het terug op e-mail. Een verborgen veld website vangt spambots af. Het formulier staat in het contactblok met formulier=true. Op de pagina /boeken/ staat het met een keuzelijst van workshops (kies=true); met ?workshop=crazy-8s in de URL is de juiste workshop al gekozen. Met ?workshop=weet-ik-nog-niet staat “Weet ik nog niet” gekozen; zo linkt de knop “Neem contact op” op /workshops/. De workshoppagina’s linken daarheen met hun knop “Boek deze workshop”. Naam, telefoon en e-mail staan dan onder de foto.

Johan Groenen

+31 (0)20 722 02 07 johan.groenen@tiltshift.nl

Contact

Zullen we je terugbellen?

Tijdens een vrijblijvend intake- en adviesgesprek bespreken we jouw situatie en hoe we daarbij kunnen helpen.

E-mail of telefoon Extra info (optioneel) Website

Bel mij terug →

{% include cta.html header="..." description="..." formulier=true onderwerp=page.title %}

Workshop-etalage

Een sectie met de uitgelichte workshops (featured: true) als beeld, met daaronder een link naar alle workshops. Kop en tekst komen standaard uit title: en intro: van /workshops/ (pages/workshops.md); pas ze per plek aan met label, title en intro.

{% include sessies-etalage.html intro="..." %}

Begeleiding-sectie

Een sectie die naar /begeleiding/ verwijst. Kop en tekst komen uit teaser: in pages/begeleiding.md, zodat ze op home en /workshops/ gelijk blijven. Met vraag zet je een vraag voor de kop. Met kop_voor sluit de kop aan op wat erboven staat: met kop_voor="Of" wordt het “Of we lopen mee tot het werkt.”, zoals op /workshops/ onder de workshops. Met tekst_voor zet je iets voor de tekst. Met beeld geef je een eigen beeld mee in plaats van de foto met link.

{% include begeleiding-sectie.html kop_voor="Of" tekst_voor="Meer nodig dan een workshop?" %}

Resultaten

Resultaten

Van verouderde IT naar innovatieve digitale woningcorporatie

Met één heldere visie en de opbouw van een wendbare, slagvaardige organisatie is Woonstad Rotterdam klaar voor de toekomst.

Digitaal Indelen Straatmarkten

De marktverordening digitaal toegepast zodat ondernemers transparant hun plaats op de Amsterdamse markt krijgen.

Geen stadspas, maar eenvoudige regelingen

Niet blindstaren op techniek, maar het doel weer voorop. Over een stadspas die geen stadspas werd.

alle resultaten

Drie resultaten naast elkaar. Met slugs kies je welke, zonder slugs toont het blok de resultaten met featured: true.

{% include projects-homepage.html title="Resultaten van begeleiding" slugs="slug-1,slug-2,slug-3" %}

Resultaten-sectie

Resultaten

Onze succesverhalen

Voorbeelden van waarom je Tiltshift erbij haalt.

Alle resultaten →

Van verouderde IT naar innovatieve digitale woningcorporatie

Met één heldere visie en de opbouw van een wendbare, slagvaardige organisatie is Woonstad Rotterdam klaar voor de toekomst.

Product management RUIS - Politie Amsterdam

Hoe ontwerpend onderzoek zorgt voor een gedragen visie op datauitwisseling tussen gemeente en politie.

Digitaal Indelen Straatmarkten

De marktverordening digitaal toegepast zodat ondernemers transparant hun plaats op de Amsterdamse markt krijgen.

De resultaten als brede sectie met een link naar alle resultaten, zoals op home, /begeleiding/ en de pagina’s van mensen. Kop en tekst komen uit teaser: in pages/projecten.md, zodat ze overal gelijk blijven. Met slugs kies je de resultaten, met kop en tekst wijk je af (op een persoonspagina: “… in actie” met de voornaam, zonder tekst).

{% include resultaten-sectie.html slugs="slug-1,slug-2,slug-3" %}

Opdrachtgevers

Voor de gemeente Zwolle werken we aan eenvoudige regelingen voor inwoners en een zorgvuldige omgang met gegevens.

Voor BIJ12 hebben we het programma Verbetering VHR Monitoring opgezet en ingericht.

Voor het ministerie van BZK werken we op veel fronten aan een open, transparante en weerbare overheid.

Common Ground

{% include klanten-uitgelicht.html %}
{% include logos-relaties.html %}

Mensen

Per persoon een groot portret met het gekantelde rode vlak, de naam groot ernaast en half over de foto, op witte stroken. Daaronder rol, eigen quote en een link naar de mensenpagina. De rijen wisselen om en om van links naar rechts. Op mobiel staat de naam over de onderkant van de foto. De gegevens komen van de mensenpagina’s in _mensen/: firstname, lastname, role, quote en personImage.

• 

  Partner

  Joris
  Boeren

  "Als je 100% kunt voorspellen hoe iets loopt,
  heb je mij niet nodig."

  Meer over Joris →
• 

  Consultant

  Sven
  Ritmeester

  "Bizar toch? Waarom volgt de uitvoerder een training voor de techniek. De techniek zou de uitvoerder moeten volgen."

  Meer over Sven →
• 

  Partner

  Johan
  Groenen

  "Een idee kan nog zo mooi klinken: the proof of the pudding is in the eating."

  Meer over Johan →
• 

  Partner

  Maarten
  Geraets

  "Er is maar één manier waarop het kan slagen: er helemaal voor gaan. Anders kun je er beter niet aan beginnen."

  Meer over Maarten →
• 

  Consultant

  Rutger
  Dik

  "Als je de richting van de wind niet kunt veranderen, verander dan de stand van je zeilen."

  Meer over Rutger →

{% include mensen-rijen.html %}
{% include mensen-rijen.html zonder=page.url %}

Met zonder laat je één persoon weg, zoals op een mensenpagina, waar onderaan de collega’s staan. Eén rij los, als opening van een mensenpagina: de naam wordt dan de h1 en in plaats van de link staan de contactgegevens (telefoon, e-mail, LinkedIn en vCard).

• 

  Consultant

  Rutger
  Dik

  "Als je de richting van de wind niet kunt veranderen, verander dan de stand van je zeilen."

  Telefoon

  +31 (0)6 28 13 18 89

  E-mail

  rutger.dik@tiltshift.nl

  LinkedIn

  linkedin.com/in/rutgerdik/

  vCard

  Downloaden

<ul class="mensen-rijen">
    {% include mensen-rij.html persoon=page hoofd=true %}
</ul>

Navigatie en footer

De navigatie boven en de footer onder deze pagina. Ze zitten in elke template en zet je niet zelf op een pagina. Vanaf 1280 pixels staat het logo onder de zwarte balk, links naast de inhoudskolom, en groeit het mee met de vrije ruimte daar (tot 180 pixels). De LinkedIn- en Mastodon-knoppen staan altijd naast de menu-items, en op mobiel in het uitklapmenu onder de menu-items (_includes/social-links.html).

Templates

Het skelet van een pagina. Er zijn er twee, en ze delen dezelfde basis.

• default: navigatie, de paginatitel als h1, de inhoud in de tekstkolom van 720 pixels, een contactblok onderaan en de footer. Het contactblok vervalt als de pagina er zelf al een heeft, of met contactblok: false in de front matter. Met contactpersoon: joris kies je wie erin staat. Met intro: komt er een korte inleiding onder de paginatitel. Beelden en rasters mogen breder (1024 pixels). Gebruikt door bijna alle pagina’s.
• person: een mensenpagina. Bovenaan de persoon als rij met contactgegevens, dan de eigen tekst en de projecten als tekstsecties, en onderaan de collega’s als rijen en het contactblok.
• sessie: de default-template met een vaste volgorde van workshop-onderdelen, naar het Strategyzer-template: waardepropositie met boekknop als sectie met foto-paneel, opdrachtgevers, pijn/product/winst, dan de details: herkenning, stappen, wat je meeneemt, voor wie, praktisch, andere sessies en het contactblok. De inhoud komt uit de front matter van het sessiebestand.

Pagina’s

De templates gevuld met echte inhoud.

• Home: een inleiding onder de titel en vier secties. Workshop-etalage, begeleiding met foto-paneel, en resultaten en opdrachtgevers als brede secties
• Workshops: de workshops als blokken, begeleiding als sectie, stappen en contactblok
• Crazy 8’s-workshop: de sessie-template
• Begeleiding: quote, drie secties met foto-paneel, resultaten als brede sectie en het contactblok
• Over ons: een sectie met foto-paneel en quote, de mensen als rijen in een brede sectie, een sectie met foto (“Voelbaar anders”), hoe we werken als grijze band met vier punten twee bij twee, en drie secties met foto over software design thinking