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. 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.

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

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 kijken of 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). Zonder header is de kop “Zullen we 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. Secties wisselen vanzelf af: de eerste heeft de tekst links en het beeld rechts, de volgende andersom. Je geeft dat niet zelf aan.

• 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 resultaten %}{% include projects-homepage.html zonder_kop=true %}{% endcapture %}
{% include sectie.html breed=true label="Resultaten" kop="Uitgelichte resultaten" tekst="..." beeld=resultaten %}

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.

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.

1 Bij de start van een opdracht Publieke Code Kick-off Bij de start van een opdracht regelen we samen governance, werkplek en afspraken. Vanaf dag één open. Bekijk workshop → 2 Tussentijds Publieke Code Check-up Halverwege kijken we samen of jullie nog op koers liggen. Bijsturen kan nu nog makkelijk. Bekijk workshop → 3 Bij oplevering of overdracht Publieke Code Review Bij oplevering of overdracht leggen we de codebase langs de Standaard. Je weet 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 we bij de start regelen”.

Terugbelformulier

Twee velden: “E-mail of telefoon” (verplicht) en “Extra info” (optioneel). Zonder API opent het een vooraf ingevulde e-mail aan info@. 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. 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 en een link naar alle workshops. Met compact=true vervallen label en kop, zoals op de home direct onder de paginatitel.

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

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" %}

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.

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. 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: vier secties. Workshop-etalage (compact), begeleiding met foto-paneel, en opdrachtgevers en resultaten als brede secties
• Workshops: de workshops als blokken, begeleiding als sectie, stappen en contactblok
• Crazy 8’s-workshop: de sessie-template
• Begeleiding: quote, secties met foto-paneel, resultaten als brede sectie, de aanpak als tekstsecties en secties met foto, en het contactblok
• Mensen: twee secties met foto-paneel en quote, en de mensen als rijen in een brede sectie