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



10 Pages For Composition Education

I’ve decided that I’d be totally remiss if I didn’t try to compile some sort of list of resources. So here they are (in no specific order):

1. Composition and the Elements of Visual Design is a well written article giving some basics around different techniques for composing photographs, but these techniques extend to document and website design as well.

2. The Principles of Design discusses several key issues in web design, and how those issues are echoed in print design. Pulling from the classics (balance, rhythm, proportion, dominance and unity), this article gives you a good overview of web design.

3. Composition and Design Principles from Goshen College is an interesting case – I nearly didn’t put it in the list because it’s an atrocious website (for instance, I’m not fond of mixing serif and sans-serif fonts on the same page for body text), but the information is great. As Google is fond of saying, “content is king”. It’s primarily targeted at people who might be teaching art, but my audience being mostly educators, so you should be able to relate. Also, you can sometimes learn from what not to do, which brings us to the next site.

4. 5 Common Visual Design Mistakes outlines some basic errors that designers make. Of course, rules are made to be broken, but when you are trying to communicate a message you need to ensure that  rule breaking is consistent with the message.

5. Principles of Design from is a decent tutorial with examples and questions to cover the basics of design.

6. IBM’s Design Principles Checklist gives you 17 aspects of visual design that they intend to use in software design, but I think they translate to the web and page as well. To me, the last point is critical; cluttered design is one that will only confuse and distract from the content.

7. The Artist’s Toolkit provides a quick tour through the elements and principles of art, which also are applied in design and user experiences. After all isn’t what we experience with art a “user” experience?

8. Art, Design and Visual Thinking is an interactive textbook from Cornell University. Well, it’s interactive if you consider clicking on links an interaction (also the design is dated). This online book is tailored more to the art student, but the first few sections are an excellent and go into areas that other suggested sites don’t cover. Gestalt? Color psychology? Important concepts, but often glossed over or overlooked in primers on design. This site will give you language to dive deeper into an area of design that interests you.

9. Design Psychology is a blog article I’ve referred to a couple of times over the last year or so, as a lot of what I do is web design dressed up as e-learning. While Andy Rutledge appeals to the commercial designer, the message shouldn’t be lost on educators. Educators are competing with commerce for attention, while we have content down pat (in fact content coming out our ears!) we may not design things in such a way as to hold attention or keep it. This post is a touchstone for me, essentially re-centering me when I’m far out in left field.

10. Aslam Memon’s Blog has 45 blogs and twitterers that provide design inspiration. That’s the biggest piece of composition education, looking at and analyzing designs you like, and seeing what was done to create them.