Lab

Experiments, quizzes, and stuff

I like to build things.
Useful things, pretty things, or just delightfully unnecessary things.

My work spans beyond just web design and web development.
It's a playground of fun experiments, engaging quizzes, and even some artistic explorations.

Elevation Lines

Using topographical data, I create detailed line drawings of well-known Swiss mountains. Each line represents a specific elevation, highlighting the natural contours and beauty of these peaks.

The mountain Pilatus with only elevation lines, with a light background — Mountain Pilatus, Switzerland. Using elevation lines, I created two **monochromatic** versions using only lines, a dark and light mode.

The mountain Rigi with colorful elevation lines — Mountain Rigi, Switzerland. In the version that uses only lines, I employed color-coded lines, starting with turquoise at the lake level and transitioning to red at the mountain top.

The mountain Pilatus with elevation lines, which are filled with different colors — Mountain Pilatus on the right, Rigi on the left. With the first iteration, I tried an approach with filled areas, instead of only using outlines.

The mountain Rigi with elevation lines, which are filled with different colors — Mountain Pilatus on the right, Rigi on the left. With the first iteration, I tried an approach with filled areas, instead of only using outlines.

The better #000000

Using pure black (#000000) as a background color can sometimes be problematic, particularly when paired with pure white (#ffffff) for text.

That's why I built a website that offers a variety of dark shades as alternatives to pure black. These subtle color variations still provide the richness of a dark background, but with a softer contrast that is easier on the eyes when paired with lighter text.

With help from ChatGPT for JavaScript and the extensive, generated list of colors (hues and instructions were provided). The inspiration came from the article «Alternatives to Using Pure Black (#000000) for Text and Backgrounds» by Dmitry Sergushkin.

Over a 100 differtent shades of dark colors in a grid. — The better #000000 Over 100 colors as an alternative to pure black. Displayed in a beautiful grid, with filter options and a preview that only shows the desired color.

Over a 100 differtent shades of dark colors in a grid, with the side panel open. — The better #000000 Over 100 colors as an alternative to pure black. Displayed in a beautiful grid, with filter options and a preview that only shows the desired color.

Country Comparison

I have a deep passion and appreciation for geography, encompassing everything from countries and capitals to landmasses. To share this interest, I developed a web app that allows users to compare population, area, and GDP across different nations. Powered by the D3 library for dynamic data visualization, it offers an engaging and insightful way to explore geographic data.

Country Comparison web app. Users can decide whether they want to compare population, area, or GDP. By selecting a country in the list on the left, they can narrow down their selection and choose their preferred color scheme.

Poker Cards

Most poker cards have a traditional, old-school appearance, which inspired me to design a fresh, modern deck.

I brought this idea to my agency required, and we didn't stop at just the design — we produced and printed multiple real-life decks. The selling through our own online shop did not work, unfortunately. Mainly, because our name "Fancy Shit", didn't allow us to run ads due to profanity.

Well, that was a learning.

A set of different poker cards, designed by Stefan Velthuys — A deck of poker cards I designed the cards with simplicity in mind, distilling the elements to their essentials, especially for the face cards like the King, Queen, and Jack.

A hand of poker cards, Royal Flush. Ace, King, Queen, Jack, and 10 of Hearts. — A deck of poker cards I designed the cards with simplicity in mind, distilling the elements to their essentials, especially for the face cards like the King, Queen, and Jack.

Tech Stackle

Wordle took the world by storm. I was as hooked as many others. So I decided to create my own version of a Wordle-like game. With the blessing and approval of the New York Times, thanks again!

Practical Web-Apps

Some of my experiments come from an actual need. Yeah, I’m just as surprised! It's amazing how necessity sparks creativity.

I have a lot of fun building these apps, and it's rewarding to see them being used in everyday development. Each project not only solves a real problem but also brings joy and efficiency to my work.

It's this blend of utility and enjoyment that drives me to keep innovating.

A screenshot of charcopy.com, where you can copy unusual characters, like the copyright sign. — Charcopy. A small web app with which users can copy a variety of special characters, they don't have easy access to on a keyboard. Plus, the shrug emoticon: ¯\_(ツ)_/¯. See it live on charcopy.com

A Screenshot of an interface with multiple input fields. — Fluid Typography with Fluidity. Fluid typography becomes more important as the expectations for responsive solutions grow. The app provides an easy way to create the necessary code without having to resort to complex mathematical formulas. Try it live

A Screenshot of the comparison between font sizes on different screens. — Fluid Typography with Fluidity. Fluid typography becomes more important as the expectations for responsive solutions grow. The app provides an easy way to create the necessary code without having to resort to complex mathematical formulas. Try it live

A Screenshot of a the ScaleView app. — Scaleview. Ever wanted to view a website on a larger screen, but you're only on a laptop or mobile? With ScaleView you can browse scaled down websites to simulate a large screen.

Font + Color Quiz

Since I love quizzes and enjoy creating useful—or completely random—things, I thought combining these interests could be fun.

So, I built two quizzes where players guess a color or a typeface (font).

A screenshot of a quiz game, with a big green area and 4 choices of HEX codes. — Color Quiz: What the Hex? Players can choose between two game modes, either guessing the shown color, or the provided HEX code.

A screenshot of a quiz game, with a HEX Code and for colored areas as answer possibilities. — Color Quiz: What the Hex? Players can choose between two game modes, either guessing the shown color, or the provided HEX code.

A screenshot where you can see a text set in a specific font. Next to it are 4 choices of fonts, which users can select the correct font. — Font Quiz: What's the Font? Users are provided with 4 possible answers to decide what font is shown. For each question, a random font is chosen, using the Google Fonts API.

A screenshot where you can see a text set in a specific font. Next to it are 4 choices of fonts, where one answer is marked as correct. — Font Quiz: What's the Font? Users are provided with 4 possible answers to decide what font is shown. For each question, a random font is chosen, using the Google Fonts API.

Your Daily Smoothie

There was a time when I was really into smoothies. I made them daily, experimenting with new combinations and recipes. This led me to start my own smoothie recipe website.

Then came the big media frenzy, with every news outlet jumping on the recipe bandwagon. That's when I decided to step back.
It was fun while it lasted, though.

A screenshot of a website, with a recipe for a smoothie: Spinach, Mango, Banana, Pear — Your Daily Smoothie The idea was simple: a recipe website for smoothies without the nonsense. No story before the ingredients, no nothing. Just the ingredients and simple instructions.