I immediately noticed and loved the plus sign used in the submit button of this huge, “organic” form.
This is a quite obvious example of a simple and useful user interaction: you point the mouse over an object’s pic in Svplly‘s catalog and an “add” button shows up. The implied behavioural pattern is very understandable: if you want something, just catch it.
Nicely styled button for a funny, little flash game where stylists compete in creating the best outfit.
When you move your mouse over the red button, the pin icon starts its crazy spinning.
This huge semi-transparent button obviously steals the show from any other graphic elements.
By the way, when they say “give a goat”, they mean it. Literally.
A split button is a rather creative idea to add an “advanced-search” link to your website’s search area.
Lovely idea: embedding previews into gallery navigation buttons.
A cute white rabbit jumps persistently on a pink, stitched badge, making it sink underneath the browser window. A nice visual trick to invite users to scroll.
A segmented button allows you to feature two or more different actions using only one GUI element.
In this example, active areas are colored while the price information, though it’s framed in a major graphic element, is just selectable text .
CommendableKids.com allows parents, teachers, and anyone who cares about children, to register a child and begin awarding them badges for their hard work, milestones, skill developments and anything else you believe deserves commending.
Love these simply yet greatly styled badges and their perfect color-schemes.
Who’s afraid of big glossy buttons? Though they’ve been on the scene by years, they’re still the most common and direct way to create “call to action”.
Granted that teehan+lax website portfolio is one of those sites that cannot fail to be in your favorites, we found this “launch site” button symbolizing an external link an agreeable change from the expected arrow icon.
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.
When you click on the huge button on the top of Why Every One Loves Tumblr page, you’ll see a big check list menu appearing with four differente choices.
This is a peculiar way to navigate between section that I’ve seen only here but I think that may possibly turn out useful in many other situations.
Glossy buttons age it’s not over yet and so we quite enjoyed Madsen Cycles ecommerce buttons because they really stand out in opposition to the overall layout minimalism.
A shiny circular peeling badge with a white dashed outline. Nice idea for highlighting your website interface.
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.
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.
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.
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 following) organized, 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 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.
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.
Earthy, neutral colors and a gritty texture give these buttons a strong organic appeal. This hint is intensified by the zen-like environment they levitate in.
PS If want to know see more about Ecoki you can visit the website or read our post.
I loved this huge, multi-layered, partially glossy, partially transparent, play button for video players, the second I saw it.
SiteInspire is a typical inspirational gallery of web sites with a peculiar kind of tag cloud, made by mixing two types of buttons: the dark ones represent the “real” tag associated with the site, the light gray ones represent the category the tag is associated with.
The button to activate Babel With Me (a beautiful and useful chat service that allows simultaneous translation in 45 different languages) is huge and clearly stands out.
A nice idea to present projects in one’s portfolio: designing them as pin /buttons.
Spokeo’s price plan: a search engine to find people in the most popular social networking and public databases.
Interesting the idea of giving evidence and distinguishing a button by overlaying a badge.
CoTweet is a platform designed for companies that, through Twitter, want to manage existing customers and possibly attract new ones.
The button to request product’s beta is huge, but welll integrated in the whole visual treatment.