Making Sense Of Type Classification (Part 2)

Posted by Smashing Magazine Feed at 06-19-2013


  

In the first installment of this two-part series on type classification, we covered the basics of type classification — the various methods people have used, why they are helpful, and a brief survey of type history, classifying and identifying typefaces along the way. Unfortunately, we only got as far as Roman (traditional serif) typefaces and the early-19th century. Now we’re back for part 2!

Part 2 will primarily cover sans typefaces, with a nod to display typefaces and other less common categories, as well as address a few of the questions people have about whether type classification is helpful and necessary.

If you haven’t read part 1, now’s your chance to go over it. It lays important groundwork for this article, covers the categories of serif typefaces, and contains plenty of useful information about the development of serif type. If you already have read it, here is a quick recap to get us started before we move on to the new material.

type classification

Review

Type Classification Systems

Type has been classified in many ways over the years, both formal and informal — Thibaudeau, Vox, British Standards, etc. None of these are complete or all-encompassing, but they’re helpful as an aid to study as well as for learning to use type correctly and effectively. The material in this two-part series draws heavily from the Vox-ATypI system, which is the most “official” of the systems today, having been adopted by the Association Typographique Internationale in 1962 and still the most commonly referenced system.

Is it perfect? No, but it provides a good overview of what is out there; and when you describe typefaces using the terms you’ll learn in this series, anyone who is reasonably familiar with typography will know what you’re talking about.

Here is a quick overview of the type categories we covered in part 1.

Humanist/Venetian

Venetian Typeface Characteristics

  • Notable calligraphic influence, patterned after handwriting.
  • Strongly angled axis or stress.
  • Based on typefaces designed in Renaissance cultural hubs such as Venice.

Garalde

Oldstyle Typeface Characteristics

  • Less calligraphic influence because type began to be viewed as separate from writing.
  • Named after influential type designers Claude Garamont and Aldus Manutius.
  • Still has a tilted axis but less obvious than in Humanist type.

Transitional/Neoclassical

Transitional Characteristics

  • No calligraphic influence. Designed independently, sometimes on a grid.
  • First appeared in the late-17th century.
  • Virtually vertical axis and high contrast between heavy and thin strokes.

Didone

Didone Characteristics

  • Extreme contrast between thick and thin. Rigidly vertical axis.
  • Abrupt, or unbracketed, serifs. Very precisely designed.
  • Named after Firmin Didot and Giambattista Bodoni.

Slab Serif

Slab Serif Characteristics

  • Very heavy weight and low contrast between thick and thin.
  • Unbracketed, prominent serifs.
  • First typefaces created expressly for display purposes.

Sans Serifs

When we left off in part 1, it was circa 1815, with the first appearances of slab serifs, also called Mechanistics or Egyptiennes. By the time slab serifs were being popularized, early sans serifs had already been around for some time in a variety of forms. To follow the progression of sans serifs, we must step back in time a number of years.

History of Sans Serifs

The earliest sans-serif letterforms were, of course, not type, but inscriptions, dating back to as early as the 5th century BC, and enjoyed a resurgence in engraving and inscriptions in the 18th century.

etruscan type
Caslon’s Etruscan type, as seen in a 1766 specimen book. Larger view. (Image source: Typefoundry)

Strangely enough, the first “sans serif” type was created not for the Latin alphabet, but for use in 18th-century academic works on Etruscan culture, which preceded the Roman Empire in the geographical area of modern-day Italy. Circa 1748, the foundry of William Caslon (with whom you should be familiar) cut the first known sans-serif Etruscan type for the Oxford University Press, although there are earlier usages of sans serifs in similar applications.

Embossed Type
Haüy’s type, created to emboss pages so as to be read by touch, was oddly ornate for its purpose. Larger view. (Image source: Camille Sourget)

Another interesting typographic innovation was the work of Valentin Haüy, who founded a school for blind children in 1785. In 1784, a year of preparation during which he devoted himself to educating a single student, Haüy developed an embossing typeface with which to make tactile books. The typeface, which, along with his method, is called the Haüy System, is an early form of sans serif, but it reads more like an upright italic or a disconnected script.

It was first embossed and then often carefully inked over the top so that it could also be read visually, as in the photo above. It looks lovely, but was superseded in both practicality and readability by the system devised by Louis Braille, himself a student at the school Haüy founded.

Caslon Sans
William Caslon IV’s sans serif was categorized as “Two Lines English Egyptian,”. (Image source: typophile)

William Caslon IV — who inherited the type foundry, as well as his name, from four generations back — is credited with the first sans-serif printing type for the Latin alphabet, appearing first in the 1816 Caslon specimen book. It featured only capitals and was marketed as “Two Lines English Egyptian,” the “Two Lines” being a reference to the size of the set type. There was much confusion over this new style, being variously called Egyptian (despite early slab serifs also being marketed as Egyptians), Gothic, Grotesque and Antique, among others.

Figgins Sans Serif
A sans from an early Vincent Figgins type specimen. Larger view. (Image source: Typefoundry)

Eventually Vincent Figgins (whom you may remember as being credited with the first slab-serif type) called the new style “sans serif,” which became the widely accepted term, although you’ll see many of the old terms in use on some typefaces.

Classifying Sans Serifs

At first glance, you might think that sans serifs can’t be classified the way that serifs can, since fewer variables are apparent in the ones we see most often. However, plenty of details can aid specificity when discussing, using and pairing typefaces, even within the broader category of sans serifs or, as Maxmilien Vox termed them, “linéales.” Subcategories were implemented by the British Standards classification, a permutation of Vox’s system, and they provide excellent means of discerning characteristics. I am presenting here a slight variation of those four, with a couple of minor differences for the sake of practicality.

Grotesque

The Grotesque category covers the early sans serifs, specifically those designed in the 19th century and the first decade or two of the 20th. Many of these typefaces had only capitals or exist only in centuries-old specimen books, but a number of them are still quite commonly used. These typefaces tend to be very idiosyncratic, with awkward weight distribution around bowls of characters and irregular curves.

Monotype Grotesque
(Image source: MyFonts)

Monotype Grotesque (above, 1926), based on Berthold’s much earlier Ideal Grotesque (1832), is an excellent example of the quirks commonly evident in Grotesques. Note the awkward “a” and “g,” the squarish bowls, the odd curves and angles at the tips of strokes in the “J” and “S,” and the overall irregularity.

The capital G in a Grotesque is usually spurred, and the British Standards specifies a curled leg on the capital R, although that is not apparent in many typefaces of the period. They tend to display some variation in the thickness of strokes, but the contrast does not show calligraphic influence or a logical pattern. The style became more sophisticated over the course of the 19th century. Perhaps the finest sample of this category appeared in the Berthold Type Foundry’s 1896 release of Akzidenz-Grotesk, which, along with Schelter Grotesk (1886), served as an archetype for many Neo-Grotesques, most notably Neue Haas Grotesk and Univers.

grotesque

Interestingly enough, it has been postulated that Akzidenz-Grotesk was based on Walbaum or Didot. Despite looking extremely different at first glance, a simple comparison of the basic forms shows that the metrics are very similar.

Examples of the Grotesque category include Franklin Gothic, Monotype Grotesque and Schelter Grotesk.

Neo-Grotesque

The Neo-Grotesques, also called Transitionals or Realists, include many of the most commonly used sans. They are based on the later Grotesques and take the design of the sans-serif to a new level with their careful construction and aesthetics. They are much more refined than the Grotesques, during which period type designers were still feeling their way around the new style; thus, the Neo-Grotesques lose many of the awkward curves and idiosyncrasies that are common in earlier sans serifs. You’ll see much less variation in line weight, and most often a single-story “g.”

neo-grotesque

Created with an emphasis on neutrality and simplicity, they were extraordinarily popular among the Modernists and remain popular today. Despite many claims otherwise, simplicity does not directly translate into legibility: A tight vertical rhythm and pinched apertures keep many Neo-Grotesques (including Helvetica) from being good choices for body text. In fact, in the 2013 edition of the DIN 1450 (the German standards on legibility in typefaces, published by the Deutsches Institut für Normung), Helvetica is used as a negative standard. That’s an entirely different topic, however.

In 1957 — a big year for Neo-Grotesque sans serifs, as Frutiger’s Univers as well as Folio (originally thought to be a stronger competitor, although history has proved otherwise) were released — Haas Foundry released Max Miedinger’s Neue Haas Grotesk, which drew heavily on Schelter and Akzidenz Grotesks. In 1960, Haas, in an effort to market it more effectively, rebranded Neue Haas Grotesk to what we know as one of the most ubiquitous typefaces of all time — you guessed it — Helvetica.

helvetica specimen
Many people love Helvetica so much that they’ll hang prints of vintage Helvetica specimens as decoration. (Image source: etsy)

The quintessential members of this group are, of course, Univers and the immortal Helvetica, which has gone through quite a number of permutations over the years (as have all of these typefaces) and was recently revived by Christian Schwartz as a rerelease of Neue Haas Grotesk. A nice informational minisite was created by Indra Kupferschmid and Nick Sherman for the release. Other typefaces in this category include the DIN 1451 and its derivatives, and Bell Gothic and its successor Bell Centennial.

Humanist

If you remember the most important quality of Humanist serif type, you’ll be relieved to learn that the same quality carries over to the sans serifs! The primary characteristic of Humanist type, both serif and sans serif, is a strong calligraphic influence, basing its shapes and flow on forms that could originate from a pen or brush. This means a much higher stroke contrast, and some Humanist sans even feature some stress, whereas nearly all other sans serifs have a completely vertical axis.

Another interesting characteristic of Humanist sans serifs is that their proportions often derive largely from Roman inscriptions and early serif typefaces, rather than 19th-century sans serifs as the Neo-Grotesques did. Because of this design process involving older letterforms, the lowercase “a” and “g” are most often two-story in Humanist sans serifs. All of these characteristics combine to make most Humanists a more legible choice than other types of sans faces.

Humanist Sans (Optima)

Hermann Zapf’s Optima is one example that clearly shows the calligraphic heritage, with an unusually obvious difference between thick and thin strokes, while many others in this category have more subtle features. The Humanist sans group includes classics such as Gill Sans and Frutiger as well as more recent releases like Myriad (1991), Trebuchet (1996) and Calibri (2005).

Geometric

Geometric sans serifs are exactly what their name suggests. Instead of being derived from early Grotesques, like a Neo-Grotesque, or from calligraphic and engraved forms like the Humanist sans, they are built on geometric shapes. The characters often have optically circular bowls and are otherwise typically very rectangular, sharing many components between the various glyphs.

Erbar Grotesk
Erbar’s small x-height, among other factors, renders it difficult to read. Larger view.

Jakob Erbar, whose eponymous typeface is credited as being the first Geometric sans, reportedly based his construction on the circle. Released in the 1920s, Erbar-Grotesk was intended to be legible. Ironically, because of the awkward visual rhythm, resulting from strict adherence to geometric forms, Geometric lineals are among the least legible of sans serifs and are usually suitable only for display type. Geometric sans serifs usually show little or no stroke contrast and usually feature a single-story lowercase “a.”

Geometric Sans

Paul Renner’s Futura, Koch’s Kabel and Lubalin’s Avant Garde are typical examples of the style. H&FJ’s Gotham is also a Geometric sans, although it is less strictly geometric than some and allows for more variation in the heavier weights.

The Rest Of The Story

That’s the basic classification for sans serifs! While the two parts of this series primarily deal with serif and sans type, there are many other styles to consider. The Vox-ATypI system also provides five subcategories of “calligraphics” (i.e. type that is derived from handmade letters), but as they are largely self-explanatory, I won’t dedicate much space in this already lengthy article to them. Here is a brief summary of each category.

Scripts

Script Metal Type
A case of script metal type. (Image source:
Etsy)

Scripts are, of course, typefaces based on handwriting, particularly formal scripts. The letters often connect, but not necessarily so. They range from the very formal — Matthew Carter’s Snell Roundhand, named after the author of a 1694 booklet on penmanship, originally released in 1966 — to the very casual — Ashley Havinden’s eponymous Ashley Script, from 1955.

Glyphic

Trajan Inscription
Carol Twombly’s Trajan was based on this inscription at the base of Trajan’s Column in Rome.

Glyphic typefaces are those derived from engraved or chiseled letters. Many of these typefaces look like they could be classified as serifs but are based on the work of a chisel, rather than having gone through the traditional design process and referencing the stroke of a pen. As such, Glyphics, also called “incised” typefaces, sometimes contain only capitals, and the serifs tend to be small, as a natural detail of the chiseling process rather than as a design feature. Trajan and Friz Quadrata are excellent examples of this style.

Graphic

Graphic Wood Type
Graphic wood type from the extensive Hamilton Wood Type collection.

Graphic is essentially a sort of catch-all label for display type that doesn’t fit into any other category. It includes anything that would be drawn or designed, with a brush, pen or any sort of tool. If it’s not exactly a sans, not exactly a serif, and you’re not really sure what it is, it is most likely a Graphic typeface!

Blackletter

Gutenberg Bible
Gutenberg printed with type designed to mimic the late-medieval Fraktur style of handwriting. (Image credits: JMWK)

Blackletter type began with Gutenberg and was used in printing, even printing body text, until the early- to mid-20th century in Germany. It is based on a medieval scribal hand, written with a broad-nib pen, and differs from graphic typefaces and scripts in that it has been used at length in body text. It has a very dense type style. When the traditional style that Gutenberg had used began to give way to the more readable early serifs (the Humanist/Venetian designs of Aldus Manutius and his colleagues), printers called the new style “Whiteletter,” in reference to the negative space-to-ink ratio on the page; thus, the old type was termed Blackletter, and we still use this term today.

