Since our last round-up of useful CSS techniques, we’ve seen a lot of truly remarkable CSS geekery out there. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the “crazy experimentation” stage.

Since the release of the previous post, we’ve been collecting, sorting, filtering and preparing a compact overview of powerful new CSS techniques. Today we finally present some of these techniques. Use them right away or save them for future reference.

Please note that many techniques are not only CSS-based, but also use HTML5 and JavaScript. We are going to present useful CSS tools and responsive design techniques in separate posts. Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping; share your insight and experience instead, and feel free to link to techniques that really helped you recently. Thanks to all of the featured designers and developers for their fantastic work!

Table of Contents

1. CSS Transitions and Animations
2. Useful and Practical CSS Techniques
3. CSS Typography and Text Techniques
4. CSS Navigation Menus and Hover Effects
5. Visual Techniques With CSS

CSS Transitions And Animations

CSS transitions and animations are often used to make the user experience a bit more smooth and interesting, especially when it comes to interactive effects on hover or on click. Designers are experimenting with technology and create sometimes crazy, sometimes practical—but often innovative techniques which you could use to make your websites just a tiny bit more engaging.

Interactive CSS3 lighting effects
An interesting effect to create interactive lighting effects with 3-D transforms, CSS gradients and masks; the cast shadow was created using box shadows and transforms.

CSS3 dodecahedron
A fancy dodecahedron experiment, created using CSS Transforms and a tiny JavaScript snippet.

CSS 3D Lighting Engine Photon
Our editor Tom Giannattasio has created a JavaScript library that adds simple lighting effects to DOM elements in 3D space using the WebKitCSSMatrix object. It would be great to have an implementation for other rendering engines as well.

3D Thumbnail Hover Effects With CSS
This technique produces 3D thumbnail hover effects with CSS 3D transforms. The code is quite verbose and probably could be optimized, but the effect is quite neat.

Slide In Image Boxes
A technique for creating a “slide in” effect for boxes on hover to make them a bit more interactive.

CSS3 bitmap graphics
The bitmap graphics is rendered with CSS: no images, no canvas, no data URIs and no extra markup. The pixels are drawn with CSS gradients, sized precisely to the pixel’s boundaries.

Paperfold CSS
A visual folding effect for hidden comments by Felix Niklas. The plugin takes a DOM element, slices it into parts and arranges them like a folded paper in 3-D space.

Beercamp: An Experiment With CSS 3D
A CSS 3D popup book á la Dr. Seuss. The website was a test to see how far SVG and CSS 3D transforms could be pushed. This is the article about it.

Covers: A JS / CSS Experiment
Now, that’s quite an experiment: what if we combined a music song, stylesheet and beat detector to create animated… covers? Sure, we can do it with CSS3 and JavaScript! Covers does exactly that. The result is interesting, what can you do with this approach?

Animation on Apple’s page
John B. Hall explains the CSS animation on Apple’s Web page for the iPhone 4S.

Experimental animations for image transitions
A post about experimental 3-D image transitions that use CSS3 animations and jQuery. Only CSS3 transforms are used.

Maintaining CSS style states using “infinite” transition delays
This demo allows you to move the character around with the D-pad, and notice how it always keeps its position after you stop moving. This demo doesn’t use any JavaScript. The effect is made possible by using a virtually infinite transition delay, so that the CSS rules never return to their default state. The figure will be stuck in a transition and will move only when you hold down a button.

CSS 3-D clouds
An experiment in creating 3-D-like clouds with CSS3 transforms and a bit of JavaScript.

Animated popover of profile box
A technique for an animated profile popover menu, built using CSS transitions.

CSS3 scrolling effects
A library of various scrolling effects, such as curl, wave, flip, fly, skew and helix, created with CSS3 and sometimes with JavaScript to spice up the scrolling behavior.

Spin those icons with CSS3
A simple technique for creating a neat effect that spins social icons with the help of a transform and transition when you hover over them. By Tom Kenny.

Scrolling the Z Axis with CSS 3D Transforms
This article explains how to create the z-scroll effect step by step.

Useful and Practical CSS Techniques

CSS3 Family Tree
Display organizational data or a family tree using just CSS, without Flash or JavaScript. The markup is very simple and uses just nested lists. Pseudo-elements are used to draw the connectors. It also has hover effects: hover over a parent element and the entire lineage will be stylized. Make sure to check Nicolas Gallagher’s Introduction to CSS Pseudo Element Hacks.

iOS-style popover
A simple technique for iOS-style custom checkboxes and a subtle hover effect. The technique is a bit buggy but a good starting point in case you need it. Also, check an excerpt from Lea Verou’s talk on customized checkboxes and her article on rule filtering based on specific selector(s) support.

Timeline-Style Comments
Nicolas Gallagher developed a simple and clean technique to present comments in a timeline-alike overview.

CSS Table Grid
Here is a nice technique for aligning columns in a table, building a “table grid system” of sorts. The idea is to apply classes to col elements in a table’s colgroup; you always leave one col without a class so that it remains fluid and can “soak up” the effects of any breakages elsewhere in the table.

Confirmation Feedback Buttons
This article explains how to create buttons that take on different states depending on the user’s interaction. This type of interaction is especially useful on links such as “Purchase” and “Delete” for which it’s wise to confirm that the user indeed wants to take the specific action. It looks too much like an iTunes button, though.

A calendar in CSS3 and jQuery
A step by step tutorial on how to create a CSS3 calendar with some jQuery animation. Also, check out David Bushell’s responsive calendar demo.

Outdenting properties for debug CSS
Let’s assume you are experimenting with CSS or debugging code. You add properties to figure out how things fit together. How often do you forget to remove all of them? A simple technique for this is to mark a CSS property as a temporary or debugging property by outdenting it and putting it at column 0 in the file. A small trick that can save a lot of time.

Show Markup in CSS Comments
Chris Coyier discusses the idea of including the basic markup that you will be styling as a comment at the top of your CSS file.

Selectively displaying data
This technique shows how to selectively display content in a table and add responsive breakpoints to create an responsive, complex multi-column table.

Remove Margins for First/Last Elements
If you ever wanted to remove the top or left margin from the first element in a container, or the right or bottom margin from the last element in a container, you can do this by using pseudo-selectors :first-child and :last-child.

CSS Diagnostics Stylesheet
A very useful snippet to have nearby when you are debugging your CSS or want to find mistakes in HTML.

Radio Buttons With Two-Way Exclusivity
Learn about the :empty pseudo-class selector and jQuery to ensure that when a radio button is clicked, the area is determined and all other radio buttons in that column are turned off, and then is turned back on when clicked on.

Tabbed Navigation With CSS
An elegant tabbed navigation menu with drop-down menus — no JavaScript, of course. Nothing new, but it’s a quite clean solution.

Menu With Notification Badges With CSS
A ready-to-use snippet for a navigation menu with notification badges.

Styling based on sibling count (slides)
A fantastic overview of the possibilities for styling based on sibling count. Also, make sure to click through the rest of the slide deck — valuable and useful techniques. Make sure to watch Lea Verou’s presentation as well.

Stuff you can do with the “Checkbox Hack”
Wiht the “checkbox hack,” you use a connected label and checkbox input and usually some other element that you are trying to control. Learn what you can do with it.

CSS3 Facebook Buttons
Nicolas Gallagher presents a set of CSS buttons for Facebook with different colors and icons. You might want to check Nicolas’ CSS3 Social Sign-In buttons as well as Free Social CSS3 Buttons that we released earlier as well.

YouTube Popup Buttons
This article explores the default state of YouTube buttons, which have a very subtle bevel but pop up on :hover and :focus states, eager to be clicked.

Centering in the Unknown
When it comes to centering things in Web design, the more information you have about the element being centered and its parent element, the easier it is. Chris Coyier shows how to do it when you do not know anything.

Uncle Dave’s Ol’ Padded Box
What if you combined background-size: cover and Thierry Koblentz’ intrinsic ratios. The result is images and video than maintain their aspect ratio; but you can also use background-size: cover to change the aspect ratio and auto-cropping of images with just a little CSS. And the great news is that the property is supported in all modern browsers and matches media-query support exactly.

Micro Clearfix: Force Element To Self-Clear its Children
Chris Coyier presents various technique for forcing elements to self-clear its children, including Nicolas Gallagher’s short code snippet from 2011.

