Entries Tagged as 'Design'

5 ways to make temporal prototyping your next design skill

Imagine a world where you could only describe your visual designs with words: all shapes, colours, and sizes had to be described orally. You could only tell what something should look like, never show what it would look like. That’s what it is like to create designs in the temporally flat confines of a static space. We can describe how something transitions, transforms, or animates, but never show how it works.

But, we can do more than tell. We can show how these designs work, it just takes a little more effort.

In a previous article, I introduced the term temporal design to differentiate from ‘visual’ or static designs. Temporal prototypes, then, are ones that truly allow us to explore our designs in more than just visual appearance but allow temporal appearance as well. Creating prototypes that look and work more like the final product is where interface design is headed.

We prototype to explore ‘What if…?’

Simply stated, we create prototypes to answer ‘What if…?’ questions, before we ask the ‘How do we…’ questions. This might seem counter-intuitive at first, but to be creative we need to be able to try out any idea, with an eye for what is possible rather than the other way around.

What if…? Like a good science fiction story, a temporal prototype should help you see the future. (Image source: Jonas de Ro, 2012)

The problem with visual prototypes using programs like Photoshop, Illustrator, OmniGraffle, and Sketch is that they can never help us answer ‘What if…?’ questions when it comes to time, i.e. temporal design. You can describe how it works with these tools, but you cannot show how it works which is the only way to truly answer ‘What if…?’ questions. This helps us go beyond simply showing designs and begin to enter the more useful domain of the proof-of-concept.

Temporal prototypes enfold the visual and dynamic

There are three levels of prototypes, each building on the capabilities of the previous. You will find that as you increase the scope of your prototype, you will also push back the base of the fidelity cliff, which is the point at which your prototype becomes more about answering ‘How…?’ than ‘What if…?’. Temporal prototypes turn us from designers into storytellers.

Three kinds of prototypes, each increasingly complex to build, but more informative for answering ‘What If…?’ questions
  • Visual: incorporates the traditional page structure and visual layers, and is what makes the first and most immediate impression on the actor. However, the visual layer is static in nature and is not enough to convey the full interface.
  • Dynamic: is where interaction happens in of the temporal arena, allowing us to show the basic interactions as ‘clickable’ prototype (i.e. click here, this happens). However, interactive prototypes have come to simply mean showing a clickable site schema. It is not enough.
  • Temporal: goes beyond the visual and interactive allowing the user to engage with the design over time, in ways that simple interactive prototypes cannot encapsulate. By showing how the prototype works in time, we can truly say that it is an interface proof-of-concept.

The old ways of weaving the web are not working anymore

It used to be that ‘web designers’ would work with clients to create storyboards, wireframes, and visual comps, hand those over to the developers, stand back and wait for the magic to happen. This will always end in the best product that works exactly the way the client wanted, every single time, right?

The Client-Designer-Developer relationship in its ‘happy path’

Probably not. The waterfall methodology for interface development, while far from dead, has been widely discredited. The reason for this is that it relies heavily on static deliverables (sitemaps, wireframes, storyboards, and visual comps) that quickly run foul of the fidelity cliff making iteration and innovation problematic or impossible.

Waterfall is still with us

Many digital interface development workflows rely on the agile methodology, or one of its many variants. Agile promotes design iteration, rapid prototyping and constant testing. Yet designers are still yoked to the same old deliverables, based on creating static designs.

Agile allows for after prototyping and creation

Where we need to go is into truly temporal interface prototypes that can be quickly turned into the development code. This transition is not going to be easy, but necessary if we want to keep pace with the changing nature of software.

The happy path to temporal prototyping is knowing what is possible

It’s no longer enough to just show developers what you want the interface design to look like, you have to be able to show them how you intend it to work. To do that, though, you, the designer, have to know learn what is possible.

01. Learn the basics of the core technology your interface is developed in

For the Web, learn what HTML tags do, how CSS works, and the capabilities of JavaScript well enough so that you know what is simple to do and what may be a more complex temporal design task.

CSS now includes transitions, transformations, and animation, something that far too few designers are aware of, much less include in their design thinking. For native apps, learn the capabilities and possibilities of Objective C and Java and what you can do with those that you cannot do on the Web.

02. Learn a tool that helps you design with code

If you eventually learn to roll your own code, great! For most designers, though, looking at code is like trying to translate Latin into Greek. A good tool can’t make a poor designer better, but a bad tool can really bring them down. Right now, there are no killer apps for temporal prototyping, but there some up-and-coming contenders, like Adobe Edge Animate, Tumult Hype,Macaw and Principal Animate.

