background preloader

Interaction Design Pattern Library -

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.

Related:  UX/UI repository(design patterns and templates)UX WorkshopUX

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. The Messy Art Of UX Sketching Advertisement Meet the new Sketch Handbook, our brand new Smashing book that will help you master all the tricky, advanced facets of Sketch. Filled with practical examples and tutorials in 12 chapters, the book will help you become more proficient in your work. Get the book now →

Patterns : Designing Interfaces Selected patterns from the book are featured here on the website, in their entirety. Here are all of the patterns in the second edition of the book, sorted by chapter. Most of these patterns are not online yet, but many of them will become available over time as featured patterns. Modal Windows In Modern Web Design - Smashing Magazine Web design is essentially the organization of information into a readable, usable, functional and accessible format. Good organization of content is crucial, and you need a strong layout that you can build a website upon. You can use numerous interface elements and structures to organize content, such as jQuery-based content sliders and modal windows, which are basically windows that float above the page. The modal window has many advantages. For example, when a modal window contains a smaller element, the user doesn’t need to load an entirely new page just to access it (another way to achieve the same effect is e.g. by using AJAX-based tabs). By providing modal windows, you improve the usability of your website.

Beautiful Background Image Navigation with jQuery In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in […] View demoDownload source In this tutorial we are going to create a beautiful navigation that has a background image slide effect.

Persona Format - Fluid Project Wiki Fluid Persona Format This persona format was created to organize information in the Fluid Personas. The format chosen was based on the competitive analysis of many persona examples below. Page 1: Summary The Skeptic’s Guide To Low-Fidelity Prototyping Advertisement Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort.

The Right Way to Ask Users for iOS Permissions How Cluster Approaches this Problem Over time, we’ve learned to ask our users for permission when, and only when, we absolutely need it and we think the user can clearly relate how this access will benefit them. We’ve re-engineered Cluster using two methods to only show the system permissions dialog once a user has told us that they intend to say “Allow”. Pre-permission Dialogs Build Your Perfect Interface with UI Design Patterns - DesignFestival In spite of all the UI toolkits available these days, designing intuitive user interfaces is still a challenging task for many of us, and it’s especially difficult for new designers. Even armed with solid design principles, it’s still difficult to implement them in proper proportion to make an appealing, functional design. Fortunately, there is a solution for this situation — by collecting UI best practices and reusable ideas as design patterns, designers can find solutions to common design problems without need to “reinvent the wheel” every time they start a new design project. As the Internet evolves and new technologies come into play, users expectations also become higher than before. “Good” design work can no longer be achieved simply by abiding by a few basic design principles.

How to Become an SEO Freelancer in 48 Hours EmailShare 376EmailShare I’d like to state up front that this is the longest post I’ve ever written here at Location 180. It’s more representative of the direction I’d like to take the site in the future, and is the culmination of the last year I’ve spent becoming an seo freelancer.If you take a weekend, read the resources provided, practice with your own site(s), you’ll have enough knowledge to lay the ground work of a location independent business. Axure Design Pattern Library v2.0 This is Version 2 of the first Axure stencil library. Demo the HTML OR Download the Axure (.rp) File What’s new in this version? I’ve gone a little nuts with some of these. There are a few new techniques, described in my last post about Click and Drag simulation, as well as some simpler but useful widgets.

Design Is a Process, Not a Methodology Step 4: Eliciting and Defining Clear Product Requirements “Requirements definition connects the dots between research and design…. Your ability to see through the eyes of the personas and clearly define needs before seeking solutions will provide tremendous value in product definition.” —Kim Goodwin During product definition, your user research, data analysis, user modeling, and task analysis let your product team take a user-centered approach to defining and prioritizing product requirements.

Related:  UI Patterns LibrarysWebmaster Tips & Sites