Archive for the ‘Design Topics’ Category

Design an Infographic Really Worth a Thousand Words

posted by Sibella
Thursday, February 17, 2011

by Edward Korcheg
Source: Template Monster

I’m sure that web community is grateful to all those people who have devoted plenty of their precious time to creating infographics, you really can’t find a better way to visualize a huge amount of data in a way more efficient and comprehensive. Without a doubt 2010 was a year of informational graphics and this design technique has become one of the main trends of the last year, creating both positive and negative factors in a further development of this practice within the bounds of web design industry.

Creating a really interesting, communicating and useful informational graphic is a really complicated task, which requires skills and tons and tons of patience. I have been a witness to when unwise usage of this design technique had caused a splash of negative reactions on giant social media networks such as Digg.com or Reddit.com – which is obviously not what the authors have designed these infographics for. There was a period when anyone thought he could design an infographic, promote it and gain certain benefits. But in fact there’s a lot to think about before actually starting to work on it. First thing whether a web community actually needs the information you’re about to provide. The second problem is about the visual appeal of your graphic. The right correlation between the quantity of information and visual techniques used to present it is an extremely important thing. So if you don’t want to confuse – or even irritate – your visitors please be careful while creating next informational graphic, otherwise it may harm the reputation of your website.

Types of Data

There are three basic types of what is best presented in a form of an infographic. Knowing all about your info will help you from the very outset of creating infographic. Of course you can mix these types/approaches but it would be better to use one of them, besides it easier for the audience to perceive. Believe me – in most cases infographics have enough “heavy” facts within just one type of info, don’t make it all even harder. So, here are the three types we’re talking about:

  • Time – it is the most popular one because timeline perfectly illustrates dynamical changes of any process, and you shouldn’t worry about the structure – just choose whether it will be a horizontal or a vertical timeline. It is much easier to collect information simply by checking time period and looking for interesting, useful and significant data concerning the topic.

  • Quantity – you can set this type as the directing vector of general data presenting in your project. Of course you have seen many examples containing various quantitative analysis, however you should never forget that mostly people can’t accept and remember many numbers so, don’t go too far with them.


  • Space - this type describes physical relations between some objects or conceptual locations. To be more precise, infographics of this type describe some physical processes or they are geolocation-oriented.

What is also important is the communication approach in creating informational graphics. Our article is devoted to the static infographics which are the most widely spread ones around the web, basically when someone says “infographic” the static infographics are what you think of the first. In addition to this approach there are also two other major types used. Here’s more on each of them:

  • Static – all information is placed on a single page and there are no dynamic elements on this page. Maps, product manuals and other are the best examples of static informational graphics (besides the ones you’ve seen on Digg or Reddit of course).
  • Interactive – in this one the information is selectively presented according to the user’s opinion or actions, it is a very user-friendly approach which allows avoiding the informational oversaturation.
  • Motion – this approach enlivens the visualized data with video or animation creating more conductive atmosphere for perceiving the information.

Visualizing Tools

Frankly speaking, there is nothing revolutionary about this part because I’m sure you all know that any infographic combines various data visualizing techniques. It is obvious that everything starts with creating the major vision of the layout so you have to pick the background color and texture wisely, make sure that the text will be visually appealing and absolutely comprehensible. So, at first you have to choose the textures, typography and colors. Actually these components are essential for any design project so obviously they play major part in creating infographics. The other important part is a smart usage of various clipart icons, charts, diagrams, maps etc. The main trick here is that you have to make your work look really simple and effective.

Marketing Boom

We have seen a number websites which have brought tons of useful and beautiful infographics to a mainstream media. For all young design studios and freelance designers producing a content of such type can be really helpful in terms of their brand recognition and overall marketing. Also you can gain some great SEO benefits just by embedding the links to infographic copyright info – infigraphics are great in link baiting strategy, so use them wisely. Without a doubt this is one of the most creative and profitable types of media promotion. Of course embedding the infographic to your website will engage your visitors by providing a large amount of information in a confined space. So, you can improve even a very boring article with excellent images and make the laziest visitors rush to check out this content.

2011 – A year of new trends for Infographics?

One of the fresh trends marked out by some trustworthy sources is a huge growth of the infographic influence during 2010 – so-called “infographic driven designs”. For example you can present Clients page on your website as geolocation infographic or simply desiging the background of the home page with some visualized data about your particular business sphere. Basically there are many opportunities to integrate informational graphics to the website design and we hope that this year will give us more excellent examples to follow. We strongly believe that this design technique is one of the most advanced ways to increase the website usability and you shouldn’t underestimate it.

