They say you learn something new every day.

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:

1px 

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.

Ifttt

However, I felt there were two tricks they’d missed:

  1. 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.
  2. 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.

App 

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.

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: