Design

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)


Behind The Scenes Of Tourism New Zealand (Case Study)


  

In 2011 we saw the rise in popularity of two relatively new trends: responsive Web design and the use of HTML’s canvas. While some websites had experimented with both, in the last 12 months we’ve seen these trends move from the fringes firmly into the mainstream.

Responsive Web design is more a concept than a technology — an ideal that many new websites aspire to. Canvas, on the other hand, is an HTML5-based technology that opens the door to a new wave of interactivity. In this article, we’ll look at a website that embraces both of these elements, one that has been nominated for a Technical Achievement award at SxSW Interactive 2012: Tourism New Zealand.

I spoke with the creative and technical teams at the New Zealand-based firms Shift and Assembly about the technology behind Tourism New Zealand’s home page, how it was made and how they balanced the breakthrough effect with bandwidth.

After we learn how Tourism New Zealand was built, we’ll look at the basics of putting together your own animated HTML5 canvas background.

The Inspiration

Tourism New Zealand has a history of strong media and advertising campaigns, particularly through TV commercials, and its destination marketing website has long featured these videos.

So, when a redesign of the website was planned without an accompanying TV commercial, the team at Shift had a new challenge: to showcase the landscape and breadth of activities in New Zealand to an audience that has come to interact with a website, not to watch a video.

Shift was inspired by, among other things, Nike’s Better World website (which Smashing Magazine has covered). But whereas that website used HTML5 animation to create an effect of parallax scrolling, Shift proposed a camera view that moves through the real world.

Shift’s first idea was to use video as a background, with the camera descending through some of New Zealand’s most exciting locations. The problem was bandwidth: at 25 frames per second, Shift would need to deliver thousands of full-screen frames. This was an impossible goal, so instead the team set a target of around 200 frames for the entire website. But 200 frames for the amount of footage they wanted worked out to about three frames per second, which doesn’t look particularly good.

At this point, they nearly abandoned the idea.

By chance, though, a solution was found. Scrubbing through a QuickTime video, Shift’s creative director, Mark Zeman, noticed that being able to control the frame rate as you move the play head gives the illusion of a smooth experience. He suspected that if the browser’s scroll bar could be used to scrub the footage, it would feel similarly smooth. And if the camera shot photographs as it moved through each scene, it would create the illusion that the user was practically controlling the camera as it descended through New Zealand.

The first prototype was made with a few images and some JavaScript, just to prove that the browser could handle this type of manipulation. Freelance front-end developer Jeff Nusz was then tasked with turning this proof of concept into a working website. The brief was simple: no loading bar, and the first frame must load almost instantly. Furthermore, the website had to be usable even when the user doesn’t wait for all of the images to download.

On Location

With the prototype built and approved by Tourism New Zealand, it was time to load up the trucks with scaffolding and start shooting.

Shift worked with directors Damon Duncan and Matt von Trott of Assembly throughout development of the project, which enabled them to build the large motion-control rigs that were required for the shoot.

A 15-meter-high motion-control rig was built, with a vertical dolly track that housed a Canon 5D DSLR. The rig was set up at each location, and the camera travelled 12 meters down it, taking anywhere between 750 and 950 stills, a process that lasted at least two hours each time (and six hours at Milford Sound, the first location on the website), because the camera moved around 15 millimeters every 10 seconds.


Milford Sound, New Zealand

Each location took three days to shoot. The first day was spent building the tower and putting together the motion-control rig. The second day was usually spent rehearsing the scene, and the third would be for the actual shoot, which included multiple passes of the scene. Indeed, the scene for Waiheke Island is a combination of two takes.


Time-lapse sequences from all four shoots (watch on Vimeo)

Front-end developer Jeff Nusz had built a suite of tools to help the crew plan the photography. The directors also showed the original prototype to the cast and crew, which helped to demonstrate what they were filming and how the time-lapse footage would work.

Post-Production

There were only five days between the final day of shooting and the launch of the website. Most of the code had been written and ported to JavaScript using prototype images, and so it was now a matter of editing the hundreds of photos from each location down to 200 hand-optimized 1280 × 720-pixel frames.

The team spent time testing the website in each browser, noticing different memory quirks in Chrome and Firefox, and it worked on optimizing the website’s performance. Because many of New Zealand’s tourists come from China, the time was also spent making sure the website worked even in IE 6. To better understand the toll of such a heavy home page, Shift used WebPagetest to test it from various parts of the globe.

From 25 MB To 300 KB

Although the entire website weighs in at 25 MB, it enables a usable experience after the first 300 KB of data and images have loaded.

On the initial loading of the page, a 40 KB image is loaded that contains all 200 frames at a very low resolution. This means that as soon as the initial frame of Milford Sound has loaded, you can scrub through the entire website and get some approximation of the full experience. Then, when you stop scrubbing, the website loads the frame you’re on and starts loading the frames before and after it. Moreover, as you scroll the page, all downloading activity stop to ensure the smoothest possible scrolling experience. When you stop scrolling, all downloading resume.

Interestingly, Jeff’s background is mainly in working with Flash, so the initial website was built in Flash and then ported to HTML5 at the last minute. Jeff says that the similarities between ActionScript and JavaScript made this a relatively pain-free process:

ActionScript 3 is a lot like JavaScript. I did a lot of the work in Flash, and I wanted to see how well it would translate, and it was pretty much cut-and-paste for the most part. I just had to structure things in a similar way and make a few semantic changes. Ninety percent of the code ported as it was, which was great.

One of the team’s early breakthroughs was in figuring out how to split up the website’s elements. You can see in the sketch below how a website normally works: you have a long page and, conceptually speaking, the browser’s viewport moves up and down the page (i.e. the latter moving across the former).

In this next sketch, the page itself is a giant empty GIF that you scroll up and down; but the website detects every time you scroll, calculates your position and then translates that to the frame you should be on. The height of the window also changes depending on how big your browser’s viewport is, because if the page is huge and your viewport is small, then the scroll bar would be tiny; Shift wanted to keep the size of the scroll bar consistent, regardless of the browser’s size.

As Jeff notes, “Although it’s not exact, the goal was that one click of your mouse-wheel would be one frame�:

The tag layer and the UI layer is just HTML and CSS, but the background is either an HTML5 canvas that we draw to or it’s Flash. There’s about a 20-millisecond lag between the frames moving and the background changing in Flash, so the canvas version became the primary method used for browsers that support it.

The tags do not scroll in the conventional sense, but for each frame, they are assigned specific x and y coordinates based on the frame. This allows tags to be “gluedâ€� to background elements — a tree, mountain top, etc. — and these coordinates would be recalculated on the fly if the browser window was resized.

To create this effect, the team used Adobe After Effects to keyframe each tag and output the coordinates. Jeff built a PHP script into which the team could copy and paste the After Effects keyframe data, whereupon the script would generate JavaScript that the website could use. Jeff then tweaked the tags in JavaScript to make sure they scrolled as expected.

Sprite Sheets

To create the illusion that the page loads quickly, Jeff came up with the idea of using sprite sheets. As he puts it, “The sprite sheets were the breakthrough that allowed us to make the website usable so quickly after the page loads�.

The first frame (of the background image) is 90 KB. So, together with the first low-resolution sprite sheet (which is 30 KB), these images initially weigh only 130 KB. Once the page has loaded all of the content, it loads a higher-resolution sprite sheet, and then another, and then it loads in the full-resolution images one by one. Rather than loading these large images in sequence, it loads them based on your scroll position within the document.

You can check that the sprite sheets load before the full-resolution images by turning the Webkit Inspector on and watching the “Network� activity after the page has started to render.

Using Inline JavaScript

I asked the team at Shift why so much inline JavaScript was in the head of the document. Best practice would suggest it should be moved to a separate file. However, something more is going on here.

Shift’s solution architect, Glenn Wright, has been working on the website for the last six years. He explains:

The inline JavaScript is there to define the configuration for each page. We can cache each page’s configuration in JavaScript, then all the external libraries that the page loads utilize that data. It gives us an easy way to configure the responsive grid and all of the interactions that the page will have to use.

Testing Mode

