This is the first post of a series called Widget of the Week.

As the name implies I’ll be creating every 7 days a widget based mostly on dribbles from UI Movement.

Transforming a gif to a full working HTML control is not as easy as it sounds, so I’ll be also writing about the process and explaining the reason behind the solution for the tricky parts.

Without further ado, this week widget is this toggle control:

Preparing the elements

First we need to identify the parts of the widget, at first sight it looks like we need a container for the control, a background, the ball, and the faces inside the ball.

Continue reading

You might be familiar with the scenario. Months of hard work, sprint after sprint, features and bug fixing, and now your project is ready to be deployed. The countdown starts at the same time that the nail-biting, and then… the site is up and running.

Everything looks good, no 404s, 500s, etc. Just when I was ready to relax, I noticed that there was something weird, the header menu was not showing at all!

Continue reading

Looking into an old project, I managed to scavenge a couple of SVG animations.
It might be a bit simple, but it shows how a couple of lines can bring to life simple SVG nodes, and adding just some kBs to your site, unlike a gif, video or a sequence of images.

The icons were part of a menu for an advertising platform, so you could choose the type of interaction you wanted for your ad.

Continue reading

A couple of weeks ago I watched this talk about CSS grid and how it changes the way we layout our web pages. I decided to give it a go, tested some basic layouts and then changing the way they display with some media queries.

I was amazed by how easy it is and how it cures your site divitis, here’s an example of how drastically you can change your webpage element’s position  without lots of complicated rules:

Continue reading

I worked on a quick adaptation so Signum can be launched for both windows and mac.

I thought about releasing the game on steam greenlight, but sincerely I want to make some more games until I find the one that could make it to the big leagues.

Meanwhile I discovered Itch.io an indie platform for indie games/software. Its a really robust platform with many options, you can have a customized landing page and choose the percentage that Itch.io gets when someone buys your game. Also you can make your game free with an optional payment and receive donations.

Finally here you can download Signum, or if you want to know more about it visit its Itch.io page.

platform_chooser_smallAn animated menu that is used to change the current platform.

The problem that this widget solves is to be able to change platform quickly without having to load another view that just shows the platform listing.

When a user clicks the current platform, it returns to normal, in any other case, the content is hidden and a loader appears to indicate that the user is being redirected.

 

The animations were made with the GSAP and the cards designed with Materialize.

card_slider_mobile_small

An intuitive easy to use card slider based on material design principles.

The objective of this widget was that the user could have a quick view of many statistics and chunks of data, from their devices without cluttering the screen.

The user can swipe back and forth, and the cards cycle, just as if the card you last swiped went to the bottom of the pile.

 

The animations were made with the GSAP and the cards designed with Materialize.