Free Responsive Web Design (RWD), HTML5 and CSS3 Vector Logos in PSD, AI and PNG Formats

By Beacon News | Published September 23, 2013 | Categories: Web Development

I was working on my personal website over the weekend and decided I wanted to use the HTML5 and CSS3 logos within my portfolio. When I went to do this I realized I had no visual way to display Responsive Web Design. I searched and couldn’t find any official RWD logos or a version that I felt would go along with the HTML5 and CSS3 logos like I wanted so I decided I was going to have to make it myself.

Here is the process of how I created the RWD logo:

• Downloaded the vector versions of the HTML5 and CSS3 logos
• Used Gotham Ultra to create the base for the ‘RWD’ in black
• Tweaked the RWD slightly to match the ‘HTML and ‘CSS’
• Used the shape and size of the ‘5’ and the ‘3’ as an outline to create the R
• Used a color schemer online to choose a color that complimented the first two logos

I’m really excited with how it turned out so I would like to share it with everyone. Feel free to use it however you wish!! The RWD logo’s I did see were a lot of the time in a shade of dark gray so also feel free to change the color if black becomes the new RWD signature color.

This vector set includes:

• HTML5 Logo
• CSS3 Logo
• Responsive Web Design (RWD) Logo

Preview

Download Links

• PSD – Adobe Photoshop
• AI - Adobe Illustrator
• PNG - Adobe Fireworks
• ZIP - download all 3 versions in a zipped file

Also if you have any ideas to improve the R within the RWD logo please comment below! I struggled with it following the same structure as the 5 and the 3 but still looking like an R.

*Please note this is in no way an official logo or design for Responsive Web Design. Given RWD is a practice or methodology of a combination of multiple things I’m not sure there will ever be an official logo created for it. I did this as a way to display RWD visually next to the HTML5 and CSS3 logos within my personal website.