03. Learn how to manipulate a scripting framework

Once you understand how JavaScript works, you are ready to continue learning how to manipulate a JavaScript framework. A framework extends the capabilities you will have with Web UI, but also simplify the implementation of common dynamic tasks, making it easier for non-developers to do really cool things.

AngularJS from Google is one of the most commonly used, but there is a bit of a learning curve. If you want something easy to pick up, but more limited, I highly recommend UILang which uses natural language to allow simple but common interaction.

04. Learn what others are doing with interactive and temporal design

Although you can find some really cool ideas in Dribbble, these are generally not real working examples. A better place to look for temporal design examples are at CodePen.io. CodePen not only provides working examples, it also gives you the code you need to implement.

05. Learn to think about the space between

Once you understand what is possible, it is time to apply that knowledge. Temporal design happens in the spaces between that parts you plan. Your job as a temporal designer is to sweat these details. Nothing ever changes without reason, moves without purpose, or acts without motive.

Follow these guidelines, and you will increasingly find yourself not just as a designer, but a designer/storyteller.

Originally published in Creative Bloq.

Relaunching JasonSpeaking.com

I wrote a lot of articles in 2015, most of which I am very proud of, but I haven’t been keeping up with my blog very well. That’s all about to change. JasonSpeaking.com will be reposting the best of what I have posted elsewhere, along with new stuff I just want to talk about unfiltered.

I’ve spent the last few days retooling JasonSpeaking, taking an older design that was a bit ahead of its time, and retooling it for the modern age of experience design. That’s what you are looking at now (Assuming you are in a Web browser). I have redone the typography using Google Web Fonts (my old service is going out of business), and adjusting the pages for modern mobile devices. I’ve spent time balancing the typography, widths, and other factors, and think I have a simple but interesting design. Of course I will always be tinkering with it (that’s the nature of perfectionist designers) but I’m happy enough with what I have to put out this post.

In conjunction with my new business venture, Invisible Jet Studios (redesign of that site is ongoing), I’m excited to be starting a new chapter in my life, training, teaching, and talking about how to create effective experience design and the future of technology. Look for a new newsletter soon, along with more workshops and conference talks.

Speaking of which, if your company or organization is interested in having an informative yet entertaining talk, all you have to do is call (or email).

How to classify fonts for the web

There is a power in the ability to name things, and that’s no different when trying to name fonts. Although it will not make you a better designer, being able to call different type classes by their recognized names will always help you describe and choose the right typography for the job.

I’ve been struggling while doing research for my book The New Web Typography to better describe the fonts for designs, in order to better communicate the voice I want for the text. There are actually several different methods for classifying typefaces, none of them perfect, and none that are universally accepted.

Effects and styles

In addition to the type classifications, there are also a number of distinct effects or styles that are commonly applied to typefaces of all different classifications.

These are not specific classifications of fonts, but general styles that are often applied to any class of font. Think of these as adjectives that further describe the font. For example, a font class of transitional serif, might have the distressed and stencil styles applied to it, as with the font Armalite Rifle:

classify web fonts

Although there are many classifications for fonts, the one that matters in web design is the generic font family names as defined in the W3C CSS specification: serif, sans-serif, cursive, fantasy, and monospace.

The W3C system is terse, but it is how we actually refer to the fonts in our CSS code. These, then, are the basic classes I started with.

However, for descriptive purposes, these five classifications leave a lot out. To help better understand the many different styles, I’ve sub-divided each of those basic classifications into fifteen distinct sub-classes, based on the widely accept Vox-ATypI classification system (or Vox system) with a few modifications where it made more sense for web design.

It’s important to note that although these sub-classes are useful for describing your fonts, they are not ever used in code.

01. Serif

Serif fonts – as contrasted with sans serif fonts – include embellishments at the ends of the letter form strokes. Originally intended to resemble the pen strokes of scripted type, they are now used to help space and differentiate the glyphs especially at smaller sizes in print. Whether this works to improve readability is up for considerable debate, especially on screens where resolution is considerably lower than print, but serif fonts can certainly add to the voice of the typeface.

In print, serifs improve legibility by adding by adding more visual contrast between glyphs. However, on most screens – especially at smaller sizes (12px or below) – serifs can tend to blur the letter in lower resolution monitors, making them less distinct and less legible.

Old style

