CSS3 Patterns Gallery. Wave (294 B)✖by Paul Salentiny Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+.
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. 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 Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video. 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.