Studio
GithubDribbbleTwitter

A tool to create unique organic SVG shapes 

See it live

Services

Web development

Data visualisation

Product design

User interface

User experience

Blobmaker is a project we came up with during New Years holidays in 2019. We were working on a project that required many unique organic svg shapes and noticed that it was time consuming and quite difficult to design them manually.

In our client work we often work with various types of visualisation techniques depending on the nature of the data. Usually we explore the best visualisation technique for the data at hand. With Blobmaker we took a different approach and started from a specific visualisation form — the radar chart. We realized that organic, smooth shapes often used in design are visually very similar to radar charts and decided to create a tool to generate them.

Blobmaker.app was launched on the 3rd of January on Product Hunt, where it became the #1 product of the day and #2 product of the week with an average rating of 5.0/5. Blobmaker.app has an average of 45,000 unique visitors every month.

Blobmaker - Create organic svg shapes in just a few seconds | Product Hunt Embed
Blobmaker - Create organic svg shapes in just a few seconds | Product Hunt Embed

Choose a color, set the complexity and contrast, randomize and download.

Randomize!

Responsive behaviour

Although most users visit Blobmaker on desktops, we wanted to revisit it and make it as user-friendly as possible on smaller devices.

In our last iteration we re-arranged and re-sized the UI elements to make them more accessible and easier to use on phones. Since clicking the randomize is the main action, we moved the randomize button in the center right under the blob with the sliders for contrast and complexity underneath.

Serendipity

We wanted to make this tool not only useful but also fun. We added the randomize button that allows you to choose a unique blob based on your settings. To highlight the idea of random and encourage discovery through a playful interaction, we created a custom dice icon that animates when clicked. Finally we added a transition animation that makes the blob feel more organic and bouncy.

The main action on Blobmaker is randomizing the blobs according to the selected parameters.

Have a project in mind? Get in touch and let's make something cool. 

hello@zcreativelabs.comGet in touch

Newsletter

Sign up to get our latest articles on design, data visualization, and code directly in your inbox.

z creative labs GmbH
Sihlquai 131, 8005 Zurich
Switzerland

GithubDribbbleTwitterEmail

© 2020 z creative labs GmbH