0

The World of Fonts: Matching Fonts

posted by Sibella
Thursday, June 10, 2010

by Dmitry Kirsanov
Source: Design Lab

The history of type design that we’ve just skimmed through is probably the only useful guide (besides your own experience and preferences, of course) in choosing fonts for “plain text,” one-face projects. In such cases your single concern should be about a good match between the style, semantics, and intended impact of your text and corresponding properties of the typeface it uses. You can’t set Shakespeare plays in a sans serif font (even of the “humanist” variety), and fragile Modern serifs are not appropriate for a pushy advertisement message.

However, the majority of design projects pose much more difficult problems: Most often, you have to find two or more different typefaces, each matching not only its corresponding text but also all other fonts in the composition. As I’ve once noted, creating solid contrast links between different fonts is a real challenge. Each font being nearly as complex as a human being, it is next to impossible to find two fonts whose features, so to say, point in opposite directions but along the same line—which is a necessary prerequisite for any contrast link.

Therefore, the safest option in any project is using the same font, or its different variants (e.g. bold or italic), for all of your needs. This “monofont” solution may not be perfect, but in many cases it may be better to ensure one more aspect of consistency instead of taking risky aesthetic decisions. Using one font is by far preferable in small compositions such as logos, where two or (God forbid) more fonts would have too little room to show their true nature, and any difference between them would therefore become an annoyance rather than a meaningful opposition.

But, let’s say you really need two fonts for your work (for example, one for headings and the other for body text), and you’re not satisfied by using variations of the same font. Which pair to choose? The basic answer is well known: serif fonts work fine with sans serifs, and vice versa. These two types of fonts are different enough for their contrast to be immediately obvious, resulting in a strong and stable connection.

Here again, the font history may give you valuable hints on which sans serif and serif faces work best together. As these two font types were not developed in parallel, we cannot base our decisions on historical synchronism; most, if not all, today’s serif faces are rooted in past ages, while the majority of sans serifs were created in the current century. More useful is matching the level of “humanization,” liberty and even looseness vs. that of rigidness and artificiality. Remembering what I’ve said about the general trends of dehumanization of serifs and humanization of sans serifs, we may conclude that early serif faces should be a good match for late sans serifs, and vice versa.

In fact, I’m not sure if it is possible to successfully combine late Modern serifs with early geometric sans serifs—both these designs are dehumanized to the point of being dry and even awkward, but their underlying ideologies are too different and even disparate. However, for higher levels of humanization this recipe works perfectly; just consider that the basic pair of typefaces for all operating systems are Times and Helvetica, which are a good match because they’re both transitional—that is, not too “zealous” but not too liberal either.

For another example, look at the logo of a Russian magazine called Internet. [Link no longer in service. -Ed] Although, as I said, different fonts should be avoided in logos, here the two humanist faces, Garamond and Frutiger, work perfectly together because there’s no visual in the composition and the fonts are left to interact only with each other, and because the contrast between them is so deep and multiaspect (in font, face, color, and slant). Moreover, the same two fonts are extensively used throughout the magazine itself (more consistently in the print version than on the site, due to the obvious HTML restrictions).

The AlphaWorks site offers a similar yet contradicting example. As most other IBM sites, this one was developed by Studio Archetype; however, the decision to make a logo from the humanist Meta sans serif font (particularly favored by this studio’s designers) and an old-fashioned Modern serif font (which is traditional for IBM’s corporate style) resulted in a composition of questionable merits—exactly because of the clashing levels of humanization in these two fonts. It is difficult to suppress the feeling that the contrast in this logo is either insufficient or irrelevant.

As you may conclude from these examples, it is usually a good idea to accompany the contrast of fonts by the contrast of other typesetting aspects, particularly font variations (bold, italic, etc.). These variations are possible along the axes of weight, slant, and width—but you should understand that these axes are not equally applicable to different font types.

You may have noticed that many sans serif fonts do not have italics in the proper sense, but only slanted (sometimes called oblique) variations. This is not by accident; the very nature of sans serif design doesn’t allow for an easy transformation into an italic face (or at least, into what we’re accustomed to regard as such). Contrary to that, most serif fonts have really dinky italics that, despite having very different lettershapes, are well dovetailed with the roman variety.

