Design Systems and the source of truth

Some excerpts I created from the transcript of the Design System Podcast, hosted by Chris Strahl, which in Episode 11 featured Brad Frost and Evan Lovely.

Hand-over of comps

The traditional process starts with the design of comps, comps, non-interactive previews, which are generated by the design team and undergo a rigid design review process up to a design director or VP, and is only then passed on to the developers who need to implement that initially static comp pixel perfect. But Evan Lovely notes that while there is nothing wrong with comps, there is something wrong with mistaking it for the final product. That’s why he likes tools like pattern lab, storybook or knapsack, because they really allow someone to quickly mock up a comp that actually works within the final environment.

To some companies this is a problem; because the formal approva…

Highlights from the Atomic Design book by Brad Frost

Since his talk at Fronteers I was interested in the thinking of Brad Frost, his blog posts, etc., but never actually read his book Atomic design until recently, as it got more and more relevant to an internal discussion at an organization I was working for. A few notes:

• Most importantly, what it is not: Atomic Design is not about being a practical guide for implementing design systems (although it has some examples in Pattern Lab, which was originally built by him). I was also hoping it would also give guidance on naming things / structuring CSS when building atomic design based design systems, but it does not. But don’t mind, plenty of good content(!)
• Atomic design sounds like an too obvious idea and while I didn’t dismiss it because of that, I realized I also didn’t try to understand it thoroughly enough. Reading the book helped me to better understand it and especially thinking about the intermediate forms (molecules) was actually despite its o…

De eerste vier zaken op een (macOS) ontwikkelmachine voor beginners

1. Update eerst naar de laatste versie van ’t OS, Mojave. Je kunt deze gratis downloaden in de App store, zie upgrade instructies voor Mojave.
2. Installeer homebrew … macOS Terminal (zeg maar de Command Prompt van de Mac) vind je door Cmd+Spatie in te drukken en vervolgens "Terminal" te zoeken (meestal vind je die al na de eerste paar letters). Vervolgens de regel invoeren (kopiëren & plakken) die de website vermeld. Soms moet je extra dingen installeren; het script zal je daar doorheen leiden. Overigens, dat commando, Cmd+Spatie, opent wat Spotlight heet, ik vind dat de gemakkelijkste manier om programma’s te starten.
3. Install Docker for mac (je hebt hier tegenwoordig helaas een account bij DockerHub voor nodig). Dit download een DiskImage, sleep het programma naar de programma’s map (zoals het image waarschijnlijk ook al aangeeft in de achterg…

Context vinden

Een klein informatiebordje is gemakkelijk bij een object te plaatsen om meer informatie te bieden, maar hoe kun je een informatiebordje verrijken met nog meer informatie die een gebruiker gemakkelijk tot zich kan nemen? Hiervoor zijn verschillende technieken beschikbaar zoals Beacons, QR-codes, Afbeeldingsherkenning, (nummer)codes beschikbaar. Maar wat zijn de voor- en nadelen?

Bluetooth Beacons

De Bluetooth Beacon technologie lijkt op papier de mooiste manier om locatie-gebaseerde informatie door te geven. Sta je op een meter afstand van een werk dan kan een telefoon gesignaleerd worden om een melding te presenteren wanneer je een daarvoor speciaal ontwikkelde app hebt geïnstalleerd. Beacons worden in de cultuursector gebruikt door o.a. het Groninger museum (zowel op iOS als Android). Het nadeel van Beacons is dat deze (nog steeds) relatief duur zijn (~€20 per stuk voor zelfstandig opererende beacons) en …