• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design Patterns: Defining and Sharing Web Design Languages
 

Design Patterns: Defining and Sharing Web Design Languages

on

  • 26,981 views

In my Design Patterns: Defining and Sharing Web Design Languages talk at South by Southwest 2007 I discussed how to put design patterns to use within Web applications with an overview of the what, ...

In my Design Patterns: Defining and Sharing Web Design Languages talk at South by Southwest 2007 I discussed how to put design patterns to use within Web applications with an overview of the what, why, and how of shared online design pattern libraries.

Statistics

Views

Total Views
26,981
Views on SlideShare
26,606
Embed Views
375

Actions

Likes
159
Downloads
0
Comments
11

24 Embeds 375

http://deepakd.wordpress.com 173
http://www.slideshare.net 77
http://www.techgig.com 45
http://uxwatt.blogspot.it 19
http://kesakoweb.wordpress.com 18
http://sachinthamke.blogspot.com 5
http://paper.li 5
http://sachinthamke.blogspot.in 4
http://www.patric-schmid.de 4
http://ixd.shekmantang.com 4
http://www.lmodules.com 3
http://thinkaloud.in 3
http://localhost:8888 2
http://localhost 2
http://www.sachinthamke.blogspot.in 2
http://www.noderelay.com 1
http://115.112.206.131 1
https://hofstratest.blackboard.com 1
http://jackychong.tumblr.com 1
http://webstudents.wordpress.com 1
http://www.sachinthamke.blogspot.com 1
http://dhooge.eu 1
http://www.adobe.com 1
http://sandbox.context-engine.appspot.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 11 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Web Design Company @PixelCrayons

    PixelCrayons is one of the leading names in the web development industry. We excel in providing a mélange of web development services like PSD to HTML/XHTML, PSD to CSS, PSD to WordPress, PSD to Joomla, PSD to Drupal etc. We have a state of the art infrastructure and highly qualified web developers who posses the best industry experience. Our prowess lies in providing high quality and best web solutions with unmatched perfection.

    We give priority to our clients and ensure that they are equally involved in the web development process. We work with full dedication and aim to provide only the best solutions. For this, we go through the client website and meticulously plan how to proceed further with the project. At PixelCrayons, you will find all in one solution to all your website related problems. Be it design to HTML, or CMS integration, we can help you with everything.
    Are you sure you want to
    Your message goes here
    Processing…
  • MarkupBox.com is one of the most reputed PSD to HTML/CSS service providers. We have the profound experience in converting every kind of PSD design to suitable and user friendly HTML/CSS markup. We are dedicated to provide high quality PSD To HTML/CSS & theming services, Table-less HTML with SEO semantic code and optimized shorthand CSS.

    We offer a wide range of conversions like- PSD to WordPress, PSD to Drupal, PSD to Joomla, PSD to Magento etc. We understand the importance of conversion in the process of web designing & development. This is why we have a highly qualified team of web designers and developer who understand the complexities involved in this conversion and provide the best results to our clients. We offer flexible packages. We have a large client base from different countries.

    We guarantee 100% manual conversion. We provide an optimised code that ensures that your web pages take less time to load. Our latest technology and state-of-the-art infrastructure ensures that you get a high quality website. We offer a number of options to our clients to implement their designs as skins/themes/templates for a variety of software including WordPress, Drupal, Joomla, Magento and Email Newsletter.

    Markupbox.com, a PSD to HTML Company adheres to core set of industry ethics in every aspect of the service it provides. This is why we have a large number of happy and satisfied customers.
    By MarkupBox
    http://www.markupbox.com/
    Are you sure you want to
    Your message goes here
    Processing…
  • Excellent. You've shown your credibility on presentation with this slideshow. This one deserves thumbs up. I'm John, owner of www.freeringtones.ws/ . Perhaps to see more quality slides from you.

    Best wishes.
    Are you sure you want to
    Your message goes here
    Processing…
  • thanq its really nice along with helpful to me in thinking about innovation comes as well as think of which.... very nice work.... tanq for this.....

    Janie
    http://financejedi.com
    http://healthjedi.com
    Are you sure you want to
    Your message goes here
    Processing…
  • thanks for sharing mr Luke... ; )
    Are you sure you want to
    Your message goes here
    Processing…

110 of 11 previous next

