January Films

January 13, 2018

A few days I subscribed to the Kermode podcast. I listened to one very long episode and I already love it.

They were talking about Three Billboards Outside Ebbing, Missouri (★★★), and even interviewed the director Martin McDonagh. Last night I saw this film and I must say it was very, very good.

It even surpassed Molly’s Game (another recent opener) (★★) if I would have to make a ranking. This film is Aaron Sorkin’s directorial debut. You might know Aaron Sorkin as the screenwriter behind various fantastic works like The Newsroom, A Few Good Men and The Social Network.

I’ve also seen All The Money in the World (★★), the latest Ridley Scott film. You might have heard about a frantic reshoot after it was revealed what Kevin Spacey had done; the reshoot seemingly didn’t affect this film at all. I thought the performances were strong and this movie had me entertained throughout.

Better

January 7, 2018

A new year, and a bit of difficulties in business led me to a lot of thinking.

This post doesn’t have a lot of structure, but I hope the combined thoughts make some sense and give you something to think about as well.

In my day job, I am a UI designer, and most of my work is concentrated on designing applications.

I’ve been tremendously focussed on trying to do projects where the applications that we design actually do something useful.

And I notice that I am the happiest when I see useful working software that does a good job.

What makes me unhappy is shallow work that doesn’t offer an actual benefit.

When the winner at the local tech startup competition is an app that lets you send messages to the future, or yet another food delivery startup, I think that’s a bit sad.

When people get sent to New York with government money on a “startup mission” with a super flawed business concept I can’t help but think that some people are just surfing this startup wave as some kind of lifestyle.

What is “useful software” then?

For example, a few years ago I worked on ticketing software, and when I order a concert ticket using that system and it works like I wanted it to, that makes me happy.

And then when I enter the concert hall, and the security people swiftly scan my ticket using a piece of software I helped create, that makes me happy as well.

Some time ago I also worked on a software project to organise TV shows, and now I saw that it was being used for Music for Life (1) to make sure everything would go smoothly.

We only worked a few weeks on this project with Mono, but I can see that what is there now is a massive evolution of what we worked on. I think that’s great.

(Obviously this is group work I can only take a bit of credit for.)

I think people are always looking for the next big thing, but in my opinion, the next best thing is a target that doesn’t exist.

The only thing you can do is to improve the current situation.

In design, we say over and over that the process is all about iteration.

When you iterate, you hopefully improve something, and ideally you elevate the starting point that someone else can build upon.

When you create a website, you are standing on the shoulders of giants.

The fact that you can create a drop shadow with a single line of code is the result of combined years of work by many people (2).

A drop shadow might be a silly example, but the point is: you need to try to build something that you can build upon.

For example, when I look at Hidde’s work, I see someone who is building things that follow that philosophy.

My work is building and designing software, but in this process, we don’t just make decisions about drop shadows.

We also make decisions about what it is that we build, why it should exist, and what it ultimately does.

When we discuss features, how to move around data, whether a user should be allowed to do X, Y or Z, we are essentially focussed on very human things.

What if the user wants to switch to another service? Do we lock down this data? Do we provide an export function?

Do we allow someone to delete their account?

Both questions should, in my opinion, obviously be answered with a resounding yes.

But I have had these discussion so many times and for a lot of people, this is not such an obvious yes.

So, where do we go from here?

I think we need to be careful that what we build is not a shallow solution for short-term gains.

We need to embrace open standards, even more than we already are doing.

We need to take control over our own data.

And if we give someone data, we need to hold them responsible when they don’t secure our data properly.

We can’t allow corporations to build big databases about our behavior that they will use for commercial purposes.

Think twice before you upload all of your photos to a cloud service. Do you really want BigCorp X to build a data profile on your kid already?

Every image gets analyzed and you can bet that at some point somebody will use it for malicious purposes. And that somebody will justify that because they’re making money with it and they need to put bread on the table.

So why not prevent the situation in the first place?

Data leaks easily, and like we discovered this week, 5 lines of Javascript can bring down almost every Intel chip.

Please, when you browse the internet, use an ad blocker and software that helps you prevent tracking (3).

Get your own domain name, and when you sign up to something, use a different e-mail address for every service you use.