Old style typefaces are the oldest of the serif font typefaces, dating back to the mid-1400s soon after the invention of the printing press. Their differentiating characteristic form other serif fonts is the angled stress of the letters, most noticeable in the lower case e. Goudy Bookletter 1911 is an old style font:

classify web fonts


Transitional serif typefaces are the most common serifs in use today, with Times New Roman, Baskerville, and Georgia counted in their ranks. The contrast between thick and thin strokes is stronger than in old style, and they lack the pronounced slant of old style fonts. Baskerville is a transitional serif font:

classify web fonts


Modern typefaces – also called Neoclassical or Didone – have an extremely pronounced contrast between thick and thin strokes, a completely vertical stress and minimal brackets in their serifs (transition into serif). It is also common for these fonts to use ball shaped serifs at their terminals for added distinction. Didot is a modern serif font:

classify web fonts

Slab serif

Slab serif – also called Egyptian or Mechanistic serif – typefaces have almost no contrast in stroke widths with often heavy rectangular serifs with minimal or no bracketing. These fonts have become especially popular in Web design, especially for headlines, navigation and other text where clarity is important. Arvo is a slab serif font:

classify web fonts


Glyphic typefaces have minimal triangular shaped serifs, to the point that they are easily confuse with humanist sans serif type but could also arguably be classified as serif fonts given their slightly calligraphic nature. Albertus Medium is a glyphic serif font:

classify web fonts

02. Sans serif

Sans serif typefaces lack the flourishes of serifed typefaces and are generally clearer in appearance, although less distinctive in voice.


Grotesque sans serif typefaces have very little stroke weight contrast as compared to other serif and sans-serif fonts. Grotesque fonts include some of the most common typefaces in use: Arial, Helvetica, and Gotham. News Gothic is a grotesque sans serif font:

classify web fonts


Humanistic sans serif typefaces have greater stroke variation than the grotesque, and many designers will find them to be the most readable fonts. Gill Sans is a humanist sans serif font:

classify web fonts

Geometric sans serif

Geometric typefaces are use more basic shapes and angles in their designs. For example, the bowls of letter are generally more perfect circles or squared on a side. They are less useful for body copy, but often used for titles and intro text. Exo is a geometric sans serif font:

classify web fonts

03. Cursive

Most type systems would not include cursive as the major category, instead calling this script or calligraphic fonts. So, while cursive type implies a more formal handwritten font, we include the more calligraphic script style and more informal handwriting style.


Script typefaces – also called calligraphy – mimic ornate calligraphic writing, like one might see on a wedding invitation. Snell Roundhand is a common script font. England Hand DB is a cursive script font:

classify web fonts


Graphic typefaces – also called brush script – are less formal handwritten style than script, but still retains a brush or cursive like quality. Think of hand painted signs at a grocery store or in a garage. Knewave is a graphic cursive font:

classify web fonts

Classic Script

Classic script typefaces attempt to mimic the design of older calligraphic fonts, including Blackletter and Gaelic styles, which, arguably, could place them as cursive. However, their use is most commonly for display or decorative purposes rather than to mimic cursive lettering. Plain black is a cursive classic script:

classify web fonts


Handwriting – or hand drawn or casual script – typefaces mimc average human handwriting, either cursive, block letters, or a combination. Daniel is a cursive handwriting font:

classify web fonts

04. Fantasy

Fantasy is a catch all category for typefaces that do no readily fit into any other category. Generally, these fonts are extremely expressive, but usually only for display and unlikely to be useful for body text. That said, it is possible to classify something in Fantasy and other categories. For example, Airstrem could be classified as both cursive, but, because it is heavily influenced by 1950s style lettering is a better fit as a retro fantasy font.


Decorative typefaces – also called ornamental – is the most diverse and expressive category, where fonts are specially designed to have a strong visual voice. They are generally best used as a display font, and really work for body copy. Burnstown Dam is a decorative fantasy font:

classify web fonts


Retro typefaces are fonts meant to evoke the voice of a particular period, especially from the last few hundred years. Retro fonts are generally based on specific type-styles from the period. Airstream is a retro fantasy font:

classify web fonts

05. Monospace

Every monospace character is exactly the same width as other characters in the same font, allowing for consistency in spacing regardless of the exact glyphs used. A monospace font could really come from any of the other categories, but is distinguished by spacing rather than by style.

classify web fonts

What about Symbol Fonts?

