Tom, Dick & Harry – hand crafted effort

Tom, Dick & Harry is an agency from Chicago that look at design as a craft. This shows through the worn aesthetics of their site. The site takes advantage of the new exciting typographic abilities of the web.

Tom, Dick & Harry - big image

The hand crafted block navigation takes up a lot of space, but instead of this being wasted above the fold space, it adds to the main graphic element of the page.

Tom, Dick & Harry - restricted colour scheme with full colour used to highlight

The site has a restricted colour palette, using full colour to highlight selected projects only –  nice and subtle.

Tom, Dick & Harry - Results O Meter

As you navigate through the site you are delighted by interactive and self styled elements.  We love the Results O Meter.

Gourmet Glaze Doughnuts – a psychedelic sugar trip

For a small doughnut shop in Adelaide this site sure stands out. Tickling your potential customers’ tastebuds purely through imagery is not always easy, but Gourmet Glaze does it well. As you visit the home page you are immediately greeted by what look to be the visions of someone experiencing a psychedelic sugar high, which we love.

Littering your site with flashy animated GIFs is usually a big no-no in web design (we all have fond memories of Geocities), but here they come together well to evoke a real patched-together home-made feel, which is what their brand is after.

And we don’t usually like horizontal scrolling but for this site…

Gourmet Glaze Donuts - Menu

…it works, especially on the Our Doughnuts page.

Horizontal scrolling on the Our Doughnuts page

Gourmet Glaze goes to show that sometimes violating a lot of the “rules” of design will work in your favour, and we love the way their design choices have created a fun and compelling website. Good inspiration for those who are looking to use retro or psychedelic imagery for their own site, or who want to find out how using seemingly endless amounts of different fonts together can somehow be a good thing.

How do you rate this?

Victoria’s Secret Facebook – amongst the very best

The Victoria’s Secret Facebook page is always featured amongst the top 10 best Facebook pages on most industry blogs. This is well deserved, as it’s not a complicated or showy. They have a basic fan gate set as the landing page.

Victoria's Secret Facebook - Fanagte

The great thing about Facebook is it can be changed easily with new promotions, and Victoria’s Secret keeps their page dynamic through lots of channels to highlight current offers. The most impressive component of this Facebook page is the beautiful photography of the Victoria’s Secret models – motivation for fans of both genders.

Victoria's Secret Facebook - Fashio show count down

The count down to the Victoria’s Secret Fashion show will have fans signing in multiple times and the videos are short but very sweet and entertaining to watch. Added bonuses include access to free wallpapers and iPhone and iPad apps.

Victoria's Secret Facebook - iPad and iPhone apps

How do you rate this?

Method Design Lab – simple design elements

The folks at Method Design Lab designed their site with a unique feature – the innovation feed. Being the site for a “design-centric, user experience driven” accelerator, their own innovation is reflected in this dynamic presentation of innovation news from around the web. Posts drop in from the top of the page as strong graphic blocks, with the visitor able to choose how far back in time they’d like to view. The posts take on various combination of capsule-like shapes, giving an air of uniqueness to each one, as colour is subtly used for emphasis on various shades of grey, and to great effect.

Featured, or highlighted posts are emphasised with size, with all surrounding blocks adjusting to fit together nicely. This site really demonstrates how the simplest of design elements can be very powerful if used in a dynamic way.

Method Design Lab - select by the hour

Method Design Lab - post drop down

Method Design Lab - excerpt

How do you rate this?

Hoefler & Frere-Jones – premium typography

There are many good quality free fonts floating around on the net, but for all-round typographic cleanness, consistency, and attractiveness, it’s difficult to beat premium fonts by typography professionals.

Hoefler & Frere-Jones have been designing fonts for over 20 years, and have developed a reputation as masters of typography. These are fonts designed for a range of applications, including both print and web design. For web design, their range of fonts can be used effectively for headings and logos, but unfortunately their licenses currently do not allow use of their fonts using the CSS @font-face tag. However, they say support for this is coming soon, as they believe web type should be displayed as text, not images.

Their website is also nicely designed. It’s clean and usable, like their fonts, with featured fonts displayed prominently on the home page.

Tasteful colours on rollover bring this page to life

Their handy Test Drive feature lets you try before you buy

Our favourite feature is their Test Drive, which lets you see how your text will appear in any of their fonts, before you make the commitment to buy them.

How do you rate this?

Namechk – username availability checker

Ever thought of a brilliant username, used it for one of your social networking properties, only to find out someone beat you to it on virtually everything else?

Name consistency, particularly for brand promotion, is key to a complete social networking or bookmarking campaign. That’s why it’s important to check if your desired username (and therefore short URL) is available on a range of networks, before you even start to register it.

However, checking the availability of lots of potential usernames on a range of social networking or bookmarking sites could take forever. Fortunately, there’s Namechk.

"Eugoogoly" is already taken on WordPress.com? Damn!

Namechk quickly checks up to 159 different social network and bookmarking sites simultaneously to see if your chosen username is already taken. Each “taken” entry also links to their respective user page, so you can see what that person who has your desired username is up to, and if they’re not active, they may be willing to give it up.

From a UX perspective, we like how all critical content is maintained on the same page, using colour coding to avoid clutter and confusion.

How do you rate this?

Burt’s Bees – fully interactive Facebook page

Personal care products company Burt’s Bees have a good example of using an extensive and interactive Facebook page to generate interest in a product.

Using a Facebook page primarily as a launch platform for new products is a great way for businesses to jumpstart interest and get their products out there, especially for pages with a legion of fans, or subscribers. Implementing “fangates”, that is, requiring users to like the page before they can use an app, helps to increase your userbase, and gets your updates right into the news feed of your users.

Burt’s Bees now have a variety of Facebook apps with competitions and the ability to send discounts to friends. Their latest app is a tool for customers to determine which lip shade and type is right for them, by using a series of choices to determine the result. This kind of fun user interactivity encourages users to buy their products, as well as giving them something free out of the process. Burt’s Bees also lets them buy their products directly from their Facebook page, a good way of generating sales without forcing users to navigate to another website.

Lips go bloom - Find your shade

Lips go bloom - which colour suits you?

Lips go bloom - what kind of coverage?

Lips go bloom - which shade family?

Lips go bloom - we think you'll love

How do you rate this?

Global Humanitarian Assistance – three tiered navigation

Handling complex, multi-faceted topics, such as humanitarian assistance, in a clear and concise way is always a healthy challenge for UX designers, and designers Hype & Slippers have done a great job on the website for Global Humanitarian Assistance. Built in WordPress, the home page organises the large amount of information available on the site in small, bite size pieces for easy consumption, maintaining the user’s interest.

The user’s navigation through the site is unique, taking the form of three main tiers – the main menu at the top of the page, the nifty “Work Streams” wheel, and the yellow “Data & Guides” tab that appears on hover on the left of the page. A lesser designer might have implemented these multiple navigation techniques in a cluttered and confusing way, but here the design carries them well, using these navigation options to delight and inform the user, rather than leaving them bewildered.

Global Humanitarian Assistance effectively combines multiple navigation methods on the one page

Well designed infographics are a great way to captivate visitor interest

Global Humanitarian Assistance - Sweden

Our favourite part? It’s the ‘Work Streams’ spiral navigation graphic. The animation is smooth and clear and the information you are guided to is incredibly interesting.

How do you rate this?

Launchlist – handy checklist for web designers

There are a lot of things to check and double-check before you send a new site live. Spelling & grammar, SEO, HTML & CSS validation, cross-browser compatibility…. the list goes on. If you don’t have a comprehensive checklist to work your way through, it can be easy to forget something important. You could easily send a sub-par, badly optimised website out into the world, and nobody wants that.

Launchlist is a handy checklist tool for web designers and developers to help you make sure everything is done right and well before sending your site live. The Lite version is free, and lets you check off various essential site testing elements they’ve added, as well as any of your own custom checks you’d like to add. You can then email this to yourself and up to 3 additional recipients, so everyone can crosscheck the launchlist.

Launchlist also lets you add comments to each item

The paid Pro version allows you to save custom checklists and templates, track multiple checklists, and add users to checklists.

