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
- 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.