Design

Is Your Website Ready for Pinterest?

Get People to Pin Your Site

Encourage people to pin your site by adding Pinterest buttons to make it easy.

Whether you’re blogging or building a business, chances are you’ve heard about Pinterest. Are you already using the up-and-coming social bookmarking site? A lot of people are, and early adopters are proving the site can be a powerful tool for businesses that want to build their brand online.

Even if you’re not sure that your business needs a Pinterest profile, it’s a smart idea to make sure that your website is ready for Pinterest. After all, Pinterest users are busy pinning favorites all over the web! The easier you make it to pin your site, the more likely you are to get pinned.

So, how do you get your website ready for Pinterest? Follow these steps to make your site easy to pin.

continue reading Is Your Website Ready for Pinterest?


© Barbara Holbrook for Tutorial Blog | 10 comments | Add to del.icio.us

Is Your Website Ready for Pinterest? is a post from: Tutorial Blog


Symptoms Of An Epidemic: Web Design Trends


  

Since Elliot Jay Stocks so poignantly told us to destroy the Web 2.0 look, we’ve witnessed a de-shinification of the Web, with fewer glass buttons, beveled edges, reflections, special-offer badges, vulgar gradients with vibrant colors and diagonal background patterns. The transformation has been welcomed with relief by all but the most hardened gloss-enthusiasts. However, design and aesthetics work in mysterious ways, and no sooner does one Web design trend leave us before another appears.

The Symptoms

So, exactly what is this new epidemic? Well, let’s start by looking at some of the most common symptoms, many of which you have probably noticed. They are easy to spot, and as with many other conditions, they often appear in conjunction with each other. (This is why the contagion spreads so effectively — seemingly independent symptoms grow more infectious when combined with others.)

Please note: The following list appears in no particular order and does not indicate the level of infectiousness or severity, which seem to be stable across the board. Note also that the instances given often exhibit more than one symptom, making classification more difficult.

Stitching

Stitching appears gradually, often as a result of the designer playing too long with borders and lines, particularly of the dotted variety. A full-blown stitch is evidenced by the subtle shift from dots to dashes, augmented by drop shadows and other effects to give the impression of 3-D. The purpose of the stitch is somewhat elusive, but it seems to thrive in environments where certain textures are applied, most notably fabric and leather, but also generic graininess.

While determining the exact cause of stitching is difficult, scientists are certain that it belongs to a larger strain of the infection known as “Skeuomorphism.�

Collage of interfaces with stiches
Clockwise from top: The Journal of Min Tran; Dribbble shot by Mason Yarnell; Dribbble shot by Liam McCabe.

Zigzag Borders

Borders are common elements of Web design, and as such, they are difficult to avoid; luckily, they are usually harmless and often have a positive effect on the layout. However, for some reason, a particular type of border — the zigzag — has grown exponentially in the last few years and is now threatening the natural habitat of more benign border specimens. Exactly why this is happening is unknown, although some researchers claim that the pattern created by the repeating opposing diagonals has such an alluring effect on designers and clients alike that straight borders have somewhat lost their appeal.

Collage of interfaces with zigzag borders
Clockwise from top: You Know Who; Dribbble shot by Christopher Paul; Dribbble shot by Meagan Fisher.

Forked Ribbons

Like borders, ribbons have long existed in various forms. What we’re seeing now, though, is the near dominance of a particular style of ribbon, easily identified by a fork at one or both ends. Some ribbons are also folded over twice, creating a faux effect of depth and reinforcing the diagonal lines in the fork. Whether the fork is related to the zigzag effect is unknown, but it seems that diagonal lines are the key to the ribbon’s survival, along with its ability to evoke memories of times past.

The danger of the ribbon lies mainly in its ability to exist independent of other symptoms (although it thrives in the company of vintage typography), meaning that it could date your design long after the epidemic ends, even if the symptom itself appears dormant. In many ways, this is reminiscent of the “special offers� badge of the Web 2.0 look.

Collage of interfaces using forked ribbons
Clockwise from top: Ryan O’Rourke; Cabedge; Jake Przespo

Textures

In the age of all things digital, it’s a conundrum that textures should dominate our illustrations and backgrounds, and yet they are indeed one of the most common symptoms on our list. Manifested by subtle grain, dirt and scratches, paper-esque surfaces and fold marks, they seem to embrace the spirit of the handmade. But ironically, they’re often the complete opposite: computer-generated effects or Photoshop brushes.