Get a password management system and use a different password for every service.

Avoid leaning too much on one company for all your online needs (i.e. Google).

When you create an event for your friends, maybe think twice to do it on Facebook. Not everybody has or wants a Facebook account.

We need to avoid locking up our stuff in central, closed databases.

We need to work on keeping computing human.

I don’t know yet what that exactly means, but I hope to figure it out.

The future is not a thousand apps on your phone, posting a fake version of yourself on the internet, or immersing yourself in virtual reality.

(Don’t get me wrong, some parts of VR are awesome, but something has to be said about its escapist nature)

Maybe the future is that you just have this device that helps you augment your thoughts, and that you can also put down when you’re having diner with your family.

So, maybe that future is already here, and we just need to iterate on it.

We have already created a lot of things that are great and an obvious addition to life.

Software like Excel is awesome, if you look at what it allows you to do vs. what you had to do before computers. The concept has evolved to a shared spreadsheet that is always in sync (4).

I was complaining about the lack of a proper filesystem for iOS on Twitter, but I should be happy that I have this computer in my pocket that can do an amazing number of things.

And I am pretty sure Apple will iterate on the Files app (as they have done already) and that in the end it will be worthy enough to stand next to macOS’s finder.

The computer is like a bicycle for our minds.

They are a worthwhile addition to our lives but we need to realize that they are just this tool, that we should be able to live without.

I saw someone complaining on Twitter 3 times about Deliveroo not working like he was used to.

And I all I can think is: you know, maybe you can learn to cook? So the internet doesn’t have to be your nanny?

In 2018 I want to put down whatever gizmo I have at the moment a bit more, and live in the moment. And can everyone please stop filming half the show with their smartphone when I go to a concert? Seriously.

Over the years, I keep coming to the same conclusion.

I want things to be better.

And what’s better is very personal, but I can idenfity with Merlin Mann’s Better:

To be honest, I don’t have a specific agenda for what I want to do all that differently, apart from what I’m already trying to do every day:

* identify and destroy small-return bullshit;
* shut off anything that’s noisier than it is useful;
* make brutally fast decisions about what I don’t need to be doing;
* avoid anything that feels like fake sincerity (esp. where it may touch money);
* demand personal focus on making good things;
* put a handful of real people near the center of everything.

This was written 8 years ago, and it still rings true.

Originally, we wanted to name Mono “Augment”, where the “Augment” part would be about making something better.

It didn’t exactly roll of the tongue so we went with Mono, but that’s what my still my mission.

Make things better.

(1) This is a big solidarity event that happens every year in Belgium where people collect money for charities
(2) I remember drawing 9 elaborate PNGs in Photoshop to do the same work, and then creating an elaborate HTML table to position those. Ugh.
(3) I would say Ghostery is a good starting point
(4) Google Spreadsheets, but also Office 365, and a bunch of competitors

Best of 2017 – a side project

December 31, 2017

I made a side project, showing off my favorite things released in 2017.

Best of 2017

If you don’t care about the details and/or technicalities and just want to see the result, check out the project here.

Intro

I love end of year lists. It’s always nice to have a backlog of great movies to watch or albums that you should really check out.

And every year around this time, I suddenly find myself with some free time. I want to take a break and stop working on commercial work, but on the other hand I can’t help to want to catch up with what I wanted to learn this year.

A small side project seemed like the ideal way I could learn something new.

I worked on this project on and off during the Christmas break. In this blog post you’ll find some of the details.

Concept

In the beginning I came up with a concept: do a basic end of year listing. The idea was to list albums worth listening to, movies worth watching and games worth playing. In the end the concept evolved a bit to include more, but this was the start.

Now, just to list my favorites in a “static” way wouldn’t be very challenging — I mean, I could make a Google document and then be done with it — so I wanted to incorporate some technical challenges into it.

Challenge 1: Use CSS Grid in the design

I knew I wanted to use CSS grid, because I didn’t get enough of a chance to practice with it during the year.

In terms of “research” I watched Miriam Suzanne (of Susy fame) talk about grid systems and read Jonathan Snook’s post on laying out a calendar using Grid.

