Category Archives: Buttons, Bullets & Badges

Buttons, bullets and badges in web design: a great showcase of sleek, glossy buttons for websites, graphic and typographic bullets, shiny, glossy badges at Web & Patterns, collecting inspirational solutions for very inspired web designers.

Gleam and sheen on Thoughtbot website menu

thoughtbot-sleek-tech-inspiring-navigation-menu

Though we’re not big fans of overtly tech webdesign and we prefer warmer, more organic solutions, we loved the cleanliness and the powerful, warm glow that this website’s menu radiates.

Another nice design snippet we found on Thoughbot’s website is the brownish, rounded contact us button which really stands out, partly for its effective color contrast and partly for its unusual position.

Creative web buttons from Agentia Kairos

agentiakairos-inspiring-web-buttons

The latest thing in web buttons design appears to be the icon-button, a classic graphic button with an embedded icon. We like the fact that icons are able to bring to the forefront button’s intrinsic action and set you free from reading (or in this case understanding) textual labels or explanation.

Slightly transparent play button from Tapbots

tapbot-inspiring-transparent-play-button

Here you are a slighlty transparent play button that nicely fits in the overtly hi-tech layout of Pastebot’swebsite. For the ones interested in Iphone apps, we can add that Pastebot is the last creation released by Tapbots factory,

a powerful clipboard manager that stores text & images copied from your iPhone/iPod Touch. Organize, apply filters to, and copy clippings to be pasted or sent to other apps.

Inspirational badge and search form from Dubai Mall

dubai-mall-search-inspirational-badge

This inspirational badge hanging from above, enhances the visibility of Dubai’s Mall form search.

If you’ve ever wondered about this shop here you are some further informations:

The Dubai Mall is the region’s premier shopping, lifestyle and entertainment destination. With more than 1,200 stores and a host of world-class attractions, The Dubai Mall is revolutionizing the modern shopping experience.

Peepnote’s biggest button

peepnote's biggest button

Since I’m blogging, my Twitter’s contacts are growing in a freakish way. In a while, using Peepnote, an online application developed to keep your peeps (which is this app’s lingo for Twitter’s followingorganized, will be more necessary than useful.

I love the interface’s vibrant colors and the warm appeal of the whole design, but what I really think work fine in Peepnote it’s the sign-in button.

The way my brain processed the button’s visual presence might have been, more or less, the following:

  • it’s clearly the biggest button on the scene so its size tells me, even before reading anything, that’s the one that makes the whole thing going;
  • it displays Twitter’s logo so this stuff is evidently Twitter related
  • Am I a Twitter interested person? Sure I am. So, let’s see what it’s all about.

So here you are the true story about how I’ve got hooked into using Peepnotes.

tehCpeng’s call-out & badge

tehcCpeng's call-out and badge

TehCpeng is Shen Hang’s personal blog: Shen’s a Malaysian engineering student, a capable photograph and a devotee of the-C-peng which is this visually stunning tea drink.

While we’re looking for where to find the-C-peng in Milan, we’d like to show you the cafeteria badge hanging on the top right corner and the red/yellow tabs, you can find scattered all over the site: the slight shadows they cast, make them really pop out.

In the realm of antipixels

brilliant button maker: an antipixel generator

Web design work routine may be fairly interesting one moment and the other a complete bore. So that’s life and we can only try to be sensible by accepting what we can’t change.

But when I was asked to design a badge add-on in five different sizes, I couldn’t help myself from sighing. The smallest among these formats, which I’ve seen online several times but I ‘ve never cared much about since I’m TOTALLY NOT a badge person, is named (at list here in Italy) anti-pixel. That sounds fun because it reminds me of nonsense things like Star Treck’s engines being powered by anti-matter and how anti-matter if not properly dealt can lead the WHOLE universe to destruction.

So while I was dutifully designing my own badges, I was figuring out how, once created, that schmuck antipixel (which by the way is a simple 80x15px banner) would blithely turn out lethal and get the entire Web thing annihilated. Obviously, it didn’t.

If you don’t want to get too philosophical about antipixels and non conventional physics applied to the Web, but your only desire it’s to to go fast through this kind of task or you’re simply looking for some inspiration, you can check Brilliant Button Maker out, an “antipixel” gif generator that also allows you to upload tiny images.