12 Standard Screen Patterns

2010 Update- 15 patterns and 80 new examples

By Theresa Neil

As Bill mentioned in an earlier post, we don’t want to limit this blog to just the principles and patterns found in the book. For that you can check out our Explore the Book section. In the spirit of that, I want to share an additional set of principles and patterns I have been using for RIA design. While the book takes a much more consumer web site orientation, these concepts are central to enterprise application and web productivity application design and more broad than those discussed in the book.

This is the first article in a three part series.

  1. Standard Screen Patterns: 12 patterns w/100 examples
  2. Essential Controls: 30 controls for RIA design and development
  3. Components for Commonly Requested Features: 15 patterns and examples
standard_screen_patterns

With more companies turning to RIA frameworks for enterprise software development, these screen patterns are indispensable for product managers, UX designers, information architects, interaction designers and developers. The patterns rely heavily upon desktop design principles, subtly blended with many of the better RIA components and principles. I’ve included 100 examples to illustrate these patterns, pulled from desktop, Flex/AIR, Ajax, Laszlo, and Silverlight applications.

01. Master/Detail

Master/Detail screen pattern can be vertical or horizontal. Ideal for creating an efficient user experience by allowing the user to stay in the same screen while navigating between items. Horizontal layout is a good choice when the user needs to see more information in the master list than just a few identifiers- or when the master view is comprised of a set of items that each have additional details. Click on thumbnail for larger image OR download the PDF.

02. Column Browse

The Browse screen pattern can be vertical or horizontal. Ideal for creating an custom user experience by allowing the user to start from various entry points for navigating to the item(s) they are interested in.

03. Search/ Results

The Search screen pattern can range from very simple to quite advanced. Ideal for creating an efficient user experience by allowing the user to navigate directly to an item or set of items meeting specific criteria.

04. Filter Dataset

The Filter Dataset screen pattern can be vertical or horizontal. Ideal for creating an efficient user experience by allowing the user to refine a set of known data, or further refine search results.

05. Forms

All Form screens should be approached with a solid understanding of usability and design best practices. Refer to “Web Form Design: Filling in the Blanks” by Luke Wroblewski for reference.

06. Palette/ Canvas

The Palette/ Canvas screen pattern is seldom the right pattern to apply, but it is the only pattern for documenting or creating: linear or non-liner processes; flow diagrams; screen layouts; design/diagram with physical size or layout constraints.

07. Dashboard

A well designed Dashboard will provide: key information at a glance, real time data, easy to read graphics, clear entry points for exploration This is typically not achieved by displaying a single screen of metrics (either in a big table, or just a bunch of graphs). Providing a high degree of customization is no substitute for user research and testing. Stephen Few has a nice book on this topic Information Dashboard Design: The Effective Visual Communication of Data .

08. Spreadsheet

The Spreadsheet screen pattern is ideal for creating an efficient user experience by allowing the user to easily scan, edit and enter information (in bulk). The Spreadsheet should provide the following functionality: standard table features like sort, hide/show columns, rearrange columns, group by (if applicable), global level undo/redo, add/insert/delete row, keyboard navigation, import and export.

09. Wizard

The Wizard/Quick Start screen pattern is ideal for creating an efficient user experience by guiding the user through a complex or infrequent workflow.

10. Question & Answer

The Q&A screen pattern is ideal for creating an efficient user experience by allowing the user to enter known information and receive a solution. Q & A differs from Search in that this pattern should be used to assist users in identifying possible options or a single recommendation in an arena they are lacking expertise (health insurance, mortgages, planning, purchases).

11. Parallel Panels

The Parallel Panels screen pattern can be stacked (showing one at a time) or unstacked (showing all at once). This pattern is ideal for organizing chunks of information that are similar or have interdependent tendencies. Efficiency is gained by keeping the user in one screen. Ideal candidates for the stacked variation of this pattern are simple work-flows with: a high level, visible goal that is fed by multiple inputs, multiple non-sequential steps. This combines a number of the web site patterns outlined in “Designing Interfaces” by Jennifer Tidwell for a single pattern for chunking and displaying data.

pp_ex4

12. Interactive Model

The Interactive Model screen pattern is characterized by many interactive elements associated with the key object (a calendar, map, graph, chart, canvas). It is ideal for creating a user experience that is closely aligned with the user’s mental model (a natural fit). Excellent candidates for this pattern are: calendars, maps, gantt charts, what-if scenarios (including calculators), WYSIWYG editors (including photo editing).

Bonus. Blank State

This is the natural state of the application, before any data has been entered or accessed. The book, “Getting Real” by 37signals”explains that a blank state screen is an excellent place to set users expectations. By giving them a preview this can lower anxiety and reduce frustration and confusion. Items to include in a blank state screen include: videos, quick tutorials, help tips, a screenshot of what a fully loaded screen will look like.

Missing Patterns?

Noticeably absent are two patterns that are grossly overused and misused in enterprise software- portals and tabs.

  1. Portals- If your market research, business requirements and user feedback lead you to design a portal, follow the same design principles and best practices as the Dashboard pattern.
  2. Tabs- Tabs are a component, and ultimately not a screen pattern. They are to alternate between views of data in the same context. If the data structure is leading you to a tab heavy UI design, I have two suggestions. First, reconsider the IA. Use card sorting and/or hire a professional Information Architect to help you for a few days. Second, follow the same design principles and best practices as the Parallel Panels pattern.

You can download a PDF of this post which includes full descriptions of each pattern, as well as best practices .


References

If you are looking for web site design patterns, here are a number of excellent books:

238 Comments

  1. Timothy Said,

    January 20, 2009 @ 12:19 pm

    Excellent post! Very informative. thanks.

  2. ScreenShots Said,

    January 20, 2009 @ 3:46 pm

    Great Post, but please replace the enlarged screenshots with the full size versions.

  3. ThemeLib Said,

    January 20, 2009 @ 8:05 pm

    The screenshot is too small :(

  4. theresaneil Said,

    January 20, 2009 @ 8:16 pm

    I am sorry, they are very small. But…
    I have a very nice PDF you can download and share with your friends. It also includes the best practices for each pattern, and bigger screen shots in full resolution (so you can zoom in and see every detail).

    I will link this too the post too.

    http://www.theresaneil.com/files/standard_screen_patterns.pdf

  5. admin Said,

    January 20, 2009 @ 9:52 pm

    I also plan on getting the screenshots from Theresa and putting them on the companion Flickr site.

  6. akie.nl » 12 screen patterns for web interfaces Said,

    January 21, 2009 @ 6:30 am

    [...] these 12 standard screen patterns for inspiration when designing web [...]

  7. Ricardo Bánffy Said,

    January 21, 2009 @ 7:57 am

    Allow me to suggest a couple older examples of the column browser that predates the web by a couple decades:

    http://media.arstechnica.com/images/gui/7-AltoST.jpg

    http://www.sra.co.jp/people/aoki/SmalltalkWorkbookJ/BrowserOld.gif

  8. Josh Peters Said,

    January 21, 2009 @ 3:10 pm

    You end with a knock against tabs, yet in the screen shots for “Parallel Panels” you have a screen shot of iTunes using tabs. Isn’t a tab really the same thing as a “Parallel Panel” just represented slightly differently visually speaking?

  9. links for 2009-01-21 « Mandarine Said,

    January 21, 2009 @ 8:07 pm

    [...] Designing Web Interfaces: 12 Standard Screen Patterns (tags: layout webdesign inspiration) [...]

  10. links for 2009-01-21 | hxf148 Said,

    January 21, 2009 @ 10:01 pm

    [...] Designing Web Interfaces: 12 Standard Screen Patterns [...]

  11. Standard Screen Patterns « la vanguardia Said,

    January 21, 2009 @ 11:40 pm

    [...] See More   [...]

  12. 12 Pattern per Interfacce Web / Melodycode.com - Life is a flash Said,

    January 22, 2009 @ 12:36 am

    [...] comuni relativi ad una certa tipologia di interfaccia/operazione. Nel articolo intitolato “Designing Web Interfaces: 12 Standard Screen Patterns” possiamo trovare dei pattern molto utili (per interfaccia di ricerca, browsing, filtraggio, [...]

  13. fm Said,

    January 22, 2009 @ 1:06 am

    good interesting post

    well at least for us coders

  14. Designing Web Interfaces: 12 Standard Screen Patterns | Konigi Said,

    January 22, 2009 @ 3:44 am

    [...] design patterns for building web interfaces that provide rich interaction. They’ve shared the full set of principles and patterns they use for RIA design in this article. URL designingwebinterfaces.com/des… [...]

  15. 12 tipos de maquetación estándar en diseños web « El bit campeador Said,

    January 22, 2009 @ 4:34 am

    [...] 12 Standard Screen Patterns + Bonus Pattern. Designing Web Interfaces: 12 Standard Screen Patterns [...]

  16. links for 2009-01-22 | Ip's. Said,

    January 22, 2009 @ 5:03 am

    [...] Designing Web Interfaces: 12 Standard Screen Patterns "Standard Screen Patterns: 12 patterns w/100 examples Essential Controls: 30 controls for RIA design and development Components for Commonly Requested Features: 15 patterns and examples Interaction Principles: 6 principles w/70 patterns" (tags: interfaces template designpatterns designpattern webdesign webdev reference) [...]

  17. links for 2009-01-22 « copula’s weblog Said,

    January 22, 2009 @ 5:03 am

    [...] Designing Web Interfaces: 12 Standard Screen Patterns (tags: 01 2009 webdesign screen interface templates) [...]

  18. links for 2009-01-22 « Brent Sordyl’s Blog Said,

    January 22, 2009 @ 6:02 am

    [...] 12 Standard Web Interface Wireframes To celebrate the release of our new O’Reilly book, “Designing Web Interfaces: Principles and Patterns for Rich Interactions”, I wanted to share the full set of principles and patterns I use for RIA design. These concepts are central to enterprise application and web productivity application design. (tags: tweet webdesign wireframes) Possibly related posts: (automatically generated)links for 2008-05-21It’s a little more cleaner than Twitte …Found on the Web Today 01/03/2009What Shape is Your Mission Statement? Tag Clouds for Marketing and Meaning… [...]

  19. links for 2009-01-22 | IndianGeek Said,

    January 22, 2009 @ 7:06 am

    [...] Designing Web Interfaces: 12 Standard Screen Patterns (tags: wireframes pattern interfaces webdev) Share and Enjoy: [...]

  20. theresaneil Said,

    January 22, 2009 @ 7:07 am

    Fixed in IE 7.

    Sorry for the inconvenience IE folks & thanks for letting me know :o )

  21. SEF Said,

    January 22, 2009 @ 8:49 am

    You’ve put the filter_vertical.png in twice instead of having the filter_horizontal.png next to it. (NB I checked that other one did exist already, so it’s only a matter of editing the page correctly to include it rather than having to create and upload it.)

  22. slabounty Said,

    January 22, 2009 @ 12:53 pm

    Nice article. It covers most everything I would have thought of.

  23. Standard web interface screen patterns at iainclaridge.net Said,

    January 23, 2009 @ 6:13 am

    [...] 12 Standard Screen Patterns, by Theresa Neil. [...]

  24. Tipare de design web, RIA’s si desktop - Web Design Arad Said,

    January 23, 2009 @ 2:18 pm

    [...] 12 Standard Screen Patterns [...]

  25. The Abarentos Narrative » links for 2009-01-23 Said,

    January 23, 2009 @ 3:01 pm

    [...] 12 Standard Screen Patterns (tags: interface gui interfaces designpattern ia ui ux) [...]

  26. NICCAI Said,

    January 23, 2009 @ 3:04 pm

    The palette/canvas pattern is useful and commonly used in 3rd party web applications that interact with other webpages – as in those that may be loaded via a bookmarklet.

  27. Standard Screen Patterns | Jeff Siarto Said,

    January 23, 2009 @ 3:11 pm

    [...] 12 stan­dard screen pat­terns for user inter­face design An in-​depth arti­cle on stan­dard screen pat­terns for user inter­faces writ­ten by fellow O’Reilly authors Bill Scott and Theresa Neil. This is the first of a three part series on the topic based off their new book Design­ing Web Interfaces. [...]

  28. Peter Svensson Said,

    January 24, 2009 @ 12:12 am

    Hi, I’ve written a new post that tries to use existing Dojo Ajax Toolkit unit tests and demos to show how to practically implement these patterns.

    http://unclescript.blogspot.com/2009/01/using-dojo-to-implement-12-standard.html

    Cheers,
    PS

  29. » OLDaily por Stephen Downes, enero 23, 2009 El Blog Boyacense: El sitio de referencia de tod@s l@s boyacenses Said,

    January 24, 2009 @ 2:40 am

    [...] también una versión PDF. Theresa Neil, Designing Web Interfaces (intefaces de diseño de web). [Liga] [etiquetas: páginas web, [...]

  30. Connected: Data Visualisation, Userfly, Screen Patterns | Pocket Noodle Said,

    January 24, 2009 @ 8:57 am

    [...] 12 Standard Screen Patterns, the first of a four part series from Bill Scott and Theresa Neil’s forthcoming book ‘Designing Web Interfaces‘. A must have for interaction designer. [...]

  31. 12 Standard Screen Patterns | exhero Said,

    January 24, 2009 @ 9:08 am

    [...] Web Interfaces zeigt anhand von über 100 Beispielen 12 Standard Screen Patterns. [...]

  32. 12 Padrões de Tela em Webdesign | Si14 Said,

    January 24, 2009 @ 4:16 pm

    [...] 12 padrões de tela, por Theresa Neil. Via Swissmiss. [...]

  33. UI Screen Patterns | Candes | Cristian Neagu - UI Designer, Developer, Consultant Said,

    January 25, 2009 @ 4:19 am

    [...] Principles and Patterns for Rich Interactions. The first article of tree sets consists of 12 Standard Screen Patterns and 100 examples of them in action. Next will be “Essential Controls: 30 controls for RIA design and [...]

  34. RIA patterns Said,

    January 25, 2009 @ 5:21 am

    [...] interfaces utilisateurs évoluent sans cesse, le web prend le look des applications dans le cas des RIA et les applications [...]

  35. Wzorce projektowe « Everyday things in use Said,

    January 25, 2009 @ 7:15 am

    [...] design, user interface design by Marcin Szuba w dniu styczeń 25th, 2009 Doskonały wpis o screen patterns dla RIA pochodzące z “Designing Web Interfaces Principles and Patterns for Rich Interaction“ [...]

  36. Linkdump for January 25th at found_drama Said,

    January 25, 2009 @ 1:01 pm

    [...] 12 Standard Screen Patterns (tagged: ui usability design webdev work ) [...]

  37. Mine seneste bookmarks (19.01.09 - 25.01.09) | Morten Gade Said,

    January 25, 2009 @ 4:03 pm

    [...] Designing Web Interfaces: 12 Standard Screen Patterns: (bysted ux patterns ) [...]

  38. Paper Bits – links for 2009-01-25 Said,

    January 25, 2009 @ 4:15 pm

    [...] while not going anywhere. And that would have been fine." (tags: papernet paper design lofi) 12 Standard Screen Patterns High level patterns for desktop and web interaction, explained in detail, with examples. (tags: [...]

  39. Interesting Links (2009-01-25) | Stock Wordpress Said,

    January 25, 2009 @ 10:48 pm

    [...] 12 Standard Screen Patterns [...]

  40. dolzenko Said,

    January 26, 2009 @ 12:44 am

    Blank State vs. Blank Slate always confuses me :)

    (37signals use the latter)

  41. links for 2009-01-26 at dekay.org Said,

    January 26, 2009 @ 3:02 am

    [...] each with 200 passengers aboard." (tags: car crash death accident statistics via:mento.info) 12 Standard Screen Patterns "As Bill mentioned in an earlier post, we don’t want to limit this blog to just the [...]

  42. Tanjadebie.nl » Blog Archive » 12 Standard Screen Patterns Said,

    January 26, 2009 @ 3:51 am

    [...] Standard Screen Patterns: 12 patterns w/100 examples [...]

  43. Search Design Patterns for Ideas and Inspiration - Things On Top Said,

    January 26, 2009 @ 7:35 am

    [...] Web Interfaces brings us 12 standard screen patterns for Rich Internet Application (RIA) design. Both “03. Search/Results” and “04. [...]

  44. Ramenos Said,

    January 26, 2009 @ 7:51 am

    Great Article. Thanks for this good and efficient summary :)

  45. Weekly Points of Interest at Experience Matters Said,

    January 26, 2009 @ 11:22 am

    [...] 12 Standard Screen Patterns [...]

  46. Interesting Links (2009-01-26) | Stock Wordpress Said,

    January 26, 2009 @ 9:40 pm

    [...] 12 Standard Screen Patterns [...]

  47. Chiang Mai Web Design Said,

    January 26, 2009 @ 10:24 pm

    Nice article.

  48. Useful Links for Web Designer « Chiang Mai Web Design Said,

    January 26, 2009 @ 11:19 pm

    [...] 12 Standard Screen Patterns [...]

  49. VocabControl » Designing Web Interfaces Said,

    January 27, 2009 @ 2:24 am

    [...] haven’t read the book yet, but this blog post on screen templates presents 12 basic layouts and the sort of information they work best with. It could be a useful [...]

  50. Dorela Said,

    January 27, 2009 @ 2:41 am

    nice post, thanks for sharing!

  51. Screen Patterns — Gold | UI and us Said,

    January 27, 2009 @ 7:20 am

    [...] has done it. From the as-yet unreleased book Designing Web Interfaces comes an archetypal set of 12 Screen Patterns. These ‘blueprints’ for application layout include 100 screenshots real software which [...]

  52. 12 patrones estándar de pantallas » Infotectura Said,

    January 27, 2009 @ 5:25 pm

    [...] mercadeo de su nuevo libro Designing Web Interfaces, Bill Scott y Theresa Neill han publicado un grupo de patrones de pantallas comunes en el diseño web. Es el primero de tres posts, parece un recurso extremadamente [...]

  53. Patrones de Usabilidad para Intefaces de Usuario « websenior Said,

    January 28, 2009 @ 3:03 am

    [...] Un excelente artículo de patrones de usabilidad (en inglés) donde nos sugieren que estética o formación deben tener nuestras pantallas de [...]

  54. Bookmarks for January 21st through January 28th → Stevey.com Said,

    January 28, 2009 @ 8:56 am

    [...] Designing Web Interfaces: 12 Standard Screen Patterns“worthy of review” [...]

  55. Links for 29-01-2009 | Blogmines Said,

    January 28, 2009 @ 5:57 pm

    [...] Designing Web Interfaces – 12 Standard Screen Patterns [...]

  56. storage.goodmix » Blog Archive » links for 2009-01-28 Said,

    January 28, 2009 @ 10:00 pm

    [...] 12 Standard Screen Patterns 12のインターフェースパターン (tags: interface) [...]

  57. Patrones de diseo para sitios corporativos Said,

    January 29, 2009 @ 7:00 am

    [...] | Recopilación de patrones de diseño Etiquetas: CSS diseoweb themes sitioscorporativos blogcorporativios plantillas Comentar [...]

  58. Link Pimp Friday 30/01/09 Said,

    January 30, 2009 @ 2:43 am

    [...] Designing a better user interface. [...]

  59. links for 2009-01-30 « Amy G. Dala Said,

    January 30, 2009 @ 6:01 am

    [...] 12 Standard Screen Patterns (tags: web_design design ui) [...]

  60. Mère Teresa Said,

    January 30, 2009 @ 8:57 am

    Thank you for this interesting work !

  61. splat Said,

    January 30, 2009 @ 4:51 pm

    Cool post, I’m subscribing to this blog.

    What was the website shown in the 2nd dashboard screenshot though? I’d like to know.

    Cheers,

    Splat

  62. Splat Said,

    January 31, 2009 @ 7:03 am

    Thanks for replying.

    I actually mean the first dashboard screenshot — it was pretty late at night where I was :P

    Thank you for the links — very informative.

    Cheers again,

    Splat

  63. floatfix » A discussion in User Experience » Blog Archive » About Patterns Said,

    January 31, 2009 @ 10:34 pm

    [...] Designing web Interfaces  [...]

  64. Weekly Roundup :: gLog - Thoughts from Geoff Alday (a User Experience Designer in Nashville, Tennessee). Said,

    February 1, 2009 @ 5:53 am

    [...] 12 Standard Screen Patterns – For enterprise and web applications.  Nice find since this type of article is usually geared toward websites. [...]

  65. Ergonomie Web » Blog Archive » 12 modèles d’interfaces pour applications web ou desktop Said,

    February 1, 2009 @ 12:29 pm

    [...] des templates de solutions. Vous pouvez en lire plus sur chaque schémas sur le site du livre “Designing Web Interfaces” qui constitue une lecture très intéressante. L’article propose en outre un pdf beaucoup [...]

  66. Seta Digital Blog » Blog Archive » links for 2009-02-02 Said,

    February 2, 2009 @ 10:00 am

    [...] 12 Standard Screen Patterns (tags: webdev design web usability patterns wireframes interface) [...]

  67. whois Said,

    February 3, 2009 @ 3:26 am

    Thanks for post.
    It’s a good food for brains :)

  68. 今日僕が気になったもの_Feb 3 ‘09 | ReInit_creative Log Said,

    February 3, 2009 @ 3:41 pm

    [...] 12 Standard Screen Patterns [...]

  69. builder2 » Links of interest Said,

    February 5, 2009 @ 8:39 am

    [...] 12 Standard Screen Patterns [...]

  70. » OLDaily por Stephen Downes, enero 23, 2009 TIC, E/A, PER…: Said,

    February 9, 2009 @ 12:42 pm

    [...] también una versión PDF. Theresa Neil, Designing Web Interfaces (intefaces de diseño de web). [Liga] [etiquetas: páginas web, [...]

  71. software developement Said,

    February 9, 2009 @ 6:15 pm

    great list..thanks for sharing it. this is really informative.

  72. Rich Internet Application Patterns « Stefosphère 2.0 Said,

    February 10, 2009 @ 1:57 am

    [...] Internet Application Patterns 10 02 2009 Le blog Designing Web Interface propose une synthèse des typologies des sites web à travers 12 modèles, chaque modèle étant [...]

  73. Wednesday, January 21, 2009 — shiner.clay Said,

    February 12, 2009 @ 12:48 pm

    [...] 12 standard screen patterns for web interface design [...]

  74. Methink.com - Ruby on Rails Web Development & Consulting: UI Design Patterns « Said,

    February 18, 2009 @ 5:39 pm

    [...]   - 12 Standard Screen Patterns [...]

  75. Tech4him - Technology with Integrity » Blog Archive » Christian Technology Web Resource Blog Said,

    February 19, 2009 @ 5:45 pm

    [...] 12 Standard Screen Patterns – An interesting article from DesigningWebInterfaces.com. These patterns are specifically discussed in relation to the adoption of RIA platforms. [...]

  76. 현웅재 Said,

    February 19, 2009 @ 8:59 pm

    wow i love it .
    if you permmit i want to write this thema in my blog to korean case and so on.
    how about you?

  77. 웹사이트에서 사용되는 30개의 필수 컨트롤들 | 웹 개발자 아빠의 이야기 Said,

    February 25, 2009 @ 4:08 pm

    [...] 좋은 정보들이 올려져 있습니다. “15 Common Component Patterns“, “12 Standard Screen Patterns” 와 같은 고급 정보들도 들어가 있습니다. Posted in Web RSS 2.0 | Trackback | [...]

  78. lyricsvideo.net Said,

    February 25, 2009 @ 8:46 pm

    Thank you very much for nice screen patterns! I plan to use one of them for redesigning http://www.vietnam-embassy.cn next time.

  79. Programación en Internet » Patrones de diseño de pantallas Said,

    February 27, 2009 @ 2:15 am

    [...] de encontrar la página 12 Standard Screen Patterns. En esta página se describen 12 tipos de diseños de [...]

  80. yamaha Said,

    March 1, 2009 @ 5:22 pm

    glad ive stumbled to your page. thanks for posting this!..this is really helpful. :)

  81. Scarf*oo Said,

    March 5, 2009 @ 6:53 am

    A different kind of post finally, glad I’ve found this. I am right in the process of realigning our CMS tool and this should come in handy.

  82. El_Member Said,

    March 27, 2009 @ 2:25 am

    Fantastic topic Theresa Neil, purely educational I’d say. I’ll bookmark this page for future referencing since I have been doing some web developing lately.

  83. Some thoughts on graphical user interface design (GUI): part 1 | techcenterblog Said,

    April 14, 2009 @ 5:58 am

    [...] are different layouts or screen patterns for different purposes.   Clicky, a web analytics program, is a good example of the Dashboard [...]

  84. rooswanti Said,

    April 14, 2009 @ 6:59 pm

    Wow…nice article, great pdf. Very useful. Thx.

  85. rooswanti Said,

    April 14, 2009 @ 11:32 pm

    I have read PDF version & I have 2 questions:

    1. In your PDF (at page 2), you wrote: “Don’t use tabs in the master or detail pane.”
    I don’t understand why we don’t use tabs in the master or detail pane. What about the complex data? May I use tabs in the detail pane to represent the complex data?

    2. In your PDF (at page 4), you wrote: “Don’t use the bottom pane as an extended area for editing table fields. Use the Spreadsheet pattern or a light weight layer for editing.”
    Why we don’t use it? I think it’s more efficient if we use the bottom pane as the detail pane and also as the editing pane.

  86. website development abu dhabi Said,

    April 20, 2009 @ 8:57 pm

    Excellent demonstration with pictures. You have select very good and informatics topic. I think this is the base for any application. Why don’t you combine your all three parts and publish a book, then sell it on to Amazon.com. I am shore you will get lot of hits like SEO books.

  87. Personal Blog — John Keyes – Linkeyes 1st February 2009 Said,

    April 21, 2009 @ 3:12 am

    [...] would still be reading this, thinking that startups are worth all this hassle” – Dave McClure 12 Standard screen patterns for web interfaces. This wooden Vespa is a very fine piece of craftsmanship. Snakebite is going to [...]

  88. 12 Standard Screen Patterns / Nathan Philpot. Said,

    May 5, 2009 @ 2:54 pm

    [...] 12 Standard Screen Patterns “I want to share an additional set of principles and patterns I have been using for RIA design. By Theresa Neil PreviousMobile Design & Development Workshop Assets var gaJsHost = ((”https:” == document.location.protocol) ? “https://ssl.” : “http://www.”); document.write(unescape(”%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”)); var pageTracker = _gat._getTracker(”UA-3470140-1″); pageTracker._initData(); pageTracker._trackPageview(); [...]

  89. Neue Links / Neustart-Magazin Said,

    May 6, 2009 @ 2:03 pm

    [...] 12 Standard Screen Patterns – Vorlagen und Erläuterungen zum Thema Screendesign-Grundlagen für RIA (Rich Internet Applications). [...]

  90. Tagz | "Designing Web Interfaces: 12 Standard Screen Patterns" | Comments Said,

    May 16, 2009 @ 8:55 am

    [...] [upmod] [downmod] Designing Web Interfaces: 12 Standard Screen Patterns (designingwebinterfaces.com) 1 points posted 3 months, 3 weeks ago by jeethu tags layout [...]

  91. 16 Crucial Webdesign and Usability Best Practice Compilations and Tools | tripwire magazine Said,

    June 4, 2009 @ 1:57 pm

    [...] 12 Standard Screen Patterns [...]

  92. 16个关键,网页设计和可用性最佳实践的汇编和工具 | ⊹⊱⋛⋋ISong榮耀ζ組織™⋋⋛⊱⊹ Said,

    June 11, 2009 @ 5:49 am

    [...] 12个标准屏幕样式 [...]

  93. gaus surahman Said,

    June 20, 2009 @ 12:43 pm

    I am looking for more information on RIA best practices. Bookmarked. Thanks for taking time to elaborate this.

  94. Helen : Сценарий Master/Detail в Blend 3 Said,

    June 23, 2009 @ 10:24 am

    [...] на глаза попался один занимательный пост “12 Standard Screen Patterns” (автор Theresa Neil). Указанные шаблоны по отдельности [...]

  95. Сценарий Master/Detail в Blend 3 - Территория блога - Территория Silverlight Said,

    June 23, 2009 @ 11:06 am

    [...] на глаза попался один занимательный пост “12 Standard Screen Patterns” (автор Theresa Neil). Указанные шаблоны по отдельности [...]

  96. calabonga Said,

    June 23, 2009 @ 1:27 pm

    очень интересный и информативный пост. спасибо.
    very interesting and informative post, thanks

  97. 3d desing Said,

    July 2, 2009 @ 10:01 pm

    Really nice and much informative post great knowledge.

  98. Itákora » Lecturas recomendadas (9) Said,

    July 6, 2009 @ 8:43 am

    [...] Patrones de diseño habituales en entornos corporativos. Visto en Grancomo. [...]

  99. Jay Soni – From Bondage to Freedom… » Blog Archive » What’s Golden Said,

    July 18, 2009 @ 1:32 pm

    [...] in interactive media. It’s unrealistic to think our old methods can fill in all the gaps, but new interaction patterns and visual languages emerge everyday. These are the building blocks for our new design [...]

  100. Twitted by onasis Said,

    July 20, 2009 @ 7:39 am

    [...] This post was Twitted by onasis [...]

  101. 12 Standard Screen Patterns Said,

    August 1, 2009 @ 7:07 am

    [...] See more here: 12 Standard Screen Patterns [...]

  102. tripwire magazine | tripwire magazine Said,

    August 3, 2009 @ 2:40 pm

    [...] 12 Standard Screen Patterns [...]

  103. 35+ Essential Web Design Resources on Best Practice, Tips and Techniques | The Muliati.Com goBlog Said,

    August 3, 2009 @ 10:29 pm

    [...] 12 Standard Screen Patterns [...]

  104. 100+ Essential Design Resources That you should know about | Said,

    August 5, 2009 @ 5:44 am

    [...] 12 Standard Screen Patterns [...]

  105. Up-leveling the Flex User Interface Discussion | Ryan Stewart – Rich Internet Application Mountaineer Said,

    August 11, 2009 @ 12:10 am

    [...] 12 Standard Screen Patterns – A great list of standard UI patterns that you can leverage in your Flex applications. She literally has 100 examples of RIAs that use these patterns. [...]

  106. Twitted by widged Said,

    August 11, 2009 @ 1:46 am

    [...] This post was Twitted by widged [...]

  107. All Things Open Source » Blog Archive » Up-leveling the Flex User Interface Discussion Said,

    August 12, 2009 @ 6:43 am

    [...] 12 Standard Screen Patterns – A great list of standard UI patterns that you can leverage in your Flex applications. She literally has 100 examples of RIAs that use these patterns. [...]

  108. 20 Useful Web Design Tips, Techniques and Best Practice : Useful+ Said,

    August 14, 2009 @ 4:39 am

    [...] 12 Standard Screen Patterns [...]

  109. Twitter Trackbacks for 12 Standard Screen Patterns [designingwebinterfaces.com] on Topsy.com Said,

    August 20, 2009 @ 11:01 pm

    [...] 12 Standard Screen Patterns designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns – view page – cached how to treat Herpes labialis online order clomid drugstore women’s health buy acyclovir online pet meds online free avi download movies hdtv torrent — From the page [...]

  110. Techwave » Blog Archive » 50 Most Usable RIAs Said,

    September 2, 2009 @ 6:06 am

    [...] website prototypes.Noteworthy design elements: Well designed information architecture, use of standard screen patterns and controls for structuring and rearranging a site map and building out each screen and toggling [...]

  111. 50 Most Usable RIAs - Partytow Said,

    September 8, 2009 @ 4:40 pm

    [...] design elements: Well designed information architecture, use of standard screen patterns and controls for structuring and rearranging a site map and building out each screen and toggling [...]

  112. Karl Dubost (karlpro) 's status on Wednesday, 30-Sep-09 13:49:36 UTC - Identi.ca Said,

    September 30, 2009 @ 5:49 am

    [...] Nice summary of Screen Patterns Design http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns [...]

  113. 12 Standard Screen Patterns | My Web Development Bookmarks Said,

    October 13, 2009 @ 5:42 am

    [...] Go here to read the rest: 12 Standard Screen Patterns [...]

  114. 12 Plantillas estándards para diseño de web — jotaerre.net Said,

    October 30, 2009 @ 2:34 pm

    [...] la web Designing Web Interfaces he encontrado este interesante artículo: 12 Standard Screen Patterns donde se pueden encontrar 12 diseños para web corportativas (y no tan [...]

  115. What’s Golden « ThisGlobe.com Said,

    November 4, 2009 @ 7:20 pm

    [...] media. It’s unrealistic to think our old methods can fill in all the gaps, but new interaction patterns and visual languages emerge everyday. These are the building blocks for our new design principles. [...]

  116. Sean Said,

    November 13, 2009 @ 8:42 am

    The PDF download link results in a 404 error. Can you send the document to me via email or notify me once you’ve fixed the download link? I’d like to utilize the thinking here. Thank you.

  117. Genduk Said,

    November 14, 2009 @ 9:45 am

    Nice tutorial, thanks for share

  118. Archetype Said,

    November 25, 2009 @ 9:43 am

    Informative post!!! Thanks for sharing.

  119. » Interface- & Interaktionspatterns Applicationdesign WS09/10 Said,

    December 14, 2009 @ 10:51 am

    [...] http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns [...]

  120. Twitted by nguyentranvu Said,

    December 31, 2009 @ 7:29 pm

    [...] This post was Twitted by nguyentranvu [...]

  121. Danny Foo Said,

    December 31, 2009 @ 7:42 pm

    This is great for me as I’ve to reason with my clients a lot. :)

    And it’s going into my to-buy list too.

  122. Twitted by Mike_More Said,

    December 31, 2009 @ 8:14 pm

    [...] This post was Twitted by Mike_More [...]

  123. 12 Standard Screen Patterns » Web Design Said,

    December 31, 2009 @ 9:52 pm

    [...] 12 Standard Screen Patterns [...]

  124. Twitted by alexeysibirtsev Said,

    January 2, 2010 @ 1:36 am

    [...] This post was Twitted by alexeysibirtsev [...]

  125. UI/UX Design Pattern Repository « Techdew Said,

    February 9, 2010 @ 1:33 pm

    [...] 12 Standard screen patterns http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns [...]

  126. Screen Layouts for Rich Internet Applications Said,

    February 10, 2010 @ 6:56 am

    [...] year we posted an article on 12 Standard Screen Patterns. It has been incredibly popular so we updated it for 2010. The full article will be published at UX [...]

  127. RIA Screen Layouts « Theresa Neil Said,

    February 11, 2010 @ 5:42 am

    [...] 11, 2010 Last year I posted an article on 12 Standard Screen Patterns. It has been incredibly popular so I updated it for 2010. The full article will be published at UX [...]

  128. Steve Pick Said,

    February 11, 2010 @ 2:28 pm

    This and your other presentations have been extremely useful. Your a marvel. :)

    Thankyou
    Steve

  129. Paginas web Guatemala Said,

    February 21, 2010 @ 10:35 am

    Thanks for this patterns, they are very useful!!!

    Best regardsss!!!! ;)

  130. Designing User Interfaces For Business Web Applications - Smashing Magazine Said,

    February 25, 2010 @ 5:57 am

    [...] [...]

  131. Designing User Interfaces For Business Web Applications | Best Web Magazine Said,

    February 25, 2010 @ 6:30 am

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  132. Designing User Interfaces For Business Web Applications | Web Design Cool Said,

    February 25, 2010 @ 7:18 am

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  133. Designing User Interfaces For Business Web Applications « wonnab Said,

    February 25, 2010 @ 7:50 am

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  134. Wordpress Blog Services - Designing User Interfaces For Business Web Applications Said,

    February 25, 2010 @ 8:01 am

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  135. Designing User Interfaces For Business Web Applications | Webreweries.com | Tutotials | Vectors | Photoshop | After Effects | Animation | Design | Promotion | Freebies | Branding | Name it, You have it ! Said,

    February 25, 2010 @ 1:00 pm

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  136. Blogroll 01/10: Viel Gezwitscher « Zeugenberg.de Said,

    February 25, 2010 @ 3:19 pm

    [...] designingwebinterfaces.com: 12 Standard Screen Patterns 2010 Update- 15 patterns and 80 new examples… | Teil 1 von 3 Beschlagwortet mit:Blogs, Fotografie, SQL, Topliste, Twitter [...]

  137. Designing User Interfaces For Business Web Applications « Usability – My Love Said,

    February 25, 2010 @ 5:31 pm

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  138. Barker Design | Graphic & Web Development » Blog Archive » Designing User Interfaces For Business Web Applications Said,

    February 26, 2010 @ 3:03 am

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  139. AMB Album » Designing User Interfaces For Business Web Applications Said,

    February 26, 2010 @ 4:30 am

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  140. Designing User Interfaces For Business Web Applications | WebsGeek Said,

    February 26, 2010 @ 6:39 am

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  141. A short list of UX design patterns resources I found this week. User Experience (UX) - Expert heuristic evaluations, website coaching, & usability testing - Normal Modes Normal Modes Said,

    February 26, 2010 @ 5:10 pm

    [...] 12 Standard Screen Patterns [...]

  142. Designing User Interfaces For Business Web Applications | TipTe.com Said,

    February 27, 2010 @ 12:01 am

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  143. 12 Standard Screen Patterns | UX Booth Said,

    February 27, 2010 @ 7:00 am

    [...] HomeResourcesArticles12 Standard Screen Patterns Community Resource12 Standard Screen Patterns http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patternsI want to share an [...]

  144. Designing User Interfaces For Business Web Applications « DesignerLinks Said,

    February 28, 2010 @ 8:56 pm

    [...] [...]

  145. » Blog Archive » Designing User Interfaces For Business Web Applications Said,

    March 2, 2010 @ 6:47 am

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  146. Designing User Interfaces For Business Web Applications | MarketingTypo.com Said,

    March 2, 2010 @ 9:09 pm

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  147. RodeWorks » Blog Archive » Desiging web app is different from designing websites Said,

    March 3, 2010 @ 2:51 am

    [...] 12 standard screen patterns [...]

  148. uberVU - social comments Said,

    March 3, 2010 @ 8:43 am

    Social comments and analytics for this post…

    This post was mentioned on Twitter by LaurentBerry: Designing Web Interfaces : 12 Standard Screen Patterns
    http://bit.ly/pXAbv…

  149. links for 2010-03-03 | On9 Systems Said,

    March 3, 2010 @ 4:40 pm

    [...] 12 Standard Screen Patterns (tags: design ui webdesign usability patterns interface web wireframes) [...]

  150. Designing User Interfaces For Business Web Applications « WebGlide - UX Said,

    March 3, 2010 @ 10:21 pm

    [...] [...]

  151. Designing User Interfaces For Business Web Applications Said,

    March 4, 2010 @ 11:31 am

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  152. Designing User Interfaces For Business Web Applications | iDezigner.Com Said,

    March 4, 2010 @ 3:46 pm

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  153. putaopi Said,

    March 17, 2010 @ 5:20 pm

    Nice tutorial,and i will translate it to Chinese.

  154. Designing User Interfaces For Business Web Applications | Blog Said,

    March 18, 2010 @ 3:35 am

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  155. 商业Web应用程序的用户界面设计 | 帕兰映像 Said,

    March 19, 2010 @ 10:14 pm

    [...] 这张截图来自12个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  156. 商务Web应用程序的界面设计 | 国强有「画」要说 Said,

    March 21, 2010 @ 7:42 am

    [...] 这张截图来自12个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  157. 商务网站设计2 « 国强有画要说 Said,

    March 21, 2010 @ 8:03 am

    [...] 这张截图来自12个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  158. Living the dream » Blog Archive » 商务web应用程序的界面设计larens Said,

    March 21, 2010 @ 9:10 pm

    [...] 这张截图来自12个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  159. 商务web应用程序的界面设计 – Said,

    March 22, 2010 @ 5:39 pm

    [...] 这张截图来自12个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  160. หางาน Said,

    March 24, 2010 @ 9:07 am

    หางาน งานราชการ งานเอกชน งานพาร์ททาม ดาวโหลดแนวข้อสอบ
    คนรักรถ รถมือสอง car รถยนต์มือสอง ตลาดรถ ขายรถ ขายอะไหล่

  161. Designing User Interfaces For Business Web Applications | Design and Grphic News and Event Said,

    March 26, 2010 @ 12:49 pm

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  162. ST·Zeus | 用户为先·专注体验 » Blog Archive » 商务web应用程序的界面设计 Said,

    April 2, 2010 @ 2:06 am

    [...] 这张截图来自12个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  163. 商业Web应用程序的用户界面设计 | Haozi's Blog Said,

    April 7, 2010 @ 8:23 pm

    [...] 这张截图来自12个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  164. 商务Web应用程序的界面设计(译文) « AEtree – Blog Everything Said,

    April 12, 2010 @ 3:16 am

    [...] 来自12个标准屏幕版式 [...]

  165. Free I Share 分享资源 分享快乐 » Blog Archive » 12 Standard Screen Patterns Said,

    April 17, 2010 @ 7:59 pm

    [...] 文章来源:http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns 文章作者:Theresa Neil [...]

  166. 商务web应用程序的界面设计 « 产品设计之路 Said,

    April 26, 2010 @ 1:03 am

    [...] 这张截图来自12 个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  167. 商业Web应用程序的用户界面设计 « Billy 的博客 Said,

    May 4, 2010 @ 7:32 pm

    [...] 这张截图来自12个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  168. รถมือสอง Said,

    May 5, 2010 @ 5:06 am

    รถมือสอง Football Shirt รถมือสอง รับทำseo

  169. Folge 2: Wie passe ich mein CMS meinen Bedürfnissen an | Porta Nova Said,

    May 11, 2010 @ 8:16 am

    [...] ANTWORT: Ein Blog kann, muss aber nicht das geeignete Format für ein Rezensionsjournal sein. Blog meint ja in gewisser Weise nur eine von vielen möglichen Präsentationsweisen von Daten. Die sind bei einem Blog naturgemäß chronologisch, wobei der zeitlich jüngste Beitrag am Anfang steht. Blogs werden dann meist regelmäßig gelesen, sobald halt ein neuer Artikel erscheint. Mit zunehmender Zahl an Rezensionen kann die Übersicht natürlich leiden bzw. die Art und Weise, wie man eine bestimmte Rezension sucht und findet. Zumindest der chronologische Aspekt lässt sich bei Angeboten wie sehepunkte oder h-soz-u-kult auch finden. Eine wichtige Lektion des WWW der letzten Jahre lehrt, das es wichtig ist, das die Leute beim Scannen der Seite eine Idee davon bekommen, was sie erwarten können und wie sie an die Information kommen. Das ist zumindest bei sehepunkte schlechter gelöst als noch bei h-soz-u-kult wie mir scheint. Aber da hat vermutlich auch jeder ein paar andere Strategien und Vorstellungen. Die gilt es zusammen zu tragen. Ich hatte ja schon in einem Kommentar erwähnt, das ich den Rezensionsteil bei h-soz-u-kult eigentlich ganz effizient fand. Das hieße dann, eine tabellarische Liste der Rezensionen, die nach bestimmten Kriterien gefiltert werden kann. Wie man das dann optisch präsentiert ist mal noch eine andere Frage. Auf jedem Fall liegt man mit einem Blog nicht ganz daneben. Wer will kann sich mal auf folgenden Seiten umschauen: UX Design Patterns, Screen Patterns. [...]

  170. Games Online Said,

    May 19, 2010 @ 9:32 am

    That Good. Thank you.

  171. 商业Web应用程序的用户界面设计 | Jim的blog Said,

    May 27, 2010 @ 7:49 pm

    [...] 这张截图来自12个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  172. 商务web应用程序的界面设计 « Lamtin's BLOG Said,

    June 5, 2010 @ 1:18 pm

    [...] 这张截图来自12个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  173. 12 Standard Screen Patterns « Think Tank de jmarior.net Said,

    June 8, 2010 @ 7:45 am

    [...] http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns 12 Standard Screen Patterns   [...]

  174. sandiegocarinsurance Said,

    June 11, 2010 @ 12:21 pm

    [...] http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns [...]

  175. 12 Standard Screen Patterns « Ideas Tank Said,

    June 14, 2010 @ 10:10 pm

    [...] http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns   [...]

  176. Kingsley's BLOG » Blog Archive » 商业Web应用程序的用户界面设计! Said,

    July 21, 2010 @ 8:33 am

    [...] 这张截图来自12个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  177. Soun's Blog » Blog Archive » 商业Web应用程序的用户界面设计!学习了。 Said,

    August 8, 2010 @ 6:29 am

    [...] 这张截图来自12个标准屏幕版式 ,这篇文章能帮你重温最常见的屏幕版式。 [...]

  178. Tips en trucks om beter te ontwerpen en te wireframen | Heeftstijl.nl - Nederlands webdesign magazine Said,

    August 16, 2010 @ 12:52 am

    [...] 12 standard web screen patterns – designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns [...]

  179. Sharath Said,

    August 24, 2010 @ 10:46 pm

    Very interesting Posting… Thanks

  180. tampa web design Said,

    August 24, 2010 @ 10:51 pm

    Nice post for reference to building UX for applications. Thanks for the link reddit.

  181. rahmaut Said,

    August 24, 2010 @ 11:39 pm

    Whoaaa!

    Super duper BIG thanks for this article!!!
    Bookmarked it already :)

  182. UI设计模式 | 用户体验与交互设计 Said,

    August 24, 2010 @ 11:45 pm

    [...]   http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns [...]

  183. 12 Standard Screen Patterns Said,

    August 25, 2010 @ 1:06 am

    [...] 12 Standard Screen Patterns http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns [...]

  184. MTV Launches Social Dating Game on Facebook « V E X E D Said,

    August 25, 2010 @ 2:00 am

    [...] PHP library, 10 times faster What non-technical users don’t understand about your software 12 Standard Screen Patterns for web development Android Mobile Web Use Up 400% in Q2, Outpacing Apple & BlackBerry A View Into How Apple [...]

  185. 12 Standard Screen Patterns at webCONSUL Said,

    August 25, 2010 @ 2:44 am

    [...] » Lesetipps » 12 Standard Screen Patterns Theresa Neil hat eine gute Auflistung der 12 Standard Screen Patterns erstellt. Gut, mittlerweile sind es nach dem Update 15 Patterns und 80 neue Beispiele, aber der [...]

  186. 12 Standard Screen Patterns – I have found this to be immensely useful when doing web development. « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit Said,

    August 25, 2010 @ 11:45 am

    [...] 12 Standard Screen Patterns – I have found this to be immensely useful when doing web developm…designingwebinterfaces.com [...]

  187. 12 Standard Screen Patterns | Liberator Inc Said,

    August 25, 2010 @ 12:26 pm

    [...] - 12 Standard Screen Patterns. – [...]

  188. Interesting Reading #561 – 120 megapixel camera, Marty McFly shoes, Samsung Galaxy Tablet, Death of Blackberry and much more… – The Blogs at HowStuffWorks Said,

    August 25, 2010 @ 4:46 pm

    [...] 12 Standard Screen Patterns – “As Bill mentioned in an earlier post, we don’t want to limit this blog to just the principles and patterns found in the book. For that you can check out our Explore the Book section. In the spirit of that, I want to share an additional set of principles and patterns I have been using for RIA design. While the book takes a much more consumer web site orientation, these concepts are central to enterprise application and web productivity application design and more broad than those discussed in the book…” [...]

  189. 常见UI设计模式 « Seven's Pad Said,

    August 26, 2010 @ 2:08 am

    [...] http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns [...]

  190. 12 Standard Screen Patterns « Wiki W2P Said,

    August 26, 2010 @ 10:37 am

    [...] 12 Standard Screen Patterns: Principles and Patterns for Rich Interaction [...]

  191. Links « Beautiful Discovery Said,

    August 26, 2010 @ 8:07 pm

    [...] 12 Standard Screen PatternsIf these are really patterns have to wonder why people are still building them from scratch. [...]

  192. Free Wireframing Kits, UI Design Kits, PDFs and Resources | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more! Said,

    August 27, 2010 @ 5:28 am

    [...] [...]

  193. Free Wireframing Kits, UI Design Kits, PDFs and Resources |  Said,

    August 27, 2010 @ 5:57 am

    [...] Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich interactions. [...]

  194. 常见UI设计模式 | 在路上 Said,

    August 27, 2010 @ 6:44 am

    [...] http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns [...]

  195. Free Wireframing Kits, UI Design Kits, PDFs and Resources | LionWebMedia.com Said,

    August 27, 2010 @ 8:59 am

    [...] Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich interactions. [...]

  196. Free Wireframing Kits, UI Design Kits, PDFs and Resources | Webreweries.com | Tips | Photoshop | Java | Illustrator | Dreamweaver | After Effects | Graphics | Animation | Design Said,

    August 27, 2010 @ 10:36 am

    [...] Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich interactions. [...]

  197. Free Wireframing Kits, UI Design Kits, PDFs and Resources | Web Site Designers Said,

    August 27, 2010 @ 4:22 pm

    [...] Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich interactions. [...]

  198. Wordpress Blog Services - Free Wireframing Kits, UI Design Kits, PDFs and Resources Said,

    August 27, 2010 @ 6:04 pm

    [...] Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich interactions. [...]

  199. TG Designer » Free Wireframing Kits, UI Design Kits, PDFs and Resources Said,

    August 27, 2010 @ 9:08 pm

    [...] Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich interactions. [...]

  200. Free Wireframing Kits, UI Design Kits, PDFs and Resources | World's Greatest T-Shirt Said,

    August 27, 2010 @ 10:11 pm

    [...] Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich interactions. [...]

  201. Free Wireframing Kits, UI Design Kits, PDFs and Resources | Prabaharan CS Blog Said,

    August 28, 2010 @ 3:35 am

    [...] [...]

  202. Free Wireframing Kits, UI Design Kits, PDFs and Resources | Designer Brisbane blog Said,

    August 28, 2010 @ 4:57 am

    [...] Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich interactions. [...]

  203. Free Wireframing Kits, UI Design Kits, PDFs and Resources | gabriel catalano | in-perfección Said,

    August 28, 2010 @ 5:47 am

    [...] Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich interactions. [...]

  204. Free Wireframing Kits, UI Design Kits, PDFs and Resources | Logo Design Brisbane Said,

    August 28, 2010 @ 8:14 am

    [...] Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich interactions. [...]

  205. 12 Screen Patterns | Designing Web Interfaces | G Max Said,

    August 28, 2010 @ 12:37 pm

    [...] via: designingwebinterfaces.com PDF Another post: Designing with Patterns: Sketch Notes by Lucy Spence [...]

  206. Delicious Top Ten August 23-31 2010 Most Popular Links | DecaBot Said,

    August 29, 2010 @ 11:45 am

    [...] wireframing kits, ui design kits, pdfs and resources 2. Designing Web Interfaces: 12 Standard Screen Patterns 3. Periodic Table of HTML5 Elements 4. Khan Academy 5. Full List – 50 Best [...]

  207. Electronic Cigarette Said,

    August 30, 2010 @ 5:38 am

    [...] haven’t read the book yet, but this blog post on screen templates presents 12 basic layouts and the sort of information they work best with. It could be a useful [...]

  208. ArticleSave :: Uncategorized :: Free Wireframing Kits, UI Design Kits, PDFs and Resources Said,

    August 30, 2010 @ 10:10 pm

    [...] Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich interactions. [...]

  209. Weekly Design News – Resources, Tutorials and Freebies (N.53) :Speckyboy Design Magazine Said,

    August 30, 2010 @ 11:27 pm

    [...] The OatmealFor The Record45 Free Applications For Designers And Developers – Noupe Design Blog12 Standard Screen Patterns10 Useful Frameworks To Develop HTML-Based Webapps for Touch Devices55 Excellent Examples of [...]

  210. Weekly Design News – Resources, Tutorials and Freebies (N.53) · rogdykker Said,

    August 31, 2010 @ 12:42 am

    [...] 12 Standard Screen Patterns [...]

  211. Link della settimana #34-2010 « Avventure sul Web Said,

    August 31, 2010 @ 6:24 am

    [...] 12 Standard Screen Patterns by Theresa Neil on Designing Web Interfaces – “I want to share a set of principles and patterns I have been using for RIA design. While the book takes a much more consumer web site orientation, these concepts are central to enterprise application and web productivity application design and more broad than those discussed in the book.“ [...]

  212. Weekly Design News – Resources, Tutorials and Freebies (N.53) | The best Tutorials Said,

    August 31, 2010 @ 7:13 am

    [...] 12 Standard Screen Patterns [...]

  213. Weekly Design News – Resources, Tutorials and Freebies (N.53) | Typography Blog Said,

    August 31, 2010 @ 7:57 am

    [...] 12 Standard Screen Patterns [...]

  214. Free Wireframing Kits, UI Design Kits, PDFs and Resources | Reza Rad Said,

    August 31, 2010 @ 3:18 pm

    [...] [...]

  215. spikeseo's Talk to Heart » Free Wireframing Kits, UI Design Kits, PDFs and Resources Said,

    August 31, 2010 @ 11:34 pm

    [...] easy to tweak and rearrange. The result is a pleasing and informative collection of wireframes.Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich [...]

  216. 15个用户熟知的网页设计版式(附案例) Said,

    August 31, 2010 @ 11:47 pm

    [...] 15个用户熟知的网页设计版式(附案例) On 2010年09月1日, in 交互设计, by xin 老外总结的用户们用的最多的,最舒服的15种网页设计版式,我用GOOGLE翻译的,觉得翻译结果很理想,所以就贴出来了哈,英文老外的博客:http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns 我想说的:通过使用通用网页设计版式 ,遵循大部分用户的使用习惯,降低创新成本和风险,也保障了网站可用性 [...]

  217. Weekly Design News – Resources, Tutorials and Freebies (N.53) « UKWDS! Said,

    September 1, 2010 @ 12:43 am

    [...] 12 Standard Screen Patterns [...]

  218. Ramblings » Screen patterns, social patterns Said,

    September 1, 2010 @ 1:51 pm

    [...] Standard Screen Patterns: 12 patterns and 100 examples [...]

  219. Free Wireframing Kits, UI Design Kits, PDFs and Resources | The best Tutorials Said,

    September 2, 2010 @ 1:13 am

    [...] Standard Screen Patterns for Web Interface Design Here are some principles and patterns for rich interactions. [...]

  220. Weekly Design News – Resources, Tutorials and Freebies (N.53) « Free UK Web Design Said,

    September 2, 2010 @ 2:23 am

    [...] 12 Standard Screen Patterns [...]

  221. 무료 와이어프레임, UI디자인 도구와 PDF들 | 오른손잡이의 왼손으로 그림그리기 Said,

    September 2, 2010 @ 7:37 am

    [...] 웹 인터페이스 디자인을 위한 표준 화면 패턴들 (Standard Screen Patterns for Web In…리치 상호작용(Rich Interaction)을 위한 몇몇 원리와 패턴을 정리해 놓은 곳 입니다. [...]

  222. A Collection of Screen Patterns | Programming Blog Said,

    September 3, 2010 @ 5:46 am

    [...] A Collection of Screen Patterns (posted from ZooTool). [...]

  223. 12 Standard Screen Patterns | Degler-Online.de Said,

    September 4, 2010 @ 11:52 pm

    [...] 12 Standard Screen Patterns Read more from Programming Click here to cancel reply. [...]

  224. Link del día: Patrones de pantallas | Alpha's Manifesto Said,

    September 7, 2010 @ 9:34 am

    [...] un artículo de Added Bytes me encontré linkeado esta colección de patrones de pantallas, llamada 12 Standard Screen Patterns, del blog de Designing Web Interfaces. Esta gente se dedica a postear información muy interesante [...]

  225. Weekly Design News – Resources, Tutorials and Freebies (N.53) | Programming Blog Said,

    September 7, 2010 @ 1:55 pm

    [...] 12 Standard Screen Patterns [...]

  226. Kaz Said,

    September 21, 2010 @ 1:46 pm

    Thanks very much for this article.
    I’m newbie for creating website.. Good for me

  227. Designing User Interfaces For Business Web Applications | Edging Said,

    September 26, 2010 @ 7:05 am

    [...] screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen [...]

  228. 一些非常有意思的杂项资源 | 酷壳 - CoolShell.cn Said,

    September 27, 2010 @ 4:35 pm

    [...] 说起Web开发,很自然的就能想到UI。下面是一个UI的设计Patterns,这篇文章告诉了我们12个比较常用或是经典的图形UI Patterns。关于UI方面的话题,你可以参看酷壳的《35个强大的UI设计教程》、《UI的恶梦》和《史上最糟糕的网站》。 [...]

  229. 泡面网 » 【酷壳】一些非常有意思的杂项资源 Said,

    October 9, 2010 @ 8:43 am

    [...] 说起Web开发,很自然的就能想到UI。下面是一个UI的设计Patterns,这篇文章告诉了我们12个比较常用或是经典的图形UI Patterns。关于UI方面的话题,你可以参看酷壳的《35个强大的UI设计教程》、《UI的恶梦》和《史上最糟糕的网站》。 [...]

  230. 泡面网 » 一些非常有意思的杂项资源 Said,

    October 10, 2010 @ 6:17 pm

    [...] 说起Web开发,很自然的就能想到UI。下面是一个UI的设计Patterns,这篇文章告诉了我们12个比较常用或是经典的图形UI Patterns。关于UI方面的话题,你可以参看酷壳的《35个强大的UI设计教程》、《UI的恶梦》和《史上最糟糕的网站》。 [...]

  231. Quora Said,

    November 4, 2010 @ 7:52 pm

    How does an engineer get started learning graphic design (color selection, texture, typography, shapes, etc.)?…

    Happy browsing!  Design theory covered over 50 articles
    http://www.noupe.com/design/graphic-design-theory-50-resources-and-articles.html

    Designshack.co.uk (http://designshack.co.uk/) has well-written articles on web design with examples. I found them …

  232. Aaron Said,

    November 8, 2010 @ 10:34 am

    Love it — tabs are mocked here, yet magically return in the 2010 Update. Also love how most of the examples feature tabs… I realize they’re out of fashion (or at least they were when you wrote this), but tabs have always offered an intuitive alternative to some of the new-age bird nests you identify above. I fear that UCD has led us into a match over who can catch buzz for identifying the most intuitive pattern ever. Did it ever occur to anyone how paradoxical such a quest might be? When reading posts like this I feel like I’m playing with the penis statue in Clockwork Orange. Sometimes I wonder if UX stands for User Don’t! :-P

  233. Theresa Neil Said,

    November 8, 2010 @ 5:44 pm

    Thanks for the feedback. I decided to add tabs back in 2010, when I realized that just because I don’t like them as the defacto screen pattern for all applications, doesn’t mean they aren’t a viable pattern.

    So now I try to encourage designers and clients to explore other screen patterns as solutions before settling for tabs.

    I hope you got something out of the post other than Clockwork Orange brain fuzz. I originally shared it as just a catalog of the web and desktop application screen patterns I have encountered over the past 10 years.

  234. My daily readings 12/01/2010 « Strange Kite Said,

    December 1, 2010 @ 3:38 am

    [...] 12 Standard Screen Patterns [...]

  235. 10 design site top web - 100 web - Top web site Said,

    December 13, 2010 @ 3:34 pm

    [...] 12 Standard Screen Patterns 17 Jan 2009. If you are looking for web site design patterns,…. Delicious Top Ten August 23-31 2010 Most Popular Links | DecaBot Said, 12 Standard Screen Patterns [...]

  236. Creating a Master-Detail Widget in Ext-GWT | Bits on a Wire Said,

    January 3, 2011 @ 1:53 pm

    [...] 12 Standard Screen Patterns [...]

  237. 12 Usability Resources to Improve Website Conversions Said,

    January 4, 2011 @ 4:07 am

    [...] 15 Standard Screen Patterns [...]

  238. Desiging web app is different from designing websites | Rodeworks Tech Said,

    March 27, 2011 @ 8:29 am

    [...] 12 standard screen patterns This entry was posted in Design and tagged design patterns, usability, user experience, user interface design, visualizations. Bookmark the permalink. ← On Twitter 2010-03-03 : A follow-up on use of WordPress Surveys plugin → [...]

Trackback URL