Animated Lottie Logo on Squarespace

I’ve done some updates at this site and created a new logoanimation.

But it took some time to find the right solution, so here’s a short guide on how to set it up.

Add the logoanimation

First we need to add the JSON-file to the site. This is just a placeholder so we have it visible some where. A perfect spot is in the footer, since that is rendered on every page.

So Edit the footer at the bottom of the site and add a </>Code block.

In my case I added this:

<dotlottie-player src="https://lottie.host/f1d113e1-399e-4a5c-a0af-1158553f0418/qXgNIAYkgD.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player>

And if you want it to link back to your index page (first page), add this before and after the lottie.

<a href="/"></a>

Like this:

<a href="/"><dotlottie-player src="https://lottie.host/f1d113e1-399e-4a5c-a0af-1158553f0418/qXgNIAYkgD.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player></a>

Add the engine

Next we'll find Website Tools. Go into Website, Pages and scroll down and find Website Tools.

Here you are going to add the Java Script driver so the site understands how a JSON-file from Lottie should be played.

Scroll down to the Footer and add this script code.

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

So this is adding the engine to your site. Every Lottie JSON file will now be played like it was a native solution.

Move it to the header

Then we need to change the position of the </>Code block to the menu.

In the code below, the div#... is the code-block div number and unique name for that div block. This will have a totally different name on your site and will change if you for instance add a new code-block. Use Inspector/Inspect in your browser of choice to pick that name.

The div#... will then switched placement with the .site-title. The Class name, the .site-title, can be different on your site, so change it accordingly. So the code is:

<script>

  $(document).ready(function() { 

		$('div#block-yui_3_17_2_1_1705391194356_4861').appendTo('.site-title');

	});

</script>

Hide the old logo

Then we need to hide the old logo. If you use text only as a logo use .site-title or something similar. If it's an image use .site-title img, and display none will hide the old logo.

<style>

  .site-title img{

    display: none;

}

</style>

That’s it. Hope it works for you too, and comment here if there’s any questions.

Time for annual reports

Just finished with Norges Klimastiftelse Årsrapport 2022 design. This is a web annual report that has clickable links but still possible to print and still be able to get a hold of the content.

Norges Klimastiftelsen or Norwegian the climate foundation work for a society without emissions of man-made greenhouse gases, and always interesting what they do and really glad to help.

Take a look at these examples, made with my own package called PolarWhite.

And see the pdf annual report here

View fullsize

View fullsize

View fullsize

View fullsize

A social network for Fantasy Football - my first full app-design

For some time now I’ve worked on app-design for WonderBoy.

It’s a social network for fantasy football, a hub for all your fantasy leagues and give you ability to manage mini leagues and win weekly prices.

Read more about the project here:

Dr Greve Pharma +

I helped Neue to create a video to tell about their concept for Dr Greve. They worked Dr Greve to make a new line up of products called Dr Greve Pharma +. Dr Greve is a well known gentle skincare brand sold at Norwegian supermarkets. They saw an opportunity to expand the brand further with a new skincare product range sold exclusively at Norwegian pharmacies.

Learn more about the design and product over at Neue website.

Added two new 2018 projects

Happy New Year!

2018 were a really interesting year in business. I had a lot of different kinds of projects and I want to update the site though out January (hopefully if I have time, but who knows).

I made my first book for large scale printing. It’s a handbook about art. Take a look at the page.

I made more web-animation. This time a singing symbol for the app Voisey.

Conductor of Light product showcase

As a further development of the Conductor of Light brand and webstore we created a new product show case.

The reflective tweed button is a new type of product, and unusual in its product segment. Typically a reflector is a piece of plastic, Conductor of Light is a more little piece of jewelry of fabric and reflective thread, with a sensible function. To help understand what the product is, and to give a sense and felling, usage and function, it needs a good presentation.

Every colour has now it's own identifier that communicate a feeling. Gentle grey is a rainy grey day in a Norwegian fjord, Vibrant Yellow is the strong winter sun at the top of a mountain, Blueberry blue is a succulent blueberries, Forest Green is a autumn foggy pine forest, striking red is the warm red sunset and Perfect plum is some ripe plums ready to be eaten :)

The identity is a combination of British Tweed culture, Norwegian weather and light, and the autumn/winter season.

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

Vibble app won a DogA design award

My connections to the Vibble app is many. I've done work directly with SoundIO that produce the app, making a logo introduction for the app using bodymovin for After Effects, and I've also made a presentation video for Neue that shows the brand identity.

So I sort of win a DogA award too :) !

I made this brand identity video presentation in collaboration with Neue for the Vibble App. The app is mixing made easy using streaming services combined with dj functions.

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