VRT NWS – on type

August 24, 2017

The rebranded “De Redactie” – now called VRT NWS — was launched a few days ago.

What stood out to me the first time I visited the site was the choice of type. To me, it seemed the tracking was off. Things seemed to be extremely tight.

Some reading on Twitter and I learned that the used font is called Forma DJR.

On Forma’s website, the makers state:

One of Forma’s most distinguishing features is its letter spacing, or rather its total lack thereof. Following the razor-thin sidebearings of the metal original, Forma is spaced in true late-60s/early-70s fashion, favoring “tight but not touching” letterforms over evenly balanced white shapes.

The tight-but-not-touching technique is extremely sensitive to size: what looks perfect at 100pt is virtually illegible at 10pt. To account for this, each of Forma DJR’s five weights also comes in five optical sizes, ranging from Banner (for 72pt and above) to Micro (for 8pt and below). Within each size range, the spacing of each variant is tuned to walk that fine line between retro and ridiculous.

The 5 optical sizes are Micro, Text, Deck, Display and Banner. On the VRT NWS site, the headings seem to be using “Display”, and the regular body text seems to be using “Text”.

In my opinion, this is not a great type choice for reading on the web.

Maybe I’ll get used to it, but I’ll probably write a user style to aid my reading, maybe just using Apple’s San Francisco font.

Re: Re: The Golden Age of UX is Over

August 7, 2017

This is a blog reply to Andy Budd’s article The Golden Age of UX may be over, but not for the reasons stated.

When I read Andy’s piece I found it a bit presumptuous to name your own agency as one of the leaders in a field. But I respect Andy and it’s actually true so I guess he can do that. I still remember his brilliant presentation somewhere in 2008 or 2009 at the one-time Twiist conference in Leuven and have been following his writing ever since.

The article raises lots of points, one of them being the muddying of the term UX. This is something that we talk about a lot in our team, because about 1/4 of what we do as a team is what you would call UX work.

This ratio is growing because we feel that the only way we will design better software is by asking the right questions; and not just start with designing screens from the getgo.

We are currently looking for a UX researcher/analyst for the team and I really hope someone reads this job description and thinks “Damn, that’s me!”.

The truth is that the right UX profile is really hard to find, because first of all there’s not a lot of people doing the actual work that entails UX design, and second of all, is that the term is so muddy.

A lot of people who aren’t UX designers at all consider themselves to be a UX designer. Someone labelling themselves a UX (or even UX/UI) designer is already a huge red flag to me. What they say might be the case, but my first interview question would be: what’s the last piece of research you have done?

We are currently redesigning our website and we had tons of discussion on what to call our services. We ended up calling what we do “designing digital products and services”; although I kind of fought for using the term “UX”.

Even though it is an umbrella term that has lost most of its meaning, you can define it in a way that respects how it grew as a practice, and talk about the specific work that has to get done. By taking the historical perspective AND talking about the jobs to be done you can make it clear again what -you- mean by UX.

What I define as UX work is a range of activities, from usability tests to user interviews and other kinds of (sometimes technical) research. When it gets to information architecture work and design patterns things cross over into UI work, but depending on what you’re doing it might be a pure UX job as well.

That’s a lot of work that is *not* screen design. And it’s a lot of work that for me is a *lot* harder than just sitting behind my computer writing some code and making some designs.

For me it is frustrating for people to “claim” the term UX when they’ve never ran a usability test; when they have never done a series of user interviews; when they never travelled to the people who are using the software/websites/whatever they design to spend a day with them to talk and learn.

This is something that I have to fight for in offers because people don’t seem to value it. But after we did the work I never regret it. I’ve never once ran a usability test and thought: hey, now that was a waste of time! The same counts for user interviews and spending time doing research before starting to design.

As Andy notes, at some point a ton of people started calling themselves UX designers, to surf on some kind of golden wave and profit from the term.

In reality what most people do/did is much closer to UI design, or, really not even UI design, just (marketing) web design. If you decide where a button goes, it’s not UX design. It’s just applying (expert) knowledge and that’s that.

You’re not a UX designer if you read “Don’t make me think!”, 2 articles by Jakob Nielsen and that design of everyday things book. You’re a UX designer if your day-to-day job involves a lot of the aforementioned tasks.

Near the end of the article Andy makes the point that depending on where you’re at, your golden age might be over or starting.

Andy notes that one might associates a golden age with one’s formative years. On Twitter I said (half-jokingly, but that probably wasn’t very clear) that maybe 2008-2012 were his formative years. I can’t speak about Andy’s career, but it feels weird to make a connection to a specific era as being the golden age while at the same time acknowledging that the definition of a golden age is tied to one’s formative years.

I guess in the end it’s a personal thing. I went from web designer to UI designer and now I feel closer to being a UX designer than ever. For years I avoided the term UX because I didn’t feel it was the work I was doing. But now it (partly) is.

About Windows laptops

May 31, 2017