Possible explanations for the widespread use of textures include a yearning for tactile media (especially considering the emergence of touchscreens) or envy towards print designers, who have a much richer palette of materials and surfaces to play with.

Collage of interfaces with textures
Clockwise from top: Gerren Lamson; Zero; Amazee Labs.

Letterpress

A Smashing Magazine article from 2009 outlined letterpress as one of the emerging trends of the year and, boy, were they right. The simple effect has gone from strength to strength and is now a household technique for sprucing up typography online. A relatively harmless symptom, letterpress might also have infected designers through other digital interfaces, such as operating systems and games, as early as the turn of the millennium, indicating a very long incubation period.

Scientists disagree over whether the incubation period is due to the infection needing a critical mass before emerging from dormancy or whether the infection simply needed the right conditions — CSS3 text shadows, to be specific — for symptoms to appear.

Collage of interfaces with letterpress
Clockwise from top: Billy Tamplin; Dribbble shot by Phillip Marriot; Remix.

19th-Century Illustration

After being released from copyright quarantine, this symptom, favoured by fashionable ladies and gentlemen, was nearly eliminated during the last epidemic due to its inability to cope well with gloss and shine. But in this new vintage-friendly environment, it has found its way back into our visual repertoire. For better or worse, the 19th-century illustration will most likely hang around for a while, emerging stronger from time to time like a flu virus.

Collage of interfaces with 19th century illustrations
Clockwise from top: Killian Muster; Dribbble shot by Trent Walton; Simon Collison.

Muted Tones

After a long period of vibrancy, the average online color scheme seems to have been somewhat desaturated across the board. We’re seeing widespread use of browns, earthy greens and mustards and a general leaning towards “impure� colors, although this is generally thought to be a minor symptom of the epidemic. Some scientists will even argue that muted tones are, in fact, not a symptom themselves but rather a side effect of other symptoms, in the way that sweating is a natural response to a fever.

Collage of interfaces with muted colours
Clockwise from top: Dribble shot by Dave Ruiz; Cognition; Web Standards Sherpa.

Justified or Centered Typography (JCT)

This symptom is nothing new; in fact, it was pretty much the standard for the first 500 years of typography, until Tschichold and the New Typography showed up and quarantined it on the grounds that it was old fashioned, difficult to read and inefficient. Although we’re not sure at this point, this link with history might be what has made JCT reappear so vigorously under the umbrella of vintage symptoms. We do know that overall reading habits among humans have not changed in recent years (most Westerners still read left to right), and there is no plausible argument that JCT improves legibility; so, whatever the cause of the outbreak, we know it’s rooted in subjective emotion rather than rational thought.

Collage of interfaces with justified or centered typography
Clockwise from top: Grip Limited; Tommy; Visual Republic.

Circular Script Logotypes (SCL)

A circle is a basic shape and, in isolation, is no more a symptom of an epidemic than a triangle. However, if you repeat enough triangles in a line, you get a zigzag. Similarly, if you include a circle in your logotype, you end up with a circular logotype. And if that logotype happens to be set in a script font, you’ll get — that’s right! — a Circular Script Logotype (SCL). Not that SCL is lethal or anything, but it is relatively contagious and can be highly detrimental when enough hosts have been infected.

Collage of circular script logos
Clockwise from top: Trent Walton; Mercy; Dribbble shot by James Seymor-Lock.

Skeuomorphic Features

Skeuomorphic features — i.e. ornamentation or design features on an object that are copied from the object’s form in another medium — are rife, particularly in mobile applications, and this symptom is one of the defining indicators of the epidemic. Possibly a mutant cancerous strain of mildly skeuomorphic features such as stitches and letterpress, it can sometimes grow to overtake an entire interface, bloating it with redundant visual references to physical objects and materials. However, due to the labor involved in preparing the graphics and the heavy reliance on image resources, some researchers argue that we’re unlikely to see full-blown skeuomorphism dominate our desktop browsers any time soon.

In fact, most scientists regard the phenomenon as a curiosity and predict that some virtual metaphors for physical attributes will prove useful (as tabs have) and some won’t. Interestingly, while Apple has embraced and continues to pioneer the technique, Google seems to some degree to resist the urge to mimic physical reality in its interfaces. Perhaps it has developed a vaccine?

Collage of skeuomorphic interface elements
Clockwise from top: iBooks; Dribbble shot by skorky; Dribbble shot by Igor Shkarin.

