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:
WebApp Design Patterns
WebApp Patterns Catalogs and Libraries
Web Design Style Guides
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.
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.
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.
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).
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.
A variety of Java-centric articles that discuss OO Web 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.
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.
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.
Design problems to avoid to structure and organize information "so that its 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."
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.
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)
Jakob Nielsen's Useit.com
One of the best sources of usuability guidance and commentary on the Web. Recommended.
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.
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
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.
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.
An ACM Special interest group that "brings together people working on the design, evaluation, implementation, and study of interactive computing systems for human use."
A compendium of links on sites that discuss bad design of WebApps.
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.
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.
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.
"Addresses the main issues designers confront when building effective navigation tools."
An in-depth article with a mechanisms emphasis.
Brief article of key navigation design issues.
Navigation Tips and How to
Useful tips for better navigation design.
Web Navigation Design Principles - I
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
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.
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.
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
A Guide to HTML Authoring
Web Authoring Good Practice Guide
UniSA Web Authoring Guide
Brown Web Authoring Guide
Yale Web Style Guide
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 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.
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:
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 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
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