background preloader

Design pattern library

Facebook Twitter

CSS3 Patterns Gallery. Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique? Subtle Patterns | Free textures for your next web project.

Recent. Guide to Website Navigation Design Patterns. In web design, there are certain common design patterns that are used for interaction. Site navigation has a wide variety of common and familiar design patterns that can be used as a foundation for building effective information architecture for a website. This guide covers popular site navigation design patterns. For each site navigation design pattern, we will discuss its common characteristics, its drawbacks, and when best to use it. Top Horizontal Bar Navigation Top horizontal bar navigation is one of the two most popular kinds of site navigation menu design patterns out there. The top horizontal bar navigation design pattern is sometimes paired with drop-down menus whereby hovering on a navigation item reveals second-level child navigation items. Common Characteristics of Top Horizontal Bar Navigation Navigation items are text links, button-shaped, or tabbed-shapedHorizontal navigation is often placed directly adjacent to the site’s logoIt is often located above the fold Tabs Navigation.

Index - 4ourth Mobile Design Pattern Library. Designing Mobile Interfaces: Patterns for Interaction Design is a comprehensive reference for mobile design patterns. Whether designing for smartphones, featurephones or other related devices, common principles are discussed and codified as 76 universal interaction and interface patterns. Aside from suggestions, each pattern lists pitfalls and implementations to avoid. Every pattern is grouped with similar or optional patterns, and explained with the underlying psychology and physiology.

Along with appendices detailing mobile technologies, type and design principles and human factors, you will have a base of knowledge to make up your own mind, and react to the always-changing mobile environment. "Designing Mobile Interfaces is another stellar addition to O’Reilly’s essential interface books. Buy it from Amazon: Buy it direct from O'Reilly: Or, you can just read it right here on this wiki. Read in other languages Preface Designing Smartphone Interfaces The Patterns Additional Topics References. Responsive Web Design Patterns | This Is Responsive. Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern Layout Reflowing Layouts Equal Width Off Canvas Source-Order Shift Lists Grid Block Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video Iframes Tables Charts & Graphs Responsive Chart Forms Basic Forms Text Lettering Fittext Footnotes Responsive Footnotes Modules Carousel Tabs Accordion Messaging Lightbox.

Open - A Free Front-End Resource. Patternry | User Interface Design Patterns for Ideas and Inspiration. UI-Patterns.com. Elements of Design: A Web Design Showcase. Design Pattern Library. Patterns in Interaction Design. Collection: Search Patterns. User Interface Design Pattern Library.