I also consulted this auto-fill vs. auto-fit video by Mr. Snook again. After finishing my own code I saw this post by Sara Soueidan on the same topic.

If you look at possible layouts, the most obvious layout for showing off albums for instance is a grid:

I took my layout ideas to Figma to figure out what to do:

Using Figma to figure out a good layout

After this I wrote some code in Codepen to figure out how it would work.

Using Codepen to check out what’s technically possible.

If you are interested in the code, the source is here.

This was written using Pug, my favorite templating language, and of course, SCSS.

I envisioned a Masonry style grid for the project page, but in the end I decided against that.

There’s tons of CSS grid experiments floating around the web, but a lot of them depend on extra Javascript implementations. Thanks, but no thanks. I have been down that rabbit hole and it’s not pretty.

I also scrapped the idea of mixing the different types of content with each other, so in the end, I ended up with something that looks like the initial sketch:

Challenge 2: use JSON for the data

I knew I wanted to use some kind of structured data. JSON seemed like the perfect candidate.

After a failed attempt in coda.io, I created a table in Airtable.

Figure: the albums table in its infancy.

Airtable is a really cool app that allows you to create structured data. After creation, you can get the data out of an Airtable document (called a “base”), because every Airtable document comes with its own API documentation, generated from the data itself.

I wrote a small shell script to get the data from Airtable as JSON:

curl "https://api.airtable.com/v0/appPNWkaKNwNCBVrH/Movies?maxRecords=99&view=Grid%20view" -H "Authorization: Bearer YOUR_API_KEY" -o content/data/albums.json

The JSON for 1 item looked like this (abridged for clarity):

{
  "records": [{
    "fields": {
      "name": "Paterson",
      "image": [{
        "url": "https://dl.airtable.com/QRjAVScATg6EX6jLtpv1_paterson.jpg",
        "filename": "paterson.jpg",
        "type": "image/jpeg"
      }],
      "releaseDate": "2017-05-08"
    }
  }]
}

After I had the JSON, I rendered the result using the Pug template language in a Bedrock project.

Since I am not really a Javascript expert, I spent some time trying to figure out how to get the URL of the image. It’s an object in an object, which makes it a bit more difficult.

Eventually I found it, but I am not 100% happy with the code (it’s on line 10). If anyone has a suggestion I would welcome it.

table
    tr
        th Image
        th Name
        th Release
    each item in contentData.movies.records
        tr
            td
                if item.fields.image
                    img(width="200" src=item.fields.image[Object.keys(item.fields.image)[0]].url)
            td #{item.fields.name}
            td #{item.fields.releaseDate}

In the final result, the markup changed to be something else than a table.

Parsing the data

As I mentioned, to generate the site, I used Bedrock.

Bedrock is a static site generator that we use daily at Mono to build application prototypes. But if you strip it down a bit, it’s actually also a really good static website generator.

Technically, Bedrock consists of an Express.js node server and a series of Gulp-based tasks to generate a static site.

I “hacked” Bedrock core to be able to use Moment.js to parse dates to my preferred format.

I also used Marked to be able to parse markdown. The reviews sometimes contain multi paragraph content, or formatting like italics & bold. The easiest way to handle this is to write the markdown directly into the Airtable database.

(This makes me think we could easily use AirTable as a CMS, but that’s another story…)

It’s nice to be able to use these off-the-shelf implementations for things that are tricky to do right. This is a major +1 for working in a Node environment (especially for novice programmers like me!).

Data and image optimization

I noticed some of the images were quite heavy to load, so I optimized some of the images by hand in Photoshop, and then re-uploaded them to Airtable. I kept the source images in Airtable as well.

To keep the data in Airtable is the easiest solution, but it does some come with some limitations, like the manual re-upload.

I also had to manually resize a ton of images in Photoshop to bring the filesize down. In a classic CMS environment (i.e. WordPress) this could be automated, but in this case I have no idea how I would efficiently automate it.

Cross-referencing tables

At some point, I created a table that cross-referenced another table in Airtable. When you do this, Airtable generates id’s that can be cross-referenced in the relevant JSON files.

From line 18 on, you can see I am first checking if there are any cross-references, then looping through them.

