For a long time when I wrote CSS and needed to put a line around something, my go-to code was:
border:1px solid black
I just loved one pixel of pure solid black. Here it is in action:
See. 1px of black border around everything! Then, when using IFTT I had a bit of a change of heart. I loved their bold blocks of large colour.
However, I felt there were two tricks they’d missed:
- They didn’t have any hover over effects. I’ve realised that this is really key on any sort of application, and web apps in particular. You really need to give the user some sort of feedback, or show them visually that they can interact with the button in some way. Not to mention it makes the site nice to use. The hover over effect on this page is my favourite part.
- They don’t have any borders. I think this is a missed opportunity. Borders are a really nice effect. If I was designing this, I’d give those buttons a hover over effect and a thick border.
Now, I’m not saying they’re wrong, I’m just saying that is how I’d do it.
I was a bit inspired by the IFTTT page when I had to design a little application at work the other day for logging tasks. Each of the large buttons below has a hover over effect when you mouse over it.
The thick lines, I think, really bring this to life.
Browsing Tumblr themes the other day I found a really nice one that I’ve added to my personal Tumblr.
The thickness here is 5px. Which is thicker than I’d go – but actually I love it.
Again, I feel there are a couple of tricks they’ve missed here. The border around the “About” box looks out of place, and the icons for the types are a different style to the rest of it. But I love this theme. I’ve been meaning to properly redesign my theme for this blog for a while, so I may do that soon. This style has inspired me.