how to use social icons

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.

. . . . . . . . . . . . . . . . . . . . .

designers help japan

great posters communicate powerfully. here are some examples of great designs created to support various fundraising venues for the aftermath of japan’s earthquake on march 11.

credits as per submissions’ username: 1-carlos | 2-rerylikes | 3-linda yuki nakanishi (yasixu) | 4-unknown | 5-imasamurai | 6-andré müller | 7-gorg | 8-robospeaks | 9-mycyclopeye | 10-patrick beauchemin | 11-dancingdead | 12-houseofrenai | 13-mildred | 14-alex liebold | 15-teknowblog | 16-samuel crag | 17-rob dobi | 18-unknown.

to view all submissions, submit your own design, or find a venue to donate, visit design for japan.

loving typography : there’s an app for that

if you are an iphone owner and have suffered chronic insomnia like i have, you may have spent many hours in the app store in those wee hours of the morning. no kidding, i used to know pretty much all published apps for the first six months after the app store opened in 2008. but then the content increased exponentially, my insomnia subsided, and i just couldn’t keep up.

x: published by andritchie, new york

so i was very happy yesterday when a client sent me a link for a new typography application i didn’t know about. it made me plunge directly into the app store looking for other cool design applications. i did find a few, downloaded them, and here are some i found blogworthy.

typeplace

typeplace is a new application where you can share cool, interesting typography you see in your daily life. you simply take a picture, upload it to typeplace and publish it. if you wish, it can simultaneously connect to your twitter account and publish it there as well.

exibit: by jrdelboux, são paulo (brasil) : at the moma: by julienlevy, new york

probably more interesting for designers, but definitely for everyone with an eye for beautiful and/or quirky type explorations, this app is simple, fun, and also geotags the picture’s location.

shower curtain: published by andritchie, nashua (new hampshire)

dirty energy source: by topfife, birmingham (uk) : kraliçe’s a: by chriak, salt (spain)

z: by mrmartineau, greenwich (uk) : pay me in advance: by itsmematt, los angeles

please note: all photo credits are given as per the usernames registered on typeplace.

the font game

this app is actually a game, but one that is definitely for graphic designers, and more specifically for those who not only love typography but also know typography. that includes recognizing the font families, their various styles, and if you can remember from your school days, the terminology for the anatomy of type. so you think you can handle the challenge?

stay tune as i further explore my other applications! and for now, as we all have a visual memory, here are the icons for those two great apps:

typeplace sells for $0.99

developed by killbot collective

the font game sells for $1.99

developed by i love typography

have fun people!

something’s brewing at starbucks : a new logo

yes, it is indeed a new logo, scheduled to be launched this march. and the critics are already at work on this one. no doubt there will be as many good reviews as bad ones, but the bottom line will speak for itself, and that is the reception of the new emblem by its true audience, possibly including you: the coffee drinkers.

unlike the critics, my intent is not to attack the new mark, nor highlight what i think are the good or bad points ~ we all have opinions, i will leave you with yours. i will simply say that overall i think it is a fine attempt at moving the company into the future, and i will also remind you of why they are doing this change in the first place, notwithstanding the fact that it is their 40th anniversary, an occasion worth celebrating (especially if you remember how hard it was to find a decent cup of java in the US before they came along).

the starbucks logo evolution from 1971, 1987, 1992 and 2011. some trivia: the rumour goes that the exposed belly and opened legs became controversial hence their removal. even the 1992 logo had its belly button removed (i own coasters which include it, a proof that this is in fact true).

the whole purpose of any logo revamp is always about moving a company forward into the future. there is simply no way around it: as society evolves, companies must also transform themselves in response to the market changes and/or in anticipation of those changes; the latter being the more pro-active approach. that means they have to continually look at where they are and where they want to be as a corporation, and take the necessary steps to move forward. in that process, yes, it is possible they may make mistakes. and if they do (as gap recently did), they can rectify them, most often with minimal damage. but there are no gains without venturing into new territories, which means that yes, there are risks ~ even with a simple logo redesign.

for starbucks, one of the primary reasoning behind the simplification of their icon, as stated on their blog, is that now that they are more than just a coffee company, they wanted to drop the word "coffee" from the logo. since they now sell food (beyond cookies and muffins), coffee machines and accessories, and even gift items as varied as journals and board games, this seems like a logical direction. not to say that they are moving away from being a coffee company, but rather an expansion of it. amazon comes to mind as a large example of such expansion: they will always remain at the source an online bookstore but their inventory now goes beyond imaginable.

now the key in redesigning or revamping a logo is always to create a new look without breaking the brand. hence most logo revamps are quite subtle. some people might not even notice the changes at first glance. in some ways that is a good thing. recognition is very important. if you are driving down the street looking to grab a quick coffee, no doubt you will be looking for that green starbucks emblem. you don’t want to change that. the impact would be immediate if you didn’t recognize it. companies that make a faux-pas always see it in the numbers, and they see it very fast. they also rectify their mistakes just as fast (yes, money always speaks the loudest).

let us look at some logo evolutions of well known brands and the subtle ways into which they moved through the years. btw, there are many great evolutions to look at, and a simple google search of logo evolution will give you a bucket-load of examples. but here are a few good ones:

both coca-cola and pepsi did a great job in their logo evolutions. there may have been some less attractive marks at times, but we ought to remember where society was at back in their times. this pepsi evolution does not include their very latest, which i personally think is a disaster.

both bmw and mastercard are excellent examples of subtle changes over years. in the bmw evolution, there was definitely a glitch in the 4th rendition, however it may have been somewhat appropriate in its time. in the early mastercard example, there was a huge design and name change which is a perfect example of when it is appropriate to do so.

