BlogmyQuery – BMQ

The gaming industry is huge, and it can keep its audience consumed for hours, days and even weeks. Some play the same game over and over again — and occasionally, they even get out their 15-year-old Nintendo 64 to play some Zelda.

Now, I am not a game designer. I actually don’t even play games that often. I am, though, very interested in finding out why a game can keep people occupied for a long period of time, often without their even noticing that they’ve been sitting in front of the screen for hours. I want my apps and products to affect my visitors in the same way.

(Image credit: Axel Pfaender

So, what do games have that we miss in UX and Web design? Games have stunning graphics, missions, high scores, etc.. But adding any of those to our designs does not necessarily provide a better user experience — in many cases they’re frippery. What we are really looking for is what those elements bring to the games.

Using game theories in areas not otherwise associated with games is often referred to as gamification. This term, however, has gotten a rather negative air recently, because people tend to use it for the wrong purposes. A common issue with gamification is that it is used in marketing with no other goal than to sell products. I don’t think gamification should be used this way — in the long run, it does nothing good for the company trying to sell. Instead, gamification should be used to improve the experience of buying and using a product.

In this article, we’ll explore how and when to use gamification to improve the user experience of websites and apps, and also when not to use it.

Table of Contents

• Definition of a game
• How to use gamification in UX design
• When not to use gamification in UX design
• Conclusion
• Reading list

Definition Of A Game

Sid Meier, creator of the Civilization series, once said that a game is “a series of interesting choices.� I believe there’s more to a game than that. For me, the interesting part of a game is what happens in between the choices: exploring new areas, learning how to control your character, pulling people out cars for fun, etc.

In their book Andrew Rollings and Ernest Adams on Game Design, Rollings and Adams speak of four actions related to games: play, pretending, rules and goals.

Play

Playing is usually a recreational activity, and your actions are often nonessential to the game. A game is more of a participatory form of entertainment, whereas books and movies, for example, are mainly presentational. In a game, you decide the storyline.

In Danish and many other languages, the word “playâ€� can be translated as two words, “legeâ€� and “spille.â€� Lege is like when children are playing. Spille is like when you’re playing a game. The difference is small but present. When children are playing, there are usually no initial goals or rules — they are playing simply because they want to play.

Originally introduced in the Amsterdam International Airport, the urinal fly is a great example of a usable yet fun product. Its intent is to keep the bathroom floor clean; when you aim for the fly, you’re less likely to spill. You can urinate without trying to hit the fly, but for a lot of people trying to hit it is a better and more fun experience.

The urinal fly is proven to reduce spillage. (Image: Sustainable Sanitation Alliance)

Another example is Danish gas station F24. In December 2011, it introduced new multimedia pumps at its stations. Customers can play games while filling gas, with a 10% chance of winning a prize. They don’t have to play the game while filling their cars, but the chance of being able to drive away without having to pay for the gas is enticing. It’s a great idea because people talk about the game with their friends, and the next time their friends need to fill up, they will go to F24 to try it for themselves.

The iPhone app Clear was extremely popular when it launched recently. The app has a simple concept: keeping lists of tasks. But the way you interact with the tasks is different from what we’ve seen before. Some people even said they made up tasks just to be able to mark them as complete. Very few products are able to make their users do that, but we should try to accomplish it with everything we create.

With websites, a recent trend is parallax scrolling. Nike showed what single-page designs could be with its Better World and We Run Mexico websites. A lot of people scrolled up and down those websites just to watch the effects over and over again. We were intrigued because they were different from other single-page websites.

Pretending

Games often allow a player to be another person. They give the player a different reality. People tend to behave differently if no one knows who they are.

This could very well be the reason why people love social networks, forums and chat rooms. You get to create your own identity, or at least choose which parts of you others get to see.

Rules

Any game has rules — rules that define what players can and cannot do. Adams and Rollings refer to six functions defined by game rules: semiotics, gameplay, sequence of play, goal(s) of the game, termination condition and meta rules.

• The semiotics of a game are the symbols that are used and how those symbols are interpreted. In Web design, we can look at icons as semiotics. Our users need to understand the icons that we use, otherwise the icons have no reason for being. Always consider whether to use an icon, text or both — you wouldn’t want to frustrate users just by choosing the wrong visual representation of a function.
• Gameplay is a combination of challenges (i.e. what the player has to overcome) and actions (i.e. what the player has to do in order to overcome the challenges). The challenges have to suit the player, which is why games often let players choose the difficulty level. This, however, probably wouldn’t work on a website.
• The sequence of play can be thought of as the progression of the game. In Super Mario Bros., the simple sequence of play is, “Run through the level, collect stuff, defeat enemies and hit the flag.â€� On the next level, the same (or a slightly different) sequence starts anew. On a shopping website, the sequence of play could be Search for product → Read reviews → Click “Buyâ€� → Check out. If you have a good experience, you are likely to return to the website to buy again.
• While a game often has a main goal (in Angry Birds, it’s to defeat the pigs), players are often motivated to set their own goals as well (such as to get three stars in all levels). We’ll come back to goals shortly.
• The termination condition defines when the game ends. In terms of Web design, the termination condition could define when the user has completed a task; for instance, checking out of a store. We have to ensure that the visitor has had a great experience up to this point, otherwise they will not come back.
• We should be careful about meta rules in Web design. They are exceptions to the rules, defining when the rules do not apply. On websites, we need to stick to the rules to ensure that we don’t confuse users.

Goals

Everyone loves completing a task. Achieving a goal is one of my favorite things — whether it’s to deliver a website to a client, running a certain distance or learning something new.

Even a small goal can bring great satisfaction. A while back, Ryan Carson of Carsonified posted a screenshot of one of the steps in Twitter’s incredibly clever sign-up process. It has changed a bit since, but the concept is the same: while teaching you how to use the service, Twitter makes you feel like you’re accomplishing a goal by reaching the end of the progress bar.

Twitter’s sign-up process uses gamification to teach users how to use the service.

When I (very occasionally) pull myself together to go for a run, and I’m almost at my goal, the lady on the Nike+ app on my iPhone says, “You’re almost at your goal. Keep it up!â€� This always pushes me a little harder. In its app, Nike takes advantage of our desire to compete — be it against friends or ourselves. Most importantly, Nike motivates and encourages its users.

When you encourage users to complete a task, they are more likely to try to do it. On websites, such a task could be registering, filling out a profile, signing up for a newsletter or simply buying a product. Give the user a sense of success; again, the good experience will satisfy customers and, thus, make them return.

Not all games have a quantifiable outcome or an achievable goal, though. Take Sin City, Space Invaders and flOw. If you haven’t tried flOw, I encourage you to do so. In the game, “players with differing skill levels can intuitively customize their experiences in the zone and enjoy the game at their own pace.�

The process is often a goal in itself. A goal on a website is often to find information or to buy a product, and so the user has to be able to actually find this information — and enjoy doing it.

These are, according to Adams and Rollings, the four main components of a game. Let’s try to expand on them.

Cooperation and Competition

Games are more fun when you have someone to play them with. You can fight against an opponent or collaborate on completing a task. Remember when you could connect two Game Boys to trade Pokémons?

In these days of social networking, we have the ideal conditions for cooperating with friends. Social networking is probably way more about marketing than we realize. Companies know that if they show us products that our friends are buying, we’re more likely to buy them, too. Take Spotify; your Facebook stream is filled with music being listened to by your friends. You can listen to it yourself, comment, like and so on. Spotify engages you in its product — even if you don’t even use Spotify.

Services such as FourSquare and Facebook Places rely heavily on social relationships. When your friend ousts you as mayor of Starbucks, you of course have to go to Starbucks to reclaim the title. The process is simple, but it actually involves three of the four actions mentioned above. You’re playing a game with your friend with the goal of being the mayor of Starbucks, and the game is more or less defined by rules, a set of steps you have to go through to complete your turn.

How To Use Gamification In UX Design

Why should we make our websites usable? Why even spend time on UX? It’s rather simple, actually. Usability expert Jakob Nielsen explains it well:

On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave. If the homepage fails to clearly state what a company offers and what users can do on the site, people leave. If users get lost on a website, they leave. If a website’s information is hard to read or doesn’t answer users’ key questions, they leave. Note a pattern here? There’s no such thing as a user reading a website manual or otherwise spending much time trying to figure out an interface. There are plenty of other websites available; leaving is the first line of defense when users encounter a difficulty.

This is why we spend so much time on usability and UX design. If we scare off our visitors before they have even had a chance to look at what we’re selling, then we won’t sell anything.

We are not looking to transform our products into games. Instead, we are trying to learn from an industry with an extremely engaged audience. We shouldn’t blindly use these theories; rather, we should adapt them to our needs and to the platforms on which we deliver our products, without compromising with the quality of our products.

Gamification shouldn’t be something you apply after designing and building your product. Gamification is a part of the design process itself. But how do we put this into practice? While the process will be shaped by your product and audience, here are some areas to consider when applying game theories to your product or website, along with some good resources on implementing them.

Tangible User Interfaces

Since the birth of the personal computer, we’ve been accustomed to using a mouse and keyboard. However, in the world of games, the physical controls change with the platform. On a PlayStation, you have the geometric buttons and a couple of jogs. On an iPhone, you have a touchscreen and an accelerometer. You might have a tennis racket for the Wii. One game can be controlled differently on two platforms; for example, you might steer a car with the keyboard arrows on a PC but tilt on an iPhone.

With the mobile market ever expanding, we need to make sure that our users have a good experience, whatever platform they use to visit our websites. We need to adapt our products to the platform they are being served on.

If you own an iPhone, try visiting Google Images, and compare the mobile to the desktop version. Swiping through the result pages is a great experience because you’re used to that gesture on the iOS platform. Visit YouTube from a PlayStation 3, and you will be greeted by a design suited to a media center.

When I got my first iPhone, I spent a lot of time playing with the interface. But the interface was still limited to a set of predefined gestures. With the iPhone 4S came Siri, which enabled us to interact with the device in a completely new way, and it took mobile devices to the next level in accessibility.

When you visit YouTube from a PlayStation 3, you are redirected to YouTube XL.

Resources:

• “Responsive Web Design,â€� Ethan Marcotte
• “Redirect Mobile Devices,â€� Chris Coyier
• “List of User Agent Strings,â€� UserAgentString.com

Location-Based Websites

Popular games are often location-based — i.e. the location of the player affects the game. Can we benefit from this in Web and UX design? Heck, yeah!

I live in Denmark. I recently visited Amazon’s US website and was greeted with this message:

Amazon uses location to direct you to the store for your area.

Amazon detects where I live and points me to Amazon UK. Checking my location may be a simple technical task, but it makes it feel almost as if they know me.

Social networks are taking advantage of our urge to play and the fact that we almost always have a GPS-enabled gadget with us. To get a discount, someone can check in at H&M, and at the same time tell the entire world that they’re shopping at H&M. That is extremely cheap advertising.

Resources:

• “Geolocation,â€� Mark Pilgrim
• Geolocation,â€� HTML5 Demos and Examples

Constructive and Helpful Feedback

In games, we often see direct feedback to our actions. For instance, your guide might interrupt a game that’s not going so well to help you remember how to use some skills that you learned earlier in the game.

Providing feedback to your users, especially when something goes wrong, is crucial. Be honest with your users, and help them move on.

There are many ways to give users direct visual feedback in a design: show them what page they are on, use consistent colors for links, create a helpful 404 page, give useful information when a field isn’t filled in correctly in a contact form.

One of my favorite features of Google is its “Did you mean?� suggestions. Many people are poor spellers, but that shouldn’t prevent them from buying your product. Adding a “Did you mean?� feature to your Web store’s search engine can help these users find the product they’re looking for.

Feedback is not only about responding to the visitor’s actions, but also about foreseeing their actions. Olark is a great example. Olark is a customer-support service that puts chat functionality on your website. When you visit Olark’s website and you’ve been there for 10 seconds doing nothing but scrolling, the chat window appears with the message, “Thanks for stopping by! May I help you?� Even though the message is automated for all users, it gives them the impression that they’re chatting with a real person. When a visitor replies to the automated message, they’re connected to an Olark employee, who then answers their questions.

Be careful not to annoy visitors, though. Remember Clippy? Respect your users — if they close the chat window, don’t reopen it when they visit another page on your website.

Resources:

• “Did you mean…? in PHP,â€� Alejandro Urbano
• AutoSuggest jQuery plugin, Drew Wilson

Don’t Ignore The Content

I won’t get into this argument — I’m simply stating that I believe that content is still the most important part of any product. Your candy might be wrapped in pretty paper, but people won’t buy it twice if it tastes like junk. This, of course, doesn’t mean that we shouldn’t wrap it nicely; pretty paper certainly has its advantages.

As Katie Salen and Eric Zimmerman assert in Rules of Play, “Context shapes interpretationâ€� (pages 44–46). Visiting a business website for which the designer chose Comic Sans as the font really takes the focus off of the content. Make sure that your design represents the content — use the design to substantiate your message.

In “Gamification Is Not Game Design,� Adam Loving has this to say:

You cannot increase the intrinsic value of something by adding game mechanics. You CAN make the value more visible. You CAN change the paradigm and context of your site visitor from user to player — increasing their engagement.

Gamification is just a tool to serve content more digestibly. Don’t overuse it; your website or app will not improve from the application of game theories. The product needs to be great, otherwise it won’t matter. Gamification can improve the user experience, but by no means can it create it alone — the user experience is also created by logical structure, good writing, motivation, flow, etc.

In his much debated blog post “Design Is Horseshit�, yongfook tells us: “Focus on value creation. Design enhances value, it does not create it.� And as Joshua Porter mentions in his response post, this statement is entirely true “when you believe that design is just making things look good.�

The same could be said of gamification. A point system and badges are not what make a product good, but rather the experience they provide combined with the product itself. Gamification really can create value — it depends entirely on the user. School teachers know this; to be effective, they have to look at the student, not the class. Not everyone learns the same way. Two times two might equal four, but there are a million ways to learn that. For instance, Treehouse has a great product not because you can earn badges; that’s fun and all, but the value lies in the high quality of the teaching material.

On Treehouse, you can unlock badges by taking quizzes and completing code challenges.

Storytelling

Vitaly Friedman, editor in chief of this very magazine, said at the Frontend conference (video) in Oslo in 2011 that we should be better at storytelling in Web design. The Web is not a static medium — why don’t we embrace that? The possibilities for creating beautiful, useful and helpful interfaces and products are endless, but we rarely take advantage of them. We need to experiment in order to create better interfaces. As Vitaly said, we need to tailor our designs to the particular needs of the client. We need to stop focusing on selling products; we don’t have to trick people into buying. No one will buy a product that they don’t know something about; tell the user what your product does and why it does it the best before even attempting to sell it.

In October 2011, ZURB posted an article advocating for hiding the sign-up button in order to get more sign-ups. On the home page of a client’s website, ZURB replaced the sign-up button with a “Let’s goâ€� button, inviting the visitor to learn more about the product, before even mentioning anything about signing up or buying a product. Sign-ups actually increased by — wait for it — 350%!

Engage Your Users

In Angry Birds you can earn badges for completing various tasks throughout the game. I don’t know about you, but I’ve played the same levels over and over again until I got three stars. We want to be best.

Other than getting badges for ranking high, you also get badges for playing longer, hitting a certain number of pigs, etc.

When I visit one of my local bakeries to buy bread, I get a stamp on a card. The next time I visit the bakery, I get another stamp. When I have 10 stamps, I get free bread. Simple but effective. I would never visit another bakery. Research by Joseph Nunes and Xavier Drèze shows that prestamping such cards is effective. It makes customers feel as if they have begun collecting stamps; as a result, they feel more motivated to complete the card than those whose cards are not prestamped. In a Web store, you could give customers double the value on their first purchase or increase the discount they get according to how often they buy from you.

There are many ways to engage users. Ask them for feedback — and listen. Create a Facebook page or Twitter profile, and be active. If you can afford it, giving away free stuff also helps to spread the word about your company. Competitions are often a great way to engage users. This Easter, WOW HD held a competition in which users had to browse its Web store to find Easter eggs. For each egg found, the visitor got a coupon code. In the process, the visitor would come upon a lot of products on which they could spend their coupons. Create fun competitions instead of asking basic questions.

Be Personal and Fun

My wife and I visited Las Vegas a couple of years ago. I handed a waitress my credit card to pay for our dinner, and she handed it back to me and said, “Thank you, Peter.� I thought to myself, “How does she know my name?!� only to realize that she’d seen my name on the credit card. But it felt like she knew me. It felt like she cared.

Flickr greets you in different languages.

This is easy to do when the user has registered an account on your website. Whenever they’re logged in, address them by name to make them feel like you’re speaking directly to them. When you log into Flickr, you’re greeted with the word “Hi� in one of many languages, followed by your name. On Amazon, you get personalized recommendations when you’re logged in, based on items recently bought and viewed.

Easter Eggs

Ever since I got my first computer, I’ve loved Easter eggs — hidden details like the “Here’s to the crazy onesâ€� speech in the TextEdit icon on Mac OS X, and even hidden games like Snake in Terminal. Many websites also have Easter eggs. Most of the time, they’re just developers having fun, but why not let your users have some fun, too.

There are several ways to include Easter eggs in your application or website. One of my favorites is the Konami Code. The Konami Code appeared by mistake in the 1985 arcade game Gradius. It is entered by pressing certain buttons in a certain order: up, up, down, down, left, right, left, right, B, A, Start, and it is probably relevant only to websites related to games and technology.

Several websites, including Geek & Hype and the website of Paul Irish (which you just have to try) use the Konami Code. You could use it to give users a discount or just to show them something fun.

Another way to use Easter eggs is by placing them on your 404 page. Of course, you don’t want visitors to end up there, but having something fun there might lighten the mood. Check out Fab404 for great 404 inspiration.

Nosh’s 404 page features a video in which a team of ex-special forces hunts down the missing page.

Resources:

• Konami-JS, George Mandis

When Not To Use Gamification In UX design

Don’t rush out to add badges and point systems to your designs, though. Gamification certainly has its limits.

Sell the Product, Not the Experience

Of course, we all know that we’re selling a product. When you visit a physical store, you get an experience. Music comes out of the speakers, and pictures are hung with beautiful people wearing clothes that you’re going to buy because you want to look like them. The store assistant offers your girlfriend or boyfriend a cup of coffee, telling them that they look gorgeous in that sweater. And you leave the store with a good experience.

We want to give our visitors a good experience. But our product is still the website, with all its content, be it a Web store, a restaurant menu or our own portfolio. A great experience doesn’t give visitors much if that’s all there is. Focus on creating a great product before making it look pretty.

As mentioned earlier, gamification doesn’t sell the product. It can make the experience more fun, which will hopefully bring the customer back. But to be honest, if you don’t have a great product, you should probably be spending your time on that instead.

Websites Shouldn’t Have Difficulty Levels

Games always have to have difficulty levels; completing a game without at least failing a couple of times is no fun. On a website, however, users should find what they’re looking for as quickly as possible; if they get annoyed, they will hit the “Back” button and you won’t sell anything. This doesn’t mean you can’t experiment with navigation and effects. But, to quote Steve Krug, just don’t make your users think — at least not too much.

Don’t Spam. Ever.

So, you want to promote this shiny new product of yours. What do you do? Perhaps you think to offer a discount if customers tell at least 150 of their friends on Facebook about it. The problem is that everyone hates spam, and the saying “Bad publicity is better than no publicity� is not really true.

Your Twitter followers probably don’t care that you’ve checked into McDonald’s for the fourth time this week on Foursquare — and if they do, they’ll follow you on Foursquare. The main reason I don’t use location-based social networks such as Facebook Places and Foursquare is that they were introduced to me as spam in my Twitter stream. Even though users can opt out of sharing their location, consider whether you should give them the option at all. Doing so could come back to haunt you.

Never Force Visitors to Play

Don’t make it a requirement to play your game. Not everyone wants to collect badges, and you should respect that. Giving discounts to those who want to play is one thing, but don’t exclude anyone from buying.

Gamification Is a Balance

Before even thinking about using gamification, consider how it might affect your reputation. For instance, websites for law firms and banks probably shouldn’t be “fun” to use. Some aspects of gamification just aren’t suitable for companies that want to be taken seriously. Imagine getting a 10% discount from your lawyer for liking them on Facebook. I would have a hard time taking that lawyer seriously.

The iPhone app of Jyske Bank (a Danish bank) finds your closest branch by using GPS.

By contrast, helping visitors find the closest branch when visiting your bank website on a mobile device will show them that you care. Figure out how you want your company to be seen before using gamification.

Conclusion

Gamification is here to stay, and unfortunately many people will continue to use it the wrong way. We’ve covered a few ways to use gamification wisely. The goal is to enhance the experience of using your product, without punishing users who just want to buy the product and move on.

People love having unique experiences. Experiences are what brings people back. But don’t let the experience get in their way of buying your product.

Reading List

Gamification

To learn more about gamification, have a look at these articles and books:

• “Gamification Is Bullshit,â€� Ian Bogost
• “Gamification Is(n’t) Bull*hit,â€� Adena DeMonte, Badgeville
• “Gamification Is Not Game Design,â€� Adam Loving
• “Gamification: Hype or Game-Changer,â€� Nicholas Lovell, Wall Street Journal
• “Gamification,â€� Jon Radoff
• “How Gamification Plays a Role in Social Media?,â€� Profileness
• “The ‘Gamification’ of Education,â€� Elizabeth Corcoran, Forbes
• Gamification by Design: Implementing Game Mechanics in Web and Mobile Apps, Gabe Zichermann and Christopher Cunningham
• Andrew Rollings and Ernest Adams on Game Design, Andrew Rollings and Ernest Adams

References and Resources

In addition to the above, be sure to check out these articles and books.

• “Design Is Horseshit!,â€� yongfook
• “Design Is Not Horsepoop,â€� Joshua Porter
• “Why You Should Bury Your Sign-Up Button,â€� Joshua Porter
• “Why Burying Sign-Up Buttons Helps Get More Sign Ups,â€� Dmitry at ZURBlog
• Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences, Stephen P. Andersen

(al)

---

© Peter Steen Høgenhaug for Smashing Magazine, 2012.

Developing a website can sometimes be a dry process, but that doesn’t mean the finished site can’t make a splash. As the lead designer at a studio called “The Deep End”, it’s always interesting to see what others have done with the underwater web design theme, and it turns out there are quite a few sites out there. Pay close attention to the different styles that are utilized, as there are many different ways to bring the allure of the sea to the web.

Below is a showcase of beautiful websites that have used the underwater landscape and the creatures who reside there as either a backdrop, or to tell a compelling story. From cartoonish and quirky to stunningly photographic, these aquatic websites have a lot of range. So dive in to this showcase of underwater web design and find the inspiration you are looking for to turn your next web project into something truly deep.

Websites of the Deep

iZenius uses subtle animation, texture and a fun retro aesthetic to bring a stylized ocean to life.

Family of Fish uses beautiful fullscreen photography in multiple layers to create an amazing parallax effect as you scroll down to the ocean floor.

The site for the fictitious Atlantis World’s Fair has the look and feel of a children’s book from the 1960s. Mostly baby blue with several pops of color, it follows the journey from the water’s surface down to the lost city.

Fishy has a quirky and colorful interface that makes great use of pop art illustrations and HTML5 animations to showcase their work.

Goodbye Elliott is a Hawaiian boy band that uses the natural underwater beauty of their home state to gorgeous effect.

Liquid Torch gives the illusion of being underwater through simulated beams of light, as well as splashes of water on and behind the hero image.

Squid Chef‘s coming soon page plays with lighting effects and a colorful, simplistic illustration of their mascot.

Iceberg brings us a somewhat chilled version of the oceanscape. Using gradients and subtle glow effects, Iceberg shows us that there really is more under the surface.

Dedoce utilizes a beautifully textured watercolor-esque illustration as a backdrop, and the result is quite dramatic.

Iutopi is a fantastic example of using parallax to tell a story. As you scroll down from the surface, you encounter many of the creatures which call the ocean home, and they only get stranger the deeper you go.

Ocean’s Discovery uses the requisite ocean blue in the hero photo, but sets it off with a pop of vivid yellow on the navigation bar and to highlight some of the copy.

Tomas Projeta‘s portfolio site has a very atypical and interesting navigation. Rather than starting at the top, it starts in the center of the vertical space, allowing visitors to scroll up to the sky, or down into the sea. The wonderfully detailed illustrations make both directions worth the trip.

We Think suggests a deep sea dive through the clever use of their heroes’ image: Two guys in their pajamas and old-school diver helmets. Their header also includes a repeating wave pattern to add to the effect.

Ukranian Design Studio includes many environments in addition to the beautiful coral reef. You can easily navigate toward space, dry land, as well as the center of the earth.

Sendoushi uses a fish as a metaphor for the different stages that stand between a client’s problem and their solution. Now that’s deep.

Deeper is a WordPress theme that combines gorgeous fullscreen photography and some slick jQuery scrolling. It is meant to be used by scuba diving businesses.

OPResume integrates the scenery into almost every aspect of the design, including navigation items and calls to action. So what if they put toucans underwater? This site has a lot of fun with the illustrations and animations, and it all works.

Flotation Web Hosting uses semi-transparent wave graphics and a lifesaver to bring their otter mascot to the top of the page. Subtle texture and cool hues let the bright calls to action really stand out.

Brad Colbow‘s portfolio site has a cool, somewhat grungy illustration of a swing set being swallowed up by the sea as its background.

Thanks to a shot of water out of his blowhole, ReadWhale‘s whale mascot blends in seamlessly with their logo. Ultra simple, in various shades and gradients of blue, this site really conveys an arctic mood.

Visual Harbor puts its employees into the scene as deep sea divers loaded into a mini submersible, before popping out for a quick swim. There is also a really great illustration of their “underwater headquarters.” I doubt they get much work done there, but its cool nonetheless.

Voll‘s site is the second on our list to start in the center of the horizontal space, allowing visitors to either scroll up or down. If you choose the downward path, you will be greeted by brightly colored octopi and a landscape that looks more lunar than aquatic. Snaps for artistic license!

Get Me Fast has a very colorful, cartoony vibe that goes well with their mission of making web development simple.

Discovery Cove‘s main content area serves as a slideshow for images of the underwater activities the park offers, intercut with animated images of brilliant, sparkling underwater light.

The site for Lonely Sock Games’ Coral City App uses fun, colorful underwater illustrations of the game’s central characters, as well as underwater structures. Some retro design elements give the site even more visual interest.

Bluefish Training uses an angelfish silhouette and a ultra clean waterline to give the content a sense of space.

Icebrrg‘s tagline reads: “web forms made chillingly simple.” The same can be said for the website itself. Using only simulated light in cool hues, you get the sense that the water is pretty cold down here.

Feel and Live gets the subtlety award for this list. Their site has a very pale blue background with a faint wave pattern running across the header. The overall effect is very light and refreshing, and it lets the three main accent colors make a more powerful statement.

End of the Line

That finishes off this end of the showcase, but we know that there are plenty of other fish in this sea. So now we turn the post over to you, the reader. Take a moment and leave us your thoughts on the sites collected here, or a particular favorite of yours that wasn’t on the list.

(rb)

Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.

But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation.

Sections of This Article

To get a solid sense of the process from beginning to end, below is an outline of the article. Please note that this effect will only work properly in modern browsers that support the CSS3 properties being used.

1. Introduction
   Learn basic concepts related to CSS3 transitions and keyframe animation.
2. HTML markup
   Create the HTML markup for the sliding images.
3. CSS styles
   Create the style sheet to display the slider.
4. CSS3 keyframe animation
   Add animation to the slider (we’ll explain the various processes happening here).
5. Progress bar
   Add a progress bar for our slider.
6. Tooltip
   Add a tooltip to display the title of the image.
7. CSS3 transitions
   Animate the tooltip using CSS3 transitions to make it appear to hover over the image.
8. Pause and restart
   Pause the slider and restart it on hover.
9. Demo
   Check out the slider in action.
10. Conclusion
    Final considerations.

Screenshot of the pure CSS3 cycling slideshow.

1. Introduction

To follow this tutorial, having a basic understanding of CSS, especially CSS3 transitions and keyframe animation, is important. Using this simple concept, we will see how to make a functional image slider.

Basic Concepts of CSS3 Transitions

Normally when you change a CSS value, the change is instant. Now, thanks to the transition property, we can easily animate from the old to new state.

We can use four transition properties:

1. transition-property
   Defines the name(s) of the CSS properties to which the transitions should be applied.
2. transition-duration
   Defines the duration over which the transitions should occur.
3. transition-timing-function
   Determines how intermediate values of the transition are calculated. The effects from the timing function are commonly called easing functions.
4. transition-delay
   Defines when the transition starts.

At the moment, CSS3 transitions are supported in Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ and IE 10. Because the technology is still relatively new, prefixes for browsers are required. So far, the syntax is exactly the same for each browser, with only a prefix change required. We will omit them in the snippets in this article, but please remember to include the prefixes in your code.

Let’s see how to apply a simple transition to a link:

a {
   color: #000;
   transition-property: color;
   transition-duration: 0.7s;
   transition-timing-function: ease-in;
   transition-delay: 0.3s;
}

a:hover {
   color: #fff;
}

When assigning an animation to an element, you can also use the shorthand:

a  {
   color: #000;
   transition: color 0.7s ease-in 0.3s;
}

a:hover {
   color: #fff;
}

The W3C has a list of all “Animatable Properties.�

Basic Concepts of CSS3 Animations

CSS animation enables us to create animations without JavaScript by using a set of keyframes.

Unlike CSS transitions, keyframe animations are currently supported only in Webkit browsers and Firefox and soon in IE 10. Unsupported browsers will simply ignore your animation code.

The animation property has eight subproperties:

1. animation-delay
   Defines when the animation starts.
2. animation-direction
   Sets the animation to play in reverse on alternate cycles.
3. animation-duration
   Defines the length of time an animation takes to complete one cycle.
4. animation-iteration-count
   Defines the number of times an animation cycle should play before stopping.
5. animation-name
   Specifies the name of the @keyframes rule.
6. animation-play-state
   Determines whether an animation is running or paused.
7. animation-timing-function
   Describes how an animation progresses over one cycle.
8. animation-fill-mode
   Specifies how a CSS animation should apply styles to its target before and after executing.

Let’s see how to apply a simple animation to a div.

/* This is the element we are applying the animation to. */

div {
   animation-name: move;
   animation-duration: 1s;
   animation-timing-function: ease-in-out;
   animation-delay: 0.5s;
   animation-iteration-count: 2;
   animation-direction: alternate;

   -moz-animation-name: move;
   -moz-animation-duration: 1s;
   -moz-animation-timing-function: ease-in-out;
   -moz-animation-delay: 0.5s;
   -moz-animation-iteration-count: 2;
   -moz-animation-direction: alternate;

   -webkit-animation-name: move;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-delay: 0.5s;
   -webkit-animation-iteration-count: 2;
   -webkit-animation-direction: alternate;
}

/* This is the animation code. */

@keyframes move {
   from {
      transform: translateX(0);
   }
   to {
      transform: translateX(100px);
   }
}

@-moz-keyframes move {
   from {
      -moz-transform: translateX(0);
   }
   to {
      -moz-transform: translateX(100px);
   }
}

@-webkit-keyframes move {
   from {
      -webkit-transform: translateX(0);
   }
   to {
      -webkit-transform: translateX(100px);
   }
}

But we can use the shorthand property to conveniently set all of the animation properties at once.

div {
   animation: move 1s ease-in-out 0.5s 2 alternate;
   -moz-animation: move 1s ease-in-out 0.5s 2 alternate;
   -webkit-animation: move 1s ease-in-out 0.5s 2 alternate;
}

Keyframes

Each keyframe describes how an animated element should render at a given point in the animation sequence. The keyframes take a percentage value to specify time: 0% is the start of the animation, while 100% is the end. You can optionally add keyframes for intermediate animations.

/* Animation from 0% to 100% */

@keyframes move {
   0% { transform: translateX(0); }
   100% { transform: translateX(100px); }
} 

/* Animation with intermediate keyframes */

@keyframes move {
   0% { transform: translateX(0); }
   50% { transform: translateX(20px); }
   100% { transform: translateX(100px); }
}

The W3C has a lot of useful and detailed information on “CSS3 Animations.�

Basic Structure of Our Slider

Now that we know how transitions and animation work, let’s see how to create our slider using only CSS3. This sketch shows how the animation should work:

How the animation slider functions

As you can see, the slider will be a container inside of which the images will be displayed.

The animation is very simple: the image follow a predefined path, animating the top property and changing the z-index and opacity properties when the image returns to its initial position.

Let’s dive right into the HTML markup to create the slider.

2. HTML Markup

The HTML markup is very simple; it’s all organized and SEO-friendly. Let’s see the full code first and then figure out in detail how everything works.

<div class="container">
   <div id="content-slider">
      <div id="slider">  <!-- Slider container -->
         <div id="mask">  <!-- Mask -->

         <ul>
         <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
         <a href="#"> <img src="images/img_1.jpg" alt="Cougar"/> </a>
         <div class="tooltip"> <h1>Cougar</h1> </div>
         </li>

         <li id="second" class="secondanimation">
         <a href="#"> <img src="images/img_2.jpg" alt="Lions"/> </a>
         <div class="tooltip"> <h1>Lions</h1> </div>
         </li>

         <li id="third" class="thirdanimation">
         <a href="#"> <img src="images/img_3.jpg" alt="Snowalker"/> </a>
         <div class="tooltip"> <h1>Snowalker</h1> </div>
         </li>

         <li id="fourth" class="fourthanimation">
         <a href="#"> <img src="images/img_4.jpg" alt="Howling"/> </a>
         <div class="tooltip"> <h1>Howling</h1> </div>
         </li>

         <li id="fifth" class="fifthanimation">
         <a href="#"> <img src="images/img_5.jpg" alt="Sunbathing"/> </a>
         <div class="tooltip"> <h1>Sunbathing</h1> </div>
         </li>
         </ul>

         </div>  <!-- End Mask -->
         <div class="progress-bar"></div>  <!-- Progress Bar -->
      </div>  <!-- End Slider Container -->
   </div>
</div>

1. div id="slider"
   This is the main container of the slider. It does not have a particular function, but we will need it to pause the animation.
2. div id="mask"
   We will use this to hide everything that happens outside of the slider. In addition to hiding the content, the mask allows us to display the contents of the slider.
3. li id="first" class="firstanimation"
   Every list item has an ID and a class. The ID displays the tooltip, and the class is tied to the animation that has to occur.
4. div class="tooltip"
   This simply displays the title of the image. You can modify it to your needs; for example, by making it clickable and adding a short description.
5. div class="progress-bar"
   This contains the function that shows the progress of the animation.

Now it’s time for the CSS file.

3. CSS Style

Let’s create the basic structure of the slider. It will have the same image size. The border property will be useful to create a frame around the image.

/* SLIDER STRUCTURE */

#slider {
   background: #000;
   border: 5px solid #eaeaea;
   box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
   height: 320px;
   width: 680px;
   margin: 40px auto 0;
   overflow: visible;
   position: relative;
}