Gaelic

Gaelic Type
Gaelic type includes the Latin alphabet as well as some additional glyphs. Larger view. (Image source: mathewstaunton)

Gaelic type is based on the insular script found in manuscripts throughout the UK. As with Blackletter, it has been used in printing body text in Ireland, from its earliest appearances in the 16th century all the way through to the mid-20th century, but is no longer popular as a text typeface. The Vox-ATypI system was amended to include the Gaelic category in 2010 at the ATypI annual conference, appropriately held in Dublin.

Non-Latin Type

Beyond that, there is still another world of type to discover. The entirety of these two articles on the subtleties of type (and, believe me, it can get much more complicated!) have discussed only the Latin alphabet, which, while quite commonly used, is merely one of many writing systems used today. I encourage you to learn more about, and get involved in, the typography of other writing systems! Some are very widespread and used daily by hundreds of millions of people; others are used by mere thousands.

Regardless of how many people use it, each writing system needs quality typefaces. From the commonly used (check out Nadine Chahine’s interview on Arabic type) to the rarely seen (Jean-Baptiste Levée gave a fascinating talk at last year’s TypeCon on creating Air Inuit Sans, supporting Inuktitut glyphs), the typography of non-Latin writing systems promises an exciting future.

Closing Remarks

We’ve barely scratched the surface of the fascinating subject of typography and type history in this two-part series “Making Sense of Type Classification.” Hopefully, it has piqued your interest in this intriguing field. Knowing your way around the typographic resources available to today’s designers is essential, and it is helpful to understand a little behind the characteristics, history, visual character and idiosyncrasies that make each typeface unique and that define how it communicates.

At one point in the history of Web design, an extensive knowledge of type history was unnecessary because a Web or interactive designer was limited to half a dozen typefaces, and those in limited weights and variants.

Today, however, the landscape of Web design is completely different, and the typographic possibilities are endless! Also, while this material is covered in many design schools, a significant portion of designers today haven’t had a formal design education, so now is the best time to catch up!

That being said, we also must remember that, while type classification is an important aid to studying type, it is not a hard and fast system that cannot be questioned. Many typefaces combine characteristics and could easily fit into multiple categories, and no classification system can cover all of the possibilities. In the end, type classification is an excellent means of learning to recognize common patterns and distinguishing characteristics of typefaces, and we get to learn some type history along the way.

With this short series, you’re now equipped with a strong knowledge of categories of type; you’ve learned to analyze typefaces and pick out unique aspects of letterforms; you’ve seen how type has evolved with culture; and, most importantly, you have a solid foundation for further study of typography and type history! It cannot be overstated how immensely important sound knowledge of typography is for anyone in the broad field of design, and the material we’ve covered here will serve you well in navigating the world of type.

(al) (ea)


© Joseph Alessio for Smashing Magazine, 2013.

The Smashing Magazine 2013 Photo Contest: Winners And Best Entries

Posted by Smashing Magazine Feed at 06-19-2013


  

Three weeks ago we launched a photo contest and asked everyone to submit a creative picture of the object that fuels their creativity and inspiration. For all of you who have participated, thank you so much for taking the time and thought to interpret your object in a creative way. We did not only enjoy the brilliant photography that you sent us, it was also inspiring to read your thoughts on the story behind all these objects.

We received around 350 entries from all over the world and only 70 could make it onto the poster we’ve created exclusively for our dear fans.

As promised, the 10 most creative and original submissions will be awarded with a printed poster. The ones who have been selected will be contacted via email very soon — if not already! If you’ve followed our submission guidelines, your inspiring picture has surely made it to our jury. And if you find your object among the 70 pictures on the poster, you’ll see that your name has been included among the names of all the contributors that made this poster possible. Of course, the owner of each photo owns all the copyrights.

The Smashing Magazine 2013 Photo Contest Poster

Inspiration Around Us: The Smashing Community Poster 2013

Preview And Download

Below you will find a larger version as well as an exclusive version of the poster in PDF format:

Our 10 Winners:

“Lead, Tin, Antimony, Wood & Plastic” designed by Adam Pócs:

adam-pocs_mini_500_mini
This is a metal movable type I acquired when I studied typography on Moholy–Nagy University of Art and Design. This small piece of the history of printing resides above my monitor in the peaceful company of a wooden letter “O” and a plastic “Q” key saved from a computer keyboard representing the ever changing tools of the written human culture. The actual background of the image shows a part of my CD collection wall.

“Stationary Crane” designed by Holly Lambert:

holly-lambert_mini_500_mini
I love origami paper cranes and up cycling paper, so I combined the two and decorated my cubicle with paper cranes made of old maps and a variety of call for entry posters. I even have a Starburst wrapper paper crane!

“Take a Bite Out of Your Task List” designed by Jen Riehle:

jen-riehle_mini_500_mini
This frog is a little paper clip. It has a small spring and can clasp papers in its mouth. It sits on my desk, and has ever since high school when my mother gave it to me. She got it as a child so I’m sure it’s quite old. I should probably put it away and not use it but it’s too cute and it makes me smile every time I look at it.

“Together” designed by Ratul Mukherjee:

ratul-mukherjee_mini_500_mini
I was visiting one of my friend’s relatives house. They have travelled around the world and the house contained lot of interesting pieces collected from other countries. The picture is of two tooth-picks’ holder from Paris. They were really cute and I was playing around with them as if I was a kid. They were designed so as to hug each other when placed face to face. And when I looked at these two inanimate objects hugging so sweetly, I envisaged love, friendship, care ,solidarity, peace. I believe we were also designed so as to hug each other when placed face to face but some of the blue-prints got lost in translation.

“Ma’Guitar” designed by Santanu Karar:

santanu-karar_mini_500_mini
Ma’ guitar is not a thing. It is an extension of myself. It is who I am. ~ Joan Jett

“My bottle of creativity” designed by Stefania Peter:

stefania-peter_mini_500_mini
Colours, rare lights make me inspired. They give me a strange, but very good feeling when ever I see such photos or real life scenes. It took me some time to get such bokehs, till I got an idea to use Christmas tree lights in the background! Those lights were exactly what I was looking for. When I was a little girl, I spent many hours near our tree and enjoying the lights and colours. Probably, that’s why I get inspired when ever I see similar photos.

“Traces” designed by Janina Imberg:

stefania-peter_mini_500_mini
I’ve taken a picture of my old and dirty shoes I was obviously wearing way to often. But they are carrying so many reminders of every step I took, so they are a kind of inspiration. And actually I just like their worn out look.

“Morning duo” designed by Jovo Milanovic:

