© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® REUSABLE DESIGN

© 2012 Adobe Systems Incorporated. All Rights Reserved. What is reusable design?  Developing elements–such as patterns, components, frameworks, assets, and content–that can be used in a variety of contexts while maintaining their usefulness each time they are reused.  Reusable does not mean perfect: Nearly everything that is designed will likely need to be adapted each time it is reused, so all elements should be adaptable, depending on the context in which they are used. 2

© 2012 Adobe Systems Incorporated. All Rights Reserved. What are the benefits of reusable design?  Ensures consistency across web projects.  Enables making updates and global changes easily, quickly, and from anywhere.  Often results in less work on future projects.  Useful when designing for multiple devices, especially by creating mobile-optimized components.  Provides an archive of design decisions.  Allows for portability between team members, so it doesn’t matter who works on the project or at what stage they work on it.  Enables a reusable framework that includes standardized style sheets and directories that can be adapted for each new project. 3

© 2012 Adobe Systems Incorporated. All Rights Reserved. Web standards and reuse  CSS  Fosters consistency in the look and feel of web projects.  Fosters consistency in the appearance of pages across multiple browsers and platforms.  Enables instant global changes.  Produces style sheets that can be reused for all types of web projects.  Enables adaption of a design to multiple devices and screen sizes.  HTML5  Enables content to be viewed on a variety of browsers.  Accounts for graceful degradation–meaning content will appear as it should in older browsers.  Ensures accessible content. 4

© 2012 Adobe Systems Incorporated. All Rights Reserved. Best practices  Use CSS starter pages and HTML templates (especially for navigation) and adapt as necessary for each project.  Create a structured framework using CSS starter pages and templates to start new projects. Framework can include:  a template index page  CSS style sheets  Directories for images, scripts, vendor prefixes, and server and/or client-side includes  Use CSS Fluid Grids, media queries, and flexible images for responsive design across multiple screens and devices. 5

© 2012 Adobe Systems Incorporated. All Rights Reserved. Best practices  Create reusable assets (images, logos, video, sound) for web projects.  Use web fonts to make content consistent and readable in all browsers and devices.  Use code snippets to integrate features such as shopping carts, calendars, and polls.  Always determine copyright protections when reusing assets or code.  Create libraries of reusable patterns, components, and frameworks.  Document patterns and components, including descriptions of the contexts in which they are useful. 6

© 2012 Adobe Systems Incorporated. All Rights Reserved. Patterns and components  Patterns and components are reusable design solutions for specific problems.  A pattern describes the behavior of a user (for example, logging in) and how different designs can support a particular behavior pattern. Use patterns to create global solutions to common design problems that can then be adapted for a specific context.  A component is usually specific code with elements such as text, links, buttons, checkboxes, and images that can be easily reused as a chunk of a web page or grid. Each component is a small portion of the page that is reusable and independent of other chunks.  Designers can utilize patterns and components in wireframes and mockups. 7

© 2012 Adobe Systems Incorporated. All Rights Reserved. Chunking and assembling  Components eventually need to be combined and arranged into whole pages. Chunking and assembling allow designers to see how components fit into variations of single and multiple pages.  Chunking breaks a web page up so the components are used as building blocks for specific regions on a page.  Once all components are identified and designed, assemble the components to make up single or multiple pages. 8

© 2012 Adobe Systems Incorporated. All Rights Reserved. Conclusion  Reusable design:  Enables designers to use a variety of elements multiple times in multiple ways in a variety of contexts  Maintains its value and usefulness across projects  Saves time and money  Is adaptable to each context and project  Uses patterns, components, and frameworks to respond to user behaviors and quickly build projects  Applies web standards  Should be documented and archived 9