How Did It Start?

Pinpointing the epicentre of a design epidemic (read: trend) is always hard, especially given the myriad of symptoms and the contagious nature of the Internet. Identifying Patient Zero is virtually impossible, and, to be pragmatic, doing so would serve no purpose. What we can say is that we’re most likely experiencing a reaction to the Web 2.0 aesthetic — a craving for textured surfaces and retro imagery, something tactile and natural-looking, as an antidote to the shiny impersonality of the past — and that this is both healthy and necessary for pushing the design industry forward. Whatever the sources of trends, they often start with applying smart design to solve a particular problem or, indeed, to counter another trend.

Let’s say that everyone used sans-serif fonts, strong contrasting colors and crisp white backgrounds as a rule. Imagine, in this environment, if a designer went against the grain by using Clarendon or some other warm serif to infuse some personality into their website (which happens to be selling “Grandma’s homemade jam�), and then complemented the personality of their font selection with earthy colors and some brown paper textures. The result would inevitably stand out from the crowd: beautiful, emotional, different.

Incidentally, this aesthetic inspires another designer who happens to be working on a website with a global audience, exposing the new approach to a whole generation of designers who, in turn, apply it at will (often without considering the context). A trend is born. And yet, paradoxically, the potency of the epidemic is under constant threat. The more people get infected, the less differentiated the symptoms appear; and once the infection reaches a critical mass, the symptoms begin to work against themselves. Infusing personality into your visuals is meaningless if everything looks the same.

Is It Dangerous?

In today’s open collaborative world, avoiding an epidemic of this scale is difficult; so, in a sense, everyone is affected to some degree. The symptoms listed above are not restricted to small-scale up-and-coming designers, but affect even the elite of the design community. This means that even though some symptoms are harmless — like a light fever or a runny nose from a flu infection — the viral onslaught of trendy features puts constant pressure on our immune system to protect our creativity, and staying vigilant is important to maintaining a healthy dose of original thought.

If you’re displaying a handful of symptoms, it’s really nothing to worry about — catching a cold that’s going around is not hard, but recovering from it is also easy. If, on the other hand, you display most or all of these symptoms, then there’s reason to be extra cautious in your next project. Using all of a trend’s identifiers as cornerstones of your work might make your portfolio look oh so contemporary, but in a way this practice is no different than passing off the work of your favorite designer, artist or musician as your own. Granted, symptoms with no identifiable origin are not protected by copyright, but that’s beside the point — you should be worried not about legal implications, but rather about the creative integrity of your output. The danger is not only that your work will be seen as a passing fad, a popular aesthetic that will look dated in a couple of years’ time, but that you will lose the respect of your peers when they catch on to you.

While nothing is original, we all need to respect the difference between inspiration and imitation. As Jean Luc Goddard said, “It’s not where you take things from — it’s where you take them to.â€� And if you don’t take them anywhere, what’s the point?

Worse perhaps than the loss of respect and integrity is the effect that epidemics have on clients and, in turn, the design community as a whole. The more designers are infected and the more symptoms they show of the same disease, the less your clients will believe that you’re capable of solving real business problems. Eventually they’ll exclude you from the early stages (where all the real design thinking takes place) and employ your services merely to skin their wireframes, in the process reducing the whole profession to an army of decorators.

What Can You Do About It?

Now that we’ve seen how detrimental trends can be, how does one avoid them? Is this even possible? Trends, by definition, are popular, and arguably nothing is wrong with tapping into that popularity to increase the exposure of your product. Convincing a client to accept a design that is off-trend can be difficult, and you run the risk of alienating the audience by going completely against the trend just for the sake of it. On the other hand, blindly following others is never a good idea, and you could severely stifle your creativity, integrity and client base by accepting what’s “in� as a given and copying it without purpose.

So, what’s the right thing to do? Trends are intrinsic to our society, whether in politics, culture, design or even religion, and as the consensus sways in one direction or another, so will your opinion (or “tasteâ€�) — to some degree, at least. Alas, avoiding trends altogether seems an impossible and pointless undertaking, but that doesn’t leave you powerless. In fact, you can do a host of things to combat the lemming syndrome.

Ask Why

Always question your design decisions (and make sure they are your own), and keep asking the magic question, Why am I doing this? Am I doing this simply because it looks cool or because it suits the message I’m trying to communicate? Why am I using this ribbon? Does the zigzag border add to or detract from the personality of the website? What does this leather texture have to do with the finance app I’m designing? The moment you stop asking questions, you fall prey to the epidemic.