Conditional CSS
A clever technique by Jeremy Keith to load additional content conditionally. The idea is that once a media query fires, the content on the body element is generated and can be detected by a JavaScript, prompting extra content to be loaded.

* { box-sizing: border-box } FTW
Once you start mixing and matching various units in CSS — such as % for the container width, em for padding and px for border — then you run right into the box-model problem because the width of the container doesn’t include padding and border. We can easily solve this using box-sizing: border-box. And the best part: it is even supported in IE 8.

Multiple Attribute Values
How to treat multiple values in attributes rather than classes.

Diagonal CSS Sprites
If you build a sprite on a diagonal, there will be no components below or to the right of the component you are showing. This allows you to make the element using the sprite as wide or as tall as it needs to be, without worrying about exposing the next component. Also, check out David Storey’s article on CSS sprites for the moder era.

Double Click in CSS
Is there a way to detect whether a link is tapped or double-clicked on mobile devices? In fact, we can. However, the code requires some hardcore CSS nerdery. Also, check Pure CSS Clickable Events Without :target by Ryan Collins.

Replacing the -9999px hack (new image replacement)
In the beginning was FIR (Fahrner image replacement). Scott Kellum, design director at Treesaver, has now developed this refactored code for hiding text.

Fighting the Space Between Inline Block Elements
A series of inline-block elements formatted like you would normally format HTML will have spaces between them. But we often want the elements to butt up against each other, thus avoiding in the case of navigation) those awkward little unclickable gaps. How do you solve it? Chris Coyier has found a couple of solutions.

CSS pointer-events and a pure CSS3 animating tooltip
The pointer-events property allows you to specifiy how the mouse interacts with the element it is touching. See what you can do with it and what to consider when using them.

Anatomy of a mobile-first responsive Web design
An excellent article by Brad Frost about the different considerations for responsive designs. How do you start? What features would you implement and how? What about advanced optimization such as LocalStorage or AppCache? This article provide an excellent guide for getting started with future-friendly responsive designs.

SouthStreet Progressive Enhancement Workflow
A fantastic article by Scott Jehl and Filament Group in which they present a set of tools that form the core of an advanced responsive design workflow. Definitely useful to keep in mind for your next responsive design project.

Typography And Text With CSS

Advanced CSS techniques provide us with remarkable options to style text in very different ways. Not only can we make the typography look sharper and beautiful on the Web with tools such as Lettering.js, Kerning.js and FitText; we can also play with glyphs, line breaks, font sizing, truncating text and styling lists. The typography can be adjusted and improved with just a couple of practical approaches.

Interactive Typography effects with HTML5
This techniques uses canvas and JavaScript to create ab interactive typography effect. Users can interact with the glyphs and as designer you can define forms or shapes of the word you’d like to present and how you’d like them to change on hover. Fancy!

Rocking letters with CSS3 and jQuery
A simple animation of letters with CSS3 and jQuery.

CSS 3D Typography
What about integrating stripes into glyphs and adjust the shadow on hover? This technique uses just that, creating a nice, subtle yet engaging visual effect. You can find more interesting type experiments in CSS3type Showcase.

CSS3 animation and masking text
Chandler Van De Water had a challenge for Trent Walton after seeing the header animation in his “CSS3 in Transition” post. Noticing that he used a PNG image file with knockout transparency, he wanted to do the same CSS animation with selectable text. Trent was happy to oblige! At the moment, this works only in Safari and Chrome.

CSS mask-image and text
Trent Walton uses background-clip: text and mask-image to implement a subtle gray-flecked texture effect over white text. Hover over the box to see how it degrades in unsupported browsers. Make sure to check out Lea Verou’s “Text Masking: The Standards Way” as well.

Fake bolding of Web fonts
Most browsers simulate bold weights for fonts that do not actually have bold weights. For example, Helvetica Neue Light does not have a bold weight. If you used font-weight: bold with it, browsers would artificially create a bold weight. This article explains how to avoid fake bolding of Web fonts in your designs. By Divya Manian.

Tomorrow’s Web type today: Say it With a Swash
The excellent series “Tomorrow’s Web type today” by Elliot Jay Stocks provides insights into what will be possible with Web typography soon, e.g. swashes. In fact, you can already use them today if you include a swash subset of a font to achieve the desired effect.

Internationalization Language CSS
A very handy CSS nippet with language-specific quotes. Perfect for international, multilingual projects.

