Tag: design

10 Tips for Effective Dashboard Design by Deloitte

10 Tips for Effective Dashboard Design by Deloitte

My colleague prof. Jack van Wijk pointed me towards these great guidelines by Deloitte on how to design an effective dashboard.

Click to access deloitte-nl-data-analytics-10-commandments-effective-dashboarding.pdf

Some of these rules are more generally applicable to data visualization. Yet, the Deloitte 10 commandments form a good checklist when designing a dashboard.

Here’s my interpretation of the 10 rules:

  1. Know your message or goal
  2. Choose the chart that conveys your message best
  3. Use a grid to bring order to your dashboard
  4. Use color only to highlight and draw attention
  5. Remove unneccessary elements
  6. Avoid information overload
  7. Design for ease of use
  8. Text is as important as charts
  9. Design for multiple devices (desktop, tablet, mobile, …)
  10. Recycle good designs (by others)

In terms of recycling the good work by others operating in the data visualization field, check out:

I just love how Deloitte uses example visualizations to help convey what makes a good (dashboard) chart:

Screenshot from the Deloitte slidedeck
Screenshots from the Deloitte slidedeck
Screenshot from the Deloitte slidedeck
Google’s Guidebook for Developing AI Product Development

Google’s Guidebook for Developing AI Product Development

I came across another great set of curated resources by one of the teams at Google:

The People + AI Guidebook.

The People + AI Guidebook was written to help user experience (UX) professionals and product managers follow a human-centered approach to AI.

The Guidebook’s recommendations are based on data and insights from over a hundred individuals across Google product teams, industry experts, and academic research.

These six chapters follow the product development flow, and each one has a related worksheet to help turn guidance into action.

The People & AI guidebook is one of the products of the major PAIR project team (People & AI Research).

Here are the direct links to the six guidebook chapters:

Links to the related worksheets you can find here.

10 Guidelines to Better Table Design

10 Guidelines to Better Table Design

Jon Schwabisch recently proposed ten guidelines for better table design.

Next to the academic paper, Jon shared his recommendations in a Twitter thread.

Let me summarize them for you:

  • Right-align your numbers
  • Left-align your texts
  • Use decimals appropriately (one or two is often enough)
  • Display units (e.g., $, %) sparsely (e.g., only on first row)
  • Highlight outliers
  • Highlight column headers
  • Use subtle highlights and dividers
  • Use white space between rows and columns
  • Use white space (or dividers) to highlight groups
  • Use visualizations for large tables
Afbeelding
Highlights in a table. Via twitter.com/jschwabish/status/1290324966190338049/photo/2
Afbeelding
Visualizations in a table. Via twitter.com/jschwabish/status/1290325409570197509/photo/3
Afbeelding
Example of a well-organized table. Via twitter.com/jschwabish/status/1290325663543627784/photo/2
Best Tech & Programming Talks Ever

Best Tech & Programming Talks Ever

Every now and then, Twitter will offer these golden resources.

Ashley Willis recently asked people to name the best tech talk they’ve ever seen and the results are a resource I don’t want to lose.

Hundreds of people responded, sharing their contenders for the title.

Below, I selected some of the top-rated talks and clustered them accordingly. Click a category to jump to the section.

Big Idea & Programming Meta-Talks

The Future of Programming

Growing a Language

The Mess We’re In

Making Users Awesome

Ethical Dilemmas in Software Engineering

Testing code

Adding Eyes to Your Test Automation Framework

TATFT – Test All The F*cking Time

Language-Specific talks

Concurrency (Python)

How we program multicores (erlang)

Y Not- Adventures in Functional Programming (Ruby)

JavaScript: The Good Parts

Code Design

Core Design Principles for Software Developers

Design Patterns vs Anti pattern in APL

Containers & Kubernetes

The Container Operator’s Manual

Write a Container in Go From Scratch

Container Hacks and Fun Images

Kubernetes and the Path to Serverless

Let’s Build Kubernetes, With a Spreadsheet and Volunteers

Cover image via: https://toggl.com/blog/best-tech-websites

Generative art: Let your computer design you a painting

Generative art: Let your computer design you a painting

I really like generative art, or so-called algorithmic art. Basically, it means you take a pattern or a complex system of rules, and apply it to create something new following those patterns/rules.

When I finished my PhD, I got a beautiful poster of where the k-nearest neighbors algorithms was used to generate a set of connected points.

Marcus Volz’ nearest neighbors graph, via https://marcusvolz.com/#nearest-neighbour-graph

My first piece of generative art.

As we recently moved into our new house, I decided I wanted to have a brother for the knn-poster. So I did some research in algorithms I wanted to use to generate a painting. I found some very cool ones, of which I unforunately can’t recollect the artists anymore:

Note: these are NOT mine

However, I preferred to make one myself. So we again turned to the work of the author that made the knn-poster: Marcus Volz.

He has written (in R) many other algorithms. And we found that one specifically nicely matched the knn-poster. His metropolis – or generative city:

Marcus’ generative city, via https://marcusvolz.com/#generative-city

However, I wanted to make one myself, so I download Marcus code, and tweaked it a bit. Most importantly, I made it start in the center, made it fill up the whole space, and I made it run more efficient so I could generate a couple dozen large cities quickly, and pick the one I liked most. Here’s the end result:

And in action, in my living room:

You can find my code here on github.

Best Geometric Fonts for Modern UI and Logo’s

Best Geometric Fonts for Modern UI and Logo’s

Typography plays a crucial role in design and finding the right font can take a few minutes or a few days. According to Vijay Verma, every font has specific design intent, communicates certain attributes. Fortunately, there are many (free) online libraries to help you these days, such as Google Fonts, MyFonts, Lineto, TypeAtelier, or TypeMates.

Geometric fonts

Geometric fonts are sans-serif typefaces building on geometric shapes like near-perfect circles and squares.

Image result for geometric font
Via

Today many technology brands currently deploy geometric fonts that represent minimalism, simplicity, and cleanliness, like — Product Sans by Google, Cereal by Airbnb etc.

Vijay Verma (via)

Design experts argue (here, here) that the geometric fonts below will work very well in modern user interfaces. These fonts are used among others by IKEA, Spotify, NASA, AirBnB, Volkswagen, Apple, Marvel, and Snapchat. Can you guess which is which?

You can click the images to visit the source pages.

Futura

https://uxdesign.cc/getting-futura-right-in-ui-design-bda5bc17f2ee

Gilroy

fonts/radomir-tinkov/gilroy/

Brown

https://lineto.com/typefaces/brown/

Circular

https://lineto.com/typefaces/circular/?tab=specimen

Gordita

https://typeatelier.com/font/gordita/

Cera PRO

https://www.typemates.com/fonts/cera-pro

Sailec

https://www.myfonts.com/fonts/typedynamic/sailec/

Avenir Next

https://www.myfonts.com/fonts/linotype/avenir-next-pro/

GT Walsheim

https://www.grillitype.com/typeface/gt-walsheim

TT Commons

https://typetype.org/fonts/commons/

Free Geometric Fonts

Although very aesthetically pleasing, some of these fonts can be pretty expensive if you’re just hobbying. While there are many more fonts out there that may be perfectly free.

Do have a look at Google Fonts, as they provide nearly a 1000 pretty interesting typefaces, all for free!

Moreover, if you’re specifically looking for a geometric font, have a look at these 18 free geometric typefaces!

https://www.cufonfonts.com/zemin/collection/geometric-fonts