Bebo Layout

Bebo Layout Design

Coming up with a custom Bebo layout is fast becoming popular, especially in the United Kingdom. This popular social networking site offers both simplicity and flexibility in personalizing your page.

A Guide to Bebo Layouts

Social networks have a wide spectrum of custom features. Some of them, like Facebook, have very limited options for personalizing your page. MySpace, on the other hand, lets you customize almost any part of the design, which has led to some truly horrific looking pages. A Bebo layout falls somewhere in between. You can customize specific parts of your Bebo page, which makes coming up with your own design fairly easy and straightforward.

All you need is basic familiarity with a graphics program such as the GIMP (free for both Mac and Windows) or Adobe's Photoshop.

  • Navigation background: This is a narrow bar, 760x40 pixels, that goes behind the nav buttons on the page
  • Main background: This is where people put most of their effort, the primary 760x375 pixel background for any Bebo layout. Don't make the mistake of making it too busy, because text will be hard to read. The Bebo layout team suggests that the bottom should fade into a solid color.
  • Main footer and main icon: These are small navigation elements (11x15 and 20x20) that are used simply as highlights along the bottom or corner of each element. Since these can be made to complement the main background, they are part of what makes a Bebo skin so customizable.
  • Module header: Like MySpace, the Bebo layout is made out of "modules" that you can rearrange, add, or eliminate as you like. Being able to have a personalized module header can be quite fun, but it's probably best to leave the left side pretty simple so there is room to read the title of each header.
  • Module background: This is kind of like a footer for each module, 375x50 pixels, that should fade to a solid color along the top. This color will be the same as the background of each module.
  • Module line: The last element to a new Bebo skin is the tiny and thin 32x3 pixel graphic used to separate different parts within a module. Again, this should complement the colors and feel of the rest of your skin.

Text colors, sizes, and fonts are controlled using Cascading Style Sheets. You can become more familiar with them on the Web Design channel, or sites such as A CSS Zen Garden.

There is also an active community of Bebo designers online. At blogs like BeboLayouts, designers exchange tips and ideas and even full-fledged tutorials about customizing their pages.

Finding Other Skins

One big restriction on Bebo layouts is that none of the graphics can have copyrighted or brand material. However, that's only for skins hosted on the Bebo site. There are many other sites such as Free Bebo Skins that don't have that restriction.

Like many things on the web, you can learn a lot about Bebo skin design just by looking at what other people have done. Bebo Skinz is a showcase for thousands of layouts and includes a Skin Maker to assist people who may not quite be up to using a graphics program.

Dressing Up Your Online Self

Part of the fun of any social network is not only expressing who you are but also who you want to be. Bebo lets you dress up your page in an infinite number of combinations and you never have to touch the code behind the screen. This may be part of why the site is becoming more and more popular as people create their own online Bebos.

Was this page useful?
Bebo Layout