On the other hand, demibold and especially bold variations do not work particularly well with many serif faces—their serifs seem to obstruct the change in weight, and the relative difference in strokes’ thickness (i.e. the level of contrast) is difficult to preserve in different weights. (Interestingly, a high level of contrast is less of an obstacle for changing weight—hence the extra-bold Fat Face and its likes, built upon Modern serif fonts with their increased contrast.) Sans serifs, on the contrary, are very easygoing when it comes to changing weight—many of them have a wide range of weight variations, from extra light to extra bold. This means that each font has its own most natural variations, and you must take these into account when working with fonts; for example, in a professional work you’re much more likely to see a combination of a bold sans serif font and an italic serif font than vice versa.

What are other ways to increase contrast in a multi-font composition? Sure, a serif/sans serif pair is not the most conflicting of all possible font combinations. You could take, for example, an enticing decorative font, such as a stylized blackletter or script face, and put it alongside a plain sans serif font. Unfortunately, such extreme combinations are rarely satisfying. When fonts are too different, they can’t live happily together; as we’ve already found out, contrast is the strongest between two objects when their opposite features are many, but some common traits are still there.

You certainly cannot use a peculiar decorative font for all text on the page, if only because such fonts are often barely legible. If you’ve used a fancy font for a heading or logo, try to be as discreet as possible in your other font choices. As I’ve said, stylistically sans serif is not the best match for decorative faces; however, it is often better to environ a complex-shaped fancy heading with a plain, graphically poor sans serif text blocks than with a serif font which usually has a much stronger personality. It is also advisable to use quite different sizes and colors for the two fonts, in order to move their contrast from the dimension of lettershapes to the more flexible opposition of sizes, colors, and visibility.

It is worth noting that professional designers rarely use something besides the simple, traditional typefaces. I intentionally restricted my historical sketch to the mainstream type design, because I believe that for a beginner designer it’s much more important to carefully study a small set of classical typefaces than to indulge in “cool” designs, often of questionable quality. The well-known fonts are almost “transparent” for perception not because they’re primitive, but on the contrary, because their complexity is well balanced, because they’re carefully polished by their creators and by the centuries of use. It is this transparency that allows the immaterial qualities of your text and design show through the material envelope of the font.

or another example, look at the logo of a Russian magazine called Internet. [Link no longer in service. -Ed] Although, as I said, different fonts should be avoided in logos, here the two humanist faces, Garamond and Frutiger, work perfectly together because there’s no visual in the composition and the fonts are left to interact only with each other, and because the contrast between them is so deep and multiaspect (in font, face, color, and slant). Moreover, the same two fonts are extensively used throughout the magazine itself (more consistently in the print version than on the site, due to the obvious HTML restrictions).
The AlphaWorks site offers a similar yet contradicting example. As most other IBM sites, this one was developed by Studio Archetype; however, the decision to make a logo from the humanist Meta sans serif font (particularly favored by this studio’s designers) and an old-fashioned Modern serif font (which is traditional for IBM’s corporate style) resulted in a composition of questionable merits—exactly because of the clashing levels of humanization in these two fonts. It is difficult to suppress the feeling that the contrast in this logo is either insufficient or irrelevant.

0

The World of Fonts: History of Sans Serif

posted by Sibella
Wednesday, June 9, 2010

by Dmitry Kirsanov
Source: Design Lab

The first half of 20th century is the end of the Modern era, the moment when revived typefaces were flooding the typography mainstream.  But it was also the time when a completely different font design was booming, called sans serif (which is French for “without serifs”).  It wasn’t an absolutely new idea at that time, since first sans serif faces had appeared in the beginning of 19th century; but never before this seemingly peripheral and exotic trend claimed so much importance as in 1920s and 30s.

Actually, it is amazing that the simple idea of dropping serifs at the ends of strokes didn’t occur to the great many typographers who experimented with their shapes and sizes so much.  In part, it is due to the inertia of scribes’ tradition who, with their quills, simply could not produce a reasonably clean cut of a stroke.  Undoubtedly, old typographers also knew the fact that was later confirmed by experiments: Serifs help the eye to stick to the line and thus facilitate reading.

But the biggest part of the serif persistence was, of course, due to plain habit.  When the first examples of sans serif fonts finally appeared, they seemed so controversial that the first name given to them was “grotesque,” and they were very rarely used except in advertising.  And so it remained until the newest trends in art and industrial design, most notably the German Bauhaus movement of 1920s (influenced by earlier Russian constructivism), required adequate means of typographic expression.  These movements stressed utilitarian aspects in design, claiming that a thing becomes beautiful only when—and because—it serves a practical purpose, denying any attempts to artificially “adorn” it.

