background preloader

Design Pattern Library

Design Pattern Library
Related:  UX/UI repository(design patterns and templates)

UI Design Pattern Library Patterns in Interaction Design D-Lists - Web & Graphic Design Inspiration Interaction Design Pattern Library - Suggest a pattern Have you seen new examples of patterns out there that have not been described on this site? Send me a link to an example and I'll add it to my to-do list. Suggest a pattern Latest comments Form (Lucas Gwadana) Sometimes the ERROR handling is not explicit enough because when a user makes an... Map Navigator (Marcus) For print pages etc static maps are still relevant. Accordion (dellmre) Ajax accordion samples with source code Autocomplete (Zorg) I believe the name of this pattern to be misleading. Slideshow (Joshua) Slideshows on Homepages can be very beneficial.

Main Page - Social Patterns Main Page - Social Patterns Patternry | User Interface Design Patterns for Ideas and Inspiration SEO Tools for Google, MSN and Yahoo! - XML Sitemaps Generator XML Sitemap Validator A tool which will validate your xml sitemap and optionally ping Google to inform them of their location. Our xml sitemap validator will inform you straight away if there are any problems with your sitemaps allowing you to make changes prior to submitting it to Google. You can also optionally ping Search Engines with the whereabouts of your sitemap. Supported search engines are: Please note that we would recommend you inform Google of your sitemaps via the Google Webmaster Tools. Click here to validate xml sitemap Search Engine Bot Simulator Search Engine robot is a software application that is designed to visit websites to index their content. Check how your webpage looks for search engine bot HTTP Headers Viewer HTTP Header is a part of response sent by your server with a requested page. Check HTTP headers for any specific URL Competitor Analysis Find out how well your website performs comparing to your competitors. Keyword Density Calculator SEO Tools

UI Pattern Ideas: List with Functions Last week I asked people to participate in a group design project on a specific design pattern: a list with functions. The premise was: The design pattern we are going to tackle is a list with functions. Think of a list of five names. The primary function of this list is to click the names. The response was amazing. Not every single submitted idea is shown below. Hover Functionality I quoted a Zeldman tweet in the opening article that said that functionality that only reveals itself on hover fails. Example by Sean. Example by cancel bubble. Example by kil. Edit Mode I'm thinking having a toggle for turning the list into "Edit Mode" is the most successful base for this design pattern. Example by Jay Salvat. Kirk Strobeck created a PDF describing an interface which is essentially a list with three different modes. Mass Edit Mode Mass Edit Mode differs from Edit Mode in that when the Edit Mode is enabled, all list items immediately become editable. Drag Functionality Example by Bart. Other

So You Wanna Build a Library, Eh? The following article is an abridged version of Chapter 7 of Nathan Curtis’s 2009 book, Modular Web Design published by New Riders. The book’s first half addresses how to modularly break down your design, build it back up, and communicate in new and interesting ways. With those design techniques in hand, the book then drills into how to organize and build a library, teach it to others, and establish a process for maintaining it for an organization. Design patterns and modular components are effective techniques for designing and building long-lasting, consistent experiences. Many teams have realized incredible efficiencies, savings, and better design through design libraries and related standards. Therefore, precede any kind of library build out with a period of discernment. 1. What is your primary rationale for building a library? Beyond efficiency and consistency, other benefits that drive teams include: Portability: Designers come and go. 2. A component is a chunk of a page design.

Related:  Design PatternsUI Patterns LibrarysUXarticlesWeb Devmarketingreadingspatternvarious stuff 4UI PatternspatternsmodeleMonday WorkshopsDesign Pattern Resourcesyahootech 2UX