User Interface Design Patterns


	User Interface Design Patterns

splendidus

2-1-2008 6:26 PM

334 views

tags:

ui, patterns

splendidus says:

To use recurring solutions to solve common problems...
The purpose of this site is over time to fill some of the gaps - especially by providing code examples as to how how the different patterns can be implemented: to join theory with practice.

Add a Comment

Login to Comment. Not a member yet? Sign up

The world's happiest man

Conspiracy & Order: The psychological need...

Beauty by brains

7 Thinking Errors You Probably Make

Restaurant claims fame with touch-sensitiv...

Through superstition, conspiration people ...

More clips from splendidus

"Travel" Faster than Light?

An Illustrated Guide to Every Cable You Need

NASA To Live Stream Total Eclipse

Today's Top Clips

visit the Top Clips page

View the Top Clips from February 1, 2008

Embed This Clip In Your Site...

<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/bc06cc32-58b5-4772-bc14-7ee75ff0446d/B1C19F18-9D6A-4E04-A1E2-2CA30E853A73/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://ui-patterns.com/" href="http://ui-patterns.com/" style="font-size: 11px;">ui-patterns.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ui-patterns.com/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/ui-patterns.com/img/C359667B-71F9-4F92-B818-317E06984E07" alt="UI Patterns - User Interface Design Pattern Library" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ui-patterns.com/"><H2>Recently added patterns</H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ui-patterns.com/"><DIV class="pattern_presentation">
    <A href="http://ui-patterns.com/pattern/PasswordStrengthMeter"><IMG src="http://ui-patterns.com/uploads/thumbnail_pattern_images/PasswordStrengthMeter.gif?1201558635" alt="Passwordstrengthmeter" /></A>
    <H2><A href="http://ui-patterns.com/pattern/PasswordStrengthMeter">Password Strength Meter</A></H2>
    <P>You want to make sure your user's passwords a sufficiently strong in order to prevent malicious attacks</p> </DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ui-patterns.com/"><DIV class="pattern_presentation">
    <A href="http://ui-patterns.com/pattern/TagCloud"><IMG src="http://ui-patterns.com/uploads/thumbnail_pattern_images/TagCloud.gif?1201558635" alt="Tagcloud" /></A>
    <H2><A href="http://ui-patterns.com/pattern/TagCloud">Tag Cloud</A></H2>
    <P>The user wants to browse content by popularity or most elaborate topic</p> </DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ui-patterns.com/"><DIV class="pattern_presentation">
    <A href="http://ui-patterns.com/pattern/StepsLeft"><IMG src="http://ui-patterns.com/uploads/thumbnail_pattern_images/StepsLeft.gif?1201558635" alt="Stepsleft" /></A>
    <H2><A href="http://ui-patterns.com/pattern/StepsLeft">Steps Left</A></H2>
    <P>The user is about to go through the process of filling in data over several steps and is in need of guidiance.</p> </DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ui-patterns.com/"><DIV class="pattern_presentation">
    <A href="http://ui-patterns.com/pattern/Carousel"><IMG src="http://ui-patterns.com/uploads/thumbnail_pattern_images/Carousel.gif?1201558634" alt="Carousel" /></A>
    <H2><A href="http://ui-patterns.com/pattern/Carousel">Carousel</A></H2>
    <P>The user needs to browse through a set of items and possibly select one of them</p> </DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ui-patterns.com/"><DIV class="pattern_presentation">
    <A href="http://ui-patterns.com/pattern/ShoppingCart"><IMG src="http://ui-patterns.com/uploads/thumbnail_pattern_images/ShoppingCart.gif?1201558635" alt="Shoppingcart" /></A>
    <H2><A href="http://ui-patterns.com/pattern/ShoppingCart">Shopping Cart</A></H2>
    <P>The user wants to buy multiple products, which is collected over time through a shopping session.</p> </DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ui-patterns.com/"><DIV class="pattern_presentation">
    <A href="http://ui-patterns.com/pattern/Pagination"><IMG src="http://ui-patterns.com/uploads/thumbnail_pattern_images/Pagination.gif?1201558635" alt="Pagination" /></A>
    <H2><A href="http://ui-patterns.com/pattern/Pagination">Pagination</A></H2>
    <P>The user needs to view a subset of sorted data that is not easily displayed on one page.</p> </DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ui-patterns.com/"><LI class="category">
      Tables
<UL class="patterns">
                <LI class="pattern"><A href="http://ui-patterns.com/pattern/SortByColumn">Sort By Column</A></LI>
                <LI class="pattern"><A href="http://ui-patterns.com/pattern/AlternatingRowColors">Alternating Row Colors</A></LI>
              </UL>
</LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ui-patterns.com/"><LI class="category">
      Tabs
<UL class="patterns">
                <LI class="pattern"><A href="http://ui-patterns.com/pattern/ModuleTabs">Module Tabs</A></LI>
                <LI class="pattern"><A href="http://ui-patterns.com/pattern/NavigationTabs">Navigation Tabs</A></LI>
              </UL>
</LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ui-patterns.com/"><LI class="category">
      Jumping in hierarchy
<UL class="patterns">
                <LI class="pattern"><A href="http://ui-patterns.com/pattern/Breadcrumbs">Breadcrumbs</A></LI>
                <LI class="pattern"><A href="http://ui-patterns.com/pattern/ShortcutDropdown">Shortcut Dropdown</A></LI>
                <LI class="pattern"><A href="http://ui-patterns.com/pattern/HomeLink">Home Link</A></LI>
                <LI class="pattern"><A href="http://ui-patterns.com/pattern/FatFooter">Fat Footer</A></LI>
              </UL>
</LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://ui-patterns.com/"><LI class="category">
      Fly-out menus
<UL class="patterns">
                <LI class="pattern"><A href="http://ui-patterns.com/pattern/VerticalDropdownMenu">Vertical Dropdown Menu</A></LI>
                <LI class="pattern"><A href="http://ui-patterns.com/pattern/HorizontalDropdownMenu">Horizontal Dropdown Menu</A></LI>
                <LI class="pattern"><A href="http://ui-patterns.com/pattern/AccordionMenu">Accordion Menu</A></LI>
              </UL>
</LI></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/B1C19F18-9D6A-4E04-A1E2-2CA30E853A73/blog/" title="blog or email this clip"><img src="http://content7.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>

Clipmarks: Home; New Clips; Top Clips; Dashboard

Popular Topics: News; Life; Science; Technology; Entertainment

Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch

Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map

About Clipmarks: About Us; Contact; Blog; Copyright; Privacy; EULA

Search Options

Related Clips

More clips from splendidus

Today's Top Clips