Unlike other fonts, symbol fonts, also called dingbat fonts, do not contain alphabetic characters, numbers, and other typographic symbols. Instead, the fonts contain pictograms in their place. In other words, you wouldn’t use these to layout headlines and text, but instead you would use them in place of icons or to display simple diagrams and figures.

classify web fonts

CSS does not contain a generic font family for symbol fonts, and they have not been heavily utilized in web design until recently, where they are beginning to take on an increasing role for creating icon in web pages.

Type styles

These styles might, arguably push the fonts in question into the category of Fantasy, but I find it more useful when designing to use the classification system above and then use the following styles as adjectives to help further refine the fonts class description.


Distressed – also called rough or grunge style – text looks as if it has been weathered, eroded, crumpled up, torn, smudged, overly copied, or in some other way physically stressed or aged. Originally, this style developed when designers would literally perform those physical actions on the text, but overtime, many fonts have been developed to mimic that look.

classify web fonts


Although often confused with handwritten written, handdrawn fonts are meant to resemble serif, sans-serif, fantasy, script or monospace fonts that have been reproduced by tracing their outline by hand. This generally means the lines are slightly wavy and may simply be the outline of the character with negative space or shading within.

classify web fonts


Stencil fonts resemble text that has been created using a physical letter stencil, similar to what is often spray painted on boxes. Although typically combined with the distressed effect, you can have stencil fonts that are not distressed and distressed fonts that are not stenciled.

classify web fonts


Typewriter fonts resemble text banged out on a typewriter or daisy wheel printer. While these fonts are often monospaced, that is not a requirement.

classify web fonts


Pixel fonts resemble bitmap text that has been enlarged, such that the individual pixels become obvious. This is especially popular for games or where a low-tech voice is desired.

classify web fonts


Shaded fonts include a 3D shadow either behind or inside the character.

classify web fonts


The font is either only the outline or with a pronounced gap between the outline and the interior fill.

classify web fonts


All or most corners in the characters are rounded off, such that there are few, if any, hard angles.

classify web fonts


All or most curves in the font have been converted to angles.

classify web fonts

QuickPanel: Dyslexia from UX Magazine

Fonts like Dyslexie and OpenDeyslexic claim to have been designed with dyslexics in mind, mostly by weighting the bottom of glyphs heavier than the top. It’s thought that by constantly drawing the eye toward the baseline, dyslexic readers won’t wander or get distracted.

However, there is no evidence that these fonts improve readability for dyslexics. In fact, one study conducted by researchers at the Universitat Pompeu Fabra showed no improvement in readability at all for dyslexics using these fonts. Instead sans-serif fonts like Arial, Courier, Verdana, and Helvetica were most effective, although there is some question as to whether this was just due to familiarity.

There is more to typography than fonts, though. My suspicion is that better typography for dyslexia is also better typography for everybody. We see a general trend in web typography toward designs that focus the reader’s attention on the text. Consider sites such as Medium, which remove visual noise (sidebars, navigation) and use larger type sizes, contrasting type styles, and more white space—especially line height—all of which help dyslexics and the general reading population alike.

Read more: QuickPanel: Dyslexia | UX Magazine.

Harnessing the Value of UX from Jason Ulaszek

Jason Ulaszek is one of the most forward thinking people I know about user experience and it’s growing importance, not just in business, but to humanity. Here’s a recent presentation he gave at the Product, Customer, and User Experience Summit (16 June 2014). Look and learn.

Harnessing the Value of UX from Jason Ulaszek

You Can Help Do Some UX for Good

Originally posted in GeekDad »

UX for Good is an organization that brings user experience skills to bear on some of the most difficult social issues we face. For this year’s annual challenge, UX For Good be working with Aegis Trust, which established the Kigali Genocide Memorial on behalf of the Rwandan people in 2004. More than a museum or shrine, the memorial serves as the final resting place for 250,000 victims of the 1994 genocide.

You don’t have to be a social worker, diplomat, philanthropist, or other do-gooder to do good. The best way to affect change in the world is to apply your own skills to fixing the big gnarly problems the world faces. For user experience (UX for short) professionals, like myself, this means bring our skills at creating the best user interfaces to bear. But we are always strongest when we work as a group.

Since 2011, UX for Good has worked to empower designers to solve problems to make the world a better place. UX For Good has tackled some difficult problems over the years, such a raising awareness.

Previously, the challenge was to improve the income of working musicians in New Orleans Street Musicians increase their income. The designers’ answer was “Tip the Band,” a collection of tactics and tools to encourage and enable visitors to support musicians.

