Hi I'm Alessandro and I'm the owner of significatocanzone.it.
An italian website that permit sharing of songs meaning and stuff like that around music.
The big part is a sort of wiki system where people can add fact or edit that.
The website is written in Rails and i would like to open source it in the future.

But after this introduction i think that we can go the the core of this post: i bought Refactoring UI and i would like test indications of it it in the new feature of website.

I want to add facts about singer.

This is the actual situation of facts index (very ugly).

Dont get lost

I will try to follow the first indication of the book:

Start with a feature, not a layout

For this reason i try to reason only around the feature.

The feature facts already have a shell so i can go to the next step. The book in first chapter suggest "details come later". This is very important advise that also in my daily work i try to follow. In the past i lost a lot of time in thinking little detail. You have always to think that the google interface for the first decade was very rough.

The book suggest in first phase to use a big crayon to sketch the ui to preserve you to get lost in little detail.

This phase make evident that i have to work on two item: tabs for artist page, fact item.
I choose to work on tabs first.
So i developed the function with same graphics of before.

After inserting some content , I realized that there is an important problem with the readability of  the font on the site.
So i want to try to improve typography.

The Refactoring UI book suggest to use a fixed size and list something like this:

• 12px
• 14px
• 16px
• 18px
• 20px
• 24px
• 30px
• 36px
• 48px
• 60px
• 72px

In same time the book suggest to use px or rem and to avoid em units.

After some work i improved the colors. The content now is more bright than stuff in background.