How do you rate this?

Google Plus Demo – innovative use of the Google Maps API

Google created the Google Plus Demo site to create buzz for the new Google Plus project, and to introduce new users to the features of the project. It’s informative and well-designed in a very Google way, but what is most interesting about it is the way it utilises their own Google Maps API to create a zoomable interface for the demo.

It starts off zoomed all the way in, with arrows pointing you to where you’re supposed to click. And click one could, but the average internet browser’s familiarity with the Google Maps interface means they might be just as likely to zoom out, drag around and explore the site’s canvas. The fluidity of the user experience this creates gives the user the option of having an entirely linear or non-linear experience on the site, or even a bit of both.

Subtlety isn't called for in this design

Various features of Google Plus are outlined in the clickable icons on the “map”, which a user can either click manually or be taken to via the “next” or “previous” buttons on the guided tour. At the end of the tour, the user is zoomed out to view the whole area.

The user is zoomed out to see the whole map at the end of the tour

One of the great benefits of Google Maps API’s tile-based system is that it allows the use of enormously large resolution images in an easily zoomable, and most importantly, quick to load interface. And since the Google Maps API need not have anything to do with actual maps, it has the potential for some interesting and innovative ways to construct a site’s architecture.

Seen any other interesting uses of the Google Maps API? Let us know in the comments below.

Starbucks – mammoth Facebook competitions and interactive apps

Though Starbucks’ 25+ million Facebook fans might be a slightly unrealistic goal for most businesses, a business of any size can learn a lot from their Facebook marketing strategies.

We followed their first Facebook game closely, and it was huge. They used their millions of fans to announce the anticipated return of the popular Pumpkin Spice Latte. Players competed to bring the Pumpkin Spice Latte to their home town a week before the drink’s official release date.

The competition, now closed, has been replaced with an interactive app that lets users carve their own photo out of a pumpkin, and use it as their profile picture or post it to their wall. The simplicity of the app’s 3-step process is key to its success, as it’s an easy and fun process to create your own pumpkin-face.

It’s also integrated well with Instagram, as fans can post photos of themselves with their Pumpkin Spice Lattes using a simple #psl tag.

Instagram integration

3 step easy competition page

Pumpkin carving gallery

How do you rate this?

Adobe Muse – web design software for print designers

Adobe Muse is a new software package by Adobe, still in beta. It’s basically a WYSIWYG web design application that outputs HTML and CSS. How is it different to Adobe Dreamweaver? Well, it’s targeted at print designers rather than web designers and developers. The idea is that a user can fully design a site using an interface similar to Adobe InDesign, without having to write one iota of code.

Of course, this is no replacement for a web designer skilled in HTML and CSS – it will certainly not be as powerful, and the code not as clean. However, it will be exciting for graphic designers who wish they could create their own websites, but find that programs such as Dreamweaver represent too steep a learning curve for them.

Adobe Muse's own site was made entirely using Muse

Muse is totally free for the entirety of the beta period, which is until version 1.0 is released in early 2012, so feel free to give it a try.

Aleberry Creative's site was also made in Muse

Have a look at Aleberry Creative’s site for an example of a website made entirely in Adobe Muse.

How do you rate this?

Milk Inc. – no site is a good site

If you haven’t got the time to build a website, or have just enough to make a temporary landing page, don’t miss out on the opportunity to start building a list of potential customers and followers. Put some thought into making a simple, but effective launch page.

App builders Milk Inc. have a great example of one. It’s minimal and attractive, and makes you want to sign up without even really knowing what they do. All they’ve got is a simple email signup form and links to their social media platforms.

Subtle hover changes on buttons are a nice touch

How do you rate this?

Curious Generation – one-page navigation

Using an unconventional site structure – like having everything on a single page can be a good way to get visitors interested in your site. If you’re making a brand website which won’t have a lot of content then this is worth a look.

Curious Generation is such a one-page website, with menu buttons scrolling down the page to anchors, rather than loading new pages. The circles motif in the design is consistent and interesting, and allows the menu to be repeated at each anchor, without clashing with the overall style.

The top of the page with the main menu

Repeating the menu links for each section stops visitors from getting lost

