Tag descriptor

murb “design system”

An article, posted 2 months ago filed in murb, design system, design, html & css.

While working on this website and some others of mine, I’ve been steering towards a single source of truth for design. One might call it a design system, but it is really light weight. This website is a demo, but more can be found here on this automatically published resource.

It is work in progress.

The code can be found on Gitlab.

To get started, just link to this url with all css:

```

```

Or… when using rails, include this gem: murb_design_system

Not including anything rails / ruby specific, when introducing components, these might very well be web-components. We’ll see.

Continue reading...

Book notes: Coderspeak by Guilherme Orlandini Heurich

An article, posted 2 months ago filed in development, background, design, ruby, book, book notes, review & summary.

Highlights / summaries that I made while reading Coderspeak by Guilherme Orlandini Heurich

On Community

When they contribute to open-source projects, they often say they want to ‘give back to the community’, (…which…) comes from the connection between the programmers who wrote it and the program they created.

Heurich cites Marcel MaussThe Gift:

What imposes obligation in the present received and exchanged is the fact that the thing received is not inactive. (…) It is something attached to me, the giver, and it will be permanently attached to me, even if you pass my gift along.

That is why, Heurich concludes, it is not the companies who contribute graciously, instead, but the individual developers who reciprocate. And not for the prestige (as Eric S. Raymond tends to think of it), but for a feeling of belonging to a…

Continue reading...

Book notes: Thinking in systems

An article, posted 6 months ago filed in ThinkingInSystems, design, society, change, book, book notes, review & summary.

These are notes I made while reading Thinking in Systems: A Primer by Donella H. Meadows. It is a book on Systems Design, or perhaps better, understanding systems. These systems can be software, drinking water systems, political systems, or the world climate “system”

On resilience

Resilience is not the same thing as being static or constant over time. Resilient systems can be very dynamic. Short-term oscillations, or periodic outbreaks, or long cycles of succession, climax, and collapse may in fact be the normal condition, which resilience acts to restore!

System traps

Sometimes systems fail to work, Meadows refers to these as ‘traps’ and identifies a list of common traps, and how to escape from these. It is good to reference the book in case you encounter such traps.

One of the trap mentioned is success to the successful, which may kill compe…

Continue reading...

De Amsterdamse visie op AI

An article, posted 9 months ago filed in amsterdam, gemeente, ai, innovatie, llm, ux, design, klimaat, public & technologie.

Vorig jaar november publiceerde Directie Digitalisering en Innovatie van Amsterdam de Amsterdamse visie op AI. Hier een korte samenvatting, want het is een wat tekstig document (zou er AI gebruikt zijn om het te schrijven? :o), met hier en daar wat korte kanttekeningen. In cursief kantekeningen van mijn hand, rest is een ‘objectieve’ samenvatting.

Vraagstukken

De eerste pagina’s zijn vooral introductie, vanaf pagina 9 komen er wat ideeën voor toepassingen:

  • Ontsluiten van oude archieven (ik neem aan voor toevoegen context? Of is handschriftherkenning al AI?)
  • Detecteren zware objecten op kademuren (?)
  • Preventief onderhoud aan op basis van modellen

Er wordt geschreven dat logisch redeneren en kansberekening is waar AI systemen goed in zijn, maar dat is niet volledige intelligentie, het kent b.v. geen ervaringen en emoties. AI zal dus niet de mens volledig vervangen.

Des te complexer echter de…

Continue reading...

Introducing BrandingRepo (for Rails)

An article, posted more than 4 years ago filed in BrandingRepo, ruby, rails, gem, mit, open source, Git, design & clients.

Ever had the problem that you reuse the same project for a managemable number of clients? Too few to store branding materials in a database, but more than one making it hard to keep separate branches in sync?

Introducing BrandingRepo (for Rails)

The idea is simple: create a configuration file with those files that are specific to different brands/customers and store their mods in a different repository. Repository is quite a big word here: we simply create a config/brands folder in your current branch where you can push and pull your brand specific adjustments from. All managed in the same git repository.