Put Some Effort In

In his article “The Dying Art of Designâ€� Francisco Inchauste asserts, among other things, that inspiration requires perspiration, and I couldn’t agree more. I was lucky enough to attend a college where no computers were allowed in the first year, which meant we had to use physical tools to express ourselves — tracing letters by hand, drawing our photography, stocking up on Pantone pens (remember those?), abusing the copier. Not only did our creativity grow, but we learned an important lesson: good design is not effortless, and the best results come from your own experimentation.

Try Something Different

Remember that being distinctive is, for the most part, a good thing. Most great artists in history, regardless of their field, stood out enough for the world to take notice. Who painted melting clocks before Dali? Who would have thought to build a huge wall on stage before Pink Floyd? While mimicking what’s popular might be comfortable and might secure short-term victories, long-term success requires a unique, memorable approach.

Diversify Your Inspiration

In order to remain creative, staying curious and looking for inspiration all around you is crucial, not just in the latest showcase of fashionable WordPress themes. Read a book, perform a scientific experiment, listen to music you haven’t heard before, walk through a new neighborhood, or experience a foreign culture. Widening your horizons beyond your favorite websites and finding more than one source of inspiration is critical to making original, lasting designs.

Focus on the Basics

Finally and most importantly, study the underlying principles of design in order to understand what is and isn’t defined by style. Grid systems, contrast, legibility, juxtaposing imagery, well-written copy — these are the key components of successful design, yet they are entirely independent of fads and styles.

At the end of the day, design is not so much about style as it is about communication, and all style, imagery and typography should be inspired by the content, functionality and personality of the product, not by what simply looks cool at the moment.

No matter how cool something looks, it too shall pass.

(al) (fi)


© Espen Brunborg for Smashing Magazine, 2012.


Photoshop Tutorial: Create a Semi-Realistic MacBook Pro from Scratch


  

In the following Photoshop tutorial you will learn how to create a semi-realistic MacBook Pro from scratch. First, you will learn how to use the grid and the snap to grid for an easier workflow. We’ll start with some simple vector shapes and several warp techniques along with a bunch of basic tools. Next, we’ll add some color using the Layer Style properties. Finally, we’ll use Layer Masks, Clipping Masks and some discrete Noise to add the final touches for your illustration.

Final Image

This is the image that we’ll end up with by completing this Photoshop tutorial:

Step 1

Open Photoshop and hit Control + N to create a new document. Enter all the data shown in the following image and click OK. Next, enable the Grid (View > Show > Grid) and the Snap to Grid (View > Snap To > Grid). For the moment you need a grid every 2.5px. Go to Edit > Preferences > Guides, Grid & Slices and focus on the Grid section. Enter 2.5 in the Gridline Every box and 1 in the Subdivision box.