A testing mode on the website lets you see some of this loading process in action. Clear your browser’s cache, load Tourism New Zealand’s home page, and then hit the tilde (~) key five times to enable testing mode. You won’t see any change immediately, but once in this mode you can use the following keyboard commands:

  • 1
    Turn on the visualizer for “frames loaded�
  • 3
    Toggle tags on and off
  • 0
    Toggle the high-resolution image on and off
  • -
    Go to the previous low-resolution sprite
  • +
    Go to the next high-resolution sprite

Building Your Own Canvas Background Animation

While websites like Tourism New Zealand take months to design and build, creating your own animated canvas background is relatively straightforward. All it takes is a little JavaScript, a pinch of HTML5 and an enormous amount of imagination to dream up a worthwhile use.

Indeed, a word of caution is in order. We all know that with great power comes great responsibility, and just because we can load 50 high-resolution frames and animate them as the user scrolls the window doesn’t mean we should. As mentioned earlier, websites that use this technique are both lauded and criticized. Make sure that you are enriching the user experience rather than needlessly slowing it down.

First, we need to do a couple of things. Let’s grab some video (a time-lapse video works best for this), and then create our 50 frames. You can create as many frames as you like, but we’ll stick with 50 because this is how many Tourism New Zealand uses for each scene.

Next, let’s grab some royalty-free time-lapse footage from Artbeats and import it into iMovie, where you can export individual frames.

Choose Share → Export Using QuickTime, and in the pop-up dialog box select “Movie to Image Sequence.â€�

We export the images as JPEGs, which leaves us with hundreds of images. So, we have to do two things:

  1. Batch process the images in Photoshop to the required size (here, we went with 480 × 270 pixels to maintain the aspect ratio).
  2. Edit the number of images down to 50. Shift was painstaking in doing this, retouching and editing thousands of images down to just 200. To keep things easy for this tutorial, let’s just delete three photos out of every four.

You should now have 50 photos that, when played in sequence, make for a somewhat choppy time-lapse video.

On to the next couple of steps. First, we’ll figure out how to load the images in the browser and control them with the scroll bar. Secondly, we’ll create our own sprite sheet and use that instead. Open your code editor of choice, and create a new JavaScript file. Or why not head over to GitHub and download the project to play around with?

You’ll also need an HTML file with a canvas element in it, which is as simple as this:

<canvas id="canvas"></canvas>

Hopefully, the comments in the code sufficiently explain what’s going on, but here’s a breakdown anyway.

First, we set up the canvas element and use some basic maths to set start and end points:

// Create our timeLapseVideo object and cache the window object
timeLapseVideo = new Image();
$window = $(window);

// Define the timeLapseVideo element
timeLapseVideo.onload = function(){
  videoContainer.width = 960;
  videoContainer.height = 540;
  videoContext.drawImage(timeLapseVideo, 0, 0, 960, 540);
}

// Load the first frame
timeLapseVideo.src = 'images/TimeLapse001.jpg';

// Calculate how far to scroll before changing a frame
var scrollDistance = $window.height() - $window.scrollTop(),
    totalHeight = $(document).height() - scrollDistance;
    frameDiff = totalHeight / (numberOfFrames - 1);

Then, when the window scrolls, we work out which frame needs to appear on screen:

// Which frame do we need to show?
frameString = (Math.round($window.scrollTop()/frameDiff) + 1).toString();

// Change the image in the canvas
timeLapseVideo.src = 'images/TimeLapse' + frameString + '.jpg';

Make sure to go through the full source code to see it in action. Be careful, because there is no check to determine whether an image has already loaded; you could end up hitting your server with hundreds of requests per page. So, like Tourism New Zealand, you need to build in a check to see whether an image has been cached.

Creating And Using A Sprite Sheet

We can also create our own sprite sheet with our image to emulate more of Tourism New Zealand’s behavior. Some apps and websites are available to help you do the job (see the “Related Links� section at the end), but it’s probably easier to run a simple script that pastes all of the images onto a canvas and then take a plain screenshot of that. The code for this script is in the GitHub repository in case you want to take a look.

There are two main differences with this technique. First, we load only one image onto the canvas, which is the sprite sheet:

timeLapseVideo.src = 'images/spritesheet.jpg';

When the window scrolls, we then draw part of this sprite to the canvas:

videoContext.drawImage(timeLapseVideo, x, y, 80, 45, 0, 0, 960, 540);