What it is not:

  • it is not git within git.
  • it is not a design system, nor has it anything to do with it (I think perhaps with a few additional hacks it can be made to work with centrally managed gems/node-modules; like here: https://twitter.com/hopsoft/status/1451358882161332225?s=10)
  • it is not adding brand icons to your project

Installation

Add this …

Continue reading...

Design Systems and the source of truth

An article, posted almost 5 years ago filed in atomic design, design, design system, system, css, html, components, @bradfrost, collaboration & work.

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…

Continue reading...

Highlights from the Atomic Design book by Brad Frost

An article, posted more than 5 years ago filed in atomic design, design, design system, system, css, html, react, components, @bradfrost, organization, collaboration & work.

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…

Continue reading...

Hoe lang mag techniek ons nog in de weg zitten?

An article, posted more than 5 years ago filed in usability, ux, web, application, software, design, gebruiksvriendelijkheid, product, ontwerp, werknemers, erp, visie & waarom.

Hoe lang kunnen mensen nog gedwongen worden om gebruik te maken van slechte producten? Hoe lang mag techniek ons nog in de weg zitten? Hoe lang nog moeten werknemers gedwongen worden om gebruik te maken van software waar ze liever niet mee zouden werken.

Dankzij techniek is er zoveel veranderd in het leven van mensen. Natuurlijk is er veel te danken, in positieve zin, aan techniek. We kunnen sneller communiceren, gegevens uitwisselen, documenten doorzoeken. Maar voor veel werknemers is dit enkel theorie, want zij moeten dagelijks nog werken met apparaten die onlogisch werken, ongemakkelijk werken, frustrerend zijn, instabiel zijn. Zelfs vandaag de dag nog zijn er bedrijven die het durven ‘oplossingen’ te leveren die het werk moeilijker maken voor grote groepen mensen.

Waarom? Waarom wordt er bij de introductie van nog zo veel software geen rekening gehouden met alle betrokkenen? Waarom hoor ik dagelijks nog mensen klagen over falende kassa’s, irritante e-mail systemen, zeer be…

Continue reading...

Relative font sizes, or pixel based? 2020-edition

An article, posted about 6 years ago filed in px, font, usability, accessibility, user, sketch, css & design.

Occasionally I still have discussions about px-based font sizing, feeling like the other party has lived under a rock since early 2000’s. But some designers still like their pixel based tools; maybe it even got popularised again by relatively new tools like Sketch and Figma, introducing pixel-units in a vector-based tool.

Well, to be honest, it matters less these days when compared to the days I learned that pixels are bad. Those days browsers were enlarging only text when it used relative sizes. In response to not all sites serving relative font siz browsers have introduced full page zoom functions, which is common place these days, when you press Command/Control plus ‘+’ everything will scale; text images etc.

But the text-size function is still used. In Firefox, Settings > General > Language and appearance sets the default font-size. In Chrome: Settings > Appearance > Lettersize. When you’re young and able you probably wouldn’t need to know about these things. But we shoul…

Continue reading...

Don't try to be more personal

An article, posted about 7 years ago filed in persona, user experience, ux, persona's, design, ui, white, succes & experience.

The persona’s you’re working with probably don’t include someone who is visually impaired. Your persona’s are probably all white, young and/or dynamic. None of your persona’s went through a tragic event recently.

Be careful when creating emotional experiences for the lucky ones. You shouldn’t congratulate everyone with another great year, and/or a better year to come.

Don’t try to be more personal than you (or your system) can be.

See also this thread on persona’s

Continue reading...

Delay your decisions

An article, posted more than 7 years ago filed in agile, design, project, keycloak, json, editor, visualisation, visual & graphing.

I design very little upfront. Sometimes I need to make an estimation, I design a little more. Sometimes the project is hardly specced and there is a lot of exploring to do.

In this post I would like to give a demonstration of how a recent project developed.

Initial stage

Client: “We want a fancier frontend for our data”.
Me: “Sure, any limitations?”
Client: “We give you 4 months”
Me: “Can I use any tech I want?”
Client: “Na, we want to be able to continue on what you’re going to create, so please use P, X, Y and/or Z.”
Me: “Sure, P is not my favourite, but some time ago I’ve dealt with it, so ok, we keep it simple anyway.”

The plan that followed:

Initially I thought I could fancy up the CSS, but the old product was in a very bad state and not really maintainable. So I decided to create a thin API layer in P (yes of PHP), a modern front-end layer in JavaScript using a framework that I co-introduced in the organisation a few years ago (R…

Continue reading...

Variable fonts

An article, posted almost 8 years ago filed in google, fonts, typekit, adobe, chrome, Firefox, Safari, web & design.

Last decade the web has been catching up with print. The advent of better delivery formats for type (WOFF(2)) and the rise of services such as Typekit and Google Fonts made the web for typography as interesting as print. But now a new specification is gaining popularity, and it may make the web more interesting than print: variable fonts.

Some background: In word processors you can typically choose between a few basic type variants Bold, Italic and Bold Italic. Some types appear with a ‘Black’ or ‘Light’ version in the font list. More professional products for graphic professionals (think Illustrator, Indesign, QuarkXpress), paired with a complete font-family, are, however able set type using ‘font-weight’. While CSS has a font-weight-property, offering ‘variable’ weights (typically rounded to the nearest 100) to a web page would make that page load much slower. …

Continue reading...

Bereik meer met toegankelijkheid: inclusive design

An article, posted more than 8 years ago filed in toegankelijkheid, accessibility, mensenrechten, inclusive design, design, web & aria.

Meer mensen bereiken, waarom dan niet alle mensen? Een paar weken geleden volgde ik een cursus van Peter van Grieken van Frozen Rockets. Hij wees ons er op dat 300.000 mensen in Nederland slechtziend of volledig blind zijn. Daarnaast zijn er bijna 700.000 mensen die kleurenblind zijn en dan hebben we 825.000 dyslectici en 1,5 miljoen laaggeletterden nog niet geteld. Doe je veel met video of geluid dan is het belangrijk om te weten dat er ook nog eens 1,3 miljoen mensen slechthorend of doof zijn. En dat naast 1,5 miljoen lichamelijk beperkten. Dat zijn 4 miljoen mensen met enige vorm van beperking (bron).

Screenshot van het project “Wayfinding for the blind”, een onderzoek dat ik tijdens mijn studie (2006) mede had opgezet op de TU/e.

Het was schokkend om te zien dat zelfs grote sites als die van…

Continue reading...

Be careful with what you ask for

An article, posted more than 9 years ago filed in pruning, kiss, form, design, conversion, sex, lgbt, user, ux & interaction design.

Since we all seem to know that every other field in the registration form is another percentage of users failing to register*, we think of alternative ways to gather information. We gamify the user profile completeness by adding a progress bar to our user account, we present a full form after the confirmation link or we ask questions while using the application.

But there is another reason why we might not even ask all the questions. Ask the wrong questions and you may alienate your user.

It can be relatively minor things like picking your favourite colour, where the form just lets you pick one colour, while many have multiple. But it may also be more personal (or one could argue, more political): not everyone defines oneself as male or female, so why only present just these options (and do know that it isn’t particularly nice being referred to as ‘the other’ all of the time).

These issues are well discussed in this [talk by Ca…

Continue reading...

De principes van murb

An article, posted more than 9 years ago filed in simpel, it, complexiteit, eindgebruiker, design, ux, ui, murb, agile, gebruiksvriendelijk, scrum, opensource, open source, modules, prijzen, kosten & agile manifesto.

Toelichting: Niet iedereen maakt applicaties op dezelfde manier. In de loop der jaren heb ik wat principes ontwikkeld waaraan ik mij probeer te houden wanneer ik oplossingen realiseer. Het zijn handvatten waaraan ik mijzelf probeer te houden. Ik hoop ook dat opdrachtgevers mij hieraan helpen herinneren mocht het, vergeef me, toch nodig zijn. Vandaar deze openbare declaratie.

Simpel

Ook het idee dat zaken veelal onnodig complex gemaakt worden? Het komt maar al te vaak voor dat IT-bedrijven oplossingen willen bouwen die geschikt zijn voor alles. Maar dat heeft een prijs: complexiteit. De software van murb is eenvoudig in het gebruik en ook nog eens goedkoper aan te passen aan jouw wensen.

De eindgebruiker staat centraal

Heb je het gevoel dat de gebruiker wordt vergeten bij lange lijsten met features? Er wordt door murb in de eerste plaats gewerkt aan gebruiksvriendelijke oplossingen. Met een duidelijke mens-machine-interactie en interactieontwerp achtergrond st…

Continue reading...