Introducing BrandingRepo (for Rails)

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 …

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…

Relative font sizes, or pixel based? 2020-edition

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…

Don't try to be more personal

Your persona's don't include someone who is visually impaired Your persona's are probably all white, or typically young and 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 can be.

See also this thread on persona's

Delay your decisions

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…

Variable fonts

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

Bereik meer met toegankelijkheid: inclusive design

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 CoolBlue eigen…

Be careful with what you ask for

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…

De principes van murb

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…

Notes: How to Hack PR for Your Startup

Just attended a free webinar (replay) from Founder Institute: “How to Hack PR for Your Startup”. Here are some of their (Adeo Ressi (FI) and Conrad Egusa (Publicize.co)) main takeaways:

• Make sure you have a great design, no-one needs to tell you that
• FAMOUS
  1. Formulate the announcement: Make sure you’ve got news when you approach TechCrunch etc;
  2. Amplify your dreams; Let’s go to Mars!
  3. Messaging: the press release; make sure to make it as easy as possible: $20 /article; E-mail pitch (sell), press release is the make it easy to write. Make sure you use social proof, interesting stuff that adds to an interesting tool. Link your LinkedIn, Twitter etc. “Hi I’m Maarten (LinedIn, @murb”.
     1. Make sure you follow up, but don’t spam
     2. Don’t sell!
     3. Own:…

User vs usage friendly

In English usability folks typically talk about user friendliness. Literally translated, user friendly translates in Dutch to "Gebruikersvriendelijk". In Dutch "Gebruikersvriendelijk", however, is used interchangeably with “Gebruiksvriendelijk” (see also: Taaladvies) which translates literally back to “usage friendliness”. Not too fast: these might be two different concepts after all.

  English Dutch User friendly / gebruikersvriendelijk 61,300,000 622,000 Usage friendly / gebruiksvriendelijk 5,930 250,000 Ratio 1 / 10.000 5 / 2

Table: Google’s frequency counts for the different languages

User friendly

User friendly is about being nice to the user. Making something user friendly may be about nice icons, nice words, nice visual design, but you can, strictly speaking, still be very friendly and not allow a user to accomplish a certain task.

…

Lost identity: Facebook's Instant Articles

Admittedly, I was a sceptic from the start when Facebook announced its instant articles with its promise to deliver blazingly fast loading articles. The technology would be ideal for publishers who'd want to deliver the best experience to their end users on Facebook. I wondered: why couldn't publishers simply remove all third party clutter and make their own sites blazingly fast? But that is not what I want to discuss here. The Guardian was one of the first news papers to implement the new Facebook Instant Article technology. The thing that disturbs me is that the blazingly fast speed comes at a price: loss of identity.

In recent years the web has become more and more a place where design can thrive. HTML5, CSS3, web fonts… the possibilities are endless these days. Designs of the web outlets of major publishers are on par with their traditional paper-based designs. Which makes that even details in the article's mark-up …

Save icon 💾

Not so long ago I was back in an organisation that was using Outlook Webmail. It may not have been the latest & greatest but I noticed this server (semi-cloud) based e-mailing app still used a floppy as a save icon. Being a mac user for years it felt weird…

As you can see the icon that the webmail client features is a floppy

I didn't pay much attention to the issue, until my friend lent me his Windows-phone:

This total redesign (Metro-style) of how a phone could work and look still featured a floppy icon(!). And even though I'm not a skeuomorphism-hater, I prefer the simple label "Save" that Apple uses in iOS. The floppy icon on a Windows telephone is completely alien to the device. I guess you've all seen the joke about the 3D printed save icon somewhere?

Still, do a [simple Google image sea…

Semantics before anything else

My first rule in styling websites or applications is to style semantics over anything else.

1. First use as much of the agreed upon tags and properties that the latest HTML spec gives you
2. Extend this with microformats or schema.org-vocabularies and what else you can find that is an (pseudo-)standard for semantic markup
3. Finally, if no matching semantically rich descriptors can be found, try to think of future proof names for your elements that may be reusable. Think "metadata div(vision)”, "(search) result" (you may style result here and add another more specific styling for search results).

Style the semantical markup. Semantics is about meaning, and by defining your content's meaning in html and highlighting this meaning with your style brings you consistency from the start. This is not only nice to you as a maintainer of code, but also to your audience. It leads to consistent, predictable behaviors.

The counter movem…