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

Beacon Blog Article

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

html5-css3-rwd

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.

Let's get to work!

Contact Us