stefania-peter_mini_500_mini
What would be most inspiring object that would spark my creativity than mug of coffee? Hm, well thats true, but watch for big “S” on picture. That “S” simbolize Smashing magazine. There is no morning on work that would start without daily dose of coffee and daily dose of SM :) Cheers

“My Keyboard” designed by Konstantin Meier:

stefania-peter_mini_500_mini
Music has always been a great inspiration pool for me. So when I get stuck in design process, instead of clicking trough css galleries, I often start playing keyboard.

“Pantone Catalyst” designed by Rebecca Miller:

stefania-peter_mini_500_mini
A photograph of the brilliance that Pantone inspires.

Some Of The Best Entries:

“Check Mate” designed by Jerry Locke:

jerry-locke_mini_500_mini
This is a photo of a famous check mate called, “Hippopotamus Mate” which can seal a match in 6 moves. The photo symbolizes a quick turn of events that can change an outcome. Hopefully, one is on the right side of the check mate.

Designed by Nicholas Koh:

nicholas-koh-h.s._mini_500_mini
This is a photograph of a lil’ mini-bonsai that lives happily on my work desk. Two of its lower branches seem to reach out to you and have that ‘pom-pom’ effect, which always serves to cheer me up whenever I take a look at it. I also enjoy inspecting its network of constantly-growing aerial branches that weave around towards the soil… there’s just something about it that’s so mesmerising!

“Hour-Glass” designed by Chris Preen:

stefania-peter_mini_500_mini
I use this for concentrated bursts of totally non-distracted and unplugged work.

“Play for inspiration” designed by Jeffrey Lu:

stefania-peter_mini_500_mini
Playing games is not just about having fun and passing time, but for me they are quite educational and make me a better designer. They are a great source of inspiration and design reference and problem-solving material!
This is a photo of my Nintendo 3DS XL playing Fire Emblem: Awakening, a game I’ve been playing almost everyday for the past month and more! Great Turn Based Strategy game! :D

“The Foosball Table” designed by Harshad Methrath:

stefania-peter_mini_500_mini
We, the staff of MP&A Advertising Agency take out our stress or enjoy a break over a game of foosball. I personally use it when I have hit a creative wall and I need to get away from my system. It always helps.

“Threads of a Colorfull Life” designed by Jofy Baby:

stefania-peter_mini_500_mini
The picture depicts the different emotions of one’s life which consists of colors of joy, sorrow , love , envy etc. Our life is too like these threads that bind us with these emotions in different phases.
P.s All rigths reserved

“Repotting Day” designed by Jennifer Cui:

stefania-peter_mini_500_mini
Because I feel unproductive.

Designed by Margaret Martin:

stefania-peter_mini_500_mini
Clay meets my wild daughter with unlimited imagination. Result: paintbrush vase. Flowers wilt anyway.

“The Butterfly Effect” designed by Marvin Christopher Moloczek:

stefania-peter_mini_500_mini
One butterfly at the right time and the right place can create a storm with a flap of its wings. One coffee at the right time at the right place can help to create a storm of creativity. One butterfly, which had coffee at the right time – pretty much any time – that’d be interesting.

“Keep on typing” designed by Mickael Mao:

stefania-peter_mini_500_mini
Because we tend to forget things, one of the way to capture them is to write them.

“Perritos” designed by Monica Molina:

stefania-peter_mini_500_mini
In the south of Chile we call those clothes hanger “Perritos”, (spanish), in English means little dogs.

“Music, I love you…” designed by Nik Aximov:

stefania-peter_mini_500_mini
When I begin to create something, the only thing I need is music. I don’t drink and smoke, the music and love are the only sources I use in my works:)

“Milk & Cookies” designed by Oana Mangiurea:

stefania-peter_mini_500_mini
My reminder of my inner child. Keeps me creative wihout having to fear of what others have to say regarding my work.

“iCreativity” designed by Olivier Jousset:

stefania-peter_mini_500_mini
What better object in 2013 may represent the creativity and the inspiration… a tablet of course !

“This fuels my creativity!” designed by Per Swantesson:

stefania-peter_mini_500_mini
Photo at sunset on my terrace in Guanajuato, Mexico

Be Sure To Join In Next Time!

Thanks to all who have participated in this contest. There will be more contests and goodies coming up soon, so be sure to stay tuned!

Yours sincerely,

The Smashing Team

(ml) (ea) (il)


© The Smashing Editorial for Smashing Magazine, 2013.

Grab Your WordPress Bootcamp Seat Today and Save $200

Posted by BittBox at 06-18-2013

Advertise here with BSA


Grab Your WordPress Bootcamp Seat Today and Save $200

If you’re looking for a fast way to learn WordPress, LearnWebDevelopment.com has created the perfect program. It’s their WordPress Bootcamp – a training course that will teach you how to build a fully-functioning WordPress website in just 8 weeks! And, because they give all their students weekly feedback as they go through the course, you’ll never be left alone.

The only catch is … early-bird pricing (and the option to save $200 off the regular price) is ending soon. You have until Thursday, June 20, 2013 at midnight.

If you’d like to quickly become an in-demand WordPress website designer, sign up here now.

Remember, all of LearnWebDevelopment.com’s WordPress Bootcamps come with a risk-free lifetime money-back guarantee. Get the details here.

Five Ways To Prevent Bad Microcopy

Posted by Smashing Magazine Feed at 06-17-2013


  

You’ve just created the best user experience ever. You had the idea. You sketched it out. You started to build it. Except you’re already in trouble, because you’ve forgotten something: the copy. Specifically, the microcopy.

Microcopy is the text we don’t talk about very often. It’s the label on a form field, a tiny piece of instructional text, or the words on a button. It’s the little text that can make or break your user experience.

BillBeardMicrocopyImage

If you think you’ve built the best user experience but didn’t make sure the microcopy was spot on, then you haven’t built the best user experience.

With the adoption of agile development and lean UX, we’re often concerned about racing through iterations and getting our products in front of customers. But we can’t forget that design is still about words.

Everyone frets about marketing copy — and they should — but communication doesn’t stop once you’ve sold the user. In some ways, you could argue that words become more important once the marketing experience is done. With most products, users have to be sold to only once — or once in a while — and then they’ll use the core product all the time.

If your microcopy isn’t getting the job done, you’ll lose users — and all the marketing in the world might not get you a second chance.

With that in mind, here are five ways to make sure your website’s microcopy doesn’t end up sinking your UX.

1. Get Out Of Your Own Head And Get To Know The User.

I’m willing to bet that your experience is plastered with internal terminology, especially your labels and navigation. Every company has its own language, which often sneaks onto the website when we’re not careful.

Don’t let it happen. Never assume that what works for you will work for the user.

Here’s a simple way to check whether your microcopy is too internal — or confusing, for that matter.

Let’s assume that you’re running some form of usability testing. (If you’re not, there’s only about a thousand articles out there that will convince you you’re making a mistake, so you don’t need me for that.)

When you’re testing, you probably get caught up in watching how the user interacts with your website and their facial expressions. But instead of simply watching, make a point to really listen to — and take notes on — the actual words the user says during testing. Listen closely to the phrases they utter when describing their actions. After all, you’ve told them to think out loud.

Listen to the inflection in their voice as they read microcopy: Did they say that label or term with a question in their voice? Don’t hesitate to have your moderator follow up on copy. Have them go back and ask the user whether they’ve understood that label.

Take it a step further: Listen to what users say from the moment they walk in the building. Listen to their banter with the moderator, the jokes they make and the words they use to express their frustration or enjoyment.

You’d be surprised by what you can learn about a user and their language set from a comment they make about a cup of coffee. Everything someone says tells you something about them and can inform your copywriting process.

2. The User Is A Person. Talk To Them Like One.

Because brevity is essential on the Web, most of us tend to truncate everything — particularly labels. Labels are great for design. They organize and keep tidy essential parts of a UI, such as navigation and forms.

Unfortunately, labels have an inherent problem: They’re easily subject to a user’s personal context because they don’t provide explanation. They’re on an island in the user’s mind.

Not too long ago, we encountered this problem with a label at TheLadders.

TheLadders is a job-matching service. Like any matching service, we required information to match a user with the right job.

TheLadders Job Goals

We thought this form was very clear. “Job Goals” is the label we’ve used for our matching criteria for almost 10 years. It’s brief, which helped to keep the navigation neat. But in a recent redesign, we noticed that users kept stumbling when first arriving on the page.

Turns out that people who don’t work in the job-search industry think of job goals as accomplishments they hope to achieve at their job, not as the details of their next job.

(We also fell into the trap covered in the first point: internal terminology = bad.)

So, we made it more conversational: “What job do you want?” Instantly, we could see that users no longer hesitated. Why? Because taking this new line of copy out of context was impossible.

Instead of forcing a label on a form or field for the sake of the UI, use natural language. The experience should be a conversation with the user, not a filing cabinet for them to drudge through.

Most of all, the labels in the navigation shouldn’t be more important than the user’s interaction with the pages that the labels represent.

3. Use Copy As A Guide, Not A Crutch.

“We can fix that with copy.”

I’ve heard this too many times when the UX falls short, and I hate it. If there’s a problem with the design, then fix the design. The best experiences have minimal copy because they’re intuitive. When designing the UX and you find yourself writing a sentence or two to help the user take an action, step back.

Tests have been conducted on readability and on the optimum length of content for understandability since the 1880s. With the rise of the Internet, this story became about line length. Most sources net out between 45 to 75 characters as the ideal line length.

To me, line length is moot, especially with responsive and mobile design. Besides, character counts seem tedious and not very lean.

Instead, I subscribe to the original readability tables of Rudolf Flesch (pictured below), in which sentences with eight words or fewer are regarded as “very easy” to read.

BeardFlesch
The readability tables of Rudolf Flesch.

It may be an old standard, but it still may be the best measuring stick we have, and it’s the easiest for lean teams to follow. On the Web, we’re shooting for “very easy to read” every time, and we want to be able to communicate with as many people (93%) as possible.

If you can’t explain what a user needs to do in eight words or fewer, then reconsider the design.

Once the user has gotten past the marketing portion of the experience, use copy as a guide to usher them through the product. The best copy on basic UI features, such as a form, will get read but not really noticed. The user absorbs the words and takes the desired action without a hiccup.

4. Treat Every Moment Like A Branding Moment, Even When It’s Not.

There are multiple definitions of a “branding moment.” When we talk about copy in a UX, I define it as a moment when you purposefully inject your brand’s tone and voice into what would normally be a straightforward user interaction.

For example, Foursquare has a lot of great branding moments within its badging system. I unlocked the one below not too long ago. It’s fun and a bit edgy, on point with Foursquare’s brand.

FoursquareBeard
A good job of a branding moment with Foursquare’s brand.

But getting carried away is easy. Think hard before using fun or quirky — or whatever your brand’s voice is — copy in a situation that the user wants and expects to be straightforward.

Your brand’s tone and voice are essential to consider when writing all of your copy, but it should not get in the way of a user who is trying to take action.

Avoid over-branding copy on:

  • navigation,
  • forms and field labels,
  • instructional text,
  • selection text (drop-downs, radio buttons),
  • buttons.

Consider incorporating your brand’s voice in:

  • confirmation messaging,
  • rewards (badges, points),
  • 404 pages,
  • server errors,
  • error messaging.

The difference between these lists is simple. In the first list, the user is attempting to take action; the second list is the results of actions.

In the first list, you don’t want to risk confusing users as they try to accomplish something and cause them to abandon. Clarity is essential.

In the second list, you have an opportunity to embrace the user’s success (Foursquare’s “You’re on fire!”) or mitigate a failure (TheLadders 404 page, below) by injecting your brand. You don’t need anything from the user at these points.

TheLadders404BillBeard
TheLadders 404 page.

This isn’t to say that you can’t brand that first list. But if you’re going to do it, test it first. With branding moments, execution is paramount. If you’re unsure, don’t risk it.

By choosing not to brand parts of the experience to keep it simple and easy for the user, you’ll provide an enjoyable experience, which will make your brand stronger. So, every moment is a branding moment. Even when it’s not.

5. If Content Is King, Then Treat Context Like A Queen.

The hot saying right now is “Content is king.” Native advertising, or the integration of relevant content into a natural experience for the purpose of acquisition, is becoming a core offering of many agencies and has spawned a few popular startups.

But without context, content is useless. (And if you’re big on Game of Thrones, then you’ll know that queens have all the real power!)

Whether you’re labeling a form or writing a blog post, you have to either understand the user’s existing context or provide context for them.

A user’s context will define how they interpret the copy on the page. That context could come from anywhere: an email they’ve just read, or something that happened to them when they were eight.

When a user doesn’t have proper context, they get confused. When a user gets confused, they abandon.

If you’re agile and iterative, accounting for a holistic experience adds an additional layer of complexity, in the form of consistency. A simple change to copy on one page could affect 10 other pages. One minute you’re calling something “Job Goals,” and the next you’re changing it to “What job do you want?” Well, where else have you used “Job Goals”?

To better understand the user’s context — and to check for consistency — sit down at least once per iteration and experience your “contextual flow” as the user sees it.

For example, if you have a subscription service, the flow might be something like this:

ContextualFlowBeard

That’s at least 10 distinct steps in which a user’s context could be created, confirmed or altered.

Sit down, take a breath and wipe your mind of what you know is there. Then start with Google or your home page or wherever the first touch usually happens.

Does your onboarding experience deliver the same promise as your Google ad? Have you described a feature using the same language throughout? Are your labels so subjective that the context gets lost? These are questions to answer as you go through the flow.

Whatever Happens, Don’t Ignore Your Microcopy.

