Web Technology Badge Design

    I was looking for badges of current web technologies to use in a presentation. While searching, I found a design approach for an “Responsive Web Design” Logo and liked the general idea. Since I found the execution a bit sloppy I came up with a slight rework an gathered them all in a downloadable PSD.

    Web Technology Badges Reworked

    Web Technology Badge Design

    Download the PSD here…

    Background Story

    I found this initial approach by Tiffany May that was similar to the current HTML5 and CSS3 badge-like logos.

    I liked the basic idea but wasn’t happy with a few stylistic details of the badge that Tiffany provided highlighted in the following image.

    Issues with existing RWD badge Image: Issues with the initial logo (original can be found here).

    Browsing a bit further I also found that some people tried themselves on similar badges, but for JavaScript.

    JS Logo designs found while browsing

    Image: Some JS logo approaches - where the first is a widely known unofficial logo (source: google image search).

    I followed the inspiring mood and came up with this set of bages. They were strongly inspired by the other ones you see in this post, but have been newly build from the ground up. (The ones for HTML and CSS are existing ones I found on the web - provided and copyrighted by their respective owners.)

    Feel free to spread, share and comment if you like!