each item in contentData.youtube.records
    .cover
        if item.fields.name
            .cover-image
                +image(item)
            .cover-info
                h2.cover-heading
                    | #{item.fields.name} 
                ul.c-horizontal-list
                    each subitem in item.fields.categories
                        li
                            .c-tag #{subitem}
                        li Subscribers: #{item.fields.subscriberCount}
                .cover-review
                    //- Here we are using marked to render markdown
                    div!= marked(item.fields.review)
                    //- Video recommendations
                    if item.fields.Videorecs
                        p.caps Video recommendations
                        ul.styled
                            //- We are cross referencing a table here
                            // - First we loop through the relevant items
                            each subItem in item.fields.Videorecs
                                each subSubItem in contentData.videorecs.records
                                    // - We check for existence along the way
                                    if subItem == subSubItem.id
                                        // - And then render our item
                                        li: a(href=subSubItem.fields.url)=subSubItem.fields.name

Coding this required some trial and error, and I am pretty sure this can be written in a much more legible way. I suppose this is the JSON equivalent of combining tables with something left a LEFT JOIN, but honestly, I am such a SQL/database noob that I’m not even sure if that’s true.

Summing up my feelings when doing this kind of work:

Challenge 3: use a new app — Pixelmator Pro — to edit the images (#fail)


Figure: trying to make something decent with Pixelmator Pro

Last month, Pixelmator Pro came out. Whenever a new Mac app that looks well-designed comes out, I just buy it, mostly for research reasons. I had this one lying around but didn’t use it yet.

I’ve been meaning to get rid of my Adobe Creative Cloud license, looking at alternatives. I don’t really want to pay €600 a year for software that I barely use.

In 2017, I mostly used Figma, and a bit of Sketch, and a litttttle bit of Photoshop and Illustrator.

Potentially Pixelmator Pro was the answer for my bitmap editing needs.

I tried to create some basic things in Pixelmator but I kept hitting the limits of the program. It is obviously made for photo editing and not for my intended purpose, which is a composite layout.

The feature that I missed most was “clipping mask” from Photoshop. What I was also worried about was what’s called “smart objects” in Photoshop. If I resize a bitmap, I don’t want to have any quality loss in relationship to its original image.

In the end I switched back to Photoshop for any editing. The truth is that it’s very hard to counter 10 years of Photoshop habits and all of the little little nice things that have landed in the application over the years.

People might look at Photoshop as a bloated beast but in my opinion it’s still hands down the best image editing app in the world.

Challenge 4: Make it look good

Good visual design comes from a few different things, but mostly it’s the right combination between layout, type and colour.

Fonts

Starting with type, I figured I already licenses for several great looking fonts, like Atlas from Commercial Type:

And also Untitled Sans from Klim Type Foundry:

The problem here is that I don’t actually have their equivalent web font licenses, and I am not willing to shell out the $300+ this will cost for a simple side project.

Since I do pay for Adobe Creative Cloud, I could use Typekit for my fonts (knowing that the design will not be intact when I ever stop paying ☹️)

An alternative was to use an open source font, but this is the solution I’ve been using all year, and things are getting a bit boring (at some point I wanted to write an essay called “Tired of Roboto”).

I experimented with Google Fonts, because it was the easiest to implement quickly. But honestly I am not a fan of putting Google’s code on every site I build. Google is already big enough, and font import code is the equivalent of a tracker.

So, maybe poorly so, in the end I decided to match the typography of this site — johanronsse.be — and it’s just good ol’ Helvetica (Neue).

One thing I was wondering about, is when you want to use the medium weight of a font, but the bold weight if that font doesn’t exist locally (and thus the fallback font is loaded). I am not sure if this can be done, if anyone has any tips, let me know.

Colour

At some point, I changed the overall colour scheme to be white on black instead of black on white. I noticed the visuals looked much better with a black background, so I stuck with that experiment. I didn’t specifically bother to do anything else related to colour.

In general, as a designer, I am super uninterested in colour (Mono is not accidental), unless it can actually improve/enhance the look based on its content.

One example is the design of rdio (RIP), where the album art gets blurred for added “atmosphere”.

This effect can work but this can also go horribly wrong. In iOS, this effect is used quite a lot, but if you take a close look at the gradient images created in the process they’re only pretty in some cases. At some point time I dubbed this effect “rainbow puke”.

So in the end, I decided to do nothing, and just work with a black background. I spiced up the homepage with a bit of a topographic background image to make it look more interesting, since this page has the least amount of other content.

Maybe sometimes restraint is the best thing.

Animation

I experimented with tilt.js and at some point I even had some kind of glitchy text for the sote’s logo in the code, but I removed these.

My feeling is that if an animation is just an effect, what’s the point? These 2 experiments also added to rendering time, and sometimes created layout bugs. I didn’t want to bother fixing these, so I scrapped both.

Again, a bit of restraint. If it’s not objectively better, what is the point?

Layout

When I was sketching, I felt like this kind of layout would work for showing off images from movies, games and TV series:

After a few iterations I ended up with something like this:

I had some ideas to evolve it by showing more images for every movie, but I found it difficult to source the right images in the same resolutions. In the end I just ran out of time as well.

Side thoughts: content first?

At some point during the process, I had working lists of series, albums, games etc… basically the content was just an image showing off the particular item, its name and its release date.

I felt this was a bit lifeless… visitors would probably wonder why a particular item was the list? To counter this, and give it a bit more life, I started writing short reviews/comments for each of the items.

I also created a homepage to explain what the project is and to lead people into it with the right expectations.

Looking back, a project like this should start from the content first. Now it started as a technical exercise and I added the content later on.

Challenge 5: Make it a progressive web app (didn’t do it)

During the year I saw lots of talk about progressive web apps. I researched making this a progressive web app, but because the content is quite static, I didn’t see any advantages to it, and didn’t do it.

Something for another project next year!

Final thoughts

In the past, I approached this kind of project as a manual graphic design exercise. I would go into Photoshop and design the individual pages. This was a lot of fun but the approach would break down when you wanted to make things responsive.

This time, I’ve approached the design from a more technical standpoint, where I had a database of items that I could get info from easily, and I designed almost everything in the browser.

New techniques like CSS grid make things a lot easier, and knowing how to loop over (any?) JSON data is a powerful tool in my toolset. However, I think things could look better in general, but this wasn’t specifically my focus for this project.

I am also happy with a reusable data format. Making a similar website next year will be a lot easier!

Subform app

November 27, 2017

While preparing a potential talk for the UI design tooling meetup* I took a look at Subform.

It recently entered beta, with a monthly $25 fee to test the app. At first this move felt weird to me, but I know how hard independent software development is, so I understand this decision.

Subform was announced as a Kickstarter project in 2016 and got about $112k in backing. It has a very interesting premise, where it tries to fight the standard conceptions of what a UI design tool should be. Instead of putting rectangles and text boxes in the correct spots, you use alignment tools on parent groups to basically put things into place.

In general, when you’re designing a UI, there’s a certain point when changing something becomes quite the daunting task. Depending on your tools, project setup and team expectations of “file cleanliness” (i.e. proper layer naming) making a seemingly small change can sometimes take hours.

The co-creator of Subform wrote about how pushing pixels is quite miserable here. His point is that the computer should do that pixel pushing instead.

In a way, it’s a lot like using a UI to do something like working with Flexbox and CSS grid; or like setting up constraints in Xcode.

I think there’s a lot of work to be done to make it handier to design a UI with Subform, because I had a lot of trouble doing something reasonably simple. I do think that once everything works, you get all the concepts, you can work really fast.

Doing something new will always require learning something new as well, so I am curious where this will go.

*After a long hiatus, I announced a second meetup about UI design tooling. It takes place January 10th in Antwerp. We are still looking for a great location. If you have something to say about UI design tools, please send me an e-mail – I want this to be a community event with input from everyone. RVSP here!

Screen sharing pro tip

October 31, 2017

For my job, I often have to share my screen for lengthy calls.

As my setup, I use an LG 27″ UD58 4K screen and a 2015 Macbook Pro.

Now, this screen is not exactly ideal to show designs.

The people on the receiving end might be using a 15″ laptops, so the image they receive will be too small.

Even worse, because of the massive resolution, screen sharing is processor intensive and things might be choppy because you have to upload a massive image as well.

What I would sometimes do to fix these issues is to detach my screen and present from my laptop only specifically for the call, but since this is an everyday occurrence, this is quite annoying.

I found a solution in setting a shortcut to change my resolution using SwitchResX. With this small tool I set a shortcut so that ⌘+F6 becomes a switch to change from the native 3840×2160 resolution to a more streamable 1080p. Another shortcut brings me back to my native resolution.

 

Researching 4K TVs

September 8, 2017

This post was edited October 15th, with some additional info.

I started some research on 4K TV’s, which is a difficult topic, mostly because you have to use them to really know how good they are, and you don’t just buy 10 expensive TVs.

You can try to find information online and from looking in stores, but ultimately, you are taking a bet.

I hope by posting my thoughts someone will say something smart, so I can ultimately make the “right” purchase.

Above: the first version of my spreadsheet, discovering that brands like to name TVs differently in every region of the world

Smart vs. dumb

Almost all of new TVs run some kind of OS.

Here’s the breakdown of what runs what:

  • Samsung TVs use Tizen
  • Sony TVs run Android
  • Panasonic TVs use Firefox OS
  • LG TVs run webOS (the latest webOS version is 3.5)
  • Philips TVs run Android, some older Philips own OS

This is problematic, because I actually don’t want an OS on my TV. I just need the TV to be a display for another device such as a PS4, Nintendo Switch, or Apple TV.

What you also have to realize is that there’s a little underpowered computer running that OS in your TV; depending on how expensive your set is, things might work smoothly or not at all.

Furthermore, when I buy a TV, it’s for 10 years. What are the chances something like Android TV will be updated and remain current? You can of course ignore choose to ignore the built-in smart TV features, but even if you choose to do so, I’m pretty sure you will be spending time waiting at these things to boot.

However, there is a small chance that the OSes are so good, that maybe I like them better than using the PS4. I’ve heard a lot of good things about webOS, so LG has a plus here.

Model naming logic

The section in which I try to decipher brand naming logic.

  • LG OLED 55 EG910V
    • I found this one online for €1200, OLED, so that’s about as cheap as it gets for an OLED TV
    • This is a curved model
    • WebOS 2.0 and apparently verrrry slow
  • LG B6
    • 2016 OLED model, now around $2000 (from YT video dated April 2017) — Does the 6 refer to 2016?
  • LG C7
    • 2017 OLED model (not highest end),
    • €2499 these days in Belgium (Coolblue Price, Oct 2017)
    • There is something called a C7T, what is the difference?
  • LG E7
    • Model with a speaker bar
    • Price €2895 in Belgium (Coolblue Price, Oct 2017)
  • LG G7P –> The thinnest. Comes with a soundbar
    • €6999 (!)
  • LG W7
    • This is the “wallpaper” style model
    • €7999 (!)
  • Sony A1/A1E –> OLED model, available in 55″, 65″ and 77″
  • Sometimes called KD-55A1 / or something like XBR-55 A1E (obviously replace 55 by its size)
    • The screen is the speaker
    • Has a kind of kickstand design
  • Sony Z9D
    • Non OLED model, 75″ (!)
  • Philips
    • 65″ OLED 9 series
    • 8100 Series
    • 6400 Series

OLED

LED is a light emitting diode, but what is the O in OLED? It stands for organic. That’s right.

What is ARC?

Some HDMI ports are marked with ARC. But what does this mean?

It stands for Audio Return Channel, and it’s a way to have one less cable when connecting to an advanced audio system. I don’t know much about this stuff so I am going to leave this topic to the experts ;).

