I heard a bird calling outside my window today. This prompted my strange brain to wonder whether a bird call could be used as a source of inspiration for laying out a set of text columns.
When I first scan a visual composition — whether it’s a painting or a web page — my eye lands on the various parts of this composition at distinct moments in time. These moments can be assembled into a rhythm that evokes the sound of a time-keeping device, or they can be arranged in accordance with a rhythm from nature. In the two videos below I wanted to illustrate how the relative widths of a set of three text columns — as well as the spaces between the columns — could be connected with these different rhythms.
video 1 of 2: metronome-based design
video 2 of 2: whip-poor-will-based design
Audio Source for Video 2: Birds of North America, at http://www.mbr-pwrc.usgs.gov/id/songwav.html
I came across a discarded metal salt shaker a number of years ago. Its form and ornamentation struck me. The tactility, weight and scale of the shaker left me with the impression that this object was made to feel like an extension of my hand. I later learned that this shaker was made in the late 1920s. It may seem like a strange thing to say, but I felt that in holding and looking at this salt shaker there was a certain kind of remote communication between the designer of this object and myself.
In the previous post I provided a couple of pictures to show how a careful attention to the grouping of, and spacing between, typographic areas can help clarify a business’s drink menu.
In this post, I’m including an illustration of how the design of the menu can be taken one step further.
Beyond merely grouping and separating typographic elements, I used a set of interdependent golden-ratio spirals to help visually unify all of the diverse parts of the menu. The illustration below is a sort of “x-ray” of the layout from the previous post. In much the same way that a well-tuned stringed instrument is necessary for creating various musical harmonies, a carefully-proportioned set of figure/ground areas are needed to create visual harmonies.
I recently came across a website template that’s currently being sold by a very popular web publishing service. The theme of the template is pre-designed to appeal to bar/restaurant owners, and the default layout allows business owners to publish their food and drink menus. The sample photographs used in this demo-site are rich in detail and color. The fonts are clean in appearance.
As a whole, this web template makes a bold first impression.
So, I make up my mind to pay a first-time visit to this imaginary tavern. I call my friend, and together we take an imaginary walk to this make-believe establishment. We sit down at one of the small outdoor tables, and proceed to order drinks. My friend decides to Continue reading →
Over the past five or six years web designers have worked at devising “fluid” alternatives to “fixed” web page layouts. The increase in the variety of screen sizes has prompted a search for visual layouts that can easily be modified.
However, many of the new layout methods do not make use of visual composition.
Unlike a painter’s canvas, viewers of web pages only see a section of the whole page at any given moment. To move from one section of the page to another, a scroll bar is used.
In contrast, traditional composition is all about meaningfully connecting the different visual sections with the whole. So why bother with composition when the web page as a whole will never be seen, and isn’t composition even less necessary if we’re talking about viewing web pages on a phone?
These questions prompted me to take a closer look at a physical scroll, to find out how people from the past have approached composition for scrolls, and to see how their methods could be used to create compositions for the web.
Figures 1 and 2 show a section of a Chinese scroll1, and a compositional analysis of the same section.
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.
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.
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 →
The golden rectangle has been associated with the growth pattern of living things. Subconsciously, this organic pattern resonates with us.
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.
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 →
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