the volkswagen evolution is a little more obvious and each step more drastic. however when everything is said and done, the V and the W are very much integral to their original design, something that can also be said of the starbucks siren.

since i always try to include some personal work in this blog, here is an engineering firm whose logo i revamped. this is also a good example of when to redesign versus when to revamp. sandwell being a 20+ year corporation when they came to us, i recommended we do not change their mark but rather bring the one they had into the present day. we accomplished that with a font redesign, spacing, and the incorporation of their tagline. subtle, but fresh and clean.

however well any of these logo changes were received or how many debates they may have caused, it goes without saying that looking at those marks in the present time, they were necessary evolutions. and as easy as it may be for you to dismiss the new starbucks logo, criticize it as you may, try jumping into the future and looking at the bigger picture. when coming back to the present, smell the coffee as it is, and enjoy what’s on the cup not only what’s in it.

being honest

in a world becoming quickly and obsessively a do-it-yourself-everything, someone will inevitably one day come and ask you the painful question.

the most difficult time for being honest is when someone designed something on their own and asks a professional designer for their opinion on the final result. i say, be diplomatic and start with the positive. be gentle when you get to the negative.

as for the doers of such doings, if you can help it, please don’t ask. we love you and we just don’t want to hurt your feelings.

flipping a portrait : an absolute no-no

i was recently on a client’s server looking for employee images to use in a corporate piece, and while i browsed through the long lists of portraits from various offices, i noticed several had an annotation "flipped" in the title. i opened them up just to make sure i was indeed looking at the worst mistake a designer can possibly make — okay, one of the worst — flipping a portrait.

i always assumed this is the sort of thing everyone learns in life, if not for sure in our design education, however it is obvious that we do not all travel the same road in that respect.

so for those who might have missed that boat, here it is: you should never, ever, ever — not under any circumstances — flip someone’s portrait. no one, not even the most beautiful people in the world, has a perfectly symmetrical face. traits that make up a person’s unique look are often those little imperfections on one side of our face, the way we part our hair, have a beauty mark, a broken nose maybe or a crooked smile (such as i have). those things cannot ever be flipped. and believe me, people will notice when you do, not the least of which being the actual person in the photo. to put it simply: it is terribly disrespectful to do so.

here are some examples of the obvious. can you tell which is the right one?

focus on one picture and then on the other; it will be easier to see the distinctions.

i picked celebrities because we all know them. try flipping one of your own pictures and then show it to the people you know — most likely, at the very least, they’ll say you look different. btw, the correct images are on the left side.

and if you are wondering, yes, this rule also applies to all pictures of any kind. here however i will add with great caution, there might be some exceptions that can be made in very rare and special circumstances, and only when the subject itself will allow, such as a flower for example. the bottom line, and the rule of thumb: never flip a picture.

client tips : how to choose a designer

one of the most difficult tasks in life is to hire an expert in something you know little or nothing about. how do you know if your accountant is really efficient? if your financial advisor is the best he can be? how about your doctor? many professional fields require client confidentiality, hence how do you really know how well they perform? there are ways of course, like referrals and word-of-mouths. but here is the really good news about designers, and artists in general: they wear their work with pride for all to see ~> their portfolio.

a portfolio is the culmination of a designer’s accomplishments. it is specifically tailored to showcase one’s capacity for doing great work, their style of design, and the various projects and accounts they have worked on. nothing hidden. it is the best possible way for potential clients to assess the talent of a designer and whether they are a perfect fit for their needs.

hiring the right designer

• first, you must look at their portfolio; every designer has one. (if they don’t, move on)

• assess if you like the quality of the work that you see; not just one particular piece or project, but their work overall. that is crucially important. you are looking for consistency.

• is the style of design one that you appreciate? although most designers have a specific style, many can create versatility in their work, and that can be seen in their portfolio. however if their style is hyundai and you’re looking for bmw, keep looking. if it’s the other way around, then you needn’t be worried, you’ll be well served.

• for the rest, it is a question of personal interaction assessment.

a word about budgets

although you might be a small or start-up business, or in this economy a struggling one, you do not need to put your budget in the driver’s seat when choosing a designer — not ever. a talented designer will always be able to create an excellent product with the budget you present them. it is most crucial to hire someone that is experienced and that can produce quality work when your dollars are most precious. a good designer will always give you much better options on how to spend your budget than a cheap one. and yes, it might not quite be the brand new bmw you were aiming at, but rather a brand new vw instead. is that really a bad compromise?

i for one am a strong believer that good quality and effective design can be created with any budget. that is why i also believe that it is always best to choose a designer based on their talent and commitment, not on their hourly rate. then give them the budget you had planned for your project and work together in figuring out how your needs can best be served. i can guarantee that you will be much further ahead without ever compromising or jeopardizing your brand.

a hypothetical scenario : you need a logo

a. you don’t see any logos that you like in the portfolio in front of you. then it is most likely that the designer will not produce a logo for you that you will like. that’s a no-brainer.

b. there are no logos in the portfolio. then you must assess if you really like the other stuff in there. if you are dealing with a designer who’s work is excellent in your eyes, but the exact type of work you need is not featured, it is extremely likely that he/she will do some excellent work for you as well. besides, you can always ask the designer if they have samples of something close to what you need: remember, the portfolio only holds the best and most relevant pieces, so not everything the designer has ever done is included in there!

a word to the wise

lastly, please do not ever ask a designer to create some layouts for you, for free, to see if they are a right fit. it is extremely unethical and disrespectful (formally trained designers have the same level of education as lawyers), and besides, that is exactly what their portfolio is there for. after all, the portfolio showcases the designer’s absolute best; if you like what you see, you are definitely in good hands.