The mask class will hide all of the elements that lie outside of the slider; its height must be equal to the height of the slider.

/* HIDE ALL OUTSIDE OF THE SLIDER */

#mask {
   overflow: hidden;
   height: 320px;
}

Finally, to sort the list of images, we’ll have position: absolute and top: -325px so that all of the images are positioned outside of the slider.

/* IMAGE LIST */

#slider ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#slider li {
   width: 680px;  /* Width Image */
   height: 320px; /* Height Image */
   position: absolute;
   top: -325px;	/* Original Position - Outside of the Slider */
   list-style: none;
}

With these few lines of code, we have created our slider. Now we just need to add the animation.

4. CSS3 Keyframes Animation

Image animation for the slider

Before we begin with the animation, we have to specify some parameters in order to get the right view of the animation.

As we know, the total duration of the animation will be 25 seconds, but we have to know how many keyframes equals 1 second.

So, let’s work out a series of operations that gives us the exact number of keyframes based on the images we have and the total duration of the animation. Here are the calculations:

1. Define the total number of images to use in the slider
   5
2. Define the length of animation for each image
   5 seconds
3. Define the total duration of the animation
   Multiply the total number of images by the duration of each image:
   5 images × 5 seconds = 25 seconds
4. Calculate how many keyframes equals one second
   Divide the total number of keyframes by the total duration of the animation.
   100 keyframes / 25 seconds = 4 keyframes
   4 keyframes = 1 second

With all of this math, we can now apply the CSS animation to the slider. We will be able to put the animation on infinite loop because each image will follow its own animation that activates once it comes up in the slider.

#slider li.firstanimation {
   animation: cycle 25s linear infinite;
}

#slider li.secondanimation {
   animation: cycletwo 25s linear infinite;
}

#slider li.thirdanimation {
   animation: cyclethree 25s linear infinite;
}

#slider li.fourthanimation {
   animation: cyclefour 25s linear infinite;
}

#slider li.fifthanimation {
   animation: cyclefive 25s linear infinite;
}

Once the properties of the animation have been assigned, we need to use keyframes to set the animation in motion.

Following this principle, we can connect the animations to each other even though they are separate, which will give us an infinite loop.

I’ve added the opacity and z-index properties to make the transition from one image to the next more attractive.

As you can see in the code, the first animation has more keyframes than the rest. The reason for this is that when the gallery is started, the first image is positioned to make way for the second image; but when the last image has finished its animation, the first image has to have additional keyframes in order for the user not to see a break between animation cycles.

Here is all of the code for the animations:

/* ANIMATION */

@keyframes cycle {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { top: -325px; opacity: 0; } /* Original Position */
   16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { top: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { top: -325px; opacity: 0; }
   56% { top: -325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 325px; opacity: 0; z-index: 0; }
   81% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: -325px; opacity: 0; }
   76% { top: -325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 325px; opacity: 0; z-index: 0; }
}