Personal brand preferences

I dislike Samsung as a brand, so it’s mostly off the table for me. As a company, Samsung consistently displays poor taste, so I don’t want to support them by buying their products.

I am neutral to LG… their phones are shit (I returned the LG G6 back after a single day) but their 4K displays are pretty great bang for the buck (LG 27″ UD 58) – and what is a TV really – a big display right?

I like Philips and Panasonic. My old TV is a Panasonic plasma.

I really love Sony, but their products tend to be on the (too) expensive end.

Beware of cables sticking out

Consider this picture (taken from this video); and now imagine actually connecting those 3 sideways HDMI ports. You’d have to find a way to manage those cable so they don’t stick out of the TV.

In this case it will probably be alright, but if the ports were a bit closer to the edge, they would stick out. This is something to be aware of as some TV manufacturers like to put the ports too close to the edge of the TV.

Brands that are not sold in Europe

If you look at sites like the Wirecutter, their recommendations include brands like TCL and Vizio, which are not sold in Europe. This is a shame because the TCL TVs are basically the only ones I can find that are still “dumb”.

LED vs OLED in-store

Demo videos in store (e.g. Mediamarkt) specifically show colorful scenes so you don’t see that on LED TV’s the blacks aren’t black as they should be.

Do I need 4K after all?

