Queen Anne’s Lace, Trucks, and Typographic Hierarchy

NOTE: Thanks to flying_leaves for pointing out the lack of clarity in two of the diagrams below. I’ve clarified the two diagrams, and have included them just under the main infographic, at the bottom of this post.

QAL preview

Below is an infographic that illustrates how things that occur in Nature can be applied to design. It provides an example of how a conceptual hierarchy (in this case, CARS > PICKUPS > 4-CYLINDER) can be supported by a corresponding visual hierarchy. Verbal analogies are translated into visual analogies: 4-CYLINDER is a subset of PICKUPS as PICKUPS is a subset of CARS.

Proportions are a good way to visually illustrate analogies that are presented in typographic form. In this infographic, proportions are used to determine the relative x-heights of headings, subheadings and body copy. The negative spaces between successive lines of text are given equal consideration. Even the width of the text columns (i.e. measures) can be included in this network of proportions.

This is a work in progress. Let me know if you see any parts of this infographic that could be clarified.

QAL SS_whole_w_alerts

QAL Revsion_SS_01

QAL Revsion_SS_02

Golden Grid Layout as Used in a Local Farm’s Website

Screen Shot 2015-05-16 at 10.16.27 AM

Screen Shot 2015-06-06 at 1.20.32 PM

I recently designed this website for a CSA farm that’s located a few of miles away from my house. The entire design is based on the phi (or “golden”) ratio that I mention in earlier posts.

The red spirals in the second image show how the individual web page elements connect with the larger whole of the page. None of these red lines are seen by the site visitor, but the proportions of the site are felt to be harmonious. Continue reading

Using the Golden Grid to Better Communicate Web Page Content

sunflower

The golden rectangle has been associated with the growth pattern of living things. Subconsciously, this organic pattern resonates with us.

Introduction

This same golden rectangle is of particular use to the web designer who’s interested, not only in harmoniously composing visual elements on a web page, but in setting up what could be called visual meridians along which viewers can scan web page content. If it’s used with care it can help readers to conceptually organize this content. In the face of ever-changing web content, and always-proliferating viewing devices, the idea of using fixed, two-dimensional proportions — typically used in the domain of print design — has largely been set aside by many web designers as unworkable and inefficient.

In what follows I’ll present the benefits of, and practical methods for, using the fixed proportions of the golden ratio as a basis for designing clear web page layouts. With a little help from CSS pre-processors, CSS media queries, and a good jQuery content scroller, there’s no longer a reason why a designer can’t adapt these proportions to a mobile phone, tablet or the next “net fridge”. The greatest obstacle is that it requires a re-examination of the view that the optimal approach to page design for the Web is to be found in the fluid layout.

Continue reading

Why, After Twelve Months, Hiring a Professional Web Designer Costs Less than Using Squarespace

illustration-2

Personal or Business?

Automated website builders like Squarespace, Wix and Shopify have given us easy-to-use tools for setting up inexpensive personal websites.

If you’re looking to setup a new website for your business it can be very tempting to use these same tools. With a website builder like Squarespace there’s the instant gratification of paying only $20 to quickly get a site on the Web.

However, if you’re the kind of business person that likes to look ahead and setup longer-term business plans (as in 2 to 5 year plans) then you’ll be surprised to find that having a website setup and maintained by a professional web designer is actually less expensive than using Squarespace.

The bottom line is that a business owner who needs an average of 20 hours of site maintenance work per year can easily save $3,000 over five years by using a professional web designer instead of Squarespace. Continue reading

Geometry and Design Workshop — May, 2015

calyx krater 03Apple Watch Ad

What does this Greek vase and this web page for the new Apple Watch have in common? Find out at the Geometry and Design mini-workshop. This 3-hour workshop is $45 per person, and includes paper, pencils, compass and straight edge ruler. A brief presentation of visual arts that have made use of the Golden Ratio will be given.

The workshop will be held from 1:00pm to 4:00pm, on Saturday, May 2nd. There will be a scheduled break from 2:30pm to 3:00pm.

The location is at sunny New Paltz: 26 N Manheim Blvd. New Paltz, NY 12561

Click below to reserve a spot!

The Cure for Fluid Fever

layout normallayout abnormal

Fluid web page layouts are very 2010.

I have to confess that, over the past 5 years, I’ve spent way too much time staring at the web pages of fluid sites, mesmerized by the elements on these pages as they squish and expand, like an accordion, based on how wide I would make my browser window.

As this effect has lost its novelty I’ve yearned to see web layouts that get back to using the age-old principles of 2D design. Continue reading

The Parent and the Child

The founder of a startup business decides to redesign the look and feel of his website. He wants to find a way to better connect with his audience, and needs to have the design work as well on a mobile device as it does on a desktop computer.

One morning, after preparing his coffee, he fires up his laptop, and heads over to wordpress.org/themes. His optimism grows as he reads that WordPress has 2,901 free themes to choose from.

He types the words “sleek and earthy” into the Search field of the theme directory. These two words capture the essence of his startup’s service. WordPress displays several themes that match this search. He opens up the demos for these themes, and is discouraged to find that the look and feel of the themes are very different from the particular sleek-and-earthiness that he’s looking for.

This imaginary scenario is not so far from reality.

Why, for example, does WordPress’s “Enigma” theme not feel very enigmatic to me? Sure, the theme’s Home page includes a big banner of a nighttime-in-the-city scene, but the general layout of the page doesn’t resonate with what I would consider enigmatic, or mysterious.

This is where a custom website becomes a smart alternative to readymade themes.

I recently designed a custom site for Annie Finch, a noted American poet. Over the course of several discussions with Annie — discussions about the idea or feeling that she wanted the look of her site to communicate — some of the recurring qualities that came up were earthy, natural, elemental and sleek. In many of our talks there was also a strong undercurrent related to the activity of birthing and mothering. The activity behind creative works are often compared to birth giving, and this comparison was very clear in Annie’s participation in the design of her site. It was hard not to connect the Home page of the new site with one of Annie’s books, titled Home Birth (a collection of poems about pregnancy, birth and nursing).

Based on all of these exchanges I developed several visual compositions. After a number of revisions we arrived at a visual layout that we felt most clearly communicated these qualities and activities.

The Desktop Version of the Layout:
On the face of it the visual composition of the website’s Home page includes a portrait of the poet, and a scene from nature: a lake where Annie likes to work.

Behind this face there’s the visual composition’s undercurrent or understructure. This understructure is made up of a series of invisible, abstract areas. These areas are arranged to subconsciously communicate1 the relationship between the Parent and the Child. The quality of Nature is also represented. This is done by incorporating what mathematicians call the Root 5 Rectangle, an area that relates to proportions found in the growth of natural organisms.

When you click on the second thumbnail image below you’ll see the spatial relationship that exists between the Parent and the Child. Here, the Parent is the vertically-oriented, central rectangle of the Home page (represented by its diagonal), and the Child is the smaller, horizontally-oriented rectangle that’s nested inside the Parent. The Child possesses the same proportions as the Parent. It’s a microcosm of the Parent. Both of these rectangles, although different in scale, are related to the proportions of the equilateral triangle. This Child area is reserved for what Annie calls her Weekly Spells.

When you click on the third thumbnail image you’ll see how the lateral regions of the Home page are connected to the unfolding of the Root 5 Rectangle. The first and third “moves” of this upward unfolding correspond with the upper and lower boundaries of the lake image.

The Home page is a story about Annie’s work, but it also becomes a story about the connection between the Parent, the Child and Nature.

It’s important to keep in mind that there is no formula to setting up these abstract areas. If the content of the Home page were to undergo some significant changes then a new arrangement of abstract areas would be needed. The goal of this new visual arrangement would still be to communicate the same qualities as before.

The Mobile Version of the Layout:
The challenge in developing layouts across different viewing devices is to apply device-specific understructures that will communicate the same qualities.

There are many different ways to do this, and for the portrait version of a smartphone I decided to simply scale down the original understructure in a way that would correspond to the proportions of the smartphone’s viewfinder.

The amazing thing about human perception is that a person can “fill in the blanks” in cases where parts of the composition do not fall within the boundaries of the screen, window or viewfinder. This is not too different from the Closure principle of the Gestalt theory of visual perception.

For the mobile version of Annie’s Home page only about half of the understructure lies within the viewport (see Figure 5). The Parent/Child and Root-5 relationships are maintained, but most of the Root-5 areas fall outside of the viewport. It has been said that human beings are attuned to seeing/feeling certain proportions, and that these proportions wash over us when we take in visual impressions of the natural world2. These proportions relate to the growth and movement of living organisms.

Despite the fact that most of the Root-5 areas are outside of the smartphone’s viewport the arrangement of the visual elements that fall within this viewable area is such that the Root-5 areas are implied (see Figure 6). In this way the relationships between the Parent, the Child and Nature are maintained.

Designing web pages in this way would require a shift in the way that people think about user interfaces. A user interface can be based on a visual hierarchy that helps the viewer navigate the page, and it can also be used as a field where proportional relationships support the story that one wishes to share.

Beyond user interfaces the design process that I’ve described here would require a change of attitude in how we think about productivity. The speed of production has to be measured alongside of the quality of production.

Notes

1These invisible areas have been used for millennia. Perhaps the closest thing to this that can be found over the past hundred years is the European theory of gestalt and, more specifically, the principle of closure.

2See The Elements of Dynamic Symmetry, by Jay Hambidge.

Web Design, and the Future of Web Communications

arabic calligraphy
Alphabet Geo

There has been a great deal of discussion around the idea of designing web page “layouts from the content out”. In this article I want to begin by briefly looking at the phrase “web design”. I’ll go on to look at two different approaches to web design. I’ll also offer my interpretation of what designing “layouts from the content out” might mean. Continue reading