Posts Tagged design showcase

Faceted Navigation Design Showcase

I’ve been working on improving the faceted navigation interface for one of the websites I manage.

Much has been written about faceted navigation (also known as faceted search, faceted browsing, or guided navigation) as a design pattern, which I won’t repeat here — although I will summarize by saying that to me faceted navigation represents a user interface technique which lets a user browse items on website by selecting from pre-defined criteria.

I am particularly interested in the different ways that faceted navigation has been implemented — whether it is on ecommerce sites, travel sites, search engines, or elsewhere.

be736 volkswagen co uk Faceted Navigation Design Showcase

Faceted navigation design example from Volkswagen

It’s surprising the variety of ways that designers have introduced for users to browse and select options from a faceted navigation UI. Which is why I collected together some of the better designed and more interesting examples in a faceted navigation design showcase.

I’m always on the lookout for more examples of well designed faceted navigation techniques, so if you come across any please let me know in the comments.

 Faceted Navigation Design Showcase  Faceted Navigation Design Showcase  Faceted Navigation Design Showcase  Faceted Navigation Design Showcase

 Faceted Navigation Design Showcase

Tags: , , ,

Boden Email Design Showcase

6600a boden usa Boden Email Design Showcase

I quickly became a fan of Boden’s emails thanks to their colorful, textured designs.

Whether it’s the main brand, Boden, or the two sub-brands, mini Boden and Johnnie b, the emails are always fun and interesting with many delightful design elements.

Which is why I pulled together over 30 of their emails to showcase their use of layering and combining graphics, type and imagery to great effect (best viewed with your browser maximized).

View the showcase, and let me know what you think in the comments.

 Boden Email Design Showcase  Boden Email Design Showcase  Boden Email Design Showcase  Boden Email Design Showcase

 Boden Email Design Showcase

Tags: , , , , ,

Using Patterns and Textures in Web Design: 20 Great Examples

0069 01 superb patterns examples thumbnail Using Patterns and Textures in Web Design: 20 Great Examples Read the rest of this entry »

Tags: , , ,

50+ Examples of Highly Optimized Landing Page Design

Landing pages are a critical component of many online marketing activities, such as pay per click, email, and affiliate marketing. Much has been written about how best to design landing pages — just do a search for “landing page best practices” to see what I mean.

However, it’s less easy to find examples of great landing page design, which is why I gathered together this showcase of well designed landing pages (50+ examples and counting).

It’s worth noting that as home pages are important landing pages, many are designed with landing page best practices in mind — for example, 3DCart, SmugMug. I’ve kept my collection of landing pages to ones that are specifically designed to support an online campaign (generally PPC) and cannot be accessed via regular website navigation.

I have also deliberately not linked to the landing pages I’ve showcased so as not to cause problems for their web analytics.

View the landing page design showcase.

Further Reading

Read the rest of this entry »

Tags: , , , , ,

Kate Spade Email Design Showcase

ffa28 katespade Kate Spade Email Design Showcase

Now that I am responsible for my company’s email marketing campaigns I have become much more interested in email design and best practices. Once you subscribe to enough marketing emails you notice that there is a lot of great design going on in this space, especially from the leading online retailers.

So I thought I would start showcasing companies that consistently produced great looking emails. I started with Kate Spade as I really like the colorful, elegant design of their emails.

View the Kate Spade email design showcase (best viewed with your browser maximized).

 Kate Spade Email Design Showcase  Kate Spade Email Design Showcase  Kate Spade Email Design Showcase  Kate Spade Email Design Showcase

 Kate Spade Email Design Showcase

Tags: , , , , ,

Gallery Page Design Showcase: 60 Examples of Excellent Product Category Pages

Although they are an important component of many websites and almost all online stores, very little appears to have been written about designing great category (also known as ‘gallery’) pages.

This is despite the fact the Jared Spool calls them the hardest working pages on your site given the key role they play in directing users to the correct end content.

55779 gallery page Gallery Page Design Showcase: 60 Examples of Excellent Product Category Pages

A well designed gallery page can be critical in reducing e-commerce site abandonment by preventing users from ‘pogo sticking’ back and forth from category page to product page in a vain search for the item they are looking for.

On large e-commerce websites in particular, gallery pages must present key information about a wide range of items in an easily scannable format so that users can make an informed decision to click through. They also need to enable users to reduce the number of options presented through product filters (which could be features, review scores, price, brand, etc).

And we shouldn’t forget that gallery pages need to present their products well through appealing imagery — not an easy task given the amount of space product images usually have on these types of pages.

Given the combination of content and functionality that gallery pages need to provide, it’s not surprising that they can be difficult to design well. Which is why I’ve gathered a collection of some of the better gallery pages — from both a design and functionality perspective — as a reference.

View the gallery page design showcase.

 Gallery Page Design Showcase: 60 Examples of Excellent Product Category Pages  Gallery Page Design Showcase: 60 Examples of Excellent Product Category Pages  Gallery Page Design Showcase: 60 Examples of Excellent Product Category Pages  Gallery Page Design Showcase: 60 Examples of Excellent Product Category Pages

 Gallery Page Design Showcase: 60 Examples of Excellent Product Category Pages

Tags: , , , , ,

Welcome Email Design Showcase

f6d12 welcome email Welcome Email Design Showcase

First impressions are hugely important; no less so than when a visitor to your website decides to deepen their relationship with your business by joining your mailing list. How you welcome them is a key first step in establishing that relationship.

Here is a collection of over 50 great looking welcome emails — mostly from online retailers — that use imagery, design, copywriting, and often an enticing offer to thank consumers for ‘joining their club.’

I’d love to add to this collection. If you have any examples I should check out, please let me know in the comments.

 Welcome Email Design Showcase  Welcome Email Design Showcase  Welcome Email Design Showcase  Welcome Email Design Showcase

 Welcome Email Design Showcase

Tags: , , , , ,

Breadcrumb Trail Design Showcase

2cca3 theglasgowcollective Breadcrumb Trail Design Showcase

The Glasgow Collective breadcrumb trail

Breadcrumb trails can be a useful secondary navigation tool for large sites such as online stores. They facilitate easy navigation back up the hierarchy of a website as well as providing a location indicator for visitors who may have arrived directly at the page (via search or a referring link) without navigating to it.

I thought it would be useful to look at some of the better and more visually interesting implementations of breadcrumb trail design. View the breadcrumb trail showcase.

Further Reading

Read the rest of this entry »

Tags: , , , , ,

Showcase of Incredible Geometry Inspired Digital Art

The pure old geometric shape has been a basic tool for artists throughout history and is still used as a prominent feature by designers and artists today. These digital artists are combining shapes and lines to form detailed compositions, often mixed with elements from other artistic genres to form a huge range of individual and unique designs and styles. This showcase rounds up a huge collection of incredible geometry inspired art from the web’s most talented digital artists.

30a97 01 Showcase of Incredible Geometry Inspired Digital Art

Read the rest of this entry »

Tags: , , , , ,

Web 2.0 Button Design Showcase

Buttons are a small but critical part of a web site design. In the best designs they create a strong call-to-action — add to cart, sign up, or learn more — as well being one of the details that reinforces the overall quality of the design.

550bc zendesk Web 2.0 Button Design Showcase

Zendesk button

Here are over 60 examples of great web button design to provide some ideas and inspiration for attractive buttons to enhance your next web page design.

Elements of Design

Looking for examples of good design of the various elements that make up a web site? Check out my Elements of Design showcase. It covers a range of areas, from search boxes to footers, and is regularly updated.

Further Reading

Read the rest of this entry »

Tags: , , , , ,

12 Web Design Directories To Improve Your SEO

title web design directories 12 Web Design Directories To Improve Your SEOList of Web Design Directories Links from niche directories are of more value in SEO than submitting to general directories, and there are a number of specialized directories catering exclusively for web designers. Below are some of those.

Many of these require a reciprocal link and which have fallen out of favor since Google declared against “excessive reciprocal linking”; but in moderation it is fine as Matt Cutts talked about in 2007 – “Trading links is natural and it’s natural to have reciprocal links. At some level, natural reciprocal links happen, but if you do it way too often, it looks artificial.”

Read the rest of this entry »

Tags: , , ,

Mega Drop-Down Menu Design Showcase

Back in March, Jacob Nielsen made a surprising recommendation for using “mega drop-down menus,” saying that:

Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices.

I’ve seen these types of menus popping up more often around the web, usually on e-commerce websites.

Now that they are a more widely recognized design convention, I thought it would be useful to pull together some of the best examples into a mega drop-down menu design showcase.

ea Mega Drop Down Menu Design Showcase
Above: The EA mega drop-down menu

Read the rest of this entry »

Tags: , , , , , ,