Size and Proportion in Web Graphics. Introduction | WebReference

Size and Proportion in Web Graphics. Introduction

[Dmitry's Design Lab]
Dmitry Kirsanov's monthly column
November 1997
Size and Proportion in Web Graphics
. . . So, you've finished your preliminary drafts and are at the point of casting your ideas into GIFs and HTML.  But what happens?  Images that looked beautiful when magnified in a graphics program lose much of their charm after both their colors and size are reduced to browser-ready scale.  In this article, you'll learn about various size-related phenomena in web graphics and how to work your way around them.

My favorite method of analysis, as my readers may have noticed, is to take some abstract feature or aspect of design (color, contrast, layout, and so on) and see how it works in real-world designs. What practical laws, suggestions, and restrictions can be deduced when focusing only on this aspect?  The aspects I consider, although abstract, are never too ambiguous and all-embracing---this helps me to maximize useful suggestions and minimize fluff.

This month's exercise in balancing abstract and practical approaches focuses on size and proportion in web layout and graphics.  I have touched on this problem before. However, some very important web-specific points were not covered.  Specifically, making your graphics look good in sizes measured by dozens of pixels is a challenge rarely faced in other media. You need to proportion a page so that it won't look too small on today's high-resolution monitors---while honoring the page width and height constraints of WebTV and low-grade PCs.

The main size-related trend in web imagery is painfully obvious: graphics on the Web are nearly always smaller than what designers who work with other media might be accustomed to.  This predominant smallness comes from two sources---technology and bandwidth limitations (e.g., page format and file-size restrictions) plus the natural desire of content providers to cram as much information as possible into a limited space.

In this article, I'll first consider the space limitations and proportioning principles applicable to web design, followed by a couple of page reviews focusing on the layout and proportion aspects.  Then, I'll introduce you to some very peculiar laws that govern the realm of very small graphics, and finally illustrate these laws by some real-world examples from my own design practice.


Created: Nov. 22, 1997
Revised: Nov. 22, 1997