Contact info at the bottom of the page

How do you rate this?

Upon a Fold – pretty paper folds

Upon a Fold is a great little site dedicated to paper and folds from around the world. Primarily an online shopfront (and regular blog), the site’s design reflects the nature of their products – clean, pretty, and bright. Rather than going in the direction of using real life textures and hand drawn elements, they opted to instead create a good-looking, simple site using transparencies, with subtle references to life-like paper folds. The background is unique, and the logo is soft yet stands out.

Upon a Fold - home page

Upon a Fold - shop page

Upon a Fold - item page

How do you rate this?

Analog – simple typography & colour

While Analog‘s choice of colour may be a little uninspiring, it uses this simplicity to its advantage in combination with a typographic focus. In doing this, as well as starkly contrasting bright infographics and rollovers, a clear path is created for users to follow down the page.

The page unfolds with a brief description of their work, an introduction to their staff, and a very simple but well-designed contact form.

Analog is a good example of using simple colours and tasteful typography to make a surprisingly simple but effective agency website.

Analog's home page

How do you rate this?

GoGet CarShare – informative and simple

Well-designed, branded Facebook pages are a surprisingly rare find, especially for small businesses. Many businesses believe creating a social presence is as simple as creating a Facebook page with only the default Wall and Info sections to inform their customers about their business. But in this, the social media age, nobody could overstate the importance of maintaining an informative, well-designed and good-looking Facebook page for your business.

Sydney carshare service GoGet is an example of how to do a business’ Facebook page right. All sub-tabs within the ‘GoGet Going’ tab are preloaded, so that there’s no lag once the user starts interacting with the page. All the important information about the company’s business is featured within these tabs, so that a potential new customer can make an informed decision right there on Facebook, in case they don’t want to click through to the company’s website.

Including the "Like" call to action is a good way to encourage users to like your page

Including all different tabs in separate divs that show and hide, rather than separate pages, cuts out annoying load times between tabs and makes a user more inclined to click through to different tabs.

Embedded videos can be made informative and entertaining

Dislaimer: GoGet’s Facebook page was created by Sydney agency Thinkun, editors of Browsing Ideas.

 How do you rate this?

Marie Catribs – the big image

The “big image”, once frowned upon by web designers for making websites slow to load, is now popping up as a trend and coming back into the norm. When used appropriately, it can generate inspiration and make your site stand out.

Marie Catribs uses the big image to great effect. The imagery is fun and quirky, drawing visitors into the site and encouraging them to explore further. These images also add depth to pages, and utilise the space to convey unique messages. The use of hand drawn elements and carefully chosen fonts also adds to the success of this site.

Marie Catribs welcomes visitors with a playfully big image

Quirky use of typography inspires exploration

Using large arrows to direct users can be effective in driving them to an online store

How do you rate this?

PunchTab – website loyalty program

Similar to your local café’s coffee stamp card, PunchTab is a free tool created by the co-founder of YouSendIt to help you build a loyalty program for your online presence. Using a rewards scheme for actions such as daily visits, comments, and Facebook likes can really help to grab those first time visitors and keep them coming back.

PunchTab also lets you set the prizes for your loyalty rewards, such as iTunes credit, or a discount for your own product or service, allowing you to also boost interactions on social media and increase new visits with automated giveaways.

It’s easy to install and customise for your site too, and can simply display as a small inobtrustive “Rewards” ribbon on the side of your site.

Punch Tab sign up

How do you rate this?

Lost World Fairs – web poster graphics

The website Lost World’s Fairs may be a little indulgent but it is a feast for the eyes. The site explores the new typographic possibilities on the web. Through Typekit they use WOFF Web Open Font Format that uses JavaScript to add specific fonts to any website. Every bit of text you see on these pages is HTML text, not an image.

The designers of this site experiment with imaginary World Fairs of the future and past to create three typographic web posters for our inspiration and entertainment. For those of you interested in learning more about WOFF or IE9′s support for it, here’s the ‘making of’ link.

Lost World's Fairs

Lost World's Fairs Moon

Lost World's Fairs El Dorado

Lost World's Fairs Atlantis

How do you rate this?