Web 2.0

A beginner’s guide to Web 2.0

A beginner guide to Web 2.0

Remember when first knowing the term Web 2.0, I have no idea about what it is except Web 2.0 is the latest generation of web trend. It took me sometime to have a clear picture of it. So, if you are new to Web 2.0, this post is for you because I will teach you the best way to understand the Web 2.0 and what its web design trend.

Learn from the term inventor – Tim O’Reilly!

Tim O'Reilly explaining Web 2.0

The term Web 2.0 is invented by Tim O’Reilly, during a conference in 2004. According to him “Web 2.0 is the business revolution in the computer industry caused by the move to the internet as platform, and an attempt to understand the rules for success on that new platform.” He posted an article title “What is Web 2.0” to explain the essence of Web 2.0. Here I quoted the graph from the article that is showing the movement of web 1.0 to web 2.0:

Web 2.0
Google AdSense
upcoming.org and EVDB
search engine optimization
cost per click
web services
tagging (“folksonomy”)
Web 1.0
DoubleClick –>
Ofoto –>
Akamai –>
mp3.com –>
Britannica Online –>
personal websites –>
evite –>
domain name speculation –>
page views –>
screen scraping –>
publishing –>
content management systems –>
directories (taxonomy) –>
stickiness –>

Continue reading

16+ the ten list for web designers

As web designers I am always hunt for resources on the web, for example tutorials, gallery showcases, and thoughts from the experienced designers so that I can learn something from it. I subscribed to many designer’s blog feed and surf Del.icio.us regularly, and I found out some The Ten List from various websites to inspire and help many web designers.

What I mean about the ten list is that an article that contains ten essential points that presented in a list. I categorized them into several big categories for better navigation. Please have a look. Continue reading

ArtzMania Super Web 2.0 and Blog addict meter

To all web 2.0 lovers out there, great news that Artzmania released an e-book about collection of web 2.0 graphics and innovation, free for download at here. I already download and gone through the book, it shows some nice web design showcase, separated in different categories.

Plus at the back, showcasing web 2.0 logos, some useful articles that posted on the net. But sadly, these articles is not linked to the original post. A sat back here. It is not really a comprehensive book about web 2.0 (because most of them I knew already) but it worth to take a look. Nice cover thou.

How Addicted to Blogging Are You?

71%How Addicted to Blogging Are You?

Originally known this through Etsuko‘s blog, and I curious to test how addicted I am too. After gone through the 14 questions, I got the result that I’m 71% addicted, hahahaha. Yeah, I’m pretty addicted to blogging somehow :-D.

If you are a blogger, please try this too, it is fun mot to mention to nicely designed layout and easy to use navigation. Great! If you tried, don’t forget to post it here or spread this site in your blog hehe.

About button design

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.


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.

7 Delicious Web Design Galleries

Web design gallery is the great inspiration place for many designers and enthusiasts. It showcases the best sites that combines both usability and aesthetics of design. Getting listed in one of those could be a great honor to the firm and the designers. Here, I present some of the sites that showcases the great web designs and each gallery is unique on its own, read on!

Continue reading

Logo inspiration sites you should’t miss

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

10 simple ways to make glossy button

Woot. My first tutorial! Glossy button is current in thing in web design, because it is eye-catchy, pretty and friendly. Not sure about how the trand started but I pretty sure is Apple button style! There are some ways to “glossify” a button, which I will teach you how to make below. Tutorial work file is included also. But first, let me teach you the simple steps of making a glossy button.

Continue reading

Don’t have Photoshop? Try Picnik

Yesterday, I read through an article about the “25 web Sites to Watch“, I stumbled upon this website: Picnik.com. The web site is nicely designed with eye soothing graphics like grass and faded clouds. It is an online photo editor with some basic tools like: Resize, Crop and so on, plus with many cool and handy filter effects. You can just simply sign up, and start edit your pictures!

I like this website and the convenience of the service, it is real cool. Definitely a site worth watching at!

Open Source Food Logo

This is the site that inspires me to write this post. Introducing OpenSourceFood. It’s about food sharing and rating community site. When I entered website, immediately attracted by the cleanliness, user friendly layout and.. the LOGO! The logo is a sliced boiled egg, constructed by just using two round shape, one yellow on top and a bigger white circle at back. Plus supported by the text “Open Source Food” at the side. I think the font used is “Myriad Pro”. Well, if you have some nice food to share or lack of cooking idea, be sure checking out this page!

Besides that, I gathered some sites that serves similar function which has a quite nice logo too. Be sure to continue reading!

Continue reading