Having created the animations, we have to add a progress bar to display the duration of each animation.

5. Progress Bar

The progress bar for each animation

The process of animating the progress bar is the same as it was for the slider. First, we create the progress bar itself:

/* PROGRESS BAR */

.progress-bar {
   position: relative;
   top: -5px;
   width: 680px;
   height: 5px;
   background: #000;
   animation: fullexpand 25s ease-out infinite;
}

Don’t be afraid of the syntax here. It has the same function as from to; you can see that the keyframes set the appearance and disappearance of each image.

/* ANIMATION BAR */

@keyframes fullexpand {
   /* In these keyframes, the progress-bar is stationary */
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

   /* In these keyframes, the progress-bar starts to come alive */
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

   /* In these keyframes, the progress-bar moves forward for 3 seconds */
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

   /* In these keyframes, the progress-bar has finished his path */
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

   /* In these keyframes, the progress-bar will disappear and then resume the cycle */
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

6. Tooltip

The slider is more or less complete, but let’s add a few details to make it more functional. We’ll insert tooltips for the image titles that will be visible on hover.

Simple tooltip

Here is the CSS for the tooltips:

   #slider .tooltip {
   background: rgba(0,0,0,0.7);
   width: 300px;
   height: 60px;
   position: relative;
   bottom: 75px;
   left: -320px;
}