In the line above, x and y are the starting coordinates of the sprite, which in turn are dictated by the frame. We’re using a simple loop to iterate through the sprite to find the right coordinates, but you could set up an array of values to look up. These tiny frames are 80 × 45 pixels, and they are drawn from 0,0 to 960 × 540 pixels. CSS then stretches this canvas to fit the entire window.

You can improve this script a great deal by, for example, preloading images when the user isn’t scrolling (some links are below to point you in the right direction). If you make improvements, please do share your work in the comments below.

Creativity In Design And Development

Distilling 18 months of hard work into one article like this is an impossible task. Shift had the time and budget to fly around New Zealand and take thousands of beautiful photographs. This is not an option for the average Web designer!

However, what is perhaps most striking about Tourism New Zealand is the imagination in its concept and execution. By taking the leap from virtual to physical world (and back again!), the scroll bar has become a conduit by which the user can control their experience of New Zealand — if only for 200 frames.

Jeff’s ingenious loading techniques and the use of sprite sheets also kept away the loading bar that is so familiar with websites like this. On an average broadband connection, the experience is effortless and fun.

Perhaps the biggest lesson to be learned here is this. Despite its many bells and whistles, Tourism New Zealand encourages the user to discover the website in much the same way they would discover the country.

Technology supports the great design, not the other way around. If we could all exercise this level of creativity, imagination and user engagement, then we, too, would create amazing websites that shape the future of Web design.

Related Links

I must extend my very special thanks to Jeff (@jeffnusz), Glenn, Che and, in particular, Mark (@markzeman), who were patient with my intermittent Skype connection and who were so transparent in offering their thoughts and many of the images and resources featured in this article.

(al)


© Richard Shepherd for Smashing Magazine, 2012.


Lasting Impressions: Unusual Business Cards That Will Definitely Be Kept


  

As a designer creating a good business card for yourself can be quite task. The need for a visually appealing business card design is greater than in other work fields. There are 2 steps to giving a business card, not only as a designer, but as a business individual in general. The first step, and most important is ensuring the business card is kept. The second step is, of course, getting the project.

Sharing a great looking business card with a partner can often make the difference between getting the job or not. Not to mention that most, let’s say ordinary business cards end up in the trash after awhile. An unusually creative card made out of metal, plastic or rubber can ensure you a permanent slot in that ever-growing pile of business cards of your potential business partners.

There is a growing trend of digitizing business cards through card scanners. Though there are some advantages to having the cards scanned such as the space gained and ease of search, the lasting impression of receiving an appealing and unusually creative business card cannot be matched.

Feeling the unusual shape, the embossed metal or letterpressed paper will certainly help gain you the appreciation and respect needed to start or cement a good business partnership. So take a look at the showcase we have prepared of unusual business cards.

Lasting Impressions

Unusual Business Card Header

Unusual Business Card 1

Unusual Business Card 2

Unusual Business Card 3

Unusual Business Card 4

Unusual Business Card 5

Unusual Business Card 6

Unusual Business Card 7

Unusual Business Card 81

Unusual Business Card 9

Unusual Business Card 10

Unusual Business Card 12

Unusual Business Card 13

Unusual Business Card 14

Unusual Business Card 15

Unusual Business Card 16

Unusual Business Card 17

Unusual Business Card 18

Unusual Business Card 19

Unusual Business Card 20

Unusual Business Card 21

Unusual Business Card 22

Unusual Business Card 23

Unusual Business Card 24

Unusual Business Card 25

Unusual Business Card 26

Unusual Business Card 27

Unusual Business Card 28

Unusual Business Card 29

Unusual Business Card 30

Unusual Business Card 31

Unusual Business Card 32

Unusual Business Card 33

Unusual Business Card 34

Unusual Business Card 35

Unusual Business Card 36

Unusual Business Card 37

Unusual Business Card 38

Unusual Business Card 39

Unusual Business Card 40

Unusual Business Card 41

Unusual Business Card 42

Unusual Business Card 43

Unusual Business Card 44

Unusual Business Card 45

Unusual Business Card 46

Unusual Business Card 47

Unusual Business Card 48

Unusual Business Card 49

Unusual Business Card 50

Unusual Business Card 51

Unusual Business Card 52

Unusual Business Card 53