Post Comment
Edit your comment

    Design Patterns: Defining and Sharing Web Design Languages Design Patterns: Defining and Sharing Web Design Languages Presentation Transcript

    • DESIGN PATTERNS DEFINING AND SHARING WEB DESIGN LANGUAGES LUKE WROBLEWSKI SOUTH BY SOUTHWEST, 2007 1
    • Luke Wroblewski Yahoo! Inc. • Principal Designer, Social Media LukeW Interface Designs • Principal & Founder • Product design & strategy services Author • Site-Seeing: A Visual Approach to Web Usability (Wiley & Sons) • Functioning Form: Web applications, product strategy, & interface design articles Previously • eBay Inc., Lead Designer • University of Illinois, Instructor • NCSA, Senior Designer http://www.lukew.com 2
    • SHARED LANGUAGE WHY DESIGN PATTERNS? PATTERN RECOGNITION 3
    • Design Patterns Conversation http://www.lukew.com/ff/entry.asp?347 Bill Scott Jenifer Tidwell Former Curator, Yahoo! Author, Designing Interfaces Design Pattern Library Curator, UI Patterns and Techniques Martijn van Welie James Reffell Curator, Patterns in Former Curator, eBay Interaction Design Pattern Engine Luke Wroblewski Architect, eBay Pattern Engine 4
    • http://developer.yahoo.com/ypatterns/ 5
    • http://designinginterfaces.com/ 6
    • http://www.welie.com/patterns/ 7
    • eBay Pattern Engine 8
    • • Repeatable design solutions to common problems • Work “positively” for WHAT ARE DESIGN specific problems in specific contexts PATTERNS? • Capture best practices that solve real user needs • Between principles & guidelines • A design vocabulary 9
    • Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid Cell Editing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In Context Progress. Inline Status. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate. Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition. Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide Transition. Rich Internet Object. Available. Selected. 10 BILL SCOTT, DESIGNING FOR AJAX
    • 11 BILL SCOTT, DESIGNING FOR AJAX
    • 12 BILL SCOTT, DESIGNING FOR AJAX
    • 13 BILL SCOTT, DESIGNING FOR AJAX
    • 14 BILL SCOTT, DESIGNING FOR AJAX
    • SCOPE OF DESIGN PATTERNS 15
    • SAP PATTERN CONCEPT 16 http://www.sapdesignguild.org/editions/edition8/patterns.asp
    • 17
    • • Title • Problem (situation) • Use When (constraints) • Solution WHAT’S IN A • Why (rationale) DESIGN PATTERN? • How (to apply) • Examples • Related Patterns • Accessibility • Code Samples Gathered from a survey of popular Web design pattern resources: Van Duyne, Landay, Welie, Tidwell, Lasko 18
    • STYLE GUIDE REPLACEMENTS HOW ARE DESIGN PATTERNS USED? SHARING BEST PRACTICES 19
    • WEB STYLE GUIDES 20
    • PATTERN LIBRARIES 21
    • TOO MUCH? 22
    • FOCUS ON SOLUTIONS NOT RULES DOES IT WORK FOR CLIENTS? ENCOURAGES GOOD BEHAVIOR REUSABLE 23
    • SHARING BEST PRACTICES 24
    • USER-CENTERED GOALS FINDING THE DESIGN RIGHT PATTERN… CONSTRAINTS RELATED PATTERNS 25
    • USER-CENTERED GOALS DESIGN CONSTRAINTS RELATED PATTERNS 26 BILL SCOTT, MIND MAPPING PATTERNS
    • TOP, RIGHT or LEFT ALIGNED FORM LABELS? 27
    • Top Aligned Labels • When data being collected is familiar • Minimize time to completion • Require more vertical space • Spacing or contrast is vital to enable efficient scanning • Flexibility for localization and complex inputs 28
    • Top-aligned Labels 29 eBay Express
    • Right Aligned Labels • Clear association between label and field • Requires less vertical space • More difficult to just scan labels due to left rag • Fast completion times 30
    • Right-aligned labels 31 Basecamp, 37Signals
    • Left Aligned Labels • When data required is unfamiliar • Enables label scanning • Less clear association between label and field • Requires less vertical space • Changing label length may impair layout 32
    • Left-aligned labels 33 Ad Connections
    • Eye-tracking Data • July 2006 study by Matteo Penzo • Left-aligned labels • Easily associated labels with the proper input fields • Excessive distances between labels inputs forced users to take more time • Right-aligned labels • Reduced overall number of fixations by nearly half • Form completion times were cut nearly in half • Top-aligned labels • Permitted users to capture both labels & inputs with a single eye movement’ • Fastest completion times 34
    • • For reduced completion times & familiar data input: top aligned BEST PRACTICE • When vertical screen space is a constraint: right aligned • For unfamiliar, or advanced data entry: left aligned 35
    • USER DESIGNER • Provide Information: • Maximize completion want to register, rates make a purchase, • Gather known data: etc. name, address, • Finish Quickly: credit card no one likes filling in • Use a minimum forms amount of vertical screen real estate CONSIDER: RIGHT-ALIGNED LABELS 36
    • • Design Patterns as Web Services • Design Patterns IN THE FUTURE… integrated into toolkits • Design Pattern Library Integration 37
    • For more information… • Functioning Form • www.lukew.com/ff/ • Yahoo! Design Patterns • developer.yahoo.com/ypatterns • Drop me a note • luke@lukew.com 38