Experiments with background-clip: text
With the CSS property background-clip: text, we can add a background image to a text element.

A Call for ::nth-everything
With CSS3, we have positional pseudo-class selectors to help us select a particular element when it has no distinguishing characteristics other than where it is in the DOM in relation to its siblings.

Smooth font using the text-shadow property
A common problem: is there a way smooth the appearance of glyphs on older machines, especially Windows XP (standard / ClearType rendering mode)? Yes, perhaps. You can give a try the text-shadow-property which adds text-shadow on the top-left and the bottom-right to smooth text.

Fluid Type
Trent Walton explains his approach to fluid typography in which he asks himself how we can make sure that browser width and typographic settings such as measure or font-size and how should we handle panoramic viewports? An interesting article, especially if you use a typography-out approach in your designs.

Pragmatic, practical font sizing in CSS
Harry Roberts shares his thoughts on how to size fonts more efficiently, writing your CSS differently in the process.

Automatic line breaks with CSS3 hyphens and word-wrap
Roger Johansson shows how to solve a common problem: as columns of text become narrower, the risk of a single word being longer than the column’s width increases. When that happens, the text normally extends beyond the column. Luckily, CSS offers two properties to improve the situation: word-wrap and hyphens.

Molten leading (or fluid line height)
When a responsive composition meets a viewport, there are different ways to fill space. Adjusting any one element without also adjusting the others is a recipe for uncomfortable reading, which is one reason why designers have such a difficult time with fluid Web layouts. Tim Brown started a discussion about this issue and provides a couple of techniques for opimization.

Prevent Long URL’s From Breaking Out of Container
Another snippet by Chris Coyier for keeping long URLs within the container. word-wrap, word-break and hyphens properties in use. Also, learn how to Prevent Superscripts and Subscripts from Affecting Line-Height.

Viewport-sized typography
This technique uses new CSS values for sizing elements relative to the viewport’s current size: vw, vh and vmin. This allows you to couple the size of, say, a typographic heading to the available screen space. Browser support is quite poor for now, so if you are looking for an alternative, check out FitText.js.

Minimum paragraph widths in fluid layouts
This article shows how to solve the problem of paragraphs that are too narrow, by implementing a minimum paragraph width. If the space left a the floating image is less than this width, then the whole paragraph moves below the image.

Styling ordered list numbers
Roger Johansson shows how we can style ordered list numbers with the :before pseudo element, which can take a counter as a value through the content property. Also check out Chris Coyier’s post and Louis Lazaris’ CSS Counters: counter-increment and friends.

Reverse ordered lists in HTML5
The reverse attribute allows you to write a descending list of numbered items. Louis Lazaris summarizes what it does and offers a solution to get around a lack of browser support for this attribute.

Preserving white space with CSS3 tab size
By default, HTML pages ignore anything more than a single space and collapses them. But there are occasions when you’ll want to preserve this space via one of several possible techniques.

Truncating text using only CSS
This code snippet can be used to shorten a line of text using nothing but CSS.

New CSS3 properties to handle text and word wrapping
Louis Lazaris explains the possibilities and problems of text-wrap, overflow-wrap, line-break and word-break, text-overflow and hyphens. Also worth reading: Kenneth Auchenberg discusses the options for word wrapping and hyphenation in combination with dynamic width elements.

End Articles with Ivy Leaf
A clever technique for adding an extra touch to the end of your articles. :last-child, :after and content in use.

Hover Effects and Navigation Menus with CSS

We are used to classical navigation patterns such as tabbed navigation or drop-downs, but we can do a lot more to spice up our navigation menus with pleasant hover effects, often without extra images. Especially if you’d like to add a bit more polish to your portfolio, gallery or e-commerce website, these techniques can be quite useful. What about “over-the top” hover effect for your links,

Circle Navigation Effect With CSS3
A bubble-like thumbnail preview for your navigation with CSS3.

Create a CSS3 Image Gallery With a 3D Lightbox Animation
Tom Kenny has extended a CSS lightbox gallery by adding a few hover effects to the gallery grid itself and a 3D rotation to the lightbox content, all with CSS.

3D Gallery With CSS3 and jQuery
This article shares an experimental gallery that uses CSS 3D transforms. The idea is to create a circular gallery with an image in the center and two on the sides. Because perspective is being used, the two lateral images will appear three dimensional when rotated.

Creative CSS3 animation menus
Mary Lou presents a couple of creative navigation menu hover effects. The idea is to have a simple composition of elements, an icon, a main title and a secondary title that will be animated on hover using only CSS transitions and animations.

How to spice up your menu with CSS3
Yes, another technique by Tympanus: this tip shows how to spice up a menu by adding a neat hover effect to it. The idea is to slide an image out to the right when the menu item is hovered over.

Create a zoomable user interface
David DeSandro reveals how to use CSS transforms to create a zoomable user interface similar to that of Beercamp 2011. In this tutorial, you’ll also learn how to use JavaScript to hijack scrolling to manipulate the zoom.

Flipboard Navigation
An experimental page layout inspired by Flipboard’s interface.

Multi-direction hover
This element shows different hover effects when hovering from different directions.

Experimental Hover Effects
Original and innovative hover effects discovered via Twitter on what appears to be a Japanese code sharing website.

Over-the-top hover effect
A CSS and JavaScript technique for creating an “over-the-top” hover effect using the transform-origin transform-style properties as well as 3-D transforms.

Accordion With CSS3
Mary Lou experiments with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, she creates an accordion that animates the content areas on opening and closing.

Expanding Text Areas Made Elegant
An expanding text area is a good choice when you don’t know how much text the user will write and you want to keep the layout compact. In this article, Neil Jenkins explains how to do this simply. Also, you might want to take a look at Textarea Auto Resize, another technique by Louis Lazaris, using a hidden clone element.

Filter Functionality With CSS3
Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a box or radio button. This tutorial explores those CSS3 properties by creating a experimental portfolio filter that toggles the states of items of a specific type.

An accessible, keyboard-friendly custom select menu
A new approach for more accessibility by Roger Johansson. He styles only the select element.

Visual Techniques with CSS

We used to heavily on images and visual elements to create basic visual effects on the Web. With CSS3, we can not only improved the loading speed of the content, but also make our visual elements more flexible and adaptive. Let’s take a look on a couple of examples of how we can achieve that.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements
Tom Kenny shows how to create a simple “stacked” look to a group of images.

CSS3 Unfold Map with Pins
A handy snippet for placing pins on a map. The code looks a bit verbose, so you might want to remove a couple of visual “nice-to-have” elements.

Turn Images Into Postage Stamps With CSS3 border-image
Dudley Storey shows a simple way to create a postage stamp from a simple image with border-image.

Slopy elements with CSS3
Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. This tutorial shows some simple examples and ways how to create slopy, skewed elements with only CSS.

CSS Flip Clock
A code snippet for displaying a flip clock-alike time display using CSS.

CSS3 Image Styles
When applying a CSS3 inset box-shadow or border-radius directly to an image element, the browser won’t render the CSS style perfectly. Here’s a quick tutorial on how to use jQuery to make perfect rounded corner images dynamically. And check out the second part.

Creating Reusable and Versatile Background Patterns
A simple tutorial on how to create reusable background patterns with Photoshop and CSS.

Diagonal Graph Paper Gradient
A very nice CSS technique for creating diagonal graph paper gradients using repeating-linear-gradient property in CSS.

Tucked Corner Effect
A clean CSS technique for producing tucked corners using the pseudo-elements :after and :before as well as data URI-coded images. Also, check out Corner Ribbon Effect with CSS.

Scrolling… shadows!
An original technique by Roman Komarov to create CSS-only shadow-scrolling effect using background-attachment: local. Developed by Lea Verou, inspired by Roman Komarov.

Multi-colored CSS progress bars
A quite verbose yet CSS-only solution for displaying multi-colored progress bars. It’s linear-gradient in action! Also, check out CSS3 progress bars that display data inside localized leaderboards for the new analytics platform at G5. They are lightweight and require no JavaScript or images.

CSS3 breadcrumbs
Learn how to create your own cool CSS3 breadcrumbs. Also, check the CSS Breadcrumbs Example which uses only CSS linear gradients.

Adobe-like Arrow Headers
A detailed article about the technique Adobe uses to create header bars for modules on its website.

Adding a Top Shadow to a website
If you ever wanted to add a shadow along the top edge of the website, you can easily do it by styling body:before.