It seems to me that below 50″ it is not necessary to have a 4K TV at all and you can get by with 1080p.

Even a 100″ image (from my projector) at a normal viewing distance (2.5 meters) 1080p is still pretty sharp to me.

There is a big lack of 4K content, and most things you will be watching will be 1080p anyway.

You are unlikely to game at 4K, unless you hook up a monsterly PC (or a PS4 pro I guess; but then I’d rather have more performance at 1080p).

What’s going on though is that all modern TVs are moving to 4K, so at some price point, it’s not like you still have a choice.

OLED price

OLED is really sweet, and if I had all the money in the world, there’s no question I wouldn’t just buy a  sweet OLED TV. The in-store demos I saw of OLED TVs blew me away.

However, I’m on a budget here, and I want to spend my money in a smart way. Wanting OLED will basically double the price of your TV set. I am thinking maybe it’s better to invest in better sound, deal with regular LED, and wait for OLED prices to come down.

The other problem is that the only “affordable” OLED TV – the LG OLED55C6V – has a really ugly stand in my opinion. It also has other problems, like the placement of the HDMI connections.

Size vs. your living room and furniture

65″ TVs are so massive, that they become very “dominant” as a piece of furniture.

Currently I use a projector to “watch TV”. One reason I like my projector is that when it’s off, it’s just this relatively small object. The living room isn’t dominated by it.

