Web 2.0

Last week, I had been doing some UI design which consists of many buttons. When the first time I did for review, they said my button is too flat and not delicious enough to click. Hmmm okay.. Actually it is hard to judge a good button design but certainly is lack of research material out there! So what makes a good button? Actually I also not very sure. After that review I tweaked my button design and some of them shown above.

I used a lot of blend modes to achieve the 3D effect above for example: Drop shadow, gradient overlay, bevel and emboss, inner shadow, inner glow, stroke, outer glow…. Wow that’s a lot, and sometimes, several layers is needed to make a button. It is quite troublesome huh? But i quite happy with the outcome until the next review :P.

Good button examples

Actually I had three buttons in mind that I think is very good button. First up the Apple button, the glossy effect is really stand out from the rest (Example shown is firefox’s macfoxgraphite theme). Next is the Iconbuffet button. It is bold and contrasting color with the big and clear text, located in big whitespace, which makes it nice element to the page design too. And final, actually I don’t want to credit this but, the button is really well executed! Introducing the popular fart button. The button is very dominating and 3D realistic! But I never clicked it. 😛

Free online button generator

Sometimes, let the app do the button design for you, haha. Cool. Below are some websites that offering this service.

1. Buttonator – drag and drop web buttons (need pay thou for more option)
2. Adam Kalsey’s Button Maker
3. My Cool Button – Web 2.0 free button maker!
4. YaBB Button Generator – flash based generator. Slick but IMO it’s not very convenient.

5. Button maker web – I think this is far most the best button generator site. It has the most options and variation of designs available. Sadly it’s only in Japanese currently.

Extras

In the meantime of writing this post, DesignWalker posted an article about ways to execute icon’s shadow effect which is quite comprehensive and inspiring which I think is applicable to button design as well. Click here to read and grab the free useful resource file. Plus, Alex Griffioen’s How to make sexy buttons with CSS article, which i think is quite useful.

Everything needs identity. For human, we have name as our basic identity. In medieval era, heraldry was used as identity, which now is still visible in modern world. For companies, brands, society etc, they need a logo as identification. Logo is important because it represents the company to the world. So logo has to be eye catchy, unique yet easy to remember.

Designing logo can be fun, but actually it can be a painful process too. I can struggled easily during the logo design development. You need to do some research, or look into other logos to get design inspiration. So here I compiled some sites that will help you to get inspiration.

Continue reading