Microcopy often falls victim to personal bias, internal terminology, poor branding, broken contextual flows, time crunches and other factors. Any of these can undermine even the most well-designed UX and the copy within.

Here’s the thing about mistakes with microcopy: They’re so easy to make yet so hard to identify after you’ve made them.

You have a much better chance of stopping the mistakes in advance than of identifying them after the fact. When you’re testing, how often do you think, “Hey, maybe we should change the label on the third field of this form?” You’re wrapped up in other UX mistakes that you know you’ve made. Unfortunately, a repeated pattern of noticeable failure is usually needed in order for microcopy to get updated or even tested.

So, the next time you’re creating or improving an experience, I hope you employ some of the tactics provided here so that you avoid these “easy” mistakes and do right by your microcopy — and by your user.

(al)


© Bill Beard for Smashing Magazine, 2013.

200 Foodie Pack: A Free Set Of Food Icons

Posted by Smashing Magazine Feed at 06-17-2013


  

Today we are pleased to feature a set of 200 useful and beautiful foodie icons. This freebie was created by the team behind Freepik, and at the time of writing it’s the largest set of food icons available on the web in one pack.

The 200 Foodie Pack includes 200 customized icons available in PNGs (32×32px, 64×64px, 128×128px), as well as in AI, EPS and vector format. Perfect for any projects around gourmet, food, restaurant, gastronomy and the like. Enjoy!

foodie icons_new font_500_mini
Large preview

Download The Freebie!

You may freely use it for both your private and commercial projects without any restrictions, including software, online services, templates and themes.

preview 3_500_mini

preview 4_500_mini

Behind The Design

Here are some insights from the design team:

“At Freepik we love to make freebies and to develop free icons sets for designers that make work easier. The pack was created to neutralize the growing demand for food icons.”

Many thanks to the creative minds behind Freepik! We really appreciate your efforts!

(ea)


© The Smashing Editorial for Smashing Magazine, 2013.

FYI Monday: Surreal Illustrations by Andrew Archer

Posted by Fudgegraphics | for lovers at 06-17-2013

This post is part of the For Your Inspiration Monday series showcasing the most inspiring designs out there. Each week a new artist or design style will be presented in order to get your creative juices flowing for the upcoming week. I hope you enjoy the series.

Andrew Archer is an illustrator based in Auckland, New Zealand. Many of Andrew’s work revolves around character design with a clear touch of surrealism. This illustration style lends itself perfectly to editorial design so it comes as no surprise that his client list features the likes of WIRED, Q Magazine and Fortune. For more inspiration visit Andrew’s portfolio.

Andrew Archer BeoBachter Illustration

Andrew Archer Eating Slim Illustration

Andrew Archer Music Month Illustration

Andrew Archer Little Ghosts Illustration

Andrew Archer Peaks and Pearls Illustration

Andrew Archer Swish Basket Illustration

Andrew Archer Red Bull Illustration

Freebie Friday: 4 Horizontal Noise Brushes

Posted by BittBox at 06-14-2013

Advertise here with BSA






Download .ZIP

What Leap Motion And Google Glass Mean For Future User Experience

Posted by Smashing Magazine Feed at 06-14-2013


  

With the Leap Motion controller being released on June 27th and the Google Glass Explorer program already live, it is obvious that our reliance on the mouse or even the monitor to interact with the Web will eventually become obsolete.

The above statement seems like a given, considering that technology moves at such a rapid pace. Yet in 40 years of personal computing, our methods of controlling our machines haven’t evolved beyond using a mouse, keyboard and perhaps a stylus. Only in the last six years have we seen mainstream adoption of touchscreens.

Given that emerging control devices such as the Leap Controller are enabling us to interact with near pixel-perfect accuracy in 3-D space, our computers will be less like dynamic pages of a magazine and more like windows to another world. To make sure we’re on the same page, please take a minute to check out what the Leap Motion controller can do:


Introducing the Leap Motion

Thanks to monitors becoming portable with Google Glass (and the competitors that are sure to follow), it’s easy to see that the virtual world will no longer be bound to flat two-dimensional surfaces.

In this article, we’ll travel five to ten years into the future and explore a world where Google Glass, Leap Motion and a few other technologies are as much a part of our daily lives as our smartphones and desktops are now. We’ll be discussing a new paradigm of human-computer interface. The goal of this piece is to start a discussion with forward-thinking user experience designers, and to explore what’s possible when the mainstream starts to interact with computers in 3-D space.

Please note: We’re exploring an entirely hypothetical scenario, and these are opinions, some of which you may not agree with. However, the opinions are based on current trends, statistics and existing technology. If you’re the kind of designer who is interested in developing the future, I encourage you to read the sources that are linked throughout the article.

Setting The Stage: A Few Things To Consider

Prior to the introduction of the iPhone in 2007, many considered the smartphone to be for techies and business folk. But in 2013, you’d be hard pressed to find someone in the developed world who isn’t checking their email or tweeting at random times.

So, it’s understandable to think that a conversation about motion control, 3-D interaction and portable monitors is premature. But if the mobile revolution has taught us anything, it’s that people crave connection without being tethered to a stationary device.

To really understand how user experience (UX) will change, we first have to consider the possibility that social and utilitarian UX will be taking place in different environments. In the future, people will use the desktop primarily for utilitarian purposes, while “social” UX will happen on a virtual layer, overlaying the real world (thanks to Glass). Early indicators of this are that Facebook anticipates its mobile growth to outpace its PC growth and that nearly one-seventh of the world’s population own smartphones.

The only barrier right now is that we lack the technology to truly merge the real and virtual worlds. But I’m getting ahead of myself. Let’s start with something more familiar.

The Desktop

Right now, UX on the desktop cannot be truly immersive. Every interaction requires physically dragging a hunk of plastic across a flat surface, which approximates a position on screen. While this is accepted as commonplace, it’s quite unnatural. The desktop is the only environment where you interact with one pixel at a time.

Sure, you could create the illusion of three dimensions with drop shadows and parallax effects, but that doesn’t change the fact that the user may interact with only one portion of the screen at a time.

This is why the Leap Motion controller is revolutionary. It allows you to interact with the virtual environment using all 10 fingers and real-world tools in 3-D space. It is as important to computing as analog sticks were to video games.

The Shift In The Way We Interact With Machines

To wrap our heads around just how game-changing this will be, let’s go back to basics. One basic UX and artificial intelligence test for any new platform is a simple game of chess.

Virtual Chess
(Image: Wikimedia Commons)

In the game of chess below, thanks to motion controllers and webcams, you’ll be able to “reach in” and grab a piece, as you watch your friend stress over which move to make next.

Now you can watch your opponent sweat.
Now you can watch your opponent sweat. (Image: Algernon D’Ammassa)

