I am constantly amazed at how many designers and would-be-designers I meet who stare at me blankly when I ask the simple question, “Can you send me the link to your design portfolio?”
I often get the halting response, “Uh, I have my resumé.” A little secret here: I don’t really care about your resumé. I don’t want to read about your work, I want to see it for myself. Kick the tyres, if you will. Take it for a test drive. And I’m not alone.
Your portfolio may have many different and varied audiences looking at it. While it would be nice to think that everyone in the world is interested in who you are and what you are doing, in all likelihood, you can break down the primary audiences for your portfolio into one of five distinct categories.
If you are looking to get a design job in an agency or in-house design shop, then you are looking to appeal to people who want to hire you for a job. Your first hurdle is getting past the HR apparatus of the company, which can be problematic.
HR managers often have little or no design experience, and may only look at the resume, checking off a few boxes on their list (MS Word: check, Adobe Photoshop: check… hmmm, no mention of Windows NT experience? REJECTED!) and never go beyond that.
Once past that formidable barrier, though, the hiring manager is usually a creative director or similar design manager. They generally assume that you made it this far because you met all of the low-hanging fruit requirements and all they want to know is one thing: can you design great user experiences?
For potential employers, your portfolio mission is simple: show them your work, explain your process including any deliverables used in the creation, and don’t take credit for more than what you did on a project. Nothing turns off a prospective employer faster than sensing that the designer in question is overstating their role in a project.
If you are looking to pick up freelance work, you need to target potential clients. Like hiring managers, clients are going to be more interested in seeing what you offer, but unlike a hiring manager, clients will often have little or no design training themselves. So, your portfolio will need to do more than sell the quality of your work, but also the value of the services you can provide.
We live in an increasingly competitive industry, where websites are being designed by AI or cobbled from a template more cost effectively than hiring a real human designer. Your job is to show them why the human touch will give them the biggest bang for their buck.
For clients, the mission of your portfolio is to delight them with the possibilities of what you can give them. But be careful not to over-promise: It’s easy to lead clients to believe that they can get a Maserati website, which can be a huge problem if they only have a Yugo budget. Most likely clients will not know the efforts or cost involved.
03. Other designers
We all like to be appreciated by our peers and your portfolio is your chance to strut your stuff. These might just be other interested designers looking for some inspiration, but they also might be designers wanting to consider highlighting your work in an article, book, or even considering your work for an award.
For other designers, your mission is to allow them to see the breadth of your work as quickly as possible.
04. Your boss
While we often don’t think of having to apply for a job with our current company, it’s still important to keep up a current portfolio when it comes to yearly reviews. Often the enterprise applications used to evaluate performance are pretty awful, and do not allow creatives the opportunity to really shine. You need to create your own platform to show off what you are capable of in order to get that big promotion and raise.
With this version of your portfolio, your boss should already know what you did and how you did it. Your job is to remind them of the highlights, the successes, and the struggles you overcame while working.
05. Your organization
If you are an in-house designer — increasingly common these days — then your portfolio may need to be able to sell your capabilities internally. Although I often see design team portfolios created, your personal portfolio might have to serve to keep others in your organization impressed with what you are capable.
For internal portfolios, like with client portfolios, the emphasis is on delighting them with the possibilities without over-promising. You want to manage and expand their expectations and get them to start thinking progressively.
When I’m thinking about hiring you for a web design or development job, I don’t care where you went to school, what your GPA was, or even what skills you say you have. I don’t even really care that much about where you have been working the past few years. What I care about is seeing what you have done, i.e. your portfolio.
Whether it’s a resume sent to me by HR, an email from a friend, or a business card handed to me at a conference, I immediately look for that URL which will show me your body of work.
Oh, I may go back and glance at those other things after looking through your portfolio, but if you don’t grab me with your portfolio, then I’ll move on to the next candidate without so much as a backwards glance.
The kitchen sink approach will not work with your portfolio. You have to carefully consider what goes into your portfolio and the message you are giving. Your portfolio is susceptible to all of the same design considerations as any information based website, and you need to consider your content strategy very carefully.
01. Only the best will do
Bring your A-game material only. You want the viewer to come away as impressed as possible with everything you show them. This means dropping any projects that are not presenting your skills in the best light possible.
It takes less than a second for people to make up their minds about whether they like what they are experiencing, and that’s how long you have to grab your viewer. This means that you want show the best parts of what you do immediately. If what you are showing is an extensive user interface, focus on the visually interesting pieces up front, slowly revealing the bits that are possibly more technically difficult after you have their attention.
02. Less is more
Along with #1, quality beats quantity every time. In fact, even if you have fifty A-level projects, focus on the top five to eight, with the others being included only as back-up. Overwhelming your audience with too many choices can turn them off more quickly than too little work (TL;DR = Too Long; Didn’t Read).
Whoever is looking at your portfolio is likely looking at many other portfolios; try to respect their time and show them the important stuff up front to get their attention. If they want to delve deeper into your oeuvre, give them access, but let them make the choice rather than forcing them to weed through everything.
03. It’s Alive, ALIVE!
Several of the best projects I have created were “blue sky” ideas that never got built. They were cool. They were innovative. They are not in my portfolio. Saying, “We did this cool thing and it never saw the light of day,” always sounds really lame no matter how you phrase it.
You can include projects that have been subsequently replaced by newer work, but these should come further down in your list, and are best if you can at least show a working demo version.
04. Explain your work, but don’t embellish
It’s not enough just to show your pretty work, you need to explain your role in the project. Unless you are a UX team of one, it’s likely that you worked on some of the samples in your portfolio with others. Take the time to explain your role in the project, what you contributed, and how you made things better.
Don’t embellish, because you will probably have to elaborate later during the interview. If the person interviewing you detects hyperbole, they’ll drop you like a hot potato. Just be honest, and you’ll be fine.
05. Tell Your Story
It’s easy enough to put together a lot of unrelated work samples with explanations and let them go, but the most effective portfolios will tell your story, how you have developed, what you have learned, and how you are a better designer today than yesterday. This is not an easy task.
Telling your story requires you to think carefully about numbers one, two and three to get the right balance and explanations in place. The best portfolios, in fact, will weave the presented work into an overall narrative, using each piece to support larger points, inverting the typical project based portfolio structure.
This means you will have to think a bit more about the structure of your portfolio site, but it will be worth it.
Your portfolio is the key to any design job. If you don’t have one, then you need not bother to apply. You can have all of the fancy schooling, you can know the entire Adobe Creative Cloud product line like your own family, and you may have worked at Ogilvy while moonlighting at Frog, but if you do not show me your design thinking process, you might as well go into chartered accountancy.
When I was a young design student in art school, I got my first lesson in how important portfolio presentation is for winning the day. I had been taking classes in 2D design, and getting mostly As with the occasional B+, but I was looking at an A for the semester. It all hinged on my final portfolio grade. But, since I thought that this was just a matter of me turning my work from the previous few months in a case, I was sure that my grade was in the bag. Boy, was I wrong.
I went to check out the final grade posting and was gobsmacked to see a B− next to my name. How could this be, I’d never even gotten a grade below B+ the whole semester. In shock, I went to my teacher – who I was on friendly terms with–and asked what had happened. She told me that, yes, the work had all been A-level, but my portfolio was sloppy. It was unorganized with dog-eared pages that were difficult to flip through. Many of the sketches in pastel had not been spray fixed and nothing was mounted. For this, she had knocked me down an entire grade level for the semester.
This was the most important design lesson in my life. Showing up is not enough. You also have to look good.
For web designers, we no longer have to worry about spray mounting and dog eared pages, but we do have to show our work in a compelling manner that not only represents the work we have done, but the work we are capable of.
01. Be the master of your own domain
I am almost immediately suspicious of any designer without their own unique URL. Call it snobbishness or call it high-standards, a designer without their own unique URL seems less professional to me. Not that I won’t look at someone’s site if they are only using a portfolio service (see below), they just go down a bit in my estimation.
And having your own domain name is not that difficult or expensive. You can easily register with a domain service, or even, more conveniently, through WordPress. And if you are not a developer, then you can choose a theme to customize with your own design aesthetic.
02. Keep it fresh
Once you have your own domain and have set up a presence on portfolio web sites sites, don’t let them go stale. I’ve passed over more than one perspective employee because their portfolio was more than 3 years out of date.
Plan to check in at least once a year on portfolio web sites to keep everything up-to-date. For your own domain, you should update as often as you can to add new and better projects.
03. Be everywhere you need to be
Although I highly recommend keeping a customized web site that shows off your skills as an interactive designer, you also need to maintain a presence on the most trafficked portfolio Web sites like Bēhance, Dribble, and even LinkedIn. LinkedIn may not be a true portfolio site, but it is a place a lot of people begin looking, and you can include things like videos and slide presentations.
The fact is, a lot of employers troll these sites looking for their future Don Drapers and Peggy Olsons. Your personal domain alone may not be so easy to find. You need to maintain some kind of presence in these places to make sure you are seen. But always make sure to have a prominent link on these sites back to your main portfolio.
04. Sweet Sweat the details
As my little parable of a good class gone wrong illustrates, people notice the little things. I am dysgraphic, a condition that means I have a really hard time spotting typos and spelling mistakes. I always have an editor (often my wife) look over my work, so that I can avoid errors which would make me look bad.
Even if you don’t have a learning disability like me, it never hurts to have a second (or even third or fourth) pair of eyes look over your portfolio for mistakes or point out problems. They’ll be forgiving and tell you what to fix. An employer will just move on to the next portfolio.
Design is often seen as a ‘soft skill’ that is about an opinion of aesthetics, not hard rules, much less the rigorous logic of code. Yet designers work for years perfecting a craft, not just spouting uninformed ideas. However, being able to explain and articulate the ‘method behind the design madness’ is not always easy, and rarely quick, which leads to numerous project frustrations. Fortunately, there is usually a way to defuse the tension.
01. I designed it that way for a reason
The Problem: The designer spends weeks creating meticulously crafted visual comps and spec documents, only to have them seemingly ignored by the developer. Beyond ignoring the specifications, some developers simply allow the browser defaults to stand without change if they are not explicitly stipulated in documentation, not just shown in visual comps.
The designer assumes that the developer will look closely at the comps and try to make them match ‘pixel-perfect’. However, this generally leads to interfaces that feel cramped or poorly organized, despite the best efforts of the designers.
The Solution: Designers should assume nothing, and know that documentation is never enough. A good design guide is the first step toward eliminating this problem, but designers also need to work side-by-side with the developers, regularly reviewing their work to ensure it’s what is intended in a design acceptance review when the developer feels comfortable with what they have done.
02. MVP!?!? It’s all MVP!
The Problem: The developer has a finite amount of time to create the end product, even less for each sprint, so they will prioritize features and functionality based on the ‘minimum viable product’ that will meet the product specifications. Most designers, though, view the product as an integrated whole, not a series of interlocking components. But the MVP is often not defined until the development phase, so it can feel more like developers are making the decisions based on their schedule needs rather than user and product needs.
The Solution: The MVP needs to be defined during the initial phases of the product, and truly be the minimum viable product, not just the easiest to make, for different development phases/sprints. Designers can work to create a product that is built-up in stages, rather than completed all at once. This should also make it easier for developers to plan accordingly.
03. This will take how long?!?!?
The Problem: The designer has spent months planning, researching, and creating designs to meet the user needs, only to be told that it will take much longer than expected due to conflicting project schedules, staff shortages, and the dreaded scope creep.
The Solution: One of the facts of any UI development project is that development comes last, and is generally squeezed in time by the steps before (I have never known the discover, define, or design phases to go faster than planned to give development more time).
One way around this is through Agile coupled with Lean UX to allow development in parallel with design, allowing the developers to get started before the design is completely locked down. This approach is not without risks (design may need to be reconsidered) but generally leads to faster output and happier project managers. And really, isn’t that what we all want?
04. What do you mean “I can’t do that!”?
The Problem: The designer has created a really cool experience, but the developer takes one look at it and proclaims, “That’ll never work.” One reason developers might not be able to do something is because it cannot be done, but more often than not it’s one of two other reasons: 1) it would take too long, longer than the project has, or 2) the developer just doesn’t know how to it.
The Solution: If it can’t be done, it can’t be done, and the designer needs to rethink the solution. If it will just take too long, then the team needs to decide whether to scale back or take the time needed. But, if the developer just doesn’t know how to make it work, the designer will need to show them examples of places where the desired technique is working. I find that CodePen.io is my best go to place when I need to show ‘existing art’ to my developers.
05. Usability testing is NOT optional
The Problem: For many developers ‘usability’ means that it works as defined by the requirements. If designers want to test anything, they should do that before the developer spends long hours building the UI to specs. However, only so much usability testing can be performed with paper and clickable prototypes. Often, the most effective usability testing is done during development.
The Solution: Plan usability testing spikes into any Agile project with iterations that feedback into the development of the product.
06. They are telling me how to design again!
The Problem: A developer reads one article on usability by Jakob Nielsen, and suddenly they are a usability and design expert. Designers spend years developing their abilities, knowledge, and aptitude. One problem is that, because everybody has an ‘opinion’ about design (informed or not) in some projects – especially where there may be a UX team of one – their voice is often drowned out.
The Solution: This is not an easy problem to solve, as it has more to do with interpersonal and group dynamics than it does with actual logic and reason. The best way I have found to deal with these situations is to simply listen without getting defensive. Let them have their say and consider what they say.
Does what they have to say have merit? Let them know, and then explain why you chose to go the path you did, acknowledging even that you are disagreeing with existing ‘best practices’ as prescribed elsewhere. Often developers want to just feel as if the designer is simply listening to them.
I’ve outlined the six frustrations that I commonly see designers having with developers, and previously detailed the six frustrations developers have with designers. What’s your take on this, and can you add to the list? Please suggest solutions in the comments below for us all to benefit from your experience.
Screens are not static display devices. Unlike printed pages, they can change, act, react, and transform themselves within the limitations of their two dimensional spaces. The web originated as a way to present textual articles, but has evolved far past that now.
Temporal design means thinking of not only visual and interactive but change, progression, control and context to designs – something lacking in most ‘interactive’ design we see today.
The problem is that many designers still embrace static methods of planning and executing their ideas. It’s not really their fault – at least not until recently – because they were used to the static confines of the printed page and then the severe limitations of maintaining backwards compatibility with legacy browsers. So, too many digital interface were inherently static by design to meet the medium.
It is time to change that, but it will take a fundamental change in the way in which we approach experience design.
The good news is that not only is this change is already well underway, there is plenty of ‘existing art’ (literally) in other mediums that will help experience designers along the path. Comic strips and comic books have been around well over a century now, but sequential art has been around for all of recorded history. In fact it is the first way humans recorded history, and they idea of showing a narrative through visuals is that the core of needing to communicate.
Early films also mimicked the style of the prevailing medium at the time: theatre. Moving pictures were staged with single fixed points for an entire scene, often simply filming the same stage direction as the play. In other words, static. Filmmakers quickly learned that they could do so much more with multiple camera angles, close ups, scene transitions to name only a few techniques. What they really learned, though, was that they could play with space and time in a way that was impossible on the stage.
The State of Experience Design
Where we stand now as digital interface designers is not so different from where early cinematographers found themselves. We have been trying to use the style of the printed page, imposing its limitations on our new medium creating a static. The now all but defunct Flash technology allowed us to take some halting steps towards temporal design, incorporating video, transitions, narrative, and even limited self-determination for the actors.
(I’m trying to move away from calling the people who work with our products users or customers with the implication of passivity or (worse) addiction those words connote. I have sought a better term for over a decade now, and finally realized that what we should call them – and how we should think of them – is as actors. You may also notice that I no longer refer to User Experience design or User Interface design, preferring simply Experience design and Digital Interface design. Won’t you join me?)
That’s why parallax and other movement design tricks have been so popular of late. Finally someone started moving things around on the page in a somewhat realistic manner, providing visual interest and motion queue. Yes, there’s some backlash now. Parallax was pretty much a one-trick pony, giving the illusion of flow while providing very little extra information.
The traits of temporal design thinking
Temporal design is beyond the cliched ‘interactive’ which has been diluted to such an extent that it has little meaning anymore. Instead, what actors are expecting is something much more immersive and naturalistic.
Here are the five layers of temporal design thinking for experience design.
01. Keep context
Temporal experience design respects the actor’s context in time. Your design should proved messaging that change depending on the time of day and, potentially even the visual and interactive design based patterns in use through the course of a day.
02. Give a narrative
Temporal experience design reveals its own self-consistent story to the actor. Digital interfaces should not feel like discreet chunks lumped together, but need to provide an overarching context as well as the specific context. This can also mean the actors place within the interface or within a specific process.
03. Make it unfold
Temporal experience design has a natural flow that unfolds around the actor as they move through it. As new information becomes available, the actor should feel as if it is increasingly pertinent to what they have already experienced, not unlike putting together clues in a murder mystery building on and adding to the previous experienced contexts.
04. Show transitions
Temporal experience design moves smoothly but clearly from one moment to the next, preventing change blindness. As elements change, actors can clearly see those changes over time, rather than sudden or jumpy changes.
05. Provide agency
Temporal experience design empowers the actor to find their own path through their own self-determined actions. This is key to turning someone from an interface user into an interface actor – giving them maximum control over the environment. This attribute has the furthest to go for temporal design. Currently, we treat digital interface as at best a ‘Choose Your Own adventure’ with two or three options. In the future, interfaces will need to live more like open environments than a two lane high-way.
Where do we go from here?
This article is just a brief overview of the direction experience design has to move into, kept intentionally short to avoid the TL;DR associated with static design (yes, this article is a prime example of static design). So, I need to eat my own spinach and figure out how to communicate more effectively using temporal design.
Here are three things you can do to help me out:
Share great examples with me have the traits of temporal design.
I’ve shared a few in this article, but there is so much great stuff going on out there, I can’t possibly see it all.
Help me find better tools for creating temporal designs.
I’m constantly on the prowl for better tools to help designers think bout temporal design.
Share your own experiences moving from static design thinking to temporal design thinking.
Are you working on designs that are more temporal in nature? Let me know.
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.
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.
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?
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.
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.
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
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
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.
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).
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:
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.
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 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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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.
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.
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.
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.
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.
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.
Typewriter fonts resemble text banged out on a typewriter or daisy wheel printer. While these fonts are often monospaced, that is not a requirement.
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.
Shaded fonts include a 3D shadow either behind or inside the character.
The font is either only the outline or with a pronounced gap between the outline and the interior fill.
All or most corners in the characters are rounded off, such that there are few, if any, hard angles.
All or most curves in the font have been converted to angles.
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.
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.
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.
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.
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.
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.
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.
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.
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.