A journey into the web...

wooble.io, make your website remarkable!

What is wooble.io?

wooble.io is an ambitious projet that aims to change how the web looks. Have you ever noticed that everything on the Internet look like the same? Well, to begin with, there is two types of website :

  • Websites that provide a digital service such as Twitter or Quora,
  • Websites that are about showing what the brand is selling such as Pillar Technology, in other words showcase websites.

While the first case is more likely to be unique because its look is dependent on the service it provides, the second one is only about informing people about a service or a product. For the moment I will focus on showcase websites. With showcase websites we can include portfolios and personnal blogs, even if the purpose is different, they all fall into the vicious circle of templates, which makes the Web so dreary.

Why wooble.io?

Since the explosion of the Web 2.0, we have witnessed the growth of the number of showcase websites. More and more brands wanted to be visible on the Internet, creating static pages was the salvation. Companies only had to pay a web designer to do the job. At this times the Web — especially the web design and the UX1 — was evolving. Everything that poped up was pretty, unique, creative, interesting, because it was all new. This trend ended when templates took the market. Showcase websites now mostly follow the trend of templates. Every companies, from the little ones to the bigger ones are able to show to the public what they do in a simple page which is enough good looking to attract potential users. Beside what the brand provides, what the user will retain? Certainly not how the website was presented because it looks like the one he saw before.

Design and UX for brands

Nobody should underestimate the advantages of a good design and a good UX. We can relate to products or architecture. What people will retain is the way it looks, the product or the service per se is secondary2. Here are some examples :

  • The popular success of Apple is mostly due to their particular products design and easy to use approach.
  • Withings has the same approach as Apple. Their products look simple and futuristic for some.
  • Tesla cars — we can easily name lots of cars brand here — design its cars to look sportive, aerodynamic and want to make them symbolize the strength despite being quiet due to their electric motor.

Without even testing their product or reading reviews about it, you feel like you can trust them because of their well engineered design, then the quality of the product is what will make you a substainable consumer.

When a company is branding its product or its service, distinguishing itself is a key point and making a showcase website should not infrige this rule. Let me show you some good showcase websites. I chose them because of their uniqueness, their appearance or their informative value :

Those examples show that it's possible to be creative and that the Web can become something more interesting.

Then, why wooble.io would change this?

I assume you know IKEA. IKEA sells ready-to-assemble furniture. Now, imagine wooble.io is a lightweight machine that assembles your furniture for you. But, there is something particular that doesn't exist in IKEA. On top of that, wooble.io allows you to add customable pieces that fits everywhere with your furniture, the pieces doesn't even have to be from IKEA.

Now, lets come back to the context of the Web. You have your website, it can have been made with a template, a CMS or from scratch — well, it only requieres to be a website. You want to make it unique, beautiful, astonishing but your don't want to change whole the website nor spend an incredible amount of time into designing. Wooble.io is your solution. It brings you an infinite number of customable website pieces you can include in your website in no time and with little web design and UX knowledge. Congratulation! You made your website a thing that will leave a mark on visitors.

That is weird, how this thing works?

I won't fool you, enlightened reader. Those "web design pieces" have to come from somewhere and someone who is not a robot, right? People will make it, as they always have. To begin with, please have a glance at codepen.io, it will help you to grasp the idea behind wooble.io. That's it, passionated, skilled and creative people love to make digital designs and to show them off. Everything is free here and you can try to include it in your website as you want. But, it's not an easy task. To do so, you have to make sure that the design will be compatible with all recent browsers. Also, you have to make sure that you include all the dependencies in order to make this piece works. Oh! And if you want to custom it and make it fits your website, you have to understand how it works, so you have to have some knowledge on web langages and tools3.

So, wooble.io is like a machine that spits out digital design pieces?

Exactly! A creative guy have an idea, he makes it, put it in the wooble.io machine, and users are free to push the buttons to get this piece whenever they want, wherever they want, wherever they are, whoever they are4.

Does it have a visual interface like an actual machine?

No, wooble.io don't have any interface in the sense we think of. It has a JavaScript interface which is lightweight and easy to use. Making a whole interface would have been like creating a big machine to put little pieces in websites, nobody wants that. Even a person who doesn't know JavaScript will be able to use wooble.io. Let's see a concrete example, a picture is worth a thousand words.

See the Pen Interesting three-picture layout by Kirill Kiyutin (@kiyutink) on CodePen.

You wanted an original image slider with text appearing in the middle, here is what you found. Typically, with wooble.io you would setup this in your website like this. Note this code could be in a JavaScript file or inside the HTML page with script tags.

var threePics = wb.create('three-picture'); // the name of the piece you want
threePics.init('my-div'); // div id where you want the piece to be put

Now that the piece is in your website — in 2 lines of JavaScript code! — you want to customize it a bit.

threePics.firstPicText = "My very first test of wooble.io"; // Change the first picture title
threePics.firstPicUrl = "../images/brand.png"; // Change the first picture url
threePics.secondPicText = "Hollidays!"; // Change the second picture title

... And so on. It is like pressing buttons, moving potentiometers or turning switches. Since each pieces has its own commands, each is documented. Documentation is generated but obviously requieres the creator of the piece to tell the machine what each command does.

It seems complex, doesn't it?

From the point of view of a web designer who wants to create a piece to put in the wooble.io machine, nothing really change from what he usually does. He only have to follow a standard for wooble.io which is as less constraigning as possible and is about JavaScript code.

From the point of view of a user who wants to enhance his website design, wooble.io is very simple even for someone who has no knowledge on web design. In the future, wooble.io could become a machine with a friendly user interface such as an application. It will depend on users feedbacks and experiences.

It is what wooble.io is

A digital machine which allows creative people to share their works and make it useful for others who are creative too, but who don't have time or knowledge to set it up by themself. It is a machine that helps a wide range of needs, from an individual who wants to show off his accomplishments through a portfolio to a company which plans to make its brand identity on the Internet.

You all can make remarkable websites.

1 User Experience

2 Still, it has to meet users expectation to be a success.

3 css - sass - less, js, html, svg, web components...

4 They don't even have to be web designer wizards to do so, it's really only like pressing a button on a machine.

If you liked it, share it!