A podcast, and revamped social media links
Posted by eXonyte at 1:54 PM
While enjoying my day off for July 4th, I decided to make it a day to catch up on a few projects. First, which ended up taking a lot longer than I expected, is to overhaul my social media links here on The Realm. I haven't been happy with the original icons I was using, but it took starting a podcast with some friends to give me that push to finally redo them.
First off, I want to talk a little about the podcast. Along with two of my long-time friends Matt and Luke, we have been recording a bi-weekly nerd culture podcast named Somewhat On Point. Many of our episides tend to focus on aspects of video gaming so far, but we have also done episodes on sci-fi, anime, and have many more topics planned for future episodes. Go give us a listen and by all means, send feedback or topic suggestions. We welcome any input we get.
As I mentioned, ever since the relaunch of this site I haven't been totally pleased with the social media icons. Being as they were raster images instead of vectors, the only one that supported high-dpi screens was actually the Instagram icon. The perfectionist in me couldn't let that slide, especially knowing that web browsers support SVG natively. On top of this, I have become involved in a few additional services since 2014 as well as largely ignoring Google+. To remedy this, last night I started searching for a set of vector icons that fit what I was looking for.
Eventually, I gave up. While there were some icon packs that are close to what I wanted, they were often outdated. For example, many were still using the old Twitter or Instagram logos instead of the current ones. Knowing what I had in mind, I got to work. I already have Inkscape installed, so I just needed some icon sources. Thankfully, most of the big social media sites supply branding kits that include various formats, including EPS. Unfortunately, Inkscape doesn't natively import EPS files. A little searching turned up a good solution for that: a service called CloudConvert. Since I only had a few files, their free service worked perfectly with no hassles. Shout out to them, for sure.
Once I had SVG logos for each of the social media sites I frequent, I had to track down their branding colors. Again, some of them provide the exact colors on their branding kit pages. A few, did not. BrandColors to the rescue. The author started a website just to keep track of brand colors he needed to work with, and like any good project, it grew from there. Just about everything I needed was covered. In fact, the only color I had to sample for myself was for Mixer.
From there, I just had to work out the exact measurements I was working with. I took a screenshot of the existing icons and scaled it up a bit, then after measuring it out I settled on working at a 200px square native size. I used a 25px corner radius on the background with 20px padding for the icons themselves. The only one that deviated from this design is the Facebook icon. Their official icon allows the f glyph to reach the bottom of the square. If placed on a white background, it appears to form the f out of negative space. The Realm doesn't use a white background, but for brand consistency I decided to keep this aspect.
Finally, it was time for placement. I knew I wanted to increase their size a little, so I bumped them up from 32px to 48px. Setting a CSS margin of 10px spaced them out nicely to arrange in a 3x3 grid on larger screens. On smaller screens, it simply flows them to screen width. On my Lumia 950, portrait orientation gives a 5x2 left-aligned arrangement, while landscape orientation actually fits them all in a single row. On top of that, because they are now vector images, they are super clean and crisp. I especially like that the small text on the SoundCloud link is completely readable.
In the end, I have a set of shiny new vector social media icons. I also have a simple format to use for any later changes. Win, win. If anyone out there wants to use them for their own purposes, feel free. Each one of them took no more than a few minutes of work to complete using free tools, so it's only fair that I give back accordingly. Keep in mind that each of these social media platforms has their own branding guidelines, and it is up to you to make sure that you abide by them. While I believe the icons themselves are within their guidelines, there are still other rules in place to be followed.