Also, set the grid color at white (#ffffff). Once you set all these properties click OK. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes.

Step 2

Set the foreground color at #006d33, pick the Rectangle Tool and create a 920 by 15px shape. Make sure that this new shape is selected and switch to the Direct Selection Tool. Select the bottom, left anchor point and move it 50px to the right then select the bottom, right anchor point and move it 50px to the left. In the end your shape should look like it does in the second image.

Step 3

Reselect the shape created in the previous step and go to Edit > Transform Path > Warp. Select Arc Upper from the Warp menu, check the Orientation button, enter 70% in the Bend box and hit Enter. Make sure that this green shape is still selected and go again to Edit > Transform Path > Warp. This time select Bulge from the Warp menu, check the Orientation button, enter 60% in the Bend box and hit Enter.

Step 4

Set the foreground color to #fed700, pick the Rectangle Tool, create a 920 by 25px shape and place it as shown in the following image.

Step 5

Set the foreground color to #9f0b0b, pick the Rectangle Tool, create a 907.5 by 2.5px shape and place it as shown in the following image.

Step 6

Set the foreground color to #00bff3, pick the Rectangle Tool, create a 920 by 7.5px shape and place it as shown in the following image.

Step 7

Set the foreground color to #ec008c, pick the Rectangle Tool, create a 920 by 12.5px shape and place it as shown in the first image. Make sure that this new shape is selected and switch to the Direct Selection Tool. Select the top, left anchor point and move it 45px to the right then select the top, right anchor point and move it 45px to the left. In the end your shape should look like as it does in the second image.

Step 8

Reselect the shape created in the previous step and go to Edit > Transform Path > Warp. Select Arc Lower from the Warp menu, check the Orientation button, enter 80% in the Bend box and hit Enter. Make sure that this pink shape is still selected and go again to Edit > Transform Path > Warp. This time select Bulge from the Warp menu, check the Orientation button, enter 50% in the Bend box and hit Enter.

Step 9

Focus on the Layers panel and double click on the green shape created and edited in the first steps. This will open the Layer Style window. Check the Inner Shadow and the Gradient Overlay then enter the properties shown in the following images.



Step 10

Keep focusing on the Layers panel, find the shape edited in the previous step, right click on it and click on Convert to Smart Object. Make sure that this new smart object is selected and go to Filter > Noise > Add Noise. Enter the properties shown below and click OK.

Step 11

Move to the yellow shape and open the Layer Style window. Enter the properties shown in the following images and click OK. Make sure that you save the gradient when you get to the Gradient Overlay section. Just click on the New button and pick a name for your gradient and click OK. You can find your newly saved gradient in the Presets window.



Step 12

Move to the Layers panel and convert the shape edited in the previous step to a smart object. Select it and go to Filter > Noise > Add Noise. Enter the properties shown below and click OK.

Step 13

Reselect the thin, red shape created in the fifth step and replace the red with #231f20. Move to the blue shape and open the Layer Style window. Enter the properties shown in the following images and click OK. Pick the gradient saved in the eleventh step when you get to the Gradient Overlay section.



Step 14

Convert the second shape edited in the previous step to a smart object. Select it and go to Filter > Noise > Add Noise. Enter the properties shown below and click OK.

More on Page Two

We are about halfway through the tutorial, but there is still work to be done. The rest of the steps in this tutorial are waiting for you over on page two.


Respect Thy Typography


  

Good typography shouldn’t have to rely on ornamental crutches to stand tall. Yet despite all the tools and knowledge available to us, we readily embrace a flourishing, decorative typography, with cheap tricks used in a misguided attempt to make it “pop�. This ancient art may rapidly be gaining popularity, but are we paying it the respect it deserves?

Take a snapshot of the visual culture that surrounds you—magazines, movie posters, packaging, websites—how much of it relies on typography? How much of the typography around you is actually well considered? Chances are you’ll find a handful of beautifully crafted typographical designs competing with an avalanche of visually “richâ€�, image-heavy creations. Typography is then relegated to the role of “necessary evilâ€� in order to display text, or ill-considered typographic pieces, where the meaning of MS WordArt has been interpreted a smidgen too literally… Why?

Looking Back

It’s fair to say that the global webdesign community is experiencing a typographical renaissance. Revolutionary technologies like Typekit, Fontdeck, the introduction of the @font-face tag, and online licensing for professional typefaces are all encouraging type enthusiasts around the Web to transcend the shackles of common type. Furthermore, clever use of CSS and JavaScript are allowing us to mimic a range of typesetting techniques (though admittedly some basic typographical controls are still frustratingly infantile).

But with such power comes great responsibility. And even though modern tools give us the opportunity to do so many things, doing a great deal of these things isn’t always a recipe for beautiful design. Just because we have many options opening up to us doesn’t mean we need to employ every single one of them in the hope of developing a design that stands out—and most likely for all the wrong reasons.

That’s not to say typographic design can’t be ornamental, complex or even illustrative. But centuries of working with movable type has left us with principles on which to base our typography, and it’s our duty as designers to understand them (at least if we’re aiming to break them). A good place to start is to look at what those who came before us have done—even the briefest throwback into the annals of typography and design history will help.

Consider Milton Glaser’s “I love New York� logo from 1977, commissioned as part of a marketing campaign by the New York State Department of Commerce. Glaser, who did the work pro-bono, wisely avoided skylines, figures of people holding hands, or flowery ornaments by using only a simple heart shape to represent the key word of the mark: love. We all know the subsequent success of the logo, as it has been brandished on millions of white t-shirts, inspiring countless knock-offs since its inception.

And if the heart-symbol of Glaser’s work seems too pictorial in this context, how about Robert Indiana’s “Love� sculpture? Originally created for a Museum of Modern Art Christmas card in 1964, this iconic piece of type shuns imagery altogether, relying only on the power of letterforms (arguably based on Clarendon) to ignite our compassion.

I love New York logo and LOVE sculpture
Lovely examples of modern typographic icons.

Glaser's updated version of I love New York more than ever
Milton Glaser’s post-9/11 update of his own masterpiece.

Of course, this kind of admiration for type didn’t just start with 60’s advertising. Typography is a craft going back thousands of years—to the birth of writing, if you wished to go deep enough—and has evolved and developed a great deal since that time. Theories have been postulated and developed as to how to best communicate through letterforms, especially when an idea needs to be transmitted as easily as possible. As Bringhurst explains while introducing the first chapter of his timeless “The Elements of Typographic Style”: Typography exists to honor content.

Beatrice Warde’s well known essay “The Crystal Goblet” beautifully explains the role of the typographer and his or her type, and she reinforced this point during an address given in 1930 to the British Typographers Guild in London. Advocating the idea that type was not there to be admired, or even noticed, that it existed only with the purpose of communicating an idea, she proclaimed; “I have a book at home of which I have no visual recollection whatever as far as its typography goes; when I think of it, all I see is the Three Musketeers and their comrades swaggering up and down the streets of Paris.â€� I wonder how many us have the same consideration for content when we browse through MyFonts or Typekit in search of the perfect typeface.

One of the many great designers who echoed Warde’s ethos was Jan Tschichold. His most well-known work is found in the legacy he created during his time working for Penguin (1947-1949), refining and redesigning the former book covers and creating the rulebook for the Penguin covers that followed him.


Notice the absence of decorative elements in this series of Penguin covers by Tschichold.

Looking at these covers one will see that the focus is unequivocally on the communication of a book’s title and author, and the result is truly magnificent. The covers are not beautiful because of particular ornaments or images, or even the individual shapes of the letters, but for their clarity of message. It’s not by accident that a clarity of (and focus on) typography has stuck with Penguin until the present day, which is beautifully demonstrated by David Pearson’s designs for the “Great Ideas” series from 2004, 2005 and 2008.

Two book typographic book covers by Pearson
Though the style may be different, the focus on typography still embodies the spirit of Tschichold.

Challenging The Rules

The approach advocated by modernist typographers is one of clarity and legibility. Scientific methods (let’s call it early “A/B testing”) were utilized in the quest to find the perfect typeface—not in terms of aesthetic, but rather efficiency for communicating—and rigid systems were developed to achieve ideal reading conditions. In the strictest sense, typographic beauty is not to be gained from the letters or ornaments themselves, but should come as a natural result from an “invisible” type that unselfishly honors the words and content.

However, movements of any kind invariably inspire counter-movements, and the modernist ethos was to be thoroughly challenged towards the end of the last century, most notably by David Carson (b. 1954), Peter Saville (b. 1955) and Neville Brody (b. 1957). While earlier designers sought to communicate the messages they were setting as clearly and cleanly as possible, these young contenders wished to push the boundaries of legibility and normality, so that the emotion and idea wasn’t delivered via what the words represented, but how the words were seen as objects separated from their meaning.

These three designers were to shape the face of contemporary typography with their groundbreaking work spanning magazines, newspapers, film titles (Carson and Brody) and record sleeves (Saville). They helped pioneer experimental typesetting in the 80′s and 90s’, throwing the modernist rulebook out the window, yet retaining the communicative authority for letters and words.

Nowadays it’s easy to argue that their use of type did indeed include a great deal of flourish and extras. But seen in the context of the post-modern era, it’s clear that this was not simply an attempt to “beautifyâ€� their work. On the contrary, the disrespect for clarity and to embrace “grunge” were design statements opposing the impersonal coldness of the modernist designers… they were adding emotion to the words they were communicating, which also reflected the cultural movement of the time.

Jan Tschichold might have turned in his grave at brash expressions such as these, but the power of typography seemed stronger than ever. Their work showed that there is an infinite number of ways that typography can be used to communicate a message.

Various designs from Saville, Carson and Brody
Clockwise from top left: Saville’s cover for Hard-Fi: Once Upon a Time in the West, Carson’s High Priority spread for NY magazine, Nike ad by Neville Brody.

The conscious tenet arising from such examples is an appreciation, by the designer, of how typography can be emotionally valuable. Each of the above examples evoke something—whether heartfelt, or slightly adrenalin pumping, it can be concluded that this is often the role of illustrative typography: to move the heart, and not just yell at the mind.

From Movable Type To Type That Moves

Regardless of the word count, the typographic experience can be as emotional as any pictorial masterpiece. This notion is beautifully exemplified by the “Coming Togetherâ€� campaign for FontAid by The Society of Typographic Aficionados (SOTA) in support of relief efforts following the 2010 disaster in Haiti. The project—a font consisting of hundreds of ampersands designed by contemporary typographers—showed that despite the common saying that “a picture speaks a thousand wordsâ€�, sometimes all you need is a handful of letters… or indeed, just a single character.

Typeface consisting of ampersands only
The “Coming Together” typeface shows us the power of a single character.

Other, less sentimental examples of moving (literal as well as metaphorical) type are masterfully displayed on the blog of Trent Walton, a true magician in terms of utilizing modern technologies to add depth to his typography. When spelling out the title Workspace, a particularly illustrative typographic treatment conjures up images of your very own—or perhaps your dad’s very own—workspace, complete with holes in the wall for hanging up indispensable tools (“I really needed that magnetic stud finderâ€�).

In another example, Unitasking, the “Iâ€� in the headline doubles as an illuminated “1â€� when it is interacted with, emphasizing the message of the article. Granted, neither example can be described as “pure” typography. But note how the extensive use of technology with typographic tricks can be used to illustrate the message, infusing it with added emotion, rather than for decorative purposes.

Typographic treatment of the word "workspace" with each letter hanging from a nail
Movable, interactive typography with nostalgic undertones.

The word unitasking spelled out twice with the i being illuminated in the second version
Laborious use of CSS trickery adds value to the message.

Stefan Sagmeister is another designer (actually, another legend) fascinated by the concept of emotional typography and how design can touch our fellow human beings, and he’s unafraid to use unconventional means of communication. For a 1999 AIGA lecture poster he literally carved all the copy into his own body using a razor blade (well, his studio mate did the carving) before photographing himself, the result being so disturbingly powerful that it’s difficult to look away.

But it’s not all gore, of course. As part of his “Things I have learnedâ€� series he created a type-only billboard for Experimenta Lisbon, spelling out his message in capital letters: “Complaining is silly. Either act or forgetâ€�. Simple enough, right? Not quite. Using no ink what so ever, Sagmeister and his team created a gigantic stencil and exposed huge sheets of newsprint to the scorching sun over a period of weeks.

The letters (covered by the stencil) would remain white as the newsprint yellowed, and by the time the billboard went up the statement was easily read by onlookers. The subsequent effect was, as you may have deduced by now, that the letters would slowly fade away as the previously non-exposed newsprint would yellow to the same color as the background. Thus the message to “act or forget� was emotionally strengthened with every passing day.

Stefan Sagmeister's naked torso with letters carved into it
Sometimes typography can be effective without trying to be beautiful.

Poster reading "Complaining is silly. Either act or forget."
Using the sun’s ultraviolet rays to slowly fade away the message.

At this point we’ve come a long way from the clear, simple typography of Tschichold. I’m sure many of you are questioning whether the latter examples, in comparison, rely too much on visual tricks to get their messages across. Indeed, I opened this article by challenging the over-use of ornaments and decoration in order to enhance our typography, and yet aren’t Walton’s and Sagmeister’s work examples of just that? Not quite.

Despite heavy use of non-typographic elements, there are no unnecessary flourishes to be found, nor are there any signs of unrelated decoration (though, to be pedantic, Walton’s use of surface textures may be superfluous). In truth, both designers are adding value by choosing techniques and expressions that purposefully match the content and create an emotional frame in which to deliver the message, thus highlighting it’s impact.

Contemporary experimentalists like Walton and Sagmeister might contradict traditional typographic principles, yet they play an important role in the global, ongoing design conversation by constantly discovering new and unconventional means for typographic expression.

Spread The Word. Literally.

In all honesty, type is not just movable, it has the power to move—and it’s up to us to carry this legacy forward and into the digital frontier, that is inevitably our future. By learning from past examples of excellence, we can challenge the status quo of mediocre typography and misplaced stock photography, and start to push things forward. We don’t always need to do too much (well written copy is, after all, your very best friend), and we certainly don’t have to use all the tools in our drawer every time.

But we can continuously look for new ways to add value, as long as we make sure our typography doesn’t communicate anything other than the intended message. Sometimes that means heavy use of CSS, making creative use of sunshine, or experimenting with size and position. Other times—perhaps most times—it means keeping things simple, letting the words do the talking and letting the typography work itself gently into the background.

Remember, despite the plethora of typographical tools we now have at our immediate disposal, we’re the latest chapter of a long history of typographic craftsmanship—typographers painstakingly arranged letters by hand for centuries before the computer (or even phototypesetting) came along. We should honor the hard work that has been put in by those who came before us. We can do this by recognizing typography as an essential part of our work (be it for Web or print), learn about the principles (especially if you’re aiming to break them) and consider all the factors that make for great communication through letterforms.

If right now you are thinking “but my boss will never let me do what Sagmeister does!”—don’t sweat it, most projects don’t allow for typographic experimentation. But that doesn’t mean you can’t hone your skills—there’s plenty to be gained from taking pride in the small things, and making sure you get the details right. If your brief dictates uninspiring imagery, put your effort and pride into perfecting the accompanying typography. Is the line-length appropriate? What about font-size, line-height, and hierarchical contrast? Does the typeface echo the sentiments of the message? Maybe if you get all the small things right, the bigger things will come easier once that suitable project comes your way.

So roll up those sleeves, consider the meaning of the words you’re setting, and pay some respect to the centuries of evolution behind the typeface you’re using today, and just as importantly, the craft of typography as a means of expression. By all means use images, but just remember that you don’t always have to—typography can be just as meaningful by itself, even without the alluring magic of word-art.

(jvb) (il)

A Thank You to our fabulous Typography editor, Alexander Charchar, for preparing this article.


© Espen Brunborg for Smashing Magazine, 2012.


Web Throwback: Showcase of Vintage and Retro Web Design


  

Given the popularity of vintage and retro styles among the web design community, we thought we would take an opportunity and shine a spotlight on some of those styles applied to websites. With so many flawless examples of vintage and retro web design floating around the internet it was a bit difficult to narrow down the search, but we think we found some inspired designs that have not already hit everyone’s radar, and maybe one or two that have.

So take a look below at the showcase we have prepared for you and see how some talented designers have brought the past to life on the web today.

Web Throwback

Forefathers Group has an open, classically vintage style that could be pulled straight from a 20′s broadsheet. Beautiful execution.

Pointless Corp uses a blend of retro elements, most notably the typography and vintage ad style characters to create a feeling of yesteryear throughout the design.

Amazee Labs colorfully recreates a sense of the old days, with a vintage infographic style web design. Big, bold, and feeling old.

Tvornica Bannera pulls off something of an interesting feat. It is not often that a design featuring a robot can have a retro appeal, but this site manages the feat well.

Cup Cup Cupcakes uses soft coloring with a header that mimics the awnings of delis and malt shoppes of the old days to pull together a delicious design.

R U Hot Enuf? calls on the comic books hero styles of old to create a powerful vintage style that really packs a punch.

Jan Ploch has a very simple, minimal design with a monochromatic color palette which all gets it’s retro feel from the site header.

Atticus Pet Design Studio uses various vintage design elements, together with a whimsical mascot image that lands in the old school camp.

Paper Damsels wonderfully combines pinks and greys to craft a very elegant, almost Victorian era feeling design for their site.

Smultron has a deep orange background with a black and white, 20′s style character giving the entire site the feel of an old advertisement.

The Journal of Min Tran uses a retro color scheme and classic feeling header to bring together a very simple, yet attractive design.

Five Thirty Brew combines an advanced, fluid design with retro styled colors and elements for a playfully, informative website.

Bright Bulb Design Studio is a site that you have probably seen before, but it’s awesome vintage design was one that we just couldn’t ignore.

Silky Szeto has an interesting, very old school design, full of various bold fonts tightly packed together like some of the vintage advertisements of yesteryear.

Bitfoundry has a simple, retro design which gets its throwback feel from the bold, clean typography and softly colored elements.

Tommy has such a harmonious blending of vintage elements that it was another that the showcase would not feel complete without.

Hipstery does a good job of employing a range of various elements with an old school 70′s and earlier era feel, however the overly busy background can be a bit hard on the eyes at times.

Simple as Milk is another minimal, yet retro styled design, which relies heavily on the typography to impart this feel. The thick scripted site header shines in this respect.

Reklama-Audio draws on 1940′s era Americana styling for their website design, and it pulls all the elements together with class.

Mom & Popcorn is another flawless blending of so many vintage styled design elements, layered to perfection in such a way that it embodies the very essence of this showcase.

(rb)


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress