Truly classic design elements transcend specific media. Casting an eye over old books can inspire imaginative solutions for web design. And why shouldn’t those books be French? The Frogs are renowned for their appreciation for the finer things: food, wine, art, deodorant… So without further ado, here are 11 terrific elements of design from old French books that can give your web designs something different.
1. Majuscules – Besides being a great word to bust out at cocktail parties, majuscules are a good opportunity to spice up text. An ornate capital letter can help text look more palatable and also reiterate the rest of a site’s design. A recent poll that I made up revealed 8/10 people are more willing to read a paragraph that begins with a majuscule. Take this “M” for instance:
2. Font Contrast – I always find it difficult to pick fonts. There are so many good choices, but one convention is to juxtapose a blockier font with a script font. Done correctly, you can achieve any effect you want, from comic to kitsch to classy. This is a good example of the latter:
3. Borders – In web design, borders are unpredictable since heights and widths are unpredictable. Still, there are plenty of ways to pull it off and a surprising amount of variety from shadows to patterns to gradients. It’s also possible to fade out a border if you’re confident in knowing a minimum height and width of a site. Here’s a simple but decorative border:
4. Spines – When shopping for used books at the Salvation Army, it’s too time-consuming to really read the title of every book on the shelf. Fortunately, the design of the spine often says a lot about the genre of the book. There is, for instance, the Danielle steel and VC Andrews design, whose volumes comprise about 70% of all thrift store libraries. A tastefully ornamental or pleasingly simple spine can be found on most good volumes, which just goes to show you that you can’t judge a book by its cover, but you can judge a book by its spine.
5. Text and image blending – Interplay between text and image is a great way to reinforce the theme of a work and add visual interest to content. At the moment, CSS doesn’t allow for styling type quite like the image below, but some selective images can punch up a web page without adding too much file size. You can find another good example in this champagne ad.
6. Collages – If a picture is worth a thousand words, then a collage must be worth millions. Combining related graphics into a whole is easy, but a great collage is more than just the sum of its parts. Everything from spacial relationships to color palettes to the various depths of the elements must work together to tell a story or create an effect. Fortunately, the Web is awash with all sorts of images with which to build collages.
7. Rays and Reflections – Radiating bands of light have become a favorite Photoshop element of mine, since they really make graphics look slick. Likewise reflections. Unfortunately, both are subject to overuse in the current Web 2.0 design craze. Still, there’s a reason why both are so widely used; they’re cool and appealing. Try them. You’ll like them.
8. Repeating backgrounds – The insides of book covers are terrific for classic patterns. Historically, probably, printers used patterns to save themselves the trouble of designing large and detailed engraving plates. These days, web designers use patterns to save file size and bandwidth. A pattern can also serve as a watermark, a reiteration of an important symbol that tags a work as belonging to a particular designer. For instance, check out the lion background here on The CookBlog. If you right-click on it and select “View Background Image”, you’ll see that the site’s background is really only 120px wide by 400px high. Weighing in at only 11kb, it can nevertheless expand sideways forever.
9. Color palettes – Maintaining a consistent color palette is one of the best ways to keep a design looking professional. A hodgepodge of colors, however well they complement each other, makes it much more difficult to create a design that it sharp and coherent. Choosing a color palette before getting into a project is well worth the time. One of my favorite sites for this is Colourlovers.
10. Text Alignment, Kerning and Justification – Another good polishing method is to experiment with various text attributes. Again, less is more. A unifying theme almost always makes a design look better. The image below, for instance, shows text that is centered. The block below “(fibre de rayonne francaise)” is justified to the margins of the large “FLESA” text above it. In general, the letters of the text are given a little extra space (kerning). The overall effect is stylish and cohesive.
11. Three dimensional objects – Another Web 2.0 trend is three dimensionality. Whether or not that’s a real word, it’s a great effect. Just a bit shadow or perspective can suddenly give a design depth, turning a flat piece of paper or computer screen into something more. It’s the difference between comic strips and Caravaggio. Which do you want to be?
Of course, there’s one final way to design, explained with perfect eloquence by the late, great Edward Gorey.
“I just kind of conjured them up out of my subconscious and put them in order of ascending peculiarity.”
