background preloader

Guide to Website Navigation Design Patterns

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

Tag cloud foundation-l word cloud, created with the complete gzip'ed list archives (without duplicate emails from archives and all headers and quoted text in body), using IBM Word Cloud Generator build 32.[1] A tag cloud with terms related to Web 2.0 History[edit] In the language of visual design, a tag cloud (or word cloud) is one kind of "weighted list", as commonly used on geographic maps to represent the relative size of cities in terms of relative typeface size. The specific visual form and common use of the term "tag cloud" rose to prominence in the first decade of the 21st century as a widespread feature of early Web 2.0 websites and blogs, used primarily to visualize the frequency distribution of keyword metadata that describe website content, and as a navigation aid. The first tag clouds on a high-profile website were on the photo sharing site Flickr, created by Flickr co-founder and interaction designer Stewart Butterfield in 2004. Types[edit] Frequency[edit] Categorization[edit] and for ; else

Patternry | User Interface Design Patterns for Ideas and Inspiration Mapping In 1932, Charles O. Paullin and John K. Wright published Atlas of the Historical Geography of the United States, a reference of almost 700 maps about a varied set of topics, such as weather, travel, and population. The Digital Scholarship Lab at the University of Richmond brought the atlas to digital life. In this digital edition we've tried to bring—hopefully unobtrusively and respectfully—Paullin and Wright’s maps a bit closer to that ideal. Not only are the maps overlaid on a slippy map, but the lab also added simple interactions with tool tips and animation so you can look more specifically at the data. I could spend all day (or several days) looking through this.

Design Pattern Library We, Yahoo, are part of the Yahoo family of brands The sites and apps that we own and operate, including Yahoo and AOL, and our digital advertising service, Yahoo Advertising.Yahoo family of brands. When you use our sites and apps, we use Cookies Cookies (including similar technologies such as web storage) allow the operators of websites and apps to store and read information from your device. Learn more in our cookie policy.cookies to: provide our sites and apps to you authenticate users, apply security measures, and prevent spam and abuse, and measure your use of our sites and apps If you do not want us and our partners to use cookies and personal data for these additional purposes, click 'Reject all'. If you would like to customise your choices, click 'Manage privacy settings'. You can change your choices at any time by clicking on the 'Privacy & cookie settings' or 'Privacy dashboard' links on our sites and apps.

Everything You’ve Been Told About Mobile App Design By Developers Is Bullshit | Usability Counts | User Experience, Social Media Or, Design Your Own Mobile Application With These Nine Easy Steps… 2011 is the year of mobile. This year is the tipping point that’s really going to turn the World Wide Web into a “platform doesn’t matter” medium. If you’re doing User Experience and you don’t have a mobile app in your portfolio, you’d better get cracking. We’ve been working on a few applications as prototypes (iPad, iPhone, and Android), and I’m at version 1.1 of Pick An Excuse (finally iOS 3 compatible). If you have even an inkling of an idea, you should work on your own application — just for the experience. It’s All about Context, Baby I do all my best user research at the local bars here in San Francisco, California. Watching people use devices at Tony Nik’s is one of my favorite pastimes. Why? It’s because of the context. The fun thing about it is that all I have to do is ask a few questions, and they’ll tell me everything they love about their device — without having to buy them a drink. Keep It Simple Make It Social

Patterns in Interaction Design Case Study: UX, Design, and Food on the Table (One of the common questions I hear is how to reconcile design and user experience (UX) methods with the Lean Startup. To answer, I asked one of my favorite designers to write a case study illustrating the way they work, taking us step-by-step through a real life redesign. This is something of an IMVU reunion. The attendees at sllconf 2010 were wowed by Food on the Table's presentation. In this case study, Laura takes us inside the design process in a real live startup. A lot of people ask me whether design fits into the lean startup process. This is simply not true. A couple of months ago, Manuel Rosso, the CEO of Food on the Table came to me with a problem. As a bit of background, Food on the Table helps people plan meals for their families around what is on sale in their local grocery stores. Users who made it through activation loved the product, but too many first time users were getting lost and never getting all the way to the end. Identifying The Problem Key Takeaways:

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

Isaac Hall's answer to Dropbox: Why is Dropbox more popular than other tools with similar functionality 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?

Related: