CodeNotes for Web-Based UI

INTRODUCTION

Orientation

The Purpose of this CodeNote

A chasm exists between software developers and website designers. This is unfortunate, because the skill sets of these two groups overlap in many ways: designers may need to understand programming to add interactivity to their sites, and developers need to understand how browsers and HTML operate to leverage the Web in their applications. This CodeNote is intended to create a bridge between these two skill sets; specifically, it provides a common methodology of user interface (UI) design for creating effective websites (or web-based UIs for applications). Chapter 3 distills the many contemporary theories of web design into some rules of thumb that can be employed to create good-looking and highly functional web design. The remaining chapters give the reader (software developer or website designer) a working understanding of the primary web technologies and languages; they include tutorials on the languages and technologies required to add a dynamic dimension and interactivity to web pages.

Web UI Design Theory

While one may be familiar with the technologies and development languages of web design, to use them effectively one needs to understand the rules of design by which an effective and aesthetically pleasing web UI is put together. We say "rules of design" because, contrary to the beliefs of many developers, making a good UI is not a purely creative act. By virtue of understanding certain rules of color, layout, and font (outlined in Chapter 3), one can actually take a somewhat algorithmic approach to web design.

The choice of colors is, for example, not just a matter of opinion: different colors at different saturations, graduations, and relationships to one another on the color wheel (see Chapter 3) create different feels. There are rules for what colors are complementary to one another and in what ratio they should be used together. Similarly, there are definitively good and bad placements for navigation and some absolute do's and don'ts in terms of how data, navigation, and images are laid out.

After covering basic design theory, these CodeNotes will introduce the technologies of web development. The "Summary" and "Design Notes" sections of these chapters will relate the technologies being introduced to the UI chapter (Chapter 3); these will provide a UI context to which the technologies being introduced may be specifically applied.