Facebook Pages for Business Tutorials | Web Page Design Tutorials Home

Creating Facebook Styles Apps

Many Facebook developers would like to create Apps that match exactly with the design and styles of Facebook. Yes, this should be a good idea as this will blend the contents of iframe into Facebook in a more natural way.

This shouldn’t be too difficult to know the styles of Facebook, for example, font color, font size, etc., by examining the stylesheets. Take the font color as an example, Facebook mainly use the navy blue, light blue, black and grey color series.

Facebook styles color

Take a look at the stylesheet of Facebook, the styles of font can be found. Here’s just some of the styles of Facebook font:

body {
background: #fff;
font-size: 11px;
font-family: lucida grande, tahoma, verdana, arial, sans-serif;
color: #333;

Many Facebook Apps also follow the graphic design of Facebook. Actually the graphical design of Facebook is very simple. The diagrams below are just some examples:

Facebook GUI Example 1:

Facebook GUI styles

Facebook GUI Example 2:

Facebook GUI styles

Facebook GUI Example 3:

Facebook GUI Example 4:

Facebook GUI styles example

By browsing the website and studying the stylesheet, this is rather easy to get familiar with the design and styles of Facebook. Some developers insist to follow the same graphic design and styles when developing Facebook Apps.

However, wef only follow some of the design and styles of Facebook. In many cases, the graphic and styles depends largely on the themes and contents of the Apps.