Motion Design, the future of web

See this great interview with Rich Fulcher a thought full speaker with lots of great tips to any designer.

I'm not really a huge fan of Material Design or Google design decisions in general. It's never flawless and to many visible mistakes. Hard to pinpoint a good example, but there's a lot (why isn't there a google image search for iPad?). I know they user test a lot, but hmm, still there's some strange over locked stuff.

Anyway, I like his conclusion, that I also can stand by, is that animation, or motion design is the future on web forward. Still lifeless slides is about to end.

I'm working on new ways of using animation and there will be some work presented in the future. But for now I have two great examples: https://www.filmskolen.no (scroll down and up and look at the logo) and Vibble app intro: https://www.vibble.co (Just download the app and see :)

Rich Fulcher leads Material Design and Engineering at Google. In this episode, he walks us through the story of how Material Design came out, what's involved in building your own design system, and the importance of investing in your design culture and how you grow talent.

Photo by Edho Pratama on Unsplash

Why you should stop using Chrome!

Over a couple of weeks I have tried to fix an image problem. All the images I uploaded to a site looked really blurry on Chrome. Of course this post can be out of date any day, but February 2018 this is relevant :)

Chromes doesn't handle image scaling very well. These days with responsive design, we design sites with percentages, will sites and images be shown in many different sizes. It's crucial that everything looks good on any platform.

View fullsize

View fullsize

Firefox 58 and Internet Explorer 11 (haven't tried on Edge or Opera), look like expected, small size thumbnail images is crispy clear.

But Chromes result looks out of focus and horrible. Yes, this can be seen as nitpicking, but as shown in the picture above you can see the difference clearly.

And weirdly enough theres is an easy fix, and why this isn't standard on Chrome beats me.

To gain a better result, add this code to you CSS:

image-rendering: -webkit-optimize-contrast

View fullsize

View fullsize

Since most sites don't have this image-rendering CSS added to their site, you are guaranteed that the web looks worse on Chrome. Use Firefox! :) Images in Firefox are even sharper than the image-rendering enhancement.

View fullsize

Here I flip between Firefox, IE 11, Chrome and Firefox

View fullsize

Here I flip between Chrome and Firefox

PS: I have nothing to do with firefox, I only want you to have the best web-experience possible :)

Katrin Berge portfolio site

We have now published Katrin Berges' new portfolio site!

We've worked on this for some time, and shes been eager to release the site as fast as possible, And now it's here!

She does hand drawn illustration of the mystical kind.

Lottie - The new way of doing web and app animation

Sometimes you get to try a technique that changes the way you ser new possibilities.

This time it's Lottie. A converter tool created by Airbnb. Yes, that Airbnb.

You can create your animations in After Effects, and by keeping it to simple shapes, masks and keyframes for the animation (no effects supported).

It uses the Json creator tool called Bodymovin that are pluged into After Effects, and Lottie is on the other end handling the app part.

I used it on the Vibble app opening animation. A simple logo reveal for the easy DJing app.

The system have some huge limitations that I've came across . Like inverted mask. That's a no go.
In the logo reveal case I needed subtracting forms, but that didn't work, and I ended making tinytiny bridges that connects the different part, and create one single form. This isn't noticeable for the viewer, but adds an extra step to the process. If possible use layered shapes that are overlapping with it's own fill.

So it's early days, but it's new possibilities on the horizon. And the file sizes are tiiiiny. Like 9 kb for this animation. 

You can get the Vibble app in the iOS app store.

I created this short and sweet logo reveal for the Vibble app, an app that simplify DJing