Unusual Business Card 54

Unusual Business Card 55

Unusual Business Card 56

Unusual Business Card 57

More business card  inspiration

(rb)


Web of Color: Bold and Beautiful Uses of Color in Web Design


  

As we look around the web, we see so many examples of designers who have brilliantly used color in web design projects to make the page or various page elements really pop. Even in some cases when we see designers opting for more minimal designs, using bold splashes of color can really take the look to fantastic new heights in very simple ways. Using bright, bold colors can often be risky, as the colors can end up visually overwhelming or even downright uncomfortable. So it has to be done with care.

Below is a showcase of sites where the designers struck that balance nicely. From headers to backgrounds to calls to action and beyond, these bold and beautiful uses of color in web design are sure to inspire you to find interesting ways to wield this powerful element in your next project.

Web of Color

Will Fernandes’ Personal Portfolio is a perfect example of using bold colors throughout the design to really bring the personality of the site to life in beautiful fashion.

Blurst uses both strong colors and bold typographic elements to create a really sharp design that by contrast remains soft and comfortable.

Somos la pera limonera has a very simple illustrated site design, where the multitude of earth tones give the site a wonderful natural cartoon feel.

Sitesquared has a design overrun with exciting layers of colors bursting all over the site. Even using multiple font colors well, which cannot often be done in such a complementary and visually pleasing manner.

Mydezzign is an example where the minimal website design, and dark background really pop with the splashes of color that have been added in around the content area edges.

Cultural Solutions uses a large burst of colors in the site header, but as you scroll down through the page, the colors come in more subtle splashes. The Bokeh style background elements work well to drop in the color throughout.

Web Munky uses a nice soft background with bold, royal purple elements that stand out beautifully against it. Creating a welcoming feel and a sense of reliability through the colors.

Panda Creatiu has an elegant look created with a warm brown background that allows the colorful portfolio navigation to shine.

Eye Styles uses softly shaded navigable, animated menu elements that provide the subtle design beautiful splashes of color. They really work well to draw the user’s eyes to the products.

Camp Creative Group uses a slightly transparent streak of bold colors in their over-sized header to set a professional tone through the design.

Meomi has a wonderfully whimsical website design with bold splashes of color scattered down throughout the warm background colors. They help visually lead the users down the page.

Art4web uses bright colorful elements in the header to really set off the clean, sharp design. Coupled with bold, colorful typography highlights, the design is fed by the splashes of color added in throughout.

Treehouse uses a dark design with large colorful button calls to action to grab the user’s attention as soon as they arrive at the site.

Moby beautifully injects random bits of color in an otherwise lightly tinted design. With a couple of colorful headers, but also with a clever logo design that follows the user down the page, changing colors with each section.

Sanctuary T Shop has a colorful navigation menu to grab the user’s focus and help steer them along without drawing too much attention away from the products.

nGen Works has a bold header and footer with other soft colorful elements on the page that give the design a very striking impact.

Duoh! uses lots of bold colorful elements to edge the design and scattered throughout the site and its pages that really help the website’s playful and professional edges combine in flawless fashion.

Soup Studios uses lots of pastel coloring throughout the design beautifully. So much color without crossing the line and hurting the site or the products it features.

Mooty Graphic Design boldly fills their header, and to a lesser degree footer, with bright colors, meanwhile using sporadic colorful elements in the main content area to draw the users.

Beautiful 2.0 keeps their bold colorful elements to the upper reaches of the page, descending into more darkness as you go down. The colors really make the the navigation pop.

Bjarke Clauson-Kaas breaks up the large, softly tinted background of the page with two bold, leading splashes of color. One main set of colorful arrows to direct the reader down the page, and another arrow cutting across the page as you hover to split up the work from the bio.

Stripes Design has a very subtle background and design overall, with an explosion of color down the side of the page which creates a powerful contrast and calls to mind a sense of creativity.

Havaianas uses a canvas like textured background filled with bold colorful decorative watercolor styled elements that perfectly complement the feeling of creative energy which drives the company.

Clair Baxter has a website filled with bold colorful design elements scattered throughout to add extra flair and a creative edge to the design.

F91W uses a large, colorful background which carries a light unobtrusive flow around the content area.

(rb)


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