#slider .tooltip h1 {
   color: #fff;
   font-size: 24px;
   font-weight: 300;
   line-height: 60px;
   padding: 0 0 0 10px;
}

Here we’ve made only the image titles visible, but you can do the same to custom text, links or whatever you like.

7. CSS3 Transitions

Animate the tooltip on hover

We have seen how to apply CSS3 transitions to elements; now let’s do it to the tooltips.

If you remember, we added an ID to each list (first, second, etc.) to have only the tooltip associated with an image appear on hover, rather than all of the tooltips appear together.

#slider .tooltip {
…
   transition: all 0.3s ease-in-out;
}

#slider li#first: hover .tooltip,
#slider li#second: hover .tooltip,
#slider li#third: hover .tooltip,
#slider li#fourth: hover .tooltip,
#slider li#fifth: hover .tooltip {
   left: 0px;
}

8. Pause And Restart

Stop slider on mouse hover

To allow users to pause to read content or look at an image, we should stop the animation when they hover over an image. (We’ll also have to stop the animation of the progress bar.)

#slider: hover li,
#slider: hover .progress-bar {
   animation-play-state: paused;
}

9. Demo

Finally, we’ve reached the end of the tutorial. The slider is now 100% complete!

Pure CSS3 cycling slider demo

Check out the demo. It works in Firefox 5+, Safari 4+ and Google Chrome, as well as the iPhone and iPad. You can also download the ZIP file.