For a while I’ve been pondering to buy a Windows based laptop.

Some of the user interface design work we do at Mono involves designing desktop applications on Windows. I dearly love macOS, but I also have to know “the other side” to do a good job.

So the major reason is UI design, but Microsoft is actually playing a pretty strong game lately. Paint3D looks like something interesting that I want to give a try soon; their SurfaceBook industrial design is great; and they wowed designers all over with the Studio.

Moreover some of my design work is done in Figma which is cross-platform. Combine that with Atom and Bash on Windows and basically I don’t see a reason why I can’t at least get some work done on Windows.

I already have a Windows desktop machine — a pretty powerful one built for VR — but I find that I don’t want to use it for work because it’s not portable. Well, it’s sort of portable. But not like laptop-portable.

Figure: O sweet sweet VR PC

So what are the options? I like watching Dave2D’s videos on Youtube about laptops. Basically he says it’s the Razer Blade or the Dell XPS. A recent video was also very positive about the Gigabyte Aero 15.

The Razer Blade and the Gigabyte Aero immediately fell of the options table for me because they are pretty ugly. I want a laptop that looks great. My golden standard is the Macbook Pro and since this is something I use day in day out I want it to have a great industrial design.

So that leaves the Dell. I thought about buying a Dell XPS 15 but really I don’t want to buy anything from Dell. The simple reason is that you can’t see Dell hardware on display anywhere, so there’s no way to test them. Within Belgium Dell machines are sold by an external IT firm that in my honest opinion are not very likely to give you any service at all.

They almost literally told me over the phone that my company is too small to get a test device, and there are no returns after ordering. What kind of service is this? On Coolblue.be I can return anything I want after 14 days without giving a reason. Apple has historically always been great with repairs and returns. I don’t want to depend on an IT firm that thinks we are “too small”.

But there’s another option. It’s Microsoft’s own devices.

The reason for starting to write was that I was excited when Microsoft announced a new Surface laptop. The industrial design looks great, it’s 999, Macbook Air like in weight, so here’s me thinking: this actually seems like the ideal laptop for travel, meetings etc.

The only joke is that Microsoft says it ships with a version of Windows called Windows S. Which only allows you to run apps that are in the Windows store. And I thought: um, is this some kind of joke? Apparently you can buy a $50 upgrade to turn it into a “pro” machine but seeing as even something simple like Google Chrome is considered pro it’s basically a must.

Figure: When you search from Chrome in the Windows Store PC

I understand Microsoft want to compete with Chromebooks in the educational market but which marketing genius decided to announce Windows S together with a premium laptop? There’s an emoji for that: 😂

Looking for a very specific flowchart/diagramming app with updateable image references

May 19, 2017

I am looking for an app that allows me to annotate PNG exports from design apps in another environment i.e. draw arrows, explain things, while keeping the original design as an external file reference.

I would prefer if the app has an “infinite” canvas feature, where you can resize the app to the size you want.

You should be able import files and have the option to update them if they change. You should be able to do this in batch e.g. import a bunch of PNG exports and all the references update.

You should be able to share the output as a PDF or even better online in a collaborative viewing environment. The awesomest would be an environment where multiple people can work in, live, on the internet, but I could deal with PDFs.

This would be used to compare software implementations with designs, but also to deliver flow documents about how to go from one screen to another.

I realize this is a very specific question but hopefully there is something out there. I tried OmniGraffle, Indesign, Figma, Mural, LucidCharts and Illustrator so far but these only do parts of what I need.


May 17, 2017

This weekend I took a walk and listened to a podcast episode of Nice To Meet You which featured DHH, the technical cofounder of Basecamp.

I know a lot about Basecamp and their company values from reading their blog Signal v. Noise for over 10 years so everything David was saying was basically something I already heard. But for those new to 37Signal’s/Basecamp’s thinking it is a great intro.

Full Circle on Remoteness

May 9, 2017

I think I’ve come full circle with my thoughts on working remotely.

I worked remotely for about a year from Japan for my own company around 2015.

I thought it was a brilliant idea: who doesn’t like the idea of working from anywhere?

But I’ve come to realize that, while I got a lot done that year, I mostly worked on completing a big project.

I was sustaining an existing client relationship, not building new ones. There were some new projects that started but they were mostly with people I already new.

You don’t build new relationships over Skype.

The growth in our company stalled that year. I learned a lot personally, but we didn’t evolve as a group. The team was kind of working like a few freelancers.

I think remote can be done for certain tasks. Support and some parts of application development come to mind. If there’s support requests to answer you can do that on your own time. If you’re doing “issue driven development” you can do that whenever you want.

But if you want to do something that is next level you’re going to have to sit together in a room and spend the time together.

This counts for development, this counts for design. You can try to do it in chatrooms and in issue trackers but I don’t think that’s where the best work gets done.

My best design ideas are conceptually heavy and are very hard to explain without the right combination of voice, images and gestures.