TV portability

One reason I might consider a 49″ or 55″ is that at least it is somewhat portable. Sometimes I organise events or there might be locations where I want to take the TV to (e.g. move it to the office temporarily).

If you look at the dimensions of a 65″ TV you are looking at an object that is 160cm by 90cm. I don’t now about your car but for me that is a tight fit with such a fragile object. But I think I can move around a 49″ TV with no problems by myself.

One thing that I noticed about these big TVs is their general flimsiness. They aren’t meant to be moved around – at all. If you touch the side just a bit on a lower end LG 55″ you’ll hear creaking and noise. These are objects you have to handle with 2 persons when you want to move them around.

Wall mounting

If you buy a 65″ I feel that you basically have to mount it to your wall, which in turn messes up your wall (drilling etc.). So it’s a consideration

Stand shape vs. soundbar

Philips seems to be the only company who thought about the fact that you’re going to maybe put a soundbar underneath the TV. The TV stands on 2 “legs” on either sides, allowing you to place a soundbar in the middle, just below the TV.

The downside here is that the furniture that the TV is standing on has to be at least as wide as the TV itself. For a 65″ this can be a problem because 65″ TVs are 157cm wide; and most living room furniture TV stands (e.g. IKEA) are 150cm wide.

A friend of mine actually had to buy new furniture to fit his 65″ TV :).

Soundbar pricing

Current TVs are thin and rarely contain decent speakers. The expectation is that you buy a soundbar or hook up a better audio system.

A soundbar seems like a terrible idea to me, why don’t you just use a simple 2.1 set so you can have a subwoofer? How is a soundbar supposed to produce good bass? I am sure there are great soundbars out there, but you can probably get better audio with a €150 computer speaker set than with any €300+ soundbar. At least, that is my theory.

I’m wondering if some brave TV company has a TV with no speakers at all?

Size vs. legibility

I have a 42″ Plasma TV now (720p), but I am looking at 49″, 55″ and 65″ now. 42″ is just too small for the living room.

For gaming, text tends to be horribly small on a 42″, to the point of being illegible. Because I like RPG or text heavy games (for example Pillars of Eternity) this is a problem.

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.