No pain

Small repeated tasks or new easy ones save the day. We need them because they make us feel productive and capable of doing more. We need them because they pay the bills.

However they’re not enough. Actually, the series of such tasks is the reason we get stuck. One day we open our eyes and discover we’ve left behind.

In all my life I got better when I had to accomplish a tough task. Something hard to achieve, or something under pressure, or both.

So this is a note to self, a quite simple to do: add a difficult task, a real expedition to uknown waters every now and then.

Do you want to make a difference? I guess so. I can’t find an easier or more convienient way than the one I said before. Or as the old men say: “No pain, no gain”.

What Successful Products Teach Us About Web Design

This is the title of my article published today on Smashing Magazine.

In the the article I talk about some successful products and I try to see what makes them so. What can we derive from their success and how can we apply this knowledge to web design? In my opinion it all comes to three things:

• The ability of the designer
• Focusing on the scope
• Iterations

But I won’t tell you more. Go ahead and read it by yourself.

Thank you Smashing Magazine! It was wonderful experience working with you. I hope I’ll come back soon.

We are the explorers

This is the title of a beautiful talk given by Mr. Simon Collison.

In this talk Collison sees the big picture: What makes a craftsman? Why, we web designers, are we considered to be craftsmen? Is not setting goals a better approach than setting and trying to reach them? The particular talk was part of the wonderful Build web festival.

It’s quite rare to find such a theoretical and at the same time very deep approach. Don’t miss it.

The Ultimate Guide to Readable Web Typography

To take the most of The Ultimate Guide to Readable Web Typography you need two things: to love typography and to have at least half an hour to spend in order to read the article.

This is a quite long and complicated but rewarding article. As the title says, it promises to show us the ultimate way to Web typography and I think it does. A great resource.

Solitude and Leadership

To become a leader sounds irresistibly sweet. Too many people dream of becoming leaders but too few can make it. Why? Because they hate solitude, no matter what they say.

Leadership and solitude seem to be two contradictory notions but they are not. No, really.

Do yourself a favor and spend the next 30 minutes of your life reading Solitude and Leadership.

The position of the leader is ultimately an intensely solitary, even intensely lonely one. However many people you may consult, you are the one who has to make the hard decisions. And at such moments, all you really have is yourself.

Wishing you…

Our industry, just like every industry, needs good people, who work hard to evolve and to provide better services. We, web workers, define the future and a medium that changed everything and above all proved to be the most democratic platform of all times. Let’s not forget this.

Also, let’s not forget our humanism. Because behind those efficient but cold systems there’s always one or more human hearts that make this miracle active.

Dear readers, for 2012 I’m wishing you the best: to be healthy and open. To have a wandering mind. And tons of love. 

Spinning and fading out/in icons with CSS3

This is an experiment with CSS3 ingredients. What we want to achieve is a smooth spinning and fading out/in effect with two icons.

Both icons hold the same position. One of them stands below the other and it is opaque. The other is transparent. On rollover both start spinning and switch transparency in one second.

Take a look at the effect

Here comes the HTML code:

<h1>
	 <a href="#"><span class="logo"><img src="..." alt="" /></span></a>
	 <a href="#"><span class="logo_off"><img src="..." alt="" /></span></a>	
	</h1>
	

And here’s is the CSS code, which is more interesting.

	 h1{
	 width: 283px;
	 height: 283px;
	 -webkit-transition: all 1s linear;
	 -moz-transition: all 1s linear;
	 -o-transition: all 1s linear;
	 transition: all 1s linear;
	 position: relative;
	 text-align: left;
	   }

	h1:hover{
	 -webkit-transform: rotate(360deg);
	 -moz-transform: rotate(360deg);
	 -o-transform: rotate(360deg);
	 transform: rotate(360deg);
	}

	span.logo{
	 opacity: 1;
	 -webkit-transition: all 1s linear;
	 -moz-transition: all 1s linear;
	 -o-transition: all 1s linear;
	 transition: all 1s linear;   
	 position: absolute;
	 width: 283px;
	 height: 283px;
	}

	h1:hover span.logo{
	 opacity: 0;
	}

	span.logo_off{
	 opacity: 0;
	 webkit-transition: all 1s linear;
	 -moz-transition: all 1s linear;
	 -o-transition: all 1s linear;
	 transition: all 1s linear;   
	 position: absolute;
	 width: 283px;
	 height: 283px;        
	}

	h1:hover span.logo_off{
	 opacity: 1;
	}
	

Take a look at the effect

For h1 we define the size of the icons and the spinning, which is linear and lasts one second.

Both span tags include the icons. We also define a linear animation for one second, but this time it is about the fade out/fade in effect.

As I mentioned above this is just an experiment. If you have any simpler way to achieve the same result (no, without JavaScript please), do share your ideas in the comments below.

UPDATE: Firefox has an issue with the effect which breaks there. Add text-align: left; for h1 to pass it by.

The new series of 24 ways

It’s December! The best holidays of the year are one step closer but for web geeks it also means that the new episodes of 24 ways are also here.

I follow 24 ways from the very beginning and it never disappointed me.

Let’s quench our thirst for HTML & CSS another 24 times.

Introducing Instabuck

There’s a new kid on the block and I think it’s quite interesting. Its name is Instabuck and it aims to help you sell easily your digital product. “Easily” is the keyword.

Modern times imposed the use of modern products. Most of them are digital ones such as music, art, books, design themes, code and the list keeps on. Instabuck is a very simple website. However it engages a powerful mechanism which makes selling easy.

This is a project of the mighty Venture Geeks and it is developed around the Minimum Viable Product strategy. My involvement had to do with designing the main website and the available themes among others.

There are lots to be said about Instabuck, its philosophy and the design decisions, but I feel we need to give it some time to breath and evolve.

Until then I suggest you to take a look at Instabuck and become a member in case you want to sell a digital product. Registration takes seconds and the service remains free for the 7 first days. I hope you ‘ll like it.

Featured on The Design Mag

This website was recently featured on The Design Mag, amongst the “20 clean and most beautiful Minimalist Websites”.

When I saw the article I thought “What? I don’t consider my design to be minimalistic.” Then I slowed down and saw how ridiculous was my thought. Who cares what I believe? These good people on The Design Mag selected my design and put it among some exceptional ones, it’s an honour.

Many times I see my website being among “the X best ones”. When I was younger I took such mash-ups very seriously. Now I don’t. Also, never ignore them.

And then came one more thought: does it matter? What does this (tiny or important) recognition means for me? Nothing at all.

Which is of course wrong. Again. It means something, if not I wouldn’t bother sharing the news with the people I follow on the social networks. Such showcases add fuel to the machine. It may last long or it may not. But it is something.

Then I stopped thinking at all. And all I did was to accept the fact. It felt OK.