A flexible shadow with background-size
It’s amazing what you can achieve when you combine different techniques—even when facing a challenge such as a flexible shadow. If you had to create an adaptive shadow effect, how would you create it?

Star Ratings With Very Little CSS
Chris Coyier shows how to code star ratings done with very little CSS code and lots of a bit of Unicode madness.

Convert Images to Black And White With CSS
Filters allow us to visually process an image in the browser without needing to go through PhotoShop or use cycle-intensive, script-heavy methods in JavaScript or PHP. CSS3 filters are broadly supported in the most recent versions of Firefox and Chrome, and we can gain support in older versions and alternative browsers — even IE — by using a combination of techniques.

Punching Holes With CSS
A clever and simple technique to make a block in a container appear transparent and display a background image. Also, take a look at Lea Verou’s accessible star rating widget with CSS.

Simple Styles for Horizontal Rules
With the help of a few contributors, Chris Coyier put together this page of simple styles for horizontal rules.

Optimizing Graphics With CSS Masks
In this video, Aaron Bushnell shows how CSS masks can help make the process easier on you and how to make sure you have fallbacks in place for non-Webkit browsers.

Browser-Specific CSS Hacks
A useful, comprehensive list of browser-specific CSS hacks for targeting legacy browsers. Unfortunately, most of us will need them quite often.

Last Click

CSS3 Lasers!
Shows a laser shot effect when hovering over an element.

The DOM Tree
This DOM tree is generated via JavaScript every time you visit the page, so you’ll never see the same one twice. All of the forms are filled with holiday greetings in a variety of languages. CSS3 3D transforms are used to position and rotate, via translate3d() and rotate3d() respectively, the elements when the page loads. The infinitely looping rotation on the tree is controlled by an infinitely looping CSS3 animation. Just one word: crazy!

What’s Your Favourite Technique?

We’d love to know your experience with some of the featured techniques, or perhaps you’ve stumbled upon another interesting CSS technique recently? Let us know in the comments to this post!

(jvg) (al) (vf) (ml)

If there is a commonly reoccurring need for a particular solution, there is a great probability that someone has – by now – solved that need and has finished the legwork involved in researching and constructing something that resolves it. At the very least, you will find documentation on general solutions to related problems that will enable you to gain insight on best practices, effective techniques, and real-world examples on the thing you are creating.

A design pattern refers to a reusable and applicable solution to general real-world problems. For example, a solution for navigating around a website is site navigation (a list of links that point to different sections of the site), a solution for displaying content in a compact space are module tabs.

There are many ways to tackle a specific requirement – and as a designer – the most important thing you can do is selecting the option that best reflects the needs of your users.

In this article, we share with you the best of the best, cream of the crop sites, galleries, online publications, and libraries devoted to sharing information and exploring concepts pertaining to User Interface design patterns. Use these recommended sources to gain knowledge about a particular UI problem or to gain inspiration and insight on best practices, techniques, and examples of exemplary UI designs. Great thank-you goes to Pavel Konoplitski for providing us with related resources.

UI Design Patterns for Sites and Web Applications

UI-patterns.com
UI-patterns.com is a large collection of design patterns for UI designers to gain inspiration from. The site allows users to keep sets of their own (publicly accessible to site visitors) so that you can see other UI design pattern collections.

Konigi
Konigi highlights exemplary interaction design and visual design use in the real-world. There are plenty of ways to utilize, navigate, and find your desired content on the site, including a Tags page featuring popular keywords used in entries within the showcase split up into three categories: keyword, product, and company.

QUINCE: X Patterns Explorer
QUINCE is a beautiful and stunning web application that helps you explore an innumerable amount of user experience design patterns such as date pickers and two-panel selectors. The application requires the Silverlight plugin and is best viewed under Internet Explorer (though we have verified it to work well in Firefox and Safari).

Interaction Design Pattern Library
Welie.com has an interaction design pattern library maintained by Martijn van Welie, a Ph. D. graduate in Human Computer Interaction who now works as an Interaction Design Senior Consultant for Philips Design. The library features a ton of design patterns involving various site tasks such as navigating around a site, searching a site, and basic interactions such as slideshows. Each pattern follows a specific format: (1) the problem, (2) the solution, (3) when to use the pattern, (4) why you should use the design pattern, and (5) examples of the pattern in use.