Thanks to Massimo Righi for his images.

10. Conclusion

The effect is impressive, but admittedly, this slider is not very versatile. For instance, to add more images, you have to edit all of keyframes. CSS3 has great potential, but it does have limits, and sometimes JavaScript is preferable, depending on your target users.

This slider has some interesting features, such as pausing on hover and uniques link for the images, which allow users to interact with the slider. If you want full support among browsers, this is not possible, so JavaScript is recommended. Unfortunately, CSS3 animation has many limitations; its lack of flexibility in particular will prevent its widespread use for now. Hopefully this will spur you on to further study of CSS3.

Feel free to share your thoughts in the comments section below!

(al) (il)

---

© Alessio Atzeni for Smashing Magazine, 2012.

Sometimes the most appealing products are not those that are priced the most reasonably, but the ones whose packaging goes beyond functionality and crosses over to the artistic. Alberto Alessi said it best when he described his reason for his own aesthetic designs:

“More and more people buy objects for intellectual and spiritual nourishment. People do not buy my coffee makers, kettles and lemon squeezers because they need to make coffee, to boil water, or to squeeze lemons, but for other reasons.”

Some of the most aestheically pleasing packages and products rely heavily on excellent typography. At times, the perfect font is all that is needed to take a design beyond the ordinary, and very often a great font can stand alone with no other graphics or design gimmicks added to it.

The following collection of products and packages all have one design element in common: they all boast the use of fantastic typography. Take a look at some of the methods and reasoning behind these designer’s packaging projects and let each one inspire you to excellence in your own product and packaging designs.

Bzzz (Custom Font)

This packaging for Natural Armenian Honey not only includes a box shaped like a honeycomb, but the custom-made font for the title stunningly combines the flight of bees and a honey dipper. Bzzz packaging was designed by Backbone Creative, a design company from Armenia.

Indian Stretchable Time, the “Ish Watch”

Designed by Hyphen Brands from India, this packaging for the “Ish Watch” was designed with the Indian culture’s view of time. In India, when someone says to arrive at 3:00pm, they expect the arrival at any time after 3:00, hence “3-ish.” The typography includes several different Italic font versions. In another humorous twist, the three hour marks are listed as “12-ish”, “3-ish”, and so on with no other numbers included.

Acushla Organic Olive Oil

The custom-made font used for the title of this olive oil package at the same time matches and contrasts the logo graphic. Like the graphic, the letters have an organic flow to them, which fits nicely with an organic brand. The green color of the font is reminiscent of green vines as well. Yet unlike the graphic which flows together seamlessly, the tags and flags of the letters point in different directions, almost like wild branches of vines that someone attempted somewhat unsuccessfully to prune into perfection.

Parish Brewing Co.

The idea behind this captivating package design by Cargo Collective was to capture the southern feel of the Louisiana start-up brand. The custom font gives the bottles an authentic vintage look and feel. Notice how the text on the box and labels appears partially faded, imitating painted letters on a weathered wooden sign.

Proof – Scotch complimentary kit

This label for the complimentary kit of the scotch tasting app were each hand-stamped (both the label and the app were designed by Zeus Jones). The fonts are a blend of the custom designed Proof typography as well as a script logo taken from the Zeus Jones cycling jerseys. The % on the lids were created by hand-dipping each one in wax and stamping the wax using the stamp from the Proof typography.

Adams & Harlow

Designers Anonymous created the identity, website, and packaging for the Adams & Harlow brand of pork pies. Adams and Harlow is owned by two sisters and they named the company in keeping with the rivalry between their grandfathers’ pork pie companies in the early 1900s. The typography is based on a sans-serif font from the 1900s with some unique touches added in. For instance, the designers created the “S” to look like a butcher’s hook.

The Cloud Factory

This whimsical wine label designed by Alastair Duckworth and Ross Hamilton, both of Biles Inc., needed to stand out on shelves while also representing the unique story of this New Zealand brand. To create a look that reflected the “land of the long white cloud,” the designers created a hand-rendered typography with cleverly original lettering. The “T”, “C”, and “F” have a very old-fashioned feel to them, and almost remind one of the typography from the posters for the World’s Fair events in the early 1900s.

Selva Pasta

Kayhan Baspinar created an entire font design specifically for this brand. The lettering is both sophisticated and indicative of the shape of pasta at the same time. The extended lines of the letters and the dramatic shape of the upper curves of a few of the letters, such as the “C” and lowercase “m” and “n” are just a few of the unique touches that make this font stand out.

The Manual Co.

If you peruse the popular package design submission sites, then you may remember this one from the past. Created by Peter Gregson, this packaging for boots, bags, and other accessories has custom white hand-lettering set on a black background. The unique typography looks a bit like artistic chalk typography on a chalkboard and really gives it a high-end, artistic look and feel.

Jacques Prevert, CHOSES ET AUTRES

This beautiful font was created specifically for the cover of Jacques Prevert’s book, CHOSES ET AUTRES. Marijana Zaric did an excellent job of designing this typeface full of bold lettering and rounded edges. The hand-colored look gives it even more depth and character.

Fizzy Lizzy

The custom font designed for these fruit flavored carbonated beverages looks “fizzy” and fun, and leaps off of the label. The bubbles rising from the two “i”s in the logo and the evaporating lettering makes it appear as if the text is floating underwater.

Melt

This custom designed font seems like a cross between the Ark Doomsday Light font and the Priori Sans OT Regular font. The best part of this font design? Along with the dripping chocolate graphics , it looks delicious enough to make anyone crave chocolate, even if chocolate isn’t your forte.

Askul Garbage Bag

An amazingly creative design for such a common household item, this garbage bag packaging was designed by Stockholm Design Lab. The letters falling into a “trash pile” at the bottom of the box are all from the good ole’ font family Helvetica.

Peter Wetzer Wines

Wetzer commissioned designer Laszlo Mihaly Naske to create a calligraphic label for his wine collection, in keeping with a “homemade” theme. Naske explains that his original idea was to go with a more bold approach in the design of the hand-crafted letters, but Wetzer wanted something more simple, traditional, and straightforward. The winemaker chose well – the handwritten font is quite stunning alone and may have been overlooked if too much more was included in the design.

Billington’s Sugar

This redesign by jkr of Billington’s sugar packaging adds much more personality than the previous design. The colorful font graphic front and center capture attention quickly, and the faded font used for the company name adds to the traditional look and feel, an element of the design that was very important to the client. The main font used looks similar to Bebas Neae or a popular Gothic font family.

Fyne Ale

Look closely and you’ll see that Good Creative designed the headlines/titles of the different types of ales each with a different font that matches the name. The Maverick font includes only flags and tags on certain letters – the “A”, “R”, and “K”. In contrast, the Piper’s Gold font is very fancy with a decidedly western look and feel.

IQ

Another great design by Good Creative, this redesign for IQ, a hair product brand, is quite staggering when you see the before and after pictures together. The idea from the brand letters came from strands of hair, especially on the hook of the “Q”.

Before

After

Backyard

This illustrated font was created by Fabien Barral, a phenomenal illustrator and graphic designer. The shape of the font looks similar to Helvetica or another type of simple sans serif font, which gave Barral lots of room for creativity within the illustrations themselves.

Nagging Doubt

Designed by Brand Ever with the label illustrated by Dana Tanamachi, this wine brand was started by a corporate man with a long-time dream he never could ignore, hence the name Nagging Doubt. Tanamachi drew the entire label by hand on a chalkboard, in a font style similar to grape vines for the Voigner label. The Pull label still resembles branches a bit with the “pulled” lines of the letters “N” and “G” but is much more crisp and clean of a font. Each label comes with a QR code that leads to the Nagging Doubt website on which visiters can view a stop motion film of Tanamachi’s illustration process.

Stave and Hoop

Force & Form created the labels for this brand of strong wines, keeping in mind that this wine is intended to be a gentleman’s alternative to whiskey or beer. The typography layout and fonts look similar to the labels found on tonics from the days of the wild west.

Typocolate

This simply delicious typographical project was created by Dynamo to use as Christmas gifts for clients, friends, and family. Each chocolate bar is engraved with a different daily mantra written with a completely original font design. Decorative font styles grace the face of most of the bars, but one also includes a light sans serif font design.