The problem this year is the biggest yet: Can we harness feelings to end geonocide? Like genocide memorials around the world, the Kigali Genocide Memorial site produces powerful feelings in all who visit it. UX designers have a unique capacity to understand the steps that take place between emotion and action. In Kigali, we’ll ask them to apply that skill set on behalf of all humankind.

As part of the Annual Challenge, UX designers from across the globe will visit Kigali for several days of exploration, research and debate. Then the team will reconvene in London, where they’ll design an original way to translate the feelings evoked by genocide memorials into sustainable action. Finally, they’ll share their findings to leaders from Aegis and other advocates for human dignity.

UX for Good has started the Kickstarter project: Harnessing Feelings to Prevent Genocide to share what we discover with the world. To generate as much impact as possible, they need your involvement, your support, and your commitment.

Contribute anything from $10 to $10000 dollars to help the team help the the Kigali Genocide Memorial raise awareness, and you can benefit, not only as a human being but as a UX professional as well. Sponsors will receive, virtual seminars, original posters, A full-color, hardcover book detailing the ideas that come out of the challenge, up to a day long workshop with UX For good professionals.

Springbrook High School Web Design Students

Just found this video of me speaking to a class of budding web design students at Spring Brook High School.

Thanks for a Great Time at WebVisions 2011!

I want to thank everyone who came to see me speak at WebVisions 2011 last week. I had a great time teaching the intricacies of web typography to the 35 people at my Wednesday session and talking about the ins and out of selling progressive enhancement to the around 200 people at my Thursday session.

If you were there, please take a few moments to rate my performance.

David Edwards Is Out of the Lab to Find Art in Science

There is a lot of lip-service given these days to the importance of innovation in our society. You often hear that we live in an “innovation economy,” or that we can innovate our way out of a crisis— implying that innovation is something that spontaneously happens with little or no effort. True innovation rarely comes so simply. It is most often the result of the intersecting of two or more seemingly separate and often disparate ideas (you got your chocolate in my peanut butter). We may be banking our future on innovation, but our educational system is not set up around innovation. No, you can’t teach innovation, but you can foster an environment of innovation while learning. Instead, disciplines are taught in independent silos called “classes” with little or no overlap.

David Edwards wants to change that. In his recent book The Lab, David explores the frontiers of learning to promote the theory that innovation comes when we worry less about the scientific “disciplines” involved and more about the desired outcome. In other words, figure out what you need to do and then what scientific tools you need to bring to bear on the problem to solve it.
David has a history of combining art and science in new ways both as a teacher at Harvard University and as founder and director of Le Laboratoire in Paris, France. For example, one of the most striking examples he gives is how he and a class of his solved the problem of being able to quickly and cleanly transport water for people in areas without running water. To create the device — called “The Pumpkin” — David and his students at Harvard combined biology and engineering to create a device inspired by the way in which living cells transport water.
A few other of his innovations include:

  • La Whaf — A way of “eating” by inhaling liquid droplets
  • La Whif — Breathable chocolate, coffee, and even vitamins.
  • Andrea — A system that uses plants to clean indoor air.

I had a chance to talk with David through email and ask him about education, art, science, and raising kids.
GeekDad: Science and art — like science and religion — are popularly shown as being at odds and incompatible— truth can’t be beautiful — but in your book, The Lab, you argue that laboratories have to erase “conventional boundaries between art and science.” Why are those boundaries a problem?

David Edwards: Obviously we value a work of art, a MET performance of The Nose of Shostakovich, very differently than we value a work of science, like the discovery of the latest Mersenne Prime, as valuable works of the human mind art and science appeal for different reasons. What interests me in the context of laboratories, a general term I give to environments that “curate” the creative process, is less, however, the “works” of art and science than the creative processes by which we get them, the one being aesthetic, comfortable with uncertainty and ambiguity, guided by images, true in that it is inalienable in some way from the human condition — the other being scientific, analytical, guided by equations, able to simplify a complex world to problems that can be solved, true in that it is reproducible.
GD: What would a world be like where the boundaries did not exist?
DE: These two processes, “art” in the sense that we imagine how Beethoven “lived” and thought and “science” in the sense that we imagine how Einstein “lived” and thought, actually merge in the creative process, and that fascinates me. In the process of discovery, whether with purely artistic, scientific, or some other ends, discoverers — how I think of creators — dream, and analyze, induce and deduce, are comfortable with uncertainty and are capable of reducing a complex world to resolvable problems and meaningful solutions. Creative lives are like this.

