Software Engineering Resources
	WebApp Design Design for WebApps encompasses technical and non-technical activities. The look and feel of content is developed as part of graphic design; the aesthetic layout of the user interface is created as part of interface design, and the technical structure of the WebApp is modeled as part of architectural and navigational design. In every instance, a design model should be created before construction begins, but a good Web engineer recognizes that the design will evolve as more is learned about stakeholder requirements as the WebApp is built. This page presents the topic categories that follow: Design-General Topics Design Principles Design Methods Content Design Architectural Design Interface design Usability Component-level design WebApp Design Patterns WebApp Patterns Catalogs and Libraries Navigation Design Web Design Style Guides Technology Issues Books Design-General Topics ITtoolbox - Web Design Discussion, FAQs, articles, and other information on Web Design. What are the Characteristics of Good Web Site Design? A commentary of "good" design. Best of Breed Web Characteristics A brief discussion of what the best WebApps have in common. Top-10 Application-Design Mistakes An article by Jakob Nielsen A Deeper Look at the Rich Experience A commentary that discusses how to achieve a WebApp design that provides a user with a "rich" experience. Seductive Design for Web Sites The thrust of this intriguing article is best described by the author: "Education has a concept called "the teachable moment," the point when a learner is ready to learn, willing to change, and can act. For web sites, the parallel is something we call "the seducible moment." This is the point at which designers can entice users off the path to their original goal with the lure of something else. RESTful Web Services Part I: Concepts and Design An article that considers "REST or Representational State Transfer which is based on a small set of widely-accepted standards such as Hypertext Transfer Protocol (HTTP), Uniform Resource Identifier (URI), and Extensible Markup Language (XML)." Scalable Web Design Part 1: Introductory Concepts "In many ways, the 'Holy Grail' of web design is to achieve a website that looks great in any screen resolution, operating on any platform while being cross-browser compatible." This article discusses concepts that help achieve this goal. Patterns and Components "We propose that design decisions be captured explicitly through complementary use of design patterns in design methods, and illustrate this with the use of patterns in the Object-Oriented Hypermedia Design Method (OOHDM). Further, we propose the use of an object-oriented web implementation technology, the WebComposition Markup Language (WCML) ..." Applets are back: new concepts, new design, new features "Applets are used to provide interactive features to web applications that cannot be provided by HTML." pdf: Design Methodology and Technology: Academic Student Guide An indepth Handbook for students but useful for beginners Web Pages That Suck It never hurts to learn what NOT to do from bad design. Design Reviews for WebApps Contains guidelines for reviewing a WebApp design and its testability. Design Based on User Feedback "This article outlines a powerful, but relatively straightforward, methodology for designing Web sites based on user expectations and feedback." Web Design Tips and Resources A useful set of short articles and many pointers to a variety of Web design topics. Microsoft Developers Network Contains useful information on Microsoft related technologies for WebE. Web Site Security Studies A source of downloadable studies on internet security. Is Your Site Ready for Redesign? A brief commentary on the subject. Design Principles and Tips Design Principles - 1 Principles that lead to a quality WebApp Design Principles - 2 An excellent discussion of fundamental principles by Tony Wasserman. Design Fundamentals Address "basic questions that confront all Web designers." The Principles of Design An excellent summary of basic concepts. Recommended. Advanced Web Design Concepts A generic discussion of important design concepts and issues. What is a good design for a web application? A brief commentary. WebApp Design Tips Tips for planning, layout, design and navigation Basic Elements of Web Design Guidance for good WebApp design. Designing Accessible Web Pages Guidelines for design for access by people with disabilities. Tips for Building Next Generation Web 2.0 Applications An indepth article that contains a useful diagram of design elements for Web 2.0 Apps. pdf: Design concepts for data-intensive web applications In this paper, we will try to give some basic ideas about Web site development, introducing modeling issues and techniques, presenting the general architecture of Web applications and their different implementations, and the role of XML. Design Methods • Object-Oriented Hypermedia Design Model (OOHDM) The Object-Oriented Hypermedia Design Model (OOHDM) A discussion of the Object-Oriented Hypermedia Design Model, one of the more popular methods for WebApp design by the creators of OOHDM, Daniel Schwabe and Gustavo Rossi. OOHDM Overview A description of OOHDM. Systematic Hypermedia Application Design with OOHDM A paper that addresses "the process of hypermedia applications design and implementation, focusing in particular on two critical aspects of these applications: the navigational and interface structure." Abstraction, Composition and Lay-Out Definition Mechanisms in OOHDM In this position paper we present the abstraction, composition, lay-out and presentation mechanisms used in the Object-Oriented Hypermedia Design Model (OOHDM). OOHDM Wiki Useful papers and resources Developing Hypermedia Applications with Methods and Patterns In this paper we argue that hypermedia applications can and should be built using software engineering practices. |pdf: Rapid Prototyping of Hypermedia Applications in the WWW "This paper presents OOHDM-Web, an environment allowing rapid prototyping of hypermedia applications designed using OOHDM in the WWW." Design Issues while building computational hypermedia applications "In this position paper we analyze the problem of extending computational applications with hypermedia from a design point of view." • Other WebApp Design Methods Modeling Web Application Design with UML Basic UML modeling techniques for WebApps Methodology for Agent-Oriented Software Design This paper described "a methodology for the description and design of software architectures based on the agent-oriented approach. Agents provide a high abstraction level for developing software and thereby potentially simplify the design of complex information systems." ppt: Modeling Ubiquitous Web Applications A slide presentation that compares different hypermedia design methods. ppt: Hypermedia Design Methods and Methodologies A slide presentation that examines HDM, RMM and OOHDM. pdf: Integrating hypermedia design concepts with a systems analysis and design methodology to develop manufacturing web applications "This article presents a web application design methodology that explicitly incorporates hypermedia authoring considerations into a traditional systems analysis and design methodology. The web application design methodology is illustrated through an example of developing a web-based manufacturability evaluation system for printed circuit boards." pdf: Exploring Semantic Web Modeling Approaches for Web Application Design In this paper we argue the need for flexible models capable of representing semi-structured data processed in Web applications. pdf: Specification And Design of Workflow-Driven Hypertexts "This paper introduces workflow-driven hypertexts, defined as Web-enabled hypertextual applications serving the workflow of multiple users, and proposes a design method integrating data, hypertext, and workflow modeling concepts for modeling lightweight Web-enabled workflows." N-Layered Web Applications with ASP.NET 3.5 Part 1: General Introduction A indepth, multipart technical discussion of N-Layer design using ASP.NET. pdf: An Ontological Approach To Web Application Design Using W2000 Methodology "In this paper we describe our experiences in the use of Web Application (WA) design methodology called W2000 (which uses UML) and in the use of ontology language to represent the same methodology." Zope Concepts and Architecture "Zope relieves the developer of most of the onerous details of Web application development such as data persistence, data integrity and access control, allowing you to focus on the problem at hand. It allows you to utilize the services it provides to build web applications more quickly than other languages or frameworks." Applying "Digital Hub" Concepts to Enterprise Software Design A multipart, indepth series on enterprise computing.that is applicable to conventional and web-based applications. JavaWorld Articles A variety of Java-centric articles that discuss OO Web design. Content Design Content Accessibility Guidelines "These W3C guidelines explain how to make Web content accessible to people with disabilities." Content Accessibility Resources Useful links to over 20 sites that address accessibility. Design for Multimedia An in-depth paper that provides useful guidelines for multimedia design. Concept Design Tools "Designers of digital products and services like ourselves can dramatically improve our work by generating more concepts early in our projects. In this article, I'll try to make concept design [and therefore, content design] easier to learn by illustrating three simple tools for generating concepts." A List Apart Many useful articles and commentary on content design and related topics. Architectural Design Characteristics of a software architect This article discusses the skill set required by a person who wants to become a software architect. MVC and the Brave New World of RIA The beginning of an indepth, five part series of articles by Bruno Schäffer that address the model view controller (MVC) architecture and the transition to the rich internet architecture (RIA). Recommended for serious designers. Design Patterns Articles that address one or more aspects of architecture or patterns. Information Architecture (IA) An overview of IA. IA and Interaction Design A lengthy article that considers these topics in detail. Information Architecture Tutorial A multipart tutorial presented by WebMonkey. Information Architecture Whitepapers A collection of tutorial whitepapers on IA. IA Pitfalls Design problems to avoid to structure and organize information "so that it’s easier for users to find and for owners to maintain." pdf: Quality Characteristics for Software Architecture The fulfillment of nonfunctional quality requirements by a candidate architecture is crucial to select the convenient architecture on which the whole system will be articulated. This article examines this issue in some detail. pdf: Using MDA in Web Software Architectures This paper discusses "WebSA which proposes the inclusion of a software architecture models to complement the specification of Web Applications." Interface design First Principles for UI Design Excellent Guidance provided by Bruce Tognazzini. Recommended. UI Design for the Web Jakob Nielsen answers the question: "You are up against a million other Web sites: how do you get users to stay at your site? " Bad Human Factors Designs Examples of what NOT to do when designing a Web site. Recommended. User Interface Engineering Useful information on Web site usability including a number of useful articles. Challenges of Design Interactive Systems This article describes the challenges of designing usable and useful interactive systems. WebApp interface Design A useful discussion of style guidelines. 20 Websites to Help You Master User Interface Design Learn by example. UI Design in an Agile Project Cycle A "three part series (so far), delving into real world UI experiences in relation to Agile Development Methodologies." Designing the Moment: Web Interface Design (book excerpt) A 22 page excerpt from the book including TOC. A Debate of Interface Design A debate between Jacob Nielsen and Vincent Flanders (two Web design experts) in CIO Magazine. Technical Tips Articles from All Things Web on interface design and other related topics. How UID Affects E-commerce Sites In-depth discussion that will help make the argument that good UID provide bottom-line payoff. Video: Ryan Singer - Web Application Usability A video by Ryan Singer on "how to craft clear user interfaces." (41:04) Usability Jakob Nielsen's Useit.com One of the best sources of usuability guidance and commentary on the Web. Recommended. Usability Guidelines Voluminous usability guidelines at usability.gov. Highly recommended. Usability Resources- Usable Web Over 700 sometimes dated pointers to resources for usability. Usability Resources-Designing More Usable Web Sites A wide variety of worthwhile usability resources. Hotlist. Usability Resources-WebUsability.com Artilces and pointers to other usability resources. Usability Resources-Accessibility and Usability Pointers from an AU perspective. Usability Resources-Web Site Usability Pointers to Articles, tutorials, blogs, books, and more. Web Site Usability Checklist Thinks to keep in mind as interfaces are designed. True Web Usability - Principles Over Laws Commentary. 9 Common Usability Mistakes In Web Design Problems and solution with pointers to related topics. Making Rich Web Application Architecture Usable Still more guidelines, but worth a read. Web Design and usability Guidelines (book Length) A comprehensive handbook. Downloadable. Guide to Usability for Software Engineers Developed by the University of Maryland, this guide provide useful information and resources. Recommended. "Usability Issues in Web Site Design" An indepth paper that "describes a process which integrates existing empirical evidence and guidelines for web site design into a user-centered process which is consistent with ISO 13407." Containing live pointers to other relevant sites. Usability for Web Design A brief, but useful summary of usability as it applies to the design of WebApps. Usable Web Over 1000 pointers to a variety of topics that lead to usable WebApps. Usability Resources - 1 An excellent collection of usability testing resources (along with a detailed bibliography) provides useful information for WebApp testing. Recommended. Usability Resources - 2 A brief list of pointers to web usability resources. Web Usability Questionnaire A Website Analysis and Measurement Inventory (Web Usability Questionnaire) help to assess the quality of your web site. SIGCHI An ACM Special interest group that "brings together people working on the design, evaluation, implementation, and study of interactive computing systems for human use." Bad Design A compendium of links on sites that discuss bad design of WebApps. Component-Level Design Resources for quickly developing AJAX applications Free resources which allow developers to quickly build and mantain powerful and advanced AJAX web applications. Java Programming Concepts A collection of useful articles provided by JavaWorld Web Components Basics A somewhat dated, but still useful discussion of Microsoft Office 2000 Web Components. pdf: Mobile Component Design A survey of existing technologies, architectures and approaches. pdf: Design Patterns For J2ee Web Component Development This article covers how to use and implement design patterns, specifically for the presentation tier, in J2EE applications. WebApp Design Patterns Design Patterns in Web Programming An introductory discussion of design patterns for WebApps. Design Patterns for Web Programming A Dr. Dobbs' article with emphasis on MVC architectural issues. Improving the design patterns of web applications with AJAX "In this article, we talk about incorporating AJAX in our web application design patterns, and we see a different approach to some of the most commonly used scenarios - authentication and data binding - in web development." pdf: Patterns forWeb Applications This paper presents "pattern language for "small" web applications. Microsoft patterns & practices Developer Center The source of the latest news and technologies for MSDN patterns and practices. Digital Web Magazine Detailed coverage of patterns and their use in WebE. pdf: Methodology for Developing Web Design Patterns This paper describes the methodology we developed as part of a project to build a web-based user interface design pattern library for web designers and developers at the University of California, Berkeley. AJAX Patterns: Design Patterns for AJAX Usability Commentary of patterns and AJAX along with a few useful pointers. Web and Enterprise Architecture Design Patterns for J2EE An adaptation of GoF patterns perspective to WebApps. First of two-part article. Design Patterns A collection of Java-oriented patterns articles from JavaWorld. The Interaction Design Patterns Page Emphasis on UI design patterns resources. Many useful pointers. pdf: Formalization of web design patterns using ontologies "To achieve a common vocabulary and improve reusability we propose to formalize web design patterns by means of ontologies." pdf: Evolution of Web Applications with Aspect-Oriented Design Patterns In this paper, selected change types in web applications are analyzed. They are expressed in terms of general change types which, in turn, are implemented using aspect-oriented programming. Video: Design Patterns in Web Applications A useful video discussion. WebApp Patterns Catalogs and Libraries Welie.com Pattern library A fairly large pattern catalog that is applicable to both conventional and web-based applications. Info Design Patterns A very slick patterns catalog with emphasis on content design. Recommended. U.C. Berkeley Web Design Patterns Library A pattern library categorized by type. Slick design and presentation. pdf: A Pattern Language for J2EE Web Component Development A comprehensive pattern language for WebApp development. 12 Standard Screen Patterns An in-depth discussion useful for interface design. Navigation Design Is Navigation Useful? A brief paper by Jakob Nielsen. The Basics of Navigation Reasonably in-depth paper that covers all important aspects of navigation design. Recommended. Navigation Design "Addresses the main issues designers confront when building effective navigation tools." WebApp Navigation An in-depth article with a mechanisms emphasis. Navigation Tips Brief article of key navigation design issues. Navigation Tips and How to Useful tips for better navigation design. Web Navigation Design Principles - I Introductory guidelines. Web Navigation Design Principles - II A brief commentary that addresses fundamentals. Navigation & Labeling Pointers Pointers to a variety of navigation resources. Making Complex Web Navigation a Usable Experience A brief article on ways to make complex navigation simpler for end users. Designing Web Navigation: Traffic Light, Not Neon Light Commentary. Seven Steps To Easier Web Navigation An article that presents "seven suggestions for making navigation easier." Web Navigation: How to make your Web site fast and usable A reasonably comprehensive discussion of navigation design issues. Recommended. Website navigation Basic guidelines with examples developed by Monash university. Essential Navigation Checklists for Web Design "These checklists pull together best practice in the disciplines of information design, usability and accessibility, into an easy to apply format." 25 Examples of Creative Navigation Provided by Vandalay Design, Web design vendor. User-centered design UCD as it applies for navigation design. Web Design Style Guides Web Style Guide An introductory article. Web Design Style Guide Contains a portfolio of dozens of actual examples. Elements of Style for Web Design A reasonably detailed paper on the subject. Web Design Style Guide A relatively elementary discussion of the web development process with commentary on style. Web 2.0 how-to design guide Covers key principles that lead to good style. Web 2.0 Graphics Design Style Guide "The purpose of this handy guide is to be a reference to the newcomer designer or as a check list for established graphics designs who maybe struggling to adapt to the new web 2.0 styles seen on many social networking \ social media sites these days." Design guidelines for the Web Style guidelines from Usability.net Develop a Style Guide for Your Site Guidelines for developing a local style guide. pdf: Web Design Guide - Design Web Pages with Style Contains many useful pointers to style related material. Writing for the Web Pointers to articles addressed to writers who want to be Web published. IEEE Web Publishing Guide A reasonably thorough introduction to the planning, design and implementation of Web sites. Microsoft WebApp Development Guidelines Addresses design guidelines, tools and resources. Guide to Web Style This is a cookbook for helping people create better web pages has been created by Sun Microsystems. The HTML Bad Style Page A collection of don'ts for HTML. In addition to the links noted in the "style" section, the folowing style guides are available on the Web: Web Authoring Tutorials-A Hotlist Web Authoring Resources Web Authoring Software Guides and Faqs Web Author-Hotlist A Guide to HTML Authoring Web Authoring Good Practice Guide UniSA Web Authoring Guide A Guide to Creating Web Sites with HTML, CGI, Java, JavaScript, Graphics Brown Web Authoring Guide Yale Web Style Guide Technology Issues • Security Design Guidelines for Secure Web Applications A comprehensive discussion at MSDN. Threat Modeling Web Applications An indepth tutorial that is relevant to both WebApp design and testing from a WebApp security perspective. Design and Deploy Secure Web Apps with ASP.NET 2.0 and IIS 6.0 An article that provides much useful generic information as well as technology specific guidelines, pdf: Secure Web Site Design A powerpoint presentation that presents many important points. Build extra secure Web applications "This article provides a framework to secure these vulnerabilities. You can embed this framework, which offers a logical security design, in common presentation frameworks, such as Struts." • XML XML Resources - 1 Reference repository for specific XML standards such as: vocabularies, DTDs, schemas and namespaces. XML Resources - 2 Another worthwhile source for XML information contains many useful pointers. "Modeling, Metadata, and XML" A worthwhile article on data modeling, metadata and XML by Ken North provides "enough information for you to decide whether to learn Object-Role Modeling (ORM), the Unified Modeling Language (UML) and the eXtensible Markup Language (XML)." Implementation Guidelines and Tips Netmechanic provides hundreds of useful implementation tips. Books Although hundreds of books have been written on “Web design,” very few of these discuss any meaningful technical methods for doing design work. At best, a variety of useful guidelines for WebApp design are presented, worthwhile examples of Web pages and Java programming are shown, and the technical details important for implementing modern WebApps are discussed. Among the many offerings in this category that do provide useful guideance are: Web Design The Essential Guide to User Interface Design Designing CSS Web Pages Designing Easy-to-Use Websites Web Application Design Handbook: Best Practices for Web-Based Software The Web Designer's Idea Book Designing Web Interfaces: Principles and Patterns for Rich Interactions The Principles of Beautiful Web Design Head First Web Design Web Engineering: A Practitioner's Approach by Pressman and Lowe considers WebApp design methods in considerable detail. Extreme Programming for Web Projects presents the agile view of design (and other topics) for WebApps Building Web Applications with UML, second edition and Applying Use-Case Driven Object Modeling with UML present detailed examples of WebApps modeled using UML. The Design of Sites is an excellent book that covers most important aspects of the Web engineering design process. Design process models and design patterns are covered in detail. The design of the information architecture is crucial to good WebApp design. The following books provide worthwhile guidance: Information Architecture: Blueprints for the Web Information Architecture Information Architecture for the World Wide Web Practical Information Architecture Service-Oriented Modeling (SOA): Service Analysis, Design, and Architecture The Web Content Style Guide Design techniques are also mentioned within the context of books written about specific development environments. Interested readers should examine books on J2EE, Java, ASP.NET, CSS, XML, Perl, and a variety of WebApp creation applications (Dreamweaver, HomePage, Frontpage, MacroMedia Flash, etc.) for useful design tidbits. In addition to books noted on our User Interface Design page, the following titles may be of particular interest to Web engineers: The Handbook of Human Factors in Web Design Usability for the Web: Designing Web Sites that Work Designing Web Navigation: Optimizing the User Experience Don't Make Me Think: A Common Sense Approach to Web Usability Site-Seeing: A Visual Approach to Web Usability Web Usability: A User-Centered Design Approach There are dozens of books written about Web security. Among the titles are: Web 2.0 Security - Defending AJAX, RIA, AND SOA Web Security for Network and System Administrators Developing More-Secure Microsoft ASP.NET 2.0 Applications Ajax Security Securing PHP Web Applications (For Mere Mortals) How to Break Web Software: Functional and Security Testing of Web Applications and Web Services and taking a different point of view: The Web Application Hacker's Handbook: Discovering and Exploiting Security Flaws