Case Study: Form Follows Function

Recommended: Click here to open the site in a separate tab for easy reference while following this case study.

The design of the present site is based on an earlier, static (non-adapting to different screen sizes) desktop version of the site that I created over ten years ago. As such, in recreating it in a responsive design form, I deliberately chose to use two design conventions that were standard then, but have since fallen out of fashion: page borders and relatively large blocks of text (as opposed to the borderless pages featuring edge to edge photos, minimal text and frequent call-to-action buttons that are currently in vogue).

This is deliberately going against the grain of the times. Why would I do this? I had three reasons, one personal, two practical.

The personal reason is that I prefer not to adhere to design conventions, i.e., rules that are dictated by others, if in a given instance I cannot independently find a good reason to do so. Or, to put it another way, there is only one design principle that I consistently adhere to: form follows function. Which brings me to the first practical reason: the information on this site can be presented more clearly using continuous blocks of text within a small number of screens than small amounts of text split up among many screens. Doing so, in this case, improves the clarity of the information and reduces the amount of time required to gain it. And it also makes the design, which is already unique in its use of color and animation, stand out among the sea of sites that these days are extremely similar to one another in concept and form. Finally, the second practical reason is Search Engine Optimization. Sites that open with only a single photo, minimal text, and a button above the fold lose ranking in the search engines due to the effect of a Google algorithm known as “Panda,” that rewards content density and variety (words, pictures andinteractivity), particularly above the fold, and penalizes a lack thereof.

Now, it could be suggested that the majority today’s scroll-happy, low attention-span viewers won’t take the time to read bits of text longer than a one or two short sentences. That may be true. But I would submit, from having watched countless screens recordings of visitors to the sites I've developed, that the majority won’t even do that much. In other words, the majority will not behave like serious customers, because they won’t be serious customers. But, I submit,  the ones that do take the time to read will in fact be serious customers, and these are the visitors that matter in the end.

Likewise, I chose not to adhere to today’s convention of placing frequent call-to-action buttons throughout that link the visitor to a contact form. Instead, I chose the old-school approach of simply putting an email in the footer. Unconventional, maybe even a little unprofessional-looking these days? Yes. Easier for the user? I'm also willing to venture that the answer to this is yes. At least speaking for myself, I would rather click on an email if interested after viewing the contents of a page, than be harangued with frequent calls-to-action, and the necessity to fill out a webform with a reCAPTCHA hurdle at the end.

(Does this mean that I’m philosophically opposed to designing modern sites, including all of their standardized design conventions and clichés? Not at all! First, I'm always 100% amenable to the preferences of my clients, and most clients will not only prefer but require that modern design conventions be followed. And second, for most applications, current design conventions are quite effective, especially given the relatively shorter attention spans of contemporary smartphone users who typically prefer to quickly scroll through small bits of information (perhaps as a result of the influence of social media), rather than reading detailed information in a single screen.)

Now let’s move on to the actual case study of the design itself, which is a further demonstration of the principle that form follows function.

This design is an example of the integration of a central idea or concept with graphic elements and animation, in which none of the aesthetic choices are accidental or gratuitous, as is the case with most web design. 

The central idea of the site is that there are six different forms of media: video, audio, photo, illustration, animation and text (i.e., “multimedia”) that can be combined—i.e., integrated—into a single project within three distinct mediums: web, print, or presentation. 

Graphically conveying the idea of six distinct forms of media starts with the logo, which consists of six instances of a single shape, each of a different color, corresponding to the six different types of media, which are listed below the logo in the form of six correspondingly-colored links. To further drive home the concept, on the desktop version of the site, hovering over any of these links animates the corresponding part of the logo to momentarily separate itself from the rest. 

Conveying the idea of integrating these separate parts into a single whole within a particular medium are the blue words to the right of the logo reading “integrated design” and the three identically colored blue links underneath naming the three possible mediums into which the separate media can be combined: web, print, or presentation. Again, to further drive home the concept, on the desktop version of the site hovering over any of these links animates the relevant parts of the logo to combine from their separate parts into the logo itself.

Thus, nothing about the design of the logo, or the header, or the navigation is chosen arbitrarily, neither the shapes, nor the colors, nor the animations. Each design element is conceived and chosen by the standard of the central concept of the site. Form follows function. (And as you can see, when you are guided by that principle, design clichés fall by the wayside.)

Below the header, all of the pages are identically structured to one another so that once one grasps the structure of one of the pages they have grasped the structure of all of the pages. This structure is deliberately as simple and as consistent as it was possible for me to make it: one very short page per media and medium, with descriptive text, including quotes from previous clients, on the left, and design examples. For clarity and continuity, on each page of the desktop and tablet versions are an identical photo and identification of myself as the owner and designer. In essence, then, each and every one of these pages is a self-contained and self-intelligible landing page, optimized both for Google’s Panda algorithm and for its own distinct market. In essence, the site as a whole is an integrated collection of specialized microsites.

Finally, wherever possible I animated the thumbnails of the design examples on the right so that in many cases essential information can be gleaned without clicking through to their featured pages. But if one does click through, they will be taken to more and richer content that visually demonstrates, rather than explains, the skills in question.