GD: So, what’s happening to the creatives in our society?
DE: With the specialization of knowledge, we now teach, learn, and perform within environments that are specialized to promote dreaming, or to promote analysis, or to promote questioning, or to promote solutions, but these environments are murderous to creative thought, a good reason why the most creative minds often flee institutional environments.
GD: Is the Internet helping to dissolve these boundaries?
DE: Perhaps largely as a result of the Internet Revolution, the “information providing” value of institutions has suddenly been overrun by the “innovation providing” value of institutions. And our institutions remain too focused on the old value model. The boundaries between art and science, as processes of creative thought, become a major obstacle to institutions and society adapting to the conditions of the 21st century. Remove these barriers and the anxiety many now feel facing a future that is so full of uncertainty will be replaced by the freedom a creator feels in a world where dreams can matter.

GD: How long do you think it will take our current mindset about creativity to change?
DE: I think it is indeed a transition that is taking place with the generation that is growing up today. We look at the young today and are shocked by what often seems to be an attention deficit problem. One thing however that strikes me in teaching at Harvard University is how young people, who have grown up surfing the Internet, moving in a matter of seconds from “recombinant RNA” to “Jackson Pollack,” don’t feel the same knowledge restrictions previous generations grew up with, actually recognize, experimentally, the great value of leaping from one culture to the next, feeling your way forward in innocence, discovering.
GD: Many seem to despair a culture where the novice and uninformed have the same access to many-to-many communication as the professional and studied. Do you see this as a problem, and how do you think we are dealing with it?
DE: I actually think that in the world we live in today we find the sources of information, the communities, which suit us, and, yes, I do agree that disastrously uninformed souls can influence millions, billions probably, but I’m not sure that the elite, the most educated and informed, ever had much more influence on human affairs than they do today. What has really changed is that we all, as individuals, have tremendously more outreach than we did. What we say – and do – is amplified. But the elite have always dialogued with the elite. What to do? Making innocence an asset, as it is for an infant, who learns so quickly, may be a goal, and guiding the elite toward more creating, along with the observing, might be another. I keep coming back to the contemporary power of the creative mind.

GD: For some, inventing new ways to carry water may seem like re-inventing the wheel, but you led a class that did just that over nachos and salsa at the Border Café in Harvard Square (I have to admit, I always found their Margaritas to be an excellent creative lubricant when I visited Boston). How did you bring science and design together to build a better, safer way to move water around?
DE: Getting drinkable water from its source to those in need of it without wasting it is a growing problem, of course. In biology the canonical transporter of water is the biological cell. We thought a few years ago that we might be able to learn from the cell to carry water more efficiently. This led eventually to an object that we’re making right now called The Pumpkin, because it sort of resembles a pumpkin when it is all curled up. The Pumpkin is, in one form, an interesting hand bag that doubles as a thermos. You can pull your lunch out of it like you can drink from it. But it also can expand in size, and carry increasing volumes of water, so that you can carry 10 or more liters of water strapped around your shoulder, or around your neck and torso. In developing world environments or disaster relief situations where water transport is a major challenge and head transport often occurs, The Pumpkin is designed to get lots of water safely to where it needs to go without messing up the neck and spinal cord, without making you drag something over tough terrain. Anyway the biological cell is a little like this — a lunch box that expands to carry lots of water or a little, depending on what you need.
GD: How have you been able to apply your own view of creativity to raising your children? Do you ever experiment ideas on them?
DE: My children — and I talk about them in my book — teach me more about creativity than I do them, I’m sure. If anything I may feel more peace than some in watching my three little boys learn in the rough and tumble way they learn. Yes, they were the first kids in the world who “whiffed” chocolate, the first kids probably who “ate bottles.” Since they are growing up in a very formal French school, I suppose having the father who comes home with Le Whif has marked them especially, hopefully an immunization against the worst outcome of a very fine if rigid educational system.

 Originally published in Wire GeekDad »

Envision Yourself at WebVisions

If you’ve ever wanted an in-depth crash course in web typography, here’s your chance. I’ll be presenting a half day marathon workshop at WebVisions in Portland this May to help you understand the NEW Web Typography. My workshop covers recent advances in technology and focuses on case studies that that provide a framework and techniques for successfully implementing online typography. Designers will see how they can use the new Web typography to set their work apart from the rest of the herd.