In a game of The Sims, you’ll be able to rearrange furniture by moving it with your hands. CAD designers will use their hands to “physically” manipulate components (and then send their design to the 3-D printer they bought from Staples for prototyping.)

While the lack of tactile feedback might deter mainstream adoption early on, research into haptics is already enabling developers to simulate physical feedback in the real world to correspond with the actions of a user’s virtual counterpart. Keep this in mind as you continue reading.

Over time, this level of 3-D interactivity will fundamentally change the way we use our desktops and laptops altogether.

Think about it: The desktop is a perfect, quiet, isolated place to do more involved work like writing, photo editing or “hands-on” training to learn something new. However, a 3-D experience like those mentioned above doesn’t make sense for social interactions such as on Facebook or even reading the news, which are more becoming of mobile.

With immersive, interactive experiences being available primarily via the desktop, it’s hard to imagine users wanting these two experiences to share the same screen.

So, what would a typical desktop experience look like?

Imagine A Cooking Website For People Who Can’t Cook

With this cooking website for people who can’t cook, we’re not just talking about video tutorials or recipes with unsympathetic instructions, but rather immersive simulations in which an instructor leads you through making a virtual meal from prep to presentation.

Interactions in this environment would be so natural that the real design challenge is to put the user in a kitchen that’s believable as their own.

You wouldn’t click and drag the icon that represents sugar; you would reach out with your virtual five-fingered hand and grab the life-sized “box” of Domino-branded sugar. You wouldn’t click to grease the pan; you’d mimic pushing the aerosol nozzle of a bottle of Pam.

The Tokyo Institute of Technology has already built such a simulation in the real world. So, transferring the experience to the desktop is only a matter of time.


Cooking simulator will help you cook a perfect steak every time

UX on the future desktop will be about simulating physics and creating realistic environments, as well as tracking head, body and eyes to create intuitive 3-D interfaces, based on HTML5 and WebGL.

Aside from the obvious hands-on applications, such as CAD and art programs, the technology will shift the paradigm of UX and user interface (UI) design in ways that are currently difficult to fathom.

The problem right now is that we currently lack a set of clearly defined 3-D gestures to interact with a 3-D UI. Designing UIs will be hard without knowing what our bodies will have to do to interact.

The closest we have right now to defined gestures are those created by Kinect hackers and John Underkoffler of Oblong Technology (the team behind Minority Report’s UI).

In his TED talk from 2010, Underkoffler demonstrates probably the most advanced example of 3-D computer interaction that you’re going to see for a while. If you’ve got 15 minutes to spare, I highly recommend watching it:


John Underkoffler’s talk “Pointing to the Future of UI

Now, before you start arguing, “Minority Report isn’t practical — humans aren’t designed for that!” consider two things:

  1. We won’t likely be interacting with 60-inch room-wrapping screens the way Tom Cruise does in Minority Report; therefore, our gestures won’t need to be nearly as big.
  2. The human body rapidly adapts to its environment. Between the years 2000 and 2010, a period when home computers really went mainstream, reports of Carpal Tunnel Syndrome dropped by nearly 8%.

Graph of Carpel Tunnel
(Image: Minnesota Department of Health)

However, because the Leap Motion controller is less than $80 and will be available at Best Buy, this technology isn’t just hypothetical, sitting in a lab somewhere, with a bunch of geeks saying “Wouldn’t it be cool if…”

It’s real and it’s cheap, which really means we’re about to enter the Wild West of true 3-D design.

Social Gets Back To The Real World

So, where does that leave social UX? Enter Glass.

It’s easy to think that head-mounted augmented reality (AR) displays, such as Google Glass, will not be adopted by the public, and in 2013 that might be true.

But remember that we resisted the telephone when it came out, for many of the same privacy concerns. The same goes for mobile phones and for smartphones around 2007.

So, while first-generation Glass won’t likely be met with widespread adoption, it’s the introduction of a new phase. ABI Research predicts that the wearable device market will exceed 485 million annual shipments by 2018.

According to Steve Lee, Glass’ product director, the goal is to “allow people to have more human interactions” and to “get technology out of the way.”

First-generation Glass performs Google searches, tells time, gives turn-by-turn directions, reports the weather, snaps pictures, records video and does Hangouts — which are many of the reasons why our phones are in front of our faces now.

Moving these interactions to a heads-up display, while moving important and more heavy-duty social interactions to a wrist-mounted display, like the Pebble smartwatch, eliminates the phone entirely and enables you to truly see what’s in front of you.

pebble_smartwatch_dm_120418_wblog
(Image: Pebble)

Now, consider the possibility that something like the Leap Motion controller could become small enough to integrate into a wrist-mounted smartwatch. This, combined with a head-mounted display, would essentially give us the ability to create an interactive virtual layer that overlays the real world.

Add haptic wristband technology and a Bluetooth connection to the smartwatch, and you’ll be able to “feel” virtual objects as you physically manipulate them in both the real world and on the desktop. While this might still sound like science fiction, with Glass reportedly to be priced between $299 and $499 and Leap Motion at $80 and Pebble being $150, widespread affordability of these technologies isn’t entirely impossible.

Social UX In The Future: A Use Case

Picture yourself walking out of the mall, and your close friend Jon updates his status. A red icon appears in the top right of your field of vision. Your watch displays Jon’s avatar, which says, “Sooo hungry right now.”

You say, “OK, Glass. Update status: How about lunch? What do you want?” and keep walking.

“Tacos.”

You say, “OK, Glass. Where can I get good Mexican food?” 40 friends have favorably rated Rosa’s Cafe. Would you like directions? “Yes.” The navigation starts, and you’re en route.

You reach the cafe, but Jon is 10 minutes away. Would you like an audiobook while you wait? “No, play music.” A smart playlist compiles exactly 10 minutes of music that perfectly fits your mood.

“OK, Glass. Play Angry Birds 4.”

Across the table, 3-D versions of the little green piggies and their towers materialize.

In front of you are a red bird, a yellow bird, two blue birds and a slingshot. The red bird jumps up, you pull back on the slingshot, the trajectory beam shows you a path across the table, you let go and knock down a row of bad piggies.

Suddenly, an idea comes to you. “OK, Glass. Switch to Evernote.”

A piece of paper and a pen are projected onto the table in front of you, and a bulletin board appears to the left.

You pick up the AR pen, jot down your note, move the paper to the appropriate bulletin, and return to Angry Birds.

You could make your game visible to other Glass wearers. That way, others could play with you — or, at the very least, would know you’re not some crazy person pretending to do… whatever you’re doing across the table.

When Jon arrives, notifications are disabled. You push the menu icon on the table and select your meal. Your meal arrives; you take photos of your food; eat; publish to Instagram 7.

Before you leave, the restaurant gives a polite notification, letting you know that a coupon for 10% off will be sent to your phone if you write a review.

How Wearable Technology Interacts With Desktops

Later, having finished the cooking tutorial on the desktop, you decide it’s time to make the meal for real. You put on Glass and go to the store. The headset guides you directly to the brands that were advertised “in game.” After picking out your ingredients, you receive a notification that a manufacturer’s coupon has been sent to your phone and can be used at the check-out.

When you get home, you lay a carrot on the cutting board and an overlay projects guidelines on where to cut. You lay out the meat, and a POW graphic is overlaid, showing you where to hit for optimal tenderness:

Augmented Meat
Image source?

You put the meat in the oven; Glass starts the timer. You put the veggies in the pan; Glass overlays a pattern to show where and when to stir.

While you were at the store, Glass helped you to pick out the perfect bottle of wine to pair with your meal (based on reviews, of course). So, you pour yourself a glass and relax while you wait for the timer to go off.

In the future, augmented real-world UX experiences will be turned into real business. The more you enhance real life, the more successful your business will be. After all, is it really difficult to imagine this cooking experience being turned into a game?

What Can We Do About This Today?

If you’re the kind of UI designer who seeks to push boundaries, then the best thing you can do right now is think. Because the technology isn’t 100% available, the best you can do is open your imagination to what will be possible when the average person has evolved beyond the keyboard and mouse.

Draw inspiration from websites and software that simulate depth to create dynamic, layered experiences that can be easily operated without a mouse. The website of agency Black Negative is a good example of future-inspired “flat” interaction. It’s easy to imagine interacting with this website without needing a mouse. The new Myspace is another.

To go really deep, look at the different Chrome Experiments, and find a skilled HTML5 and WebGL developer to discuss what’s in store for the future. The software and interactions that come from your mind will determine whether these technologies will be useful.

Conclusion

While everything I’ve talked about here is conceptual, I’m curious to hear what you think about how (or even if) these devices will affect UIs. I’d also love to hear your vision of future UIs.

To get started, let me ask you two questions:

  1. How will the ability to reach into the screen and interact with the virtual world shape our expectations of computing?
  2. How will untethering content from flat surfaces fundamentally change the medium?

I look forward to your feedback. Please share this article if you’ve enjoyed this trip into the future.

(il) (al)


© Tommy Walker for Smashing Magazine, 2013.

Free Texture Tuesday: Weathered Wood

Posted by BittBox at 06-11-2013

Advertise here with BSA







Smashing Conference 2013: A Community Event That Will Change Everything

Posted by Smashing Magazine Feed at 06-11-2013


  

Guess what? The Smashing Conference is coming! 2 single-track conference days, 3 full-day workshops, 16 excellent speakers, and only 300 available seats. We’d be honoured to welcome you in our home town Freiburg, on September 9–11th 2013, at the foot of the legendary, beautiful Black Forest in Southern Germany.


You can enjoy the well-known “Münsterwurst” opposite the conference venue, also known as a “lange Rote”. Of course, there are also vegetarian tofu sausages available. Image credit.

SmashingConf 2013: We Are Building The Web

We want the Smashing Conference to be a unique, valuable and friendly event for everybody involved. Not only do we want to provide new perspectives into Web design in general; more importantly, we want the event to focus on how exactly we, designers and developers, work, design and code to solve real-life problems.


Tickets can now be purchased via the SmashingConf 2013 page.

We’ll explore in detail what techniques, strategies and tools we use, but also what lessons we can learn from our personal experiences, successes and failures. Smashing Conference is a conference about how we work and play — and how we build the Web today.

Get your ticket!

Speakers and Workshops

We’ve invited excellent speakers who all have something to share, be it personal experiences or case-studies on large projects. We’re very happy to welcome Jason Santa Maria, Dan Mall, Luke Wroblewski, Dan Rubin, Inayaili de Leon, David Březina, Andy Hume, Tim Kadlec and — of course — the Mystery Speaker among the first confirmed speakers. You can find more information about the talks on the SmashingConf 2013 Speakers page.


Taking notes the old-fashioned way. Image credit.

We are also happy to announce 3 full-day and 1 half-day practical, hands-on workshops that will take place after the two main conference days: Dan Mall will be teaching how to be the typographer you were born to be, Dan Rubin will be exploring how to design for User Experience, Luke Wroblewski will be exploring how we can improve Web forms for mobile, and Addy Osmani will be teaching how to become the real front-end warrior.

Does it all sounds good to you? Well, it gets even better: If you purchase a Conference Ticket + Workshop ticket, you can save 15% off the regular price! So what are you waiting for?

Date, Location, Prices

The conference will take place on 9–11th of September in 2013 in the Historic Merchant Hall in our lovely home town Freiburg, Germany. We have only 300 seats, so the number of tickets is very limited. Also, we’ve blocked every single hotel in town for you — you can select your hotel at the SmashingConf 2013 Location page (“Smashing Conference” is the magic word for hotel booking!).


Image credit.

AirBnB could be a good option as well, but be fast — there aren’t many rooms available. Freiburg is known for being a vacation place, so perhaps you’d like to combine the conference with a relaxing family vacation in the skirts of the Black Forest? We’ve prepared some information about the location of Freiburg, so you don’t get lost in the suburbs of the Southern Germany while travelling here. Now if that isn’t an experience of a life-time, what is? (No, seriously, you will enjoy it!).

The price per ticket is €369 (incl. VAT). We’re organzing 3 full-day (€349) and 1 half-day (€229) workshops. Make sure to actually consider booking a workshop as well — if you buy both a conf ticket and a workshop, you save 15% off the price right away. Three days of learning, sharing, networking — it’s getting better and better! No lunch will be provided, but drinks and snacks will be provided, of course.

Get your ticket!

Sponsors, Dear Sponsors

We keep the ticket prices affordable for everyone, and we’re happy to welcome sponsors to help us make the conference smashing in every possible way. If you’re interested in sponsoring the event, please contact Vitaly at hello [@] smashingconf [dot] com. We love our sponsors, and you make the event possible, and we’d be honoured to have you involved!


Snapshot of SmashingMag’s 2012 Conference badge and lanyard. Image credit.

  • “This conference was well worth the money and I hope we will make it next year. Well done Smashing Magazine!” (Source)
  • “The two days of talks offered a very good balance of design-, philosophy-, typography-, and development-based topics. [...] Thanks to all who attended, organized, cared, spoke and made this an overall very great event!” (Source)
  • “It was an immensely successful conference [...] The talks, the beer and the interesting people definitely made me want to go visit Freiburg again next year!” (Source)

Questions?

Follow us at @smashingconf and get more details on the SmashingConf 2013 website. Also, more speakers will be announced soon, so get ready to be smashed with a few exciting surprises and announcements!

Questions? Shoot us an email anytime at hello@smashingconf.com — we’d love to assist you in every possible way and would be humbled and happy to welcome you in our lovely home town Freiburg this September!

Auf Wiedersehen!

Get your ticket!


© Vitaly Friedman for Smashing Magazine, 2013.