Princess Bride Custom Wine for Alamo Drafthouse Cinema

Every year, the Helms Workshop creates a new design for the Alamo Drafthouse Cinema’s wine collection, always with a certain movie in mind. This year, they chose The Princess Bride in honor of the film’s 25th anniversary. The brand name is Bottle of Wits done appropriately in a bold sans serif font. On the side of the box packaging are phrases from the movie on which various font styles (all sans serif) are combined with graphics to illustrate the term. In this design, a more plain font was certainly the better choice as it allowed for more creativity with graphics, font layout, and other stylistic features that illustrate favorites from the film.

Angioletta

This simple yet elegant design for a sweet, white wine from Wein-Bauer, Inc was created by Kaleidoscope. Obviously, the target audience is younger women, and the font certainly portrays this focus. The light, script font similar to a Vivaldi or Edwardian Style Script typeface is airy, flowing, and feminine.

Sepp Moser

Each one of these quite original wine labels were created by Hans Renzler along with Brace.at on an actual typewriter. Each wine bottle number is handwritten by the winemaker himself, giving these wine bottles a very “collector’s item” sense.

Artisan

The typography on these wine bottles created by Public Creative look like the font stamps from an old letterpress printing press. The title of the wine is in silver while the rest of the letters are charcoal black, which makes the title stand out but also gives the “stamps” for the title a never-been-used appearance.

Tucumen

This Argentinian wine from Budeguer was designed by Guillo Milia. The designers tried to keep the wide variety of cultures in mind in this design, blending a variation of bright colors and font styles to give this impression. The main heading font style is similar to a calligraphic font such as Zocalo. In fact, various script fonts are used but so is a plain serif font, along with a very stylized, medieval-like font used for the brand name.

Cuboid

The font style of the brand name fits perfectly for this boxed wine aimed at millenials and designed by Force & Form. The packages have a video game look with the 8-bit characters, limited colors, cubed font, and tagline “Surrender your corkscrew.” One side of the box invites interaction with a list on which customers can write their favorite wines, done with a mixture of a clean sans serif font and a script font to emphasize a single word in each line of text.

All For Now

But that doesn’t mean that the discussion is done. Quite the opposite, it is just getting started. Now it is your turn. What were some of your favorites from the showcase? Do you know any other products and packages that have that fantastic typography touch? Take a moment and tell us about them in the comment section.

(rb)

The Web font revolution that started around two years ago has brought up a topic that many of us had merrily ignored for many years: font rendering. The newfound freedom Web fonts are giving us brings along new challenges. Choosing and using a font is not merely a stylistic issue, and it’s worth having a look at how the technology comes into play.

While we cannot change which browser and OS our website visitors use, understanding why fonts look the way they do helps us make websites that are successful and comfortable to read in every scenario. Until recently, there were only a small handful of “Web safeâ€� fonts we could use. While offering little variety (or means of expression), these fonts were very well-crafted and specifically adjusted—or even developed—for the screen, so there was little to worry about in terms of display quality.

Now that we have a great choice of fonts that can be used on websites, it becomes clear that the translation of a design into pixels is not something that happens naturally or consistently. OS makers apply different strategies to render how typefaces are displayed, and these have evolved greatly over time (and still continue to do so). As we now look closer at fonts on screen more than ever before, we realize that the rendering of these glyphs can differ significantly between systems and font formats. What’s more, it has become clear that even well-designed fonts may not look right on Windows if they are missing one crucial added ingredient: hinting.

This article presents the mechanisms of type rendering, how they were developed, and how and why they are applied by the various operating systems and browsers—so that when it comes time to choose a font for your next project, you know what to look out for to ensure the quality of the typography is consistently high.

Rendering Strategies

Ideal shape, black-and-white and grayscale rendering

Rasterization

In digital type, characters are designed as abstract drawings. When a text is displayed on screen, this very precise, ideal shape needs to be expressed with a more or less coarse grid of pixels. As screens turned from mere preview devices for printing output into the actual medium we read in, more and more sophisticated rendering methods were developed in order to make type on the screen easy and pleasant to read.

Black And White Rendering

The earliest method of expressing letter shapes was using black and white pixels, sometimes referred to as bi-level rendering. Printers are still based on this principle, and thanks to their high-resolution, the result is a very good representation of the design. On screen, however, the small number of available pixels does not transport the subtleties of the drawn shapes very well. And although we might not be able to see the individual pixels, the steps found in round contours are noticeable.

Grayscale Rendering

In the mid-1990′s, operating systems started employing a very smart idea. Although screens have a rather low resolution, they can control the brightness of each pixel. This allows more information to be brought into the rasterized image.

In grayscale rendering, a pixel that is on the border of the original shape becomes gray, its brightness depending on how much it is covered by the ideal black shape. As a result, the contour appears much smoother, and design details are represented. The type on screen is no longer merely about being legible—it has its own character and style.

This principle—also called antialiasing—is the same that is used when photos are resampled to a lower resolution. Our eyes and brain interpret the information contained within the gray pixels and translate it back into sharp contours, so what we perceive is fairly close to the original shape. A similar effect is at work when a relatively coarse newspaper image that can appear nicely shaded if we hold it far enough away (or similarly, in the art of Chuck Close). Recently, Gary Andrew Clarke took this to the extremes with his “Art Remixedâ€� Series.

Subpixel Rendering

Apparently colored pixels increase the resolution.

The third generation of rendering technology is characterized by apparently colored pixels. If we take a screenshot and the edges appear red and blue when enlarged, then we know that we are looking at subpixel rendering.

On LCD screens, the red, green and blue subpixels that control the color and brightness of the pixel are located side-by-side. Since they are so small, we don’t perceive them as individual colored dots. Having a closer look at the “red� pixel marked by the white dot reveals the strategy: all subpixels are switched on or off individually, and if the rightmost subpixel of the “whitespace� happens to be a red one, then the corresponding full pixel is technically red.

Subpixel rendering on an LCD screen.

The benefits of this technique become clear if we desaturate the image. Compared to plain grayscale rendering, the resolution has tripled in horizontal direction. The position and the weight of vertical stems can be reflected even more precisely, and the text becomes crisper.

Current Implementations

For the display of text, almost all browsers rely on system rasterizers. When looking at Web font rendering, the key distinction we have to make is the operating system. However, there are differences between the browsers in terms of the support given to kerning and ligatures, as well as the application of underline position and thickness, so we cannot expect perfectly identical rendering in all browsers (even on one platform). What’s more, on Windows, the browser can have the font rendered by either of the system technologies—GDI or DirectWrite.

Before we look at these in detail, lets first get an overview of where each one is to be used:

Rendering modes used by Windows browsers.

Windows

On Windows, the font format has a significant impact on the rendering. The crucial difference is between PostScript-based and TrueType-based fonts, and not the way these are brought into the browser—JavaScript vs. pure CSS, raw fonts vs. “real” Web fonts, etc. We will see identical rendering as long as the underlying font is the same.

File formats can give us a clue as to what underlying rendering technology is being used, although it’s best that one doesn’t completely rely on the naming conventions. For example, EOT and .ttf files will always contain TrueType, whereas .otf fonts are typically PostScript-based. But then there’s the wrapped format WOFF, which can contain either “flavorâ€� of font format. So we don’t know which one it contains (and therefore, what kind of rendering may be used), just by looking at the file name. Unless you’re using EOT or .ttf files, and can be sure it’s a TrueType, more investigation when purchasing fonts is always recommended.

TrueType and PostScript fonts differ in the mathematics used to describe curves—something that rasterizers don’t care about too much—it only makes a difference for the type designer when editing the glyph shapes. What is more relevant is the different approach to hinting. PostScript fonts only contain abstract information on the location of various elements of each letter (and rely on a smart rasterizer to make sense of this), whereas TrueType fonts include very specific low-level instructions that directly control the rendering process. Curiously, however, the effective differences in rendering are not due to these differences in concept, but rather stem from Microsoft initially deciding to apply their new rendering engine only to TrueType fonts.

Windows: TrueType Fonts

TrueType font rendering with Windows grayscale.

On Windows XP, text is rendered as grayscale by many browsers. Although not as crisp as the subpixel rendering used by Mac OS, the letters are nicely smoothed and look great in large sizes.

TrueType font rendering with Windows GDI ClearType.

