How my ideas evolve over time

Picture of an input range slider
Picture of an input range slider
Image of a range slider input

People often talk about ideas as something that happens in an instant. Like they’re Eureka moments. In marketing, people reduce them to single events in time. It makes, of course, for a better story. In reality, the best ideas are almost always the product of a longer thought process. Concepts need to grow like seeds. Someone needs to tend to and nurture them. In the end, the best ideas are usually not one idea. They are often a series of smaller innovations, later on, referred to as one idea.

This article is a story about my creative process. It’s about…


Are these two roles so different that we have come to believe?

Image illustrating the different tools developers and designers use
Image illustrating the different tools developers and designers use
Images from unsplash.com by Ilya Pavlov and Denise Johnson

In ancient times

Art and science were once two integrated disciplines. In ancient Greece and in Roman times, the distinction between the two was vague. Lines were blurred. It seems like it was unthinkable to do one without somehow involving the other. Art was a natural part of science and vice versa.

The most notable of all the historical figures, combining art and science, was perhaps Leonardo da Vinci. He, during the Renaissance, combined the two principles. As a painter, he drew the probably most famous paintings of all time, the Mona Lisa. At the same time, he was an engineer. He did…


Because non-interactivity is such a drag

Finger drawing
Finger drawing
Photo by Paolo Chiabrando on Unsplash

Drag-and-Drop

Who can’t remember the first time they rearranged apps on their mobile phone? App icons were flying all over the place. Somehow, though, they magically ended up in neatly arranged rows and columns. Nowadays, this experience is the default. People hardly notice it. When first introduced, it was state of the art, even jaw-dropping. Drag-and-drop was a known concept long before smartphones. But it was with the introduction of touch interfaces that it became a widely known phenomenon.

There is a certain feeling about virtual dragging. Things become tangible. It’s a pleasing sensation to be able to actively move items…


A step by step guide to creating a Hamburger Menu in SVG & CSS

Hamburger hero image showing the characteristic three line hamburger menu
Hamburger hero image showing the characteristic three line hamburger menu
hamburger menus

The Hamburger Menu widget is on every other site nowadays. It has become synonymous with the web and, perhaps even more so, with web development. Have, for instance, a look at Dribbble or Codepen. There you’ll find a fair share of examples. They come in all shapes and sizes where one is more elaborative than the other. Developers and designers can’t seem to get enough of the widget.

The Hamburger Menu is not without controversy. Some hate it, and some love it. Numerous articles are debating it and its alternatives. Some argue that its proper place is in the history…


Learn how to implement morphing, a technique for transforming one appearance into another, using CSS.

Photo by Thomas Renaud on Unsplash

I’ve been quite intrigued by morphing lately. As usual, when I find things to deep dive into, the energy so often ends up in demos (pens) on my Codepen profile. Codepen is the perfect place to channel one’s creativity. It’s a community filled with new ideas and sweet people. At Codepen, sharing is central. Here most strive to improve, to grow with others.

This article is about, what I call, in lack of a better term, clip-path morphing. It will discuss a pen on my Codepen account called the Play Pause Button and the technique behind it. …


Here is what we’re going to create in this article:

Mark as read toggle

This is a toggle that I developed while working for Above. Or more precisely, we developed it for one of their clients. Above is a Swedish design and innovation agency located in the beautiful town of Malmö in Sweden. They engage themselves in a lot of fun and crazy projects. Be sure to check them out!

First things first

Let’s get started. The first thing we need is a functional React component. This component will take two arguments, or props to speak React.

  1. An output. Feedback when the user clicks the toggle.
  2. An…


Photo by Jonathon Young on Unsplash

There are differences between the various types of designers. This article will look into one of those differences. The one that exists between those who design code and those who design visuals and UX. The difference we’re going to look into is access to the company’s product/service.

State of the nation

Today, visual and UX designers, in software, at large, work outside of the product. Their tools work detached from the product they’re working on. Ever so often they never even touch or see the actual product/service they’re designing. The earlier stages of product development are conceptual. Here is where designers today do most…


Image from Unsplash.com by Quino Al

If you ask any Frontend developer - what is the one tool, except the browser and your editor/IDE, that you use the most? My guess is most would say the Dev Tools. The Dev Tools is the equivalent of the handyman’s toolbox. It helps developers to smoke out bugs. It’s useful for testing out different UI & UX. You can use it to elaborate with copy. It can show you what your page looks like in print layout. It’s great for tweaking animations. You can use it to trim performance and track your page’s memory footprint. …


What are they good for… Absolutely nothing!

Image from Unsplash by Christophe Hautier

A phenomenon we are seeing more of lately is flickering spinners. A brief splash of something spinning flashing before your eyes. Somehow you know it’s a spinner but you cannot make out the details. What just happened?

We do have fast internet nowadays. Back in the days, it was fine, whenever loading something over the network, to show a spinner. Things took longer time. Nowadays, things are a bit more complicated. Not only do we have faster internet connections we also load more data. That data comes in more requests and often in smaller chunks. …


When I came across SVG line animation a couple of years ago I was immediately amazed. I remember feeling that this was something I hadn’t seen before. It felt like a new direction for animations on the web. Something fresh. Line animation was at the time quite different from most effects used around 2013/2014. There and then most animations were CSS transitions, moving parts in all directions. SVG was sparsely used. This resembled somebody actually drawing real figures or sketching on paper.

Below are two early demos showing the technique:

If you are unfamiliar with how the technique works there’s…

Mikael Ainalem

Enthusiastic about software & design, father of 3, freelancer and currently CTO at Norban | twitter: https://twitter.com/mikaelainalem

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store