Not a Note Catatan Pribadi

Social Button

Today I was styling this website (again) and found something interesting. Naturally, when designing something there’s an urgency to make everything under same theme. There’s no exception with share button. So I was running into google to search how-to article that explain about what do they do with the share buttons and wanna give them some tweak to match my theme. While surfing about it, I landed at some article that rather shocking.

#The Favourite#

The Twitter bird was created from three sets of overlapping circles, suggesting the way interests, events and people interact on Twitter.

They said that Twitter logo is always either blue or white. The Twitter bird is never shown in black or other colors.

You can download the official Twitter logo:

Twitter also specified their spesific color.

Beside color, there’s also some other rules and policies about typography, visual design, and displaying tweets. You can read it at their official page.

#The Mighty#

While Twitter have lot of restriction, Google little bit loose about it’s button (see here). With color for an unpressed red button is #dd4b39 and the color for an unpressed white button is #737373, we may create a custom button to match our app’s style as noted here. Font on the “Sign-in with Google” button is Roboto Bold, a True Type font that you can download here.

Even with loose restriction there are a lot of incorrect design.

nogoogle1 nogoogle2 nogoogle3 nogoogle4

#The Infamous

###Don’t: Modify the ‘f’ logo in any way, such as by changing the design or color. If you can’t use the correct color due to technical limitations, use black and white.

With all of do’s, there’s only one don’ts in their brand assets guide (though there is a long list for other do’s and don’ts). Make sure you read all their list of rules on the official site.

#Conclusion#

Designing page to our heart content is great, but don’t forget about other’s right.

###Note to my self### Change the button on the side bar of this site is my homework.

comments powered by Disqus