ClearType is Microsoft’s take on subpixel rendering. It was first made available for GDI, the classic Windows API. Although available in Windows XP, it is not used by all browsers. In Windows 7 and Vista, ClearType is the default, which makes it the most widely used rendering technology (if we were to consider all internet users). However, it is important to note that this applies only to TrueType-based Web fonts—GDI-ClearType is not applied to PostScript-based fonts.

One curious property of this rendering technology is that along with adopting the advantages of subpixel rendering in horizontal direction, Microsoft gave up smoothing in vertical direction entirely. So ClearType is effectively a hybrid of subpixel and black-and-white rendering. This results in steps within the contour, which is particularly noticeable in large sizes. These jaggies at the top and bottom of the curves are unpleasant, but unavoidable—even the best hinting cannot make them disappear.

For type in large sizes, ClearType is a step backwards in rendering quality. The gains in horizontal precision are not significant, while the rough contours spoil the overall result.

TrueType font rendering with DirectWrite.

The future is bright, at least in terms of Windows font rendering. In DirectWrite (the successor of GDI), Microsoft added vertical smoothing to ClearType. This new rendering mode (so far used by Internet Explorer 9), gives us smooth and precise rendering in all sizes. The main difference to Mac OS that remains is that it still tries to align contours to full pixel heights, which leads to even better rendering given that the font is well-hinted. What’s more, DirectWrite allows for subpixel positioning, which gives the characters exactly the spacing that they have been designed with, improving the overall rhythm and evenness of the texture.

Windows: PostScript Fonts

PostScript font rendering with GDI grayscale.

In GDI-based browsers, PostScript-based Web fonts are displayed in grayscale. Unlike the prevalent GDI-ClearType, this gives smooth contours. And unlike TrueType hints, PostScript hinting is easier to create, even automatically.

PostScript font rendering with DirectWrite.

DirectWrite not only gives smoother outlines, it also applies subpixel rendering to PostScript fonts. Unlike TrueType rendering, however, it allows for more gray pixels in order to reflect stroke weights more realistically. That makes it well-balanced, and similar to Mac OS rendering.

At some point in the future—browser makers and users will not switch as quickly as we wish—DirectWrite will succeed the older Windows rendering methods, and we will indeed be spoilt for choice between TrueType- and PostScript-based Web fonts.

Windows: Unhinted Fonts

Unhinted font rendered with grayscale.

In the old Windows grayscale mode, completely unhinted fonts look surprisingly good. Since the font does not “align itself” to full pixels via hinting, and the rasterizer does not enforce this either, we have a rendering that is similar to that of iOS. Unfortunately, unhinted fonts are currently not an option, as the next example shows:

Unhinted TrueType font in GDI-ClearType rendering.

As noted in many discussions on Web font rendering quality, GDI-ClearType is extremely dependent on good hinting. Horizontal strokes have to be precisely defined by means of hinting, otherwise they might be rendered in an inappropriate thickness. Even in larger sizes, hinting is crucial. Unhinted fonts will show “warts� sticking out where contours are not correctly aligned to the pixel grid, like in the example above.

Unhinted font rendered with DirectWrite.

In DirectWrite, unhinted PostScript and TrueType-based Web fonts show virtually the same rendering. Text fonts of either flavor will still need good hinting in order to keep the strokes crisp and consistent. Display fonts may even get away with sloppy or no hinting, since this does not show much in large sizes.

Mac OS X

Font rendering in Mac OS X.

On Mac OS, all browsers use the Quartz rendering engine. TrueType and PostScript fonts are rendered in exactly the same way, since hinting—the biggest conceptual difference between the two formats—is ignored. The subpixel rendering on Mac OS is very robust, so this platform is typically the one we need to worry about the least. The rasterizer doesn’t try to understand the strokes and features that make up a font, as everything is represented by more or less dark pixels. Since the letter shapes are not interpreted, they cannot be misinterpreted. Quartz rendering is reliable because it doesn’t try to be smart. As a side note, Apple does seem to apply some subtle automagic to enhance the rendering, but this is entirely undocumented and beyond our control.

In some cases, however, this leads to less-than-ideal results. In the above example, the large size “T” has a fuzzy gray row of pixels on top because the theoretical height is not a full pixel value, and Mac OS does not force its alignment. Unfortunately this cannot be controlled by the font maker. However, the blurriness occurs only in certain type sizes. So typically, choosing a slightly different font size fixes the problem. With a bit of trial-and-error, one can find a type size that looks comfortable and crisp.

Another difficult-to-control phenomenon is that on the Mac, type tends to be rendered too heavy. This difference is most noticeable in text sizes, where the same font can look a bit “sticky� on Mac OS while appearing almost underweight on Windows.

iOS

Font rendering in iOS.

The rendering on iOS follows the same principles as on Mac OS—the main difference is that it currently does not employ subpixel rendering. The reason might be that when the device is rotated, the system would have to re-think and update the rendering because the subpixels are physically oriented in a different way, and the makers wanted to minimize CPU use.

Conclusions

Website visitors use a great variety of systems and browsers. Some are not up-to-date, and sometimes it’s not even the user’s fault, but rather a company’s policy to stick with a certain setup. My personal opinion is that we should try and give them the best rendering we can, instead of blaming OS makers, or demanding users to switch to better systems.

On Mac OS and iOS, we hardly have any control over the rendering, which is acceptable (since it’s generally very reliable). One problem is that fonts generally render too heavy. Maybe some day, Web font services can improve the consistency by serving slightly heavier or lighter fonts depending on the platform.

On Windows, hinting matters—especially for TrueType-based fonts (the only Web fonts Internet Explorer 6–8 will accept). Apart from that, one significant control we have over the rendering is the choice between TrueType and PostScript. Except for very well-hinted fonts in smaller sizes, the latter is equal or superior in rendering, and easier to produce. Even though DirectWrite is making Windows rendering more pleasant, it will not remove the necessity to provide well-hinted fonts.

Practical Application: Improving Display Font Rendering

Some Web font providers (such as Typekit or Just Another Foundry), have started serving display fonts in PostScript-based formats.

JAF Domus Titling in different rendering environments.

While the GDI ClearType jaggies are unavoidable for IE 6–8, all other scenarios produce nice, smooth results. This also means that we will still need fonts that have decent TT-hinting—the browser share of IE6–8 is still too big to deliver fonts that don’t at least render in a clean fashion.

Bello—by Underware on Typekit—served as PostScript-based Web fonts (right), which gives smoother rendering than TrueType (left).

Typekit has also started to implement a hybrid strategy by serving display fonts as PostScript in order to trigger smoother rendering in Windows GDI. This requires some decisions to be made on the basis of visual judgement.

“How do you define a display font?�, you may ask, and it is indeed difficult to draw the line. Some of the foundries offer high-quality, manually hinted TrueType fonts that look great in text sizes (and it would be a pity to lose this sophistication by converting them to PostScript). Some text fonts may well be used in very large sizes. So ideally, we would have to offer them in two different formats. However, increased complexity of the UI (as well as back-end handling) have so far kept us from doing this.

Future Developments

More and more type designers are becoming aware of the technical issues that arise when fonts are used on the Web, particularly TrueType hinting. As the Web font business grows, they are willing to put some effort into screen-optimizing their fonts. In the near future, we will hopefully see a number of well-crafted new releases (or at least updates to existing fonts).

With increasing display resolutions— and more importantly, improving rasterizers—we will slowly have to worry less about the technical aspects of font rendering. GDI-based browsers will certainly be the boat anchor in this respect, so we won’t be able to use TrueType fonts that aren’t carefully hinted for yet another few years. Once this portion of Web users has become small enough, the process of TrueType hinting (which is time-consuming and requires considerable technical skills), becomes less crucial. While most Web fonts currently on the market are TrueType-flavored, I am expecting that the industry will largely switch to PostScript, which is the native format nearly all type designers work in (the fonts that are easier to produce).

Other Resources

• DirectWrite Text Rendering in Firefox 6, Mozilla Blog
• JAF Domus Titling as Web font, Just Another Foundry
• New from Typekit: Improved font rendering on Windows, Typekit Blog
• The Benefits Of OpenType/CFF Over TrueType, Typblography

(jvb) (ac) (il)

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

---

© Tim Ahrens for Smashing Magazine, 2012.