Designing Digital Badges

The idea of designing a digital badge should be daunting. Much like how there’s a lot of discussion that web design is too complicated now (with front-end specialists. back-end specialists, UI, UX, branding, Javascript rockstars, and so on), designing a badge is a complex task. With a learning outcome, it’s fairly straight forward, you gather together a couple of sentences that express what you hope the learner to accomplish in a period of time. I’m drastically simplifying the writing of a learning outcome, because there’s great nuance in a truly well-written one. And there’s lots of ambiguity in poorly written ones…

With that said, badges are much like a learning outcome, plus all these other, sometimes complex, visual ideas that can entirely sabotage your badge before anyone has earned it. Is the badge ugly to the one who might earn it? They’re unlikely to be motivated and it could turn them off learning in your context.

With all that said I’m not a design expert, but I have bookmarked quite a few sites that give differing opinions on what a shape, color, design or visual idea might mean. If you’ve studies semiotics, you’ll fully understand that this is really a brief and cursory view of a deep and nuanced subject. If you’re a visual designer, you’ll really understand that there’s a lot for people to dig into with building a badge. This is just a taste to get your palate satiated, just a start to get the creative ideas flowing…

Understanding Shapes Better

Understanding Colour Better

Online Badge Design Kits

Badge Design Worksheets

Free Icons



Usability and Images

Been thinking about online communities a lot the last few days – specifically thinking about what makes a successful community, and the aesthetics of the online environment that the community flourishes in. Take Facebook – probably the most successful online community website going. Now, one can argue that Facebook’s design aesthetic is to get out of the way of the community’s relationships… but perhaps it’s not the design aesthetic at all. Maybe the aesthetic is irrelevant when the content is overwhelmingly useful to the end user. Previously, I and many other web designers had tried to ensure that if, as a designer, you wanted to build a website that encouraged community, that pictures of people should be there to enhance the connection users have to the site and to each other. Yesterday in a meeting I suggested that one “had to have pictures of people” in the header of a website, in that it helped humanize the experience. My hypothesis is that without those pictures, the experience becomes too sterile. The counter argument a colleague brought up was that a 2-D representation of a person does not mean that people feel more at home or in a community.

Then why do designers use pictures of people so often as a short cut to engage people? Is it because it’s easy and a cue to users that people (of a certain stripe) are welcome here? Anyone have any studies that have looked at images of people and the user’s effect?

Aesthetics and Community

So to continue this train of thought, I was watching this digital rough cut of an interview with Howard Rheingold. In it Howard makes a few statements about digital communities, groups and nation-states that appeal to me. Particularly this statement:

In fact when I first started travelling about this was erm during a brief period when I worked for Wired Magazine, I had a little wired hat on.  It didn’t matter whether they spoke English or not, there were people who identified more with me than with they’re neighbours, with they’re parents, with they’re peers, erm even though we may not have even spoken the same language, they knew UNIX, they knew Photo Shop, they knew communicating on line.

That resonated with me for a bit. Earlier Howard mentioned his sense of dress as well, and how it can be offputting for some people. Now I don’t want this to come off as a love letter for Howard, I would think that his dress is what made me interested in him. He was confident in himself enough to put himself out there, and that confidence and uniqueness speaks to me as a person. In the same way that Howard’s way of dressing (through his Wired hat or colorful jackets) made an impression on people and acted as an attractor or repellent, the aesthetics of online spaces will do the same thing. So is it important that online spaces be as aesthetically neutral as possible?

No. There is no neutral. Think about color for a moment. White background color has a different context depending on culture – your actions will be unable to alter those cultural reaction. So you have to rely on your own aesthetic choices and make sure they reflect you as much as possible. I think the individual need to express this is what will begin to differentiate institutions from one another. We’re already seeing this in higher education where certain lecturers are the “top free agents”. I’m sure sometime in the future, as online learning becomes more prevalent, we will begin to see the better learning designers, and by that I mean aesthetically and pedagogically, become more important.

Howard makes some mention of what makes a community later on, and in my interpretation it comes down to a like-minded group – some sort of connection occurs between all the parties. It could be worldview, it could be musical tastes. In web design, we recognized that a certain consumer expects a certain level of design. For instance, an opera house website would be rejected if it wasn’t sufficiently “high class”. You wouldn’t see a graffiti font on the opera house website. These groups have an aesthetic identifier as well, it’s an external clue, part of that first impression decision making process.

So thank you Howard for helping me make the connections from this video!