Hi Chris,
As with all interesting questions, the answer is "it depends" :-)
At the core, all you need to render badges like the ones you've highlighted is a way to count the "things" that are being displayed (messages, notifications, chickens crossing the road - it doesn't matter). Pass that number to a template, and it's just a HTML rendering issue.
However, the complications comes with when you want those numbers to update.
If you just want the number to update every time you load a new page, that's easy. Put the calculation in a template context manager, put the rendering code in the header for your base page template, and every time a page is rendered, the badges will be drawn with the count that is accurate at the time the page was loaded.
However, if you want someone who is sitting on a page and *not* reloading to get a "ping" when a new message/notification arrives - that's harder. There are a number of approaches you could use here, at varying levels of technical complexity - ranging from polling to web sockets.
Being frank - if you're in a position where you need to ask this question, you probably want to keep it simple, and stick to the 'only update on reload' approach. Over time, as you get more confident, you can transition to a more complex "live" update strategy.
You also may want to give some thought to the volume of traffic you're intending to serve, and the frequency with which notifications and messages will be sent. If you're going to be serving a lot of traffic, evaluating the count will become a performance consideration. A simple database Messages.objects.filter(user=current_user).count() will obviously work, but if you're dealing with a high traffic situation, you might want to consider looking at memcache to reduce database traffic, or something like Redis to move the counting logic out of your database entirely.
I hope that helps.
Yours,
Russ Magee %-)