What you’ll learn:

  • How do I use Webfonts?
  • How do I find Webfonts?
  • How do I choose webfonts?
  • Where can I find inspiration for new Web typography techniques?
  • What are the technologies that have shaped the evolution of Web typography?

In addition to me, there’s other great stuff to do. WebVisions is a nationally recognized conference exploring the future of Web and mobile design, technology, user experience, and business strategy.

  • A great selection of workshops with me and others.
  • Keynotes by Douglas Rushkoff and David Armano.
  • Shorter, punchier sessions on the event’s Main Stage, and BarCamp style presentations in the Design, Tech, DIY and Business Pods.
  • Fun parties and networking events like the Stumptown 40, The Webvisionary Awards with Presentation Karaoke, A Meet the Speakers Mixer, and the famed wrap party.

Register before April 5th to get the Early Bird rates »

20 Tips for Surviving and Thriving SXSWi

SXSW 2011

South By Southwest (SXSW) is a little less than a week away, so time to get packing. SXSW Interactive (SXSWi) is the “techy” portion of SXSW—the others are Film and Music—and is one of the geekiest popular culture events this side of San Diego Comic-con. While there isn’t any cosplay and no one is likely to spit in your face if you tell them that Janeway was the greatest Star Fleet Captain of all time, SXSWi does attract the likes of Felicia Day, Devo and Bruce Sterling as regulars. It’s a mixture of art nerds, drama nerds and computer nerds, who are almost all focused on technology and culture.

This will be my 3rd year attending SXSW but my first as a non-speaker. In previous years I’ve given sessions on web typography and online comic books. This year I will be attending as a representative of my company, Forum One, and I will be able to sit back, relax and enjoy the sessions without the specter of an hour long speech hanging over my head.

While I’m by no means an old pro—this is the conference’s 25th anniversary—I have picked up a few nuggets of wisdom over the years that I would like to share with you.

NOTE: If you’re going to be at SXSW let me know and maybe we can get a GeekDad meet-up together.

Continue Reading “20 Tips for Surviving and Thriving SXSWi” on GeekDad »

Just What the Doctor Ordered

Doctor Who Inforgraphic © All rights reserved by bob canada

© All rights reserved by bob canada

The next season of Doctor Who is still a few months away, but there’s no time like the present to catch up on the good Doctor and his time traveling adventures with this handy-dandy Doctor Who infographic by noted illustrator Bob Canada. He did the layout and the illustration for the TARDIS all using Adobe InDesign, but ran into the same issue generations of Doctor Who illustrators have discovered:

I think this is the first time in my life I’ve ever drawn the TARDIS. It was surprisingly hard! It seems like it would be simple; after all it’s just a blue box with some windows. But there are tons of little details and recessed panels and whatnot, and it took forever to get it all straight.

You can download a hi-res version of the poster (1800 × 2700) on Flickr.

Adding Transparencies and Gradients With CSS

24 Ways

24 Ways

The way you handle color in your web designs is about to change. Perhaps you’ve been playing around with hexadecimal color values since you were a wee web-babe; if you were, get ready to to grow up fast. CSS3 has arrived, and your palette is about to get a whole lot bigger.

Compared to what’s coming, it’s sas though designers have been color-blind, working with only a small part of the chromatic spectrum. No, new hues will not be added to the rainbow.

What will happen is that color values will be defined in new ways, the entire spectrum of opacity levels will be added and gradients based on pure CSS rather than images will be thrown in, too.

Some forward-thinking websites, such as the impressive 24 Ways to Impress Your Friends, are already playing around with RGBa for text and background color effects—and the results are great.

Read the full article on Webdesigner Depot »

Web Designers VS Web Developers