The most influential type design of that epoch, the Futura font created in Germany in 1928, displayed the core of the Bauhaus ideology: strictly geometric outline, lacking any embellishments and just barely conforming to the historical shapes of letters.  The resulting blend of geometric consistency and aesthetic awkwardness may be disputable, but it was at least something quite new, and therefore impressive, at that time.  Now we’re much more accustomed to the look of Futura (and its many derivatives), but the inborn radicalism of the font still shows through.

Futura In The Past, or A Triumph of Geometry:
developed by Paul Renner in 1928, this font may be called
the starting point of sans serif history in our century

As any other radical movement, the “new sans serif” typography of the 1920s couldn’t do without auguring an imminent death of all serif fonts whatsoever.  This didn’t happen, of course.  Moreover, Futura itself didn’t manage to become so neutral and familiar in the mass perception as to become a standard sans serif font for all occasions.  (Instead, this position was taken by Helvetica, a typical “no-nonsense,” “no-big-deal” font that became ubiquitous almost to the point of being misused and nauseating.)  However, it cannot be denied that Futura played an important role in sans serif becoming a mainstream type style, an accepted contrasting pair for the time-proven serif fonts.

Of course, sans serif proliferation was also due to the higher demand for display typefaces in all media, the demand which is much more severe than at any time in the past.  The most natural use of a sans serif font is still for display purposes (ads, titles, logos, labels of all sorts), although it can be successfully used for body text as well.

It is interesting to note that the development of sans serif typefaces in this century went in a direction opposite to that of the serif type development of previous centuries.  Indeed, we’ve seen how serif faces have gone from arty and liberal Old Style, through neutral Transitional design, to the rigid, mannered Modern typefaces.  Conversely, sans serif fonts started from Futura with its artificial look, then were for a long time dominated by neutral “transitional” Helvetica, and recently a number of distinctively liberal (and, in some classifications, even termed “humanist”) sans serif faces became popular.  Thus, the 20th century process of sans serif humanization is a negation, a mirror image, a contrasting parallel for the earlier process of serif dehumanization in 15th-19th centuries—just as sans serif itself is a contrasting match for serif. 

So what are the features of humanist sans serif faces? One of the first such designs was Frutiger (a.k.a. Freeset, developed in 1976); at first sight similar to Helvetica, this font reveals to a careful investigation some “anti-geometric” features, such as uneven width of strokes (especially in bold variants), non-perpendicular cuts, and slightly bent off tips of strokes (e.g. the bottom of the vertical stroke in “d”).  All these subtleties were intended to smooth out the too harsh edges of the generic sans serif design and improve legibility of characters, and their net result is a relatively warm and friendly-looking typeface—especially if we compare it to the apathetic Helvetica or phrenetic Futura.

The trends that were hinted at in Frutiger were later fully developed in a family of fonts now extremely popular both on the Web and in print design.  The original typeface of this family, called Meta, was developed in 1984 by German designer Erik Spiekermann.  In Meta and its offsprings, strokes have slightly varying width (the creator’s goal was that in small sizes, thinner strokes should not “drop out” but, on the contrary, become undistinguishable from the thicker ones) and, in compensation for the missing serifs, vigorously bent-off tips of vertical strokes in letters like “d” or “n.”  Both uppercase and lowercase characters are narrower than in most other sans serif fonts (i.e. letters are inscribed into rectangles, not squares).  Perhaps here we have an example showing how far can we go in “humanizing” sans serifs and borrowing serif-specific features, while remaining within the sans serif paradigm.

Officina Sans is another Meta-like font designed by Spiekermann

Interestingly, the problems that the designer tried to resolve with the new typeface were purely practical—Spiekermann’s goal was to create an economic font readable in a wide variety of sizes and conditions.  Here’s what the designer himself writes in his article: Meta has been hailed as “the typeface for the nineties”; young designers seem to appreciate its rugged charm, which owes a lot to the detailed requirements of small type on bad paper.  It was never designed to be a trendy typeface, rather it was designed to solve specific problems.  Maybe it is that honest, unpretentious background which appeals to graphic designers and typographers around the world.

Here’s a truly enlightening comparison: Note how the two approaches to a “purely utilitarian” font design, differing only by the fact that one was rather theoretic and the other driven by practical needs, resulted in two fonts as different as Futura and Meta.

0