You can try to Skype your way out of the process but you are handicapping yourself.

Now, maybe Skyping is more efficient than travelling 2 hours a day to get to a central location.

Sometimes travel is impossible.

As a knowledge worker you need your focus time, and what is more efficient than hopping on and off Skype?

There’s a lot to be said for remote work. I think it can work and it’s not necessarily bad.

But I had this lightbulb moment a few weeks ago where I was at a client’s office, and we solved something that would normally have been a giant discussion in 5 minutes on a whiteboard.

That very evening I ordered a giant 240x120cm magnetic whiteboard that is now adorning my living room. I love it.

I’ve switched over to sketching more, to prototyping things on paper. And discussing these things in group.

I do all sorts of things that I felt were a waste of time before.

Time will tell if I made the right decisions… but I think you have to see the two sides of the coin to know what’s better.

We are opening an office in Ghent soon. For me this marks the end of a period that was mostly remote. I am curious what’s going to happen.

macOS programming (3)

April 28, 2017

Yay! I built a working calculator for the iPhone. I followed this Lynda tutorial.

In the process I learned about enum, guard, optionals, autolayout & constraints etc.

I figured there wouldn’t be any modern macOS programming resources so I’d have to sidestep to iOS to eventually get back to macOS, because the principles would be the same.

macOS programming (2)

April 26, 2017

I am going to use this blog as a bit of a reference point as I learn about macOS programming.

View Life Cycle

There is something called the view life cycle. It is basically the event chain of your application. I saved this helpful image:

Logging (akin to console.log on the web)

You can print messages to the console using print() in Swift 3.2. It used to be println() in earlier versions of Swift.

Actions and outlets aka event binding

To hook up parts of the UI you can create “outlets”. Outlets go from UI element to code. Then you can create “actions”. Actions go from code to the UI. The connection created is a bit like event binding in Javascript.

If you want to change something it’s important not to just delete the code without cleaning up the automated references. Xcode automatically generates some code in the background. (todo: figure out how to do that 😅).

I tried my best to capture this in a Youtube video, because I had to piece together various resources to get this:

Language reference

Apple provides a book on Swift. You can download it using iBooks.

I know I won’t keep an interest in learning a language theoretically but it’s good to be able to reference this.

That’s it for today. Over & out.

Resources for macOS programming

April 25, 2017

Yesterday evening I took a stab at understanding macOS programming. I got as far as making this with storyboards:

Now I want to learn more about actually coding something useful. The problem is that I can’t find good resources to start doing this. The main cause being the transition to Swift and the fact that seemingly everyone moved on to iOS programming

I am writing this post to hopefully gather some more resources, so if you have some, please let me know!

Here’s the “current” resources I have so far:

Then I found some outdated resources:

Streaming to Twitch from a PC/Mac: some tips

March 20, 2017

A few weeks ago I researched how to stream to Twitch.

I am not a heavy Twitch user by any means, but I think it is an interesting platform.

When I lived in Japan I met Hawken who worked on a Mario style platformer. Sometimes he would cast his dev work to Twitch.

I thought that was really interesting because you really saw the process coming together.

As a creator you have the option to ask feedback or help from the audience. And as the audience you can get some insights in the tools used. Who knew that to get a smooth 2D animation you would first make it in 3D?

And what about this old school looking animation tool that allows you to draw sprited in a really productive way… who’s going to come and tell you this exists?

An old school tool to make sprites.

Sometimes a relatively minor tool makes your work so much easier. I remember that Bramus once coded a Photoshop plugin to export text. This made my website design work so much more productive at the time.

Anyway, I digress. Back to Twitch. Basically what I tested last weekend is how to stream from a Mac, a PC or a PS4. And then how to save those streams for your own usage.

Let’s first talk about streaming from Windows or from a Mac. To do this I installed OBS. This is a really awesome piece of software that allows you to record your screen (e.g. to make screencasts); but it also allows you to stream to a service like Twitch.

What OBS looks like.

It is open source, free and available for Windows, Mac and Linux.

My favorite way to record screencasts using macOS is with an app called Screenflow.

But this OBS software is really different. Basically it allows you to put multiple things on your broadcast at once. So for example you could put a logo on your videos. There is even an option to load websites inside the stream. So you could code a news ticker, host it somewhere and load that URL into your cast.

The first time I saw this I was like “Holy sh*******!”. The possibilities are endless. You can basically run a TV channel with this thing. How did I not know about this application?

Now, the way to connect OBS to Twitch is relatively straightforward. There are online guides about it about which settings you need to set.

The thing that was unclear to me was how to actually save those streams. By default Twitch doesn’t save videos do people can watch them later. But there is an option called “Archive videos” in the settings somewhere that you can use to automatically save videos for later.

Then you can connect your videos to a Youtube account and download them.

So you could maybe stream a few hours of content, then download those vids and cut them into a “best of” vid for Youtube. Awesome – just what I needed.