Some one sent me this insanely funny info graphic on Web Designers VS Web Developers. It reminds me of the series of articles I did for Webdesigner Depot: 5 Pet Peeves Designers Have With Developers (and How to Avoid Them … and the sequel 5 Pet Peeves Developers Have With Designers (and How to Avoid Them …

free website builder

Web Designers vs Web Developers is brought to you by Wix.com
Use creative design to make a Free Website
You are most welcome to share this infographic with your audience.

10 Geeky Web Tricks with HTML5 and CSS3

It’s a glorious time to be a web geek! Did you see the cool effect the folks at Google added to their logo the day before they made their big announcement about changes to the perennial search engine? It’s gone now, but for a brief period when you moused over the logo, it flew apart in colorful blobs avoiding your mouse.

To most people’s surprise (OK, maybe only to most web geeks’ surprise), this interactivity was not created with Adobe Flash, but instead using the most recent versions of common Web technologies. It’s likely that you’ve already benefited from these new Web technologies: HTML5 and CSS3. They are already popping up all over the place, despite the fact that they are not supported in the most popular browser, Internet Explorer <insert dramatic pause here> at least not until today!

That’s right, the next version of Internet Explorer version 9 will support HTML5 and CSS3 and that version will be released today 15 September as a public beta!!

And there was much rejoicing!!!

Our long nightmare is finally over. Now everyone will be using a modern browser and Web designers can finally do really cool things without Flash. Ok, maybe I’m being premature — it’ll take a while before everyone is upgraded — but a guy can dream, can’t he?

The great thing about any ground breaking technology is all of the cool experiments that get thrown together. The early adopters are less worried about finding practical applications and more interested in just playing around to create new toys. Let’s play with a few today!

Below is a list of my favorite 10 new Web toys. Of course you will need a modern browser — Safari 5 or Chrome 6 are usually best, but Firefox 3.6 will work for a lot of them. If you are running Windows — and are very brave person — you should go download Internet Explorer 9 right now and test these toys out. Let me know in the comments if all of them are working for you in your browser of choice.

Continue Reading “10 Geeky Web Tricks with HTML5 and CSS3″ on GeekDad»

via GeekDad.

Headed to Web Directions USA

The Web typography road show is heading to the southern USofA for the Web Directions USA Conference. Oddly enough, the conference was originally to be called Web Directions North, as a follow up to Web Directions in South, which is held in Australia. Someone must have pointed out to the organizers that any event with the word “North” in the title was not likely to draw a huge audience in Georgia.

Web Directions USA

A lot has been happening this years, and—now that I’ve finished my new book on CSS3—I’m turning my full attention back to Web typography. I’ve retooled and reworked my 2010: The Year of Web Typography presentation, expanding and enhancing information about Webfont service bureaus,and refining the slide layout and color scheme to make them a lot easier to read on those big brother style projectors we use to show our slides.

Web Directions USA isn’t free, but you can save a bunch of money using my discount code to get $100 off the ticket price. Just go to the Web Directions registration page and enter the discount code WDUSA-JCT.

But that’s not all! The day after the conference (Saturday) there will be a hack day event called Amped. I’ll be on hand to give 1:1 Web typography and CSS3 advice all day long:

Amped is the Hackday, reloaded, brought to you by Web Directions, happening in Atlanta this September 25. We’ve taken the traditional hack day, pulled it apart, thought long and hard about what’s great, what’s not so great, and how as many different kinds of web folks can come together for one intense 10 hour period of hacking, designing and making amazing things.
So come on out and say hello. See you in Atlanta.

Vote For Me to Speak @SxSW

I want to spread the good word of Web typography again to the fine folks attending South By South West (SxSW) at the 2011 event, but I need your help. The first round of selection is (literarily) a popularity contest based on a thumbs up or down by the public at large.

I’m proposing a session on Web typography (surprise, surprise), recapping the basic technologies, but then examining directions those new technologies are taking us. Here’s a bit from the intro:

As the dust settles from these changes, a new style of Web typography is emerging, one that reflects print origins, but is also experimenting with the unique strengths of online communication. This session begins by recapping recent advances in technology and then focuses on case studies at the borders of online typography. Designers will see how they can use the new Web typography to set their work apart from the rest of the herd.

All you have to do to help me out is give my session on Web typography the thumbs up. You will have to register (don’t worry, it’s painless) and that’s it! And if you could leave a comment at the bottom of the ballot, I would be ever so grateful.

While you are there, I can also recommend a few other great panels to vote for:

Voting ends 11:59 CDT on Friday, August 27.

So, run, don’t walk to the SxSW Panel Picker and choose the best.

CSS Summit Contest Winners

Thanks to everyone who participated. Altogether, there were 75 entries, but there can be only 2.

And the winners are… @mthie and @sn0flke.

Let’s have a big round of applause for our contestants.

Of course, it’s not too late to get in one the CSS Summit goodness, learning from the top names in the industry. Register now for the low, low price of $149, and—if you act now—you can get a 10% (~$15) discount using the code CSSCRANFORDTEAGUE. You can also use the discount to get a meeting room ticket, getting 10% off the $449 price (~$45).

I hope to “see” you there.

CSS Summit