CSS3 Patterns Gallery. Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+.
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.
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. Responsive Web Design Patterns. 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. Open - A Free Front-End Resource. User Interface Design Patterns for Ideas and Inspiration. UI-Patterns.com. Elements of Design: A Web Design Showcase. Pattern Tap : Organized Web Design Collection of User Interfaces for Inspiration and Ideas. The CSS Gallery Alternative. Design Pattern Library. View the most recent patterns added to the library.
Accordion There are too many items to fit into a limited space without overwhelming the user. Availability Provide a way for a user to display to other people (either the public, or their contacts, depending on the rules of the system) when they are available for contact and when not. Display Collection The user has created a collection and wants to display it to other people. Find with Tags A user wants to find objects associated with a specific concept or term. Left Navigation The user needs to locate content and features necessary to accomplish a task.
Progress Bar User needs to know at where they are in a multi-screen process (such as purchase or set-up). Tag an Object A user wants to attach their own keyword or set of keywords to an object for organization and later retrieval. Tag Cloud With sufficient tags in a system it becomes possible to present the most popular tags as a browsing aid. Patterns in Interaction Design. Collection: Search Patterns. User Interface Design Pattern Library. It is important to note that the patterns are offered as proposed sets of design guidelines. They are NOT the only solutions, strict recipes etched in stone, or a substitute for sound human-centered design practices. In our view, it is essential to select and apply the patterns critically and thoughtfully based on an understanding of the users - their level of knowledge, their discovery scenarios and goals, and their modes of information discovery.
For example, some UI patterns work well for the "knowledgeable seeker" but not the "uncertain explorer. " For more information about how to effectively use the patterns, you can download Applying Endeca Search & Discovery UI Design Patterns . (You can also view/listen to a UIE - User Interface Engineering-- Webinar on Leveraging Search and Discovery Patterns for Great Online Experiences that Mark Burrell, Ph.D., VP of User Experience at Endeca, presented with Peter Morville.