it is a generally well known fact that social websites are now an intrinsic part of our cyberspace experience. hence it is no surprise that social icons have become an inherent component to any personal or professional website associated with them.
as these icons are increasingly showing up on websites, i notice many basic errors in the way they are being used — probably more so on personal websites than on larger corporations’ where they have access to professional designers. so if you are of the former, without talented help on your side, here are a few things you should know.
. . . . . . . . . . . . . . . . . . . . .
note: many web designers are actually not educated in the art of design communication, but rather come from more technical backgrounds such as coding or programming. without discredit to their expertise, this lack of branding and marketing education is often what is at cause behind many of these types of errors. my goal today is simply to let you know what is in your best interest to do, or not to do.
. . . . . . . . . . . . . . . . . . . . .
placing your social icons in an appropriate place
there is quite a bit of flexibility on where to place your social icons, however they should be in an easily visible area of your website, depending of course on how important this social aspect is to your company. the best place for visibility is in the top part of your webpage, the part that is visible upon landing on your site.
as a best option you can place the icons in the sidebar, provided your layout has more than one column. second-best options are below the header just beside the navigation menu (provided there is room for them), and if social websites are less important to your company, the icons can also be placed in your footer area at the very bottom of the page. see image below.
one important rule: the only place where social icons should never ever go, is inside your header (also called masthead). the reason is simple: the header is a sacred area reserved for your logo and branding message. social icons are a distraction, hell a nuisance even, to the integrity of that space. even if you think "but there is extra room" — the answer remains NO. most likely the header was not well designed and/or your logo is too small (something i don’t say lightly).
the four little squares indicates possible locations for your social icons: beside the navigation menu, in the sidebar column, or in the footer area.
one developer i worked with placed the icons just above the header outside the actual page, also referred to as the padding area. it is not something i recommend by far, but i suppose it is a possibility should one be stuck.
in this example there is no header per se, but simply a small corner block for the logo. it may be appropriate to place your social icons in the space available on the right, depending on how many are required. remember that keeping a layout airy makes it easier to read and to navigate.
. . . . . . . . . . . . . . . . . . . . .
alterations to social icons
i have noticed on a few occasions social icons that have been modified in their colours. that is an absolute no no. the primary reason is that you should never, under any circumstance, alter a company logo — and that includes its colours. even if these little icons are only a portion of their logo, they fall in the same category.
secondly, popular brand logos have a lot of equity built in their form and colours. hence a facebook icon in any other colour than blue loses its effectiveness. that means you are less likely to notice it, or it will take you longer to do so. as an example, imagine driving through an unfamiliar city looking for a starbucks. a signage by any other colour than green would likely go past you unnoticed.
these are unacceptable because you lose the brand recognition and you break the basic no.1 rule: don’t screw around with other people’s logos. more diplomatically said, don’t do unto others what you don’t want done onto you.
one exception to that rule is changing the icons to black and white. although digital media has no cost associated to colour like printing does, you can if you feel it necessary within your design parameters, make the logos black + white or in greyscale. know that their effectiveness will be thwarted but there is no disrespect to those brands.
the last distinction refers to the background shape itself. because the icons are designed as buttons, you see them generally in a square or round shape. this button shape is not part of the logo, and this is why it can be altered, leaving some room for creativity.
lastly, you may have seen hand drawn versions of the social icons. i am not totally sure this would be acceptable in other more serious contexts, but because they are actually colour-accurate and easily recognizable, they do retain a certain brand equity. so i think these are okay to use. they are kind of cute too.
. . . . . . . . . . . . . . . . . . . . .
never take your audience for dumb
spelling out the name of the social website beside the icon is like saying to your visitors “btw, if you haven’t figured it out, this is a facebook icon” — duh. there really is no need for that. if a small percentage of your visitors are unfamiliar with facebook, what is the worst possible outcome if they click on the icon? nobody gets hurt. however the silly explanation can have a subtle condescending effect to many other visitors. besides, spelling it out totally defeats the purpose of using an icon; so should you feel the need to do so, drop the icons and use their complete logos.
my philosophy in the art of treating your audience is simple: always assume them as an intelligent and educated crowd — as they most probably are. that is treating them with respect.
social icons for dummies : not required
. . . . . . . . . . . . . . . . . . . . .
call to action
for a similar reason as above, it is not necessary to tell your audience what to do besides the social icons, like "follow me here" — people do know to click on the icons to get to your social websites where the actual subscription to follow takes place.
now having said that, if you want to encourage them to join your social page, put the call-to-action message on the page in question. it is also a good idea to tell them what benefits may come their way by doing so, as people are getting more picky with what they want to join.
here are some examples which are both pointless in my opinion. of course the example on the left is more sexy, but it takes more real estate and there’s really no added benefits. the example on the right, on top being at the bottom of the page, is really losing impact by using its real estate for words instead of making the recognizable social icons bigger.
. . . . . . . . . . . . . . . . . . . . .
using high resolution icons
last word of advise: there are thousands of high resolution files on the internet for social icons, and all are available for free. hence there is absolutely no reason you should ever use icons that are in low resolution and look bitmapped. just sayin’... -;)
. . . . . . . . . . . . . . . . . . . . .
for effective graphic communication on your website or any of other corporate or marketing pieces, contact us.
. . . . . . . . . . . . . . . . . . . . .