Pattern Tap
Created and maintained by Matthew Smith and Chris Pollock, Pattern Tap is a gallery of popular web-based User Interface components and design patterns such as slideshows and breadcrumbs. Pattern Tap allows users to create their own sets, and they now have over 7,000 user sets. There’s plenty of inspiration to be gained at Pattern Tap.

design|snips
This design gallery focuses on common web page components such as navigation as well as popular design trends such as Grid layouts. design|snips has over 30 categories so that you can easily find the design pattern/trend that you’re interested in. What’s more, users are allowed to rate each design featured in the gallery so that you can see what the overall consensus is with regards to the effectiveness and appeal of a design being shown.

UI Scraps
Written by Experience Designer Jason Robb, UI Scraps is a weblog that catalogs, good, bad, and notable interface designs. Expect to find critiques of submission forms and praises for good designs and UI Scraps.

The UI Pattern Factory
The UI Pattern Factory is a UI design library and gallery. What’s great at UIPF is that they sometimes share videos in each entry to improve the description of design problems and solutions. Entries are further enhanced by user-submitted examples of the pattern, which they archive in their Flickr group: UIPatternFactory.com.

Yahoo! Design Pattern Library
The Yahoo! Design Pattern Library, maintained and presented by the Yahoo! Developer Network (YDN), shares design patterns to the web design and web development community. They also have a recently-launched forum where you can swap stories with fellow UI designers and discuss patterns showcased in the design pattern library.

StyleIgnite
StyleIgnite archives and displays the latest trends in web design. Hundreds of styles that are submitted by users are there for you to check out and gain inspiration from. What’s unique about StyleIgnite is that not only are they a gallery, but they also provide you with code snippets and assets to achieve the designs that you like.

blink design library
blink design library is a weblog-formatted design library that centers a post’s topic on a particular user interaction pattern with the aim of cataloging and exploring that subject. You will find topics and discussions on common interaction components such as buttons and web forms.

patternBrowser
patternBrowser is a unique web application for browsing user interface design patterns on a variety of products including mobile devices. It is a great resource for quickly finding a ton of inspiration in a compact, well-organized, and very searchable manner.

Web Design Practices
Web Design Practices is a gallery of web design patterns such as breadcrumb navigation with very thoughtful and comprehensive write-ups on each design pattern, often including statistics and helpful resources about a particular website component.

Elements of Design
Elements of Design focuses on particular components of a web design such as login forms and site navigation in the hopes of inspiring designers, as well as to highlight prevalent patterns for typical website needs and features.

User Interface Engineering
User Interface Engineering is an organization on usability, web design, and information architecture. It is a great place for learning about effective design patterns for common UI problems. For example, you can learn about faceted search or previous and next actions in web forms.

CSSbake
CSSbake is a unique web design gallery that focuses on website components rather than the overall web design. For example, you can find showcases of good navigation or beautiful comment sections. CSSbake “focuses on the ingredients that make a site good” and is a great place to attain inspiration for common User Interface design patterns.

UI Patterns
UI Patterns is a UI design library that follows a weblog format where each post is a design pattern and a showcase of it in use on a website or web application.

Functioning Form
Functioning Form is the weblog of UI designer and author Luke Wroblewski. You can learn about designing for humans by reading through his insightful articles on the site and find useful lists such as a collection of resources on website buttons.

MephoBox
MephoBox is a design gallery that presents web design patterns and trends such as login forms and typography use with the aim of inspiring designers with their own work. Users can vote on designs and leave comments on them, allowing viewers to sort results by “most popular” and “most viewed” for quickly finding well-liked designs.

Designing Interfaces
Designing Interfaces is a book format site for the book, “Designing Interfaces: Patterns for Effective Interaction Design” written by Jennifer Tidwell. In the site, you will find loads of design patterns and articles on interaction design. You’ll learn about topics such as organizing site content, soliciting actions and commands from users, and presenting complex data.

UIZEN
UIZEN is a collection of user interface designs that features real-world websites and web applications. The site serves as a useful reference for times when you are in need of effective design inspiration.

UXmatters
UXmatters is a web magazine dedicated to sharing information about the user experience. In the publication, you will find a ton of information on effective and usable design patterns and techniques regarding the design of interfaces centered around its users.

Boxes and Arrows
Boxes and Arrows is an online publication dedicated to the art and science of designs. In the site, you will find plenty of information regarding effective interaction designs such as how to get a web form’s structure right and designing for user-generated and social media based content. The tone and style of Boxes and Arrows is professional and academe-centric so articles usually leverage information from research and academic papers.

Niche and Specialized Design Pattern Resources

Design Patterns for Data Graphics
This resource deals with the discussion of useful design patterns for presenting data. You will find information and downloads on suggested diverging color themes (to easily distinguish related data sets between each other) and data resolution.

Patterns Of cooperative INTERaction
This web page shares information on cooperative (social/team-based) systems design patterns. Here, you will find resources and articles on topics such as multiple presentations of information and collaboration in small groups.

Information Design Patterns
There is an art and a science behind presenting information to users. This site discusses and shares information regarding effective and usable information and data structures.

Learnability Gallery
What makes information and interfaces learnable? How can you present data so that users are able to absorb the content you are presenting? This visual gallery features effective design patterns that expose techniques for designing information with high-learnability.

Designing Social Interfaces
In this resource, you will find patterns for social and collaborative sites and applications. The site is a wiki-style site that allows for user-generated and user-edited content, and is a companion site for a book called “Designing Social Interfaces“. You will find insights on how to effectively present content and build features into your project that leverage the advantages of collective and shared knowledge.

Open Source Design Pattern Library
This resource features design patterns as it pertains to open source websites and applications. Users are able to submit their own pattern entries to share.

hcipatterns.org
This resource deals with pattern languages in Human-Computer Interaction and user interface design. You can learn about common language patterns, tools used in the study of HCI, and additional useful news and information.

Common Ground
Common Ground is a documentation of a pattern language for Human-Computer Interaction design. You will find a lot of wonderful resources on HCI such as WYSIWYG Editor design patterns and presenting information to users using step-by-step instructions.

ecommr
ecommr is a website showcase of the best (and worst) e-commerce site and web application designs. The site explores topics in e-commerce content presentation and user interface patterns that allow for a great user experience. They focus on entire site designs as well as specific components of an e-commerce website such as customer service landing pages and size charts.

Ajax Patterns
Ajax Patterns is a wiki-style site discussing design patterns that apply the use of Ajax techniques. It is a massive resource for web application developers to gain insight on design patterns involving highly-responsive Rich-Internet Applications.

30 Essential Controls
This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application.

Design For Mobile
This site is dedicated to designing mobile applications and websites. The site is a wiki so the content is truly collaborative and user-edited. With mobile devices becoming very prevalent, the need for compatible and usable mobile systems grows, and this should be your first stop to learning more about this emerging field in web technology.

Wiki Patterns
Wikis allow for shared collaboration and puts the responsibility of creating and maintaining the site’s content towards its users. This resource discusses effective design patterns for creating (or implementing) a user-friendly wiki.

Flickr Collections and Groups

Flickr is a wonderful and visual-based resource for learning and finding design patterns. In this section, we share with you some notable collections and groups to peruse for interaction design pattern research and inspiration.

Design Patterns
This Flickr collection maintained by Chris Messina is a showcase of unique and interesting interfaces on the web. The collection is well-organized into sub-sets such as Drag and Drop interfaces and Calendar Views.

Design Patterns Group
In this Flickr Group, there are over 300 items that you can browse through to see interface design trends. With a membership of over 360 Flickr users, you’ll be sure to encounter fresh content on a regular basis.

Web Form Design: Filling In the Blanks
Maintained by Luke Wroblewski, this Flickr set is a collection of images pertaining to web form design. It is a handy and inspirational resource to have around for times when you are crafting highly-usable web forms.

[Design Solutions]
This Flickr collection by User Experience Designer Gustavo Pimenta presents common interactive design patterns neatly subcategorized into sets such as Graphs and Logins.

namics UI Pattern Library
This public Flickr group consists of 9 Flickr members and is a group intended for capturing UI design pattern trends from the real-world.

Search Patterns
Peter Morville has a Flickr collection dedicated to gathering design patterns for effective search, subcategorized into helpful sets such as Web Search and Advanced Search.

Related content

If you enjoyed this article, please check out the following article which you might also like: