To get you really excited about CSS3, last month we announced the CSS3 Design Contest and encouraged designers to experiment and get creative with CSS3. As expected, we have received many creative and original submissions. To choose the winners of the contest, we considered the originality of the technique or approach and its uniqueness. The idea mattered more than the execution.

This process has taken a lot of time as it wasn’t easy, because we received quite a few creative submissions: however, a decision had to be taken and so we thoroughly went from one competition entry to another. And the decision was made. So today, it’s time to announce the winners and present the submissions to the contest.

Please notice that the contest results are experimental and may not necessarily look or work alike in different browsers. The techniques presented below should be considered as innovative, creative approaches showcasing what can be achieved with pure CSS3 and a bit of creative thinking. Please feel free to build upon these ideas to create further techniques and design solutions and make them available for the design community.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

First place: CSS3 Charts

CSS3 Charts [ preview | download ]
This technique is an example of experimental CSS3 charts, without JavaScript and images in use. We miss cleaner markup and proper markup for tabular data here, but the use of CSS3 selectors is truly impressive: nth-child, :target, transformations, gradients and transitions in use. Designed by Sean Oh from USA.

Second place: CSS3 Rubik’s Cube

CSS3 Rubiks Cube [ preview | download ]
Interesting idea for a CSS3 design. The designer’s idea was to create a navigation menu: although it’s not very user-friendly for regular navigation, it may be interesting for engaging portfolio sites. Gradients and transforms in use. Designed by Francesco Benanti and Maicol Zenatti from Italy.

Third place: CSS3D

CSS3D [ preview | download ]
Do you have your 3D glasses at hand? If yes, put them on and observe this stereoscopic 3D effect, created with CSS3. Works in all modern browsers, and also on iPhone. 3D red-cyan glasses required. Designed by simurai from The Netherlands.

Fourth place: CSS3 Monsters Blob

CSS3 Monsters Blob [ preview | download ]
A CSS monster, created with pure CSS3. Also check out Blob’s brother, CSS3 Monsters Dragon. It goes without saying that the CSS monster is scalable. The eye is animated with jQuery’s Parallax effect. Designed by Sebastien Plaignaud from France.

Fifth place: CSS3: A Rift in Time

CSS3 A Rift in Time [ preview | download ]
Interesting experimental layout: standard HTML/CSS web sites have always been vertical and horizontal. This entry shows what can be achieved if a site is flipped on to a 45 degree angle. Transitions and transforms in action. Designed by Maxwell Burton from USA.

Congratulations!

We congratulate the winners of the CSS3 design contest and we again sincerley thank you for all the great entries that we’ve received. We appreciate your time, creative thoughts and we do respect your work and efforts. All winners will be contacted within the next 24 hours. Below you’ll find a detailed overview of the other entries of the contest. Thank you very much, and please join in next time!

CSS3 Jewelcase

CSS3 Jewelcase [ preview | download ]
“I love music and cover art, so this was a nice little project to explore some CSS3 features.” Designed by Bouke Regnerus from The Netherlands.

CSS3 Vicero

CSS3 Vicero [ preview | download ]
“I came up with this idea when I was sorting all my movies on my movie-stream-server. It would be so nice to have a web interface that’s rolling on a web server on the same machine. But if you dont have a server and just have regular DVD/BR, then you can type where the movie is in the shelf. So, what should we watch today? This theme is best experienced in Safari/Chrome because of some CSS3 effects; but it works also in FF, IE and Opera.” Designed by Adis Kurtalic from Sweden.

CSS3 iPad with Shadow

CSS3 iPad with Shadow [ preview | download ]
“I got a bit crazy at this contest. I’ve been experimenting a bit with CSS3. But when I saw this contest, I though for my self.. hey, let’s check this specifications at w3. There got be more to it than just rounded corners (which is great by the way). After using a couple of hours reading. I was stunned..whow! 3D effects, shadows. And I was thinking.. what can be painted can also be made in css3 using squares, circles… I was sitting with an iPAD in my hands reading about CSS3. I put it on the table… and thought; this image I am seeing right now, should be possible to make just with CSS3. The solution is best viewed in Google Chrome.” Designed by Morten Dischington Carlsson aka Mr.Jones.

CSS3 Time Machine

CSS3 Time Machine [ preview | download ]
“A small example of using jQuery to trigger CSS3 animations in a ‘Time Machine’-fashion.” Designed by Nathan Burnett from USA.

CSS3 CSS Effects

CSS3 CSS Effects [ preview | download ]
“This started as an experimental playground when I started learning CSS3 — CSS animation. There are five simple looping effects (animations). Each one uses JavaScript to initially setup the environment, but after that, everything is looped through CSS animation.” Designed by Yohei Shimomae from Canada.

CSS3 Book

CSS3 Book [ preview | download ]
“This design allows you to place any amount of content in the ‘columnified’ DIV of the layout, allowing for a site-wide flexible and fully customisable ‘book-like’ feel. It uses the CSS3 multi-column module for the multi-column layout (and a JavaScript solution for Opera and IE, two browsers that, to date, do not support this module — this solution is a modified version of Cédric Savarese’s css3-multi-column.js, and uses a combination of CSS shapes, border-radius, transforms, box-shadows and gradients to create the book appearance.

Page turning is achieved via Javascript (pageturn.js). The different stylesheets are fed to browsers via Javascript as well, so as to detect whether the multi-columns are supported or not (stylesheet.js — basic browser detection only, on the assumption that Opera, Firefox, Safari and Chrome users update their browsers regularly). As no images have been used in this template, total customisation of the appearance is easily achieved (moreover, the CSS is annotated). For a full explanation of how the two-column, multi-page layout works, please visit the following tutorial.” Designed by Peter Craddock from Belgium.

CSS3 Rocket Man

CSS3 Rocket Man [ preview | download ]
“Whenever I work on a project for myself, I like to try and learn something new. This contest gave me a chance to play with CSS3 without having to worry about clients asking why it works in some browsers and not in others. The main thing I was curious about was the keyframe animations, this was something I had heard about but not played with at all. I am glad that I entered the contest for the sole reason that I learned a lot. I did not realize how easy it was to work with transitions and animations with CSS. This exercise has me really excited about the future. I can’t wait to see tomorrows rookie designers using this for spinning swords and dragons that breathe fire.” Designed by James Vecchio from USA.

CSS3 Wii-ish Idea

CSS3 Wii-ish Idea [ preview | download ]
“Just a little bit of CSS3 as an idea for holding some images. Would work really nice alongside some JS.” Designed by Stephen Cook from UK.

CSS3 Video CSS

CSS3 Video CSS [ preview | download ]
“It is interleaved video in a jpeg file. Instead of having each frame in its common order, each row is interleaved with the next frames rows. So, the you can see the first row of the first frame, then the first row of the second frame, the first row of the third frame and so on. Jpeg files are size limited, so to be able to have a lot of frames, I’ve reordered the rows in a 16×16 grid. The top left of the grid is the first row, the next to the right is the second row, the next the third, and in the next colunm we have the n+16th row. This is the code to generate the jpeg file. The frames where named a0001.jpg, a0002.jpg, a0003.jpg…

<php
	$num_img=128;
	$out2=imagecreatetruecolor(256*16, 16*$num_img);

	for ($j=0; $j<$num_img; $j++)
		{
		$num=$j*4+10001;
		$filename="xplsv/a".substr($num, -4).".jpg";
		$out=imagecreatetruecolor(256, 256);
		$img=imagecreatefromstring(file_get_contents($filename));
		imagecopyresampled($out, $img, 0, 0, 0, 0, 256, 256,
		imagesx($img),
		imagesy($img));
		for ($i=0; $i<16; $i++)
			{
				for ($n=0; $n<16; $n++)
				{
					imagecopy($out2, $out, $n*256,
					$i*$num_img+$j, 0, $n+$i*16, 256, 1);
				}
			}
		imagedestroy($img);
		imagedestroy($out);
	}

	imagepng($out2, 'test.png');

?>

Then, I’m using the CSS displacement maps I’ve used in the Coke Can and the other displacement maps I did for Ajaxian. The displacement maps de-interleave the jpeg file. Then, displacing the background-position with CSS3 for each row, I get the video effect. Finally, I added a Smashing Magazine transparent png on top on the video to create the overlay effect. I really like to add video on websites with shapes, it looks really good. I would like to add that this is a crazy way to add video and that it should not be used for any real purpose. When I do things like that is just for pure geek entertainment and to show it is possible. I would suggest for CSS3/HTML5 to have a background-video tag.” Designed by Javier Roman from Spain.

CSS3 Megans RADius Font

CSS3 Megans RADius Font [ preview | download ]
“I am a print/web designer who likes to play with CSS+HTML from time to time. I have a passion for experimental typography, and like to explore new ways of creating type. For this project, the font can be adjusted to change the into a totally different face just by changing a few small images.” Designed by Megan Brown-Taylor from Honolulu, HI, USA.

CSS3 Monsters Dragon

CSS3 Monsters Dragon [ preview | download ]
“CSS Monsters are vector images created only with CSS.” Designed by Sebastien Plaignaud from France.

CSS3 iMac

CSS3 iMac [ preview | download ]
“A pure CSS iMac – no images. You can use it to display anything on the screen. In the example I setup a Flickr Feed of images as a slideshow. It is also completely resolution independent. All relative sizes – feel free to scale it up or down by changing your font size. I used some cool techniques including CSS gradients (and Safari Radial Gradients), CSS border-radius, text-shadow, even used a Safari CSS 3D transform for kicks! I used some jQuery to make a slideshow with the Flickr images and image title overlays. Overall, I think it turned out great. I am sure people out there could take this to the next level. It’s really easy for anyone to change the flickr feed and put in their own photos if they want. I hope to see this out there somewhere. Exciting! I love CSS3! Works in: Firefox 3.5+, Opera 10.5+, Safari 4+, Google Chrome 4.0+, but of course – looks the best in Safari.” Designed by Joshua Gatcke from México.

CSS3 A Book Full of HTML5, CSS3, and JavaScript

CSS3 A Book Full of HTML5, CSS3, and JavaScript [ preview | download ]
“I wanted to use the bleeding-edge 3d capabilities of CSS3 & animations while working with JavaScript to trigger interactive events. Using CSS animations for a game is something that I also find intriguing.” Designed by Kurt Zenisek from USA.

CSS3 Camera

CSS3 Camera [ preview | download ]
“This “camera” was created solely with CSS3, with fallback gradients for browsers that do not support CSS3 gradients. Tested (and working) on:
Google Chrome
Opera 10.54
Firefox 3.6.6.”
Designed by Oscar Lemstr?m from Finland.

CSS3 Under the Sea in CSS3

CSS3 Under the Sea in CSS3 [ preview | download ]
“A webpage using CSS3 in an under the Sea theme.” Designed by Carlo Rosati from USA.

CSS3 90s

CSS3 90s [ preview | download ]
“Description: My idea was to create a design very 90’s style, like David Carson with the desconstruction of the form using CSS3 Transform. It’s still only working on Webkit because of the transitions.” Designed by Fabio Sasso from Brazil.

CSS3 Magazine

CSS3 Magazine [ preview | download ]
“A Magazine design inspired from Wired. Built using A4 dimensions. Uses the following features: transparent colors, even-odd selectors, rotation, text shadow, box shadow, border radius, custom font faces. Would’ve liked to used more if not for the differences in Webkit and Mozilla support Concept, Design and HTML in 6 hours. CSS3 rocks!” Designed by Anand Gorantala from USA.

CSS3 Lightsaber

CSS3 Lightsaber [ preview | download ]
“I’m a huge Star Wars nerd, as well as a web standards geek. Naturally, these two *ahem* interests were bound to collide eventually. I’m just glad it resulted in a CSS3 lightsaber rather than my admittance into a mental hospital. I actually wrote a tutorial on how I made this CSS3 lightaber, and that can be found at.” Designed by Max Luzuriaga from USA.

CSS3 Smashing Magazine Logo

CSS3 Smashing Magazine Logo [ preview | download ]
“The Smashing Magazine logo using CSS3 and a little Javascript to replace the “G” in “Smashing” with a “C”” Designed by Niko de Luna from The Philippines.

CSS3 Expert Cook

CSS3 Expert Cook [ preview | download ]
“Simple as it may seem this template relies heavily on css3 for animations, transformations and gradients it uses all sorts of selectors and different css3 effects to achieve the design you see.” Designed by Andrei Oprea from Romania.

CSS3 Visoki Decani Temple

CSS3 Visoki Decani Temple [ preview | download ]
“CSS3 web design showcase dedicated to Serbian Orthodox monastery Visoki Decani.” Designed by Milos Zekovic from Serbia.

CSS3 Pseudo 3D Radial Buttons

CSS3 Pseudo 3D Radial Buttons [ preview | download ]
“Easy to use 3D Radial Buttons.” Designed by Denis Arkhipov from Russia.

CSS3 Moving Stick Figure

CSS3 Moving Stick Figure [ preview | download ]
“Use CSS 3 border-radius and animation to create a stick figure and add moving control using jQuery.” Designed by Jeffri Hong from Indonesia.

CSS3 Image-less Warp Shadows

CSS3 Image-less Warp Shadows [ preview | download ]
“A simple CSS3 technique to apply warped shadows to elements.” Designed by Tyler Dawson from USA.

CSS3 Rabbit

CSS3 Rabbit [ preview | download ]
“Just playing with CSS3 properties (and rabbits).” Designed by Fabien Vauthey

CSS3 – The future is here

CSS3 – The future is here [ preview | download ]
“My wish was to create design that shows the full concept, presenting the different capabilities and aspects of CSS3. Probably the design would seem familiar to you and that’s it because I used the vision of the template published at your website. I considered that design as extremely appropriate for the case because it’s functional and catches the eye of the user. Honestly, I didn’t have time to think of my own design but I think that I accomplished my mission to show designers and developers what they can do with little more effort and that’s how I even learned some new stuff. I hope that my design will make others reconsider the usability of the browser they use and motivate them to do some action and step forward.” Designed by Antonio Stoilkov from Bulgaria.

CSS3 Rainbow Template

CSS3 Rainbow Template [ preview | download ]
“Web template design with sky and rainbow theme.” Designed by Anggun Pribadi from Indonesia.

CSS3 Totally Fresh

CSS3 Totally Fresh [ preview | download ]
“Totally Fresh is a fun project created not only to display the capabilities of CSS3, but to show an exciting design that pops off the 2-dimensional canvas that is cleanly and properly marked up. I tend to design simple, typographic pieces, but I wanted this design to feel “fresh.” The design, therefore, resembles a car air freshener. It reflects a tangible print piece in a 3-dimensional space.” Designed by Chris Nager from USA.

Further entries

Here is a brief overview of further entries submitted to the contest.

• CSS3 Nav-Trick [ preview | download ]
  “Here is a simple method of letting visitors know which page they are on using simple CSS to move the List Items of a navigation menu to the right. I added a fancy arrow to enhance the effect. By giving each page a unique ID in the body tags and each list Item a unique class, when your browser sees the ID for the body, the matching class for the List Item will use the CSS. The fancy Arrow will be used as long as it is in the same directory as the html files. The CSS for the List Item position “Inside” will cause the List Item to move to the right which will visually show the visitor which page they are on. I used this method on the following website, the client was thrilled.” Designed by Greg Spence.
• CSS3 Cant Skate Dont Care [ preview | download ]
  “A 90s skate/grunge theme designed to explore which of the CSS3 rules could be used across a decent range of browsers without all the usual browser constraints we get in the day-to-day grind of business.” Designed by Josh Campbell from New Zealand.
• CSS3 3D Tribute [ preview | download ]
  “This is my first jump into CSS3,… and I’m liking it!. I’ve incorporated font embedding, transforming events, multi-column paragraphs, utilized rounded corners, and included background gradients. The transforming forest only works on webkit browsers, creating a nice 3D effect, but renders-down nicely on other browsers, while the hover animation below jumps in different ways on all required browsers.” Designed by Walter Beardwood from Canada.
• CSS3 Loading Bar [ preview | download ]
  “A CSS3 Loading Bar. CSS Animation only works in Chrome and Safari.” Designed by Joel Schwarting from USA.
• CSS3 Personal Portfolio [ preview | download ]
  “” Designed by Sikandar Aazam from India.
• CSS3 Taped-off Coming Soon [ preview | download ]
  “A coming soon page themed with cardboard, duct tape, and wood. Make sure you click “Submit” in a webkit browser to see the full effect!” Designed by Robert D’Ercole from USA.
• CSS3 Smashing CSS3 Effects [ preview | download ]
  “A typographic based design which combines newly CSS3 features.” Designed by Tamer Aydin from Turkey.
• CSS3 This Menu Item [ preview | download ]
  “The most basic navigation menu cleverly styled into a tabbed top menu.” Designed by Dan Beeston from Australia.
• CSS3 Call of Duty Style [ preview | download ]
  “Inspired by Call of Duty Modern Warfare 2 loading screens. Fixed header and footer with no content blocks, animated.” Designed by Jason from USA.
• CSS3 Image-less 3D Menu [ preview | download ]
  “My entry for this contest is more of a concept than a design. I’ve seen people use CSS3 to create 2D art and thought of doing so myself, yet the idea seemed too easy. However, 3D art using CSS3 is something I have yet to see! I wanted to create an image-less 3D page layout using CSS3. It took some playing around with the code to find the best method of producing an image-less 3D element, but I’m definitely happy (and excited) with my findings. Although, after the 3D elements were introduced, I felt as through it was still lacking. I needed more, I needed interaction within the 3D space. I then created a 3D navigation bar which acts as buttons. Through CSS3’s scaling method I created the illusion of buttons going back within the 3D space on a mouse hover, and on an active state the link creates more of an interactive feel for the user. This is only the beginning of this layout, and I plan to expand upon it to create a fully designed page template which will incorporate more “button-like” interaction throughout the design. Overall, this contest has definitely pushed me to play with CSS3 more and I am truly excited for this to become a web standard!” Designed by Chris Johnson from USA.
• CSS3 Dreamer Blog [ preview | download ]
  “I feel CSS3 is great & exploring technique in modern web era.” Designed by Vijay N. Vanve.
• CSS3 Alien Menu [ preview | download ]
  “Of course this is not for contest..(had no time to invent somethink outstanding T_T ) this is just to cheer you up he makes me smile. hope his ability will affect you too :D” Designed by Taras Kharuk.
• CSS3 OSX-like Dock [ preview | download ]
  “Mac OSX-like Application Dock for page/tab switching.” Designed by Aleksi Grön from Finland.
• CSS3 Autom.ato [ preview | download ]
  “The idea was to use only code to do the graphic design of this peace.The tipographic poster that Smashing Magazine once published was my inpiration. I only tried to do differently from that one. I was also inspired by a brazilian artist Abraham Palatnik (google it:)). He is known as a pioneer of technological art. His works with light are very beautiful and I watched them a little bit before I did this work. Oh! Autom.ato, I almost forgot, is an art group which I belong.We don’t have our blog yet, probably a good motive to continue the css3 learning.” Designed by Haidée Lima from Brazil.

Last Click

CSS3 Super Mario 3D Animated [ preview | download ]
Unfortunately, this entry was submitted too late and couldn’t participate in the contest, but it is certainly worth mentioning. Here are the insights from the developer: “After my latest CSS3 experiment without images (Internet Explorer Pure CSS Logo), a friend suggested to create an animated 3D Super Mario Icon based on the 3D Retro Mario GIF image by Cezkid. Well, this is the result of two weeks of work — an animated 3D Super Mario Icon built completely in CSS3 without images.” Designed by Andreas Jacob from Germany.

(mm), (vf)

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, css3

  

Sometimes, a picture can be powerful enough to be inspirational material all by itself. To provide you with some inspiration for the upcoming week, this sunday we feature some truly beautiful and impressive images from talented artists and photographers worldwide.

Whether in black and white or in colors, they are all related by a strong sense of composition and an emphasis on lightening and colors work. All images are linked to their sources, which you are encouraged to visit. Other work of the photographers we have featured here is certainly worth discovering as well. Please notice that some images are available as prints as well.

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

Beautiful Photography

Dreaming
Amazing sleeping beauty, where the beauty is actually also the beast, by Peter ツ. Prints are available as well.

Blue Sky

Far And Away

Inside Capitol Hill

The Endpoint
By Jeannette Oerlemans.

Falling Up

Song of Tide
By Wira Nurmansyah from Indonesia.

Blue
By Earl A. Jones.

Bunny Bokeh
Happy bunny bokeh wednesday, by Little Miss Patricia.

The Cat

Abstract
By tanakawho.

Ink Sea
By Hermin Abramovitch.

Fan’s Eye
A macro shot by LauHi.

falltuer

Painter
By Konrad Bąk.

Ant, The Driver
By Raphael Guarino.

A purple leaf
By National Geographic.

Flower Petal
By Alistair Campbell.

Keeper
By Wysseri.

Who Feels Love
By Ciuky.

In The Mood 4 Love
By Antonio Navarro Wijkmark.

Tunnel
By Kleemass.

Eyjafjallajökull
By Skarphéðinn Þráinsson.

Susanna Majuri
A disturbing yet insteresting serie of images by Susanna Majuri.

San Torini

Abandoned
By tEdGuY49.

blue canary
By Ursula I Abresch.

Bearded Dragon
A macro shot by LauHi.

Ant (by Unknown)
Please let us know who is the author of this image in the comments.

Light Paintings by Twin Cities Brightest

Last Click

The Plugs
Well, that’s not a beautiful photo per se, but we are confident that this image will spark your imagination for a more productive workflow — at least when it comes to handling cabels and plugs!

Would you like to see more similar inspirational posts?

Would you like to see more similar (inspirational) posts on Smashing Magazine?Market Research

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: photography, photos

  

Web professionals have to be both flexible and creative to meet the needs of each client — and these characteristics often transcend the design and development process. Each of us has a unique approach to our work. The particular mindset and methods by which each of us turns a mental image into a delightful and usable website is worthy of investigation.

In this article, we’ll discuss three approaches taken by many Web designers and developers. While a creative individual usually falls into more than one of the three categories, each of us is still likely more heavily weighted towards one. These approaches might help determine what paths someone is best suited for and might shed light on how they achieve their goals. So, without further ado, we introduce you to the artist, the scientist and the philosopher.

[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

The Artist

Sitting in a studio apartment, engrossed in Adobe Photoshop, ruminating on the powers of shape and color, is a person like no other. The artist is a creature of great creative power, who sees beauty in their surroundings and attempts to reflect it in their work while meeting the requirements of their clients. The artist might not be inclined to write the next Google killer, but everything they produce is inspired by their care and keen eye.

Definition: Artists are best defined as those who are more interested in the presentation itself than in the mechanics of the mode of presentation. Graphic artists, Web designers, content writers and podcasters often fall into this category.

Passion and the need to create are the hallmarks of the artist. Her wish is to satisfy her love of the visual elements of the Web industry. She relishes showcasing her skills and stays at the forefront of exploration in the field of design. Her imagination is matched only by that of children and children-at-heart.

Living in a fantastical world of beauty — which can actually breed sensible design — is not the only characteristic of the artist. Visitors are drawn to her work and feel an emotional connection to it. The artist also acts as a muse for other designers.

With a range of tools, the artist conveys emotion in a beautiful and professional design. Here are some examples:

Single-page animated websites powered entirely by Flash are common.

Typography that goes beyond Web-safe conventions can enhance artistic value.

Clean, visually appealing designs that attract many eyes.

Minimalism and a focus on content demonstrate a keen use of space.

jQuery animations and colorful focal points increase visual interest.

The Scientist

A cup of something caffeinated and some snacks lie on the desk. It’s the middle of the night, and a man is furiously typing away at his computer, producing line upon line of code to meet an looming deadline for “the next big social network.”

The scientist is a creature of habit, working longer hours than other colleagues. He has the stamina to render thousands of lines of PHP in an engaging, thought-provoking and memorable project filled with complexities and structured progress.

Web developers — their term — are well known for late nights and working at ungodly hours. They can produce code at the drop of a hat. While these habits may seem rather unhealthy, the scientist’s willingness to solve complex problems, his enviable powers of memory and his ability to solve problems logically make him a different but still inspiring creature in the technological world and workplace.

Definition: Scientists are best defined as those with an interest in code. Making things work and creating structure tend to be their top priorities. Think of programmers, developers, database workers and their kin.

Pictures of a coding monkey might come to mind, but remember that writing code is just as involved and requires as much creativity (though perhaps of a different sort) as the work of the artist and philosopher. It’s also just as much of a gift. To give you an idea of the inner beauty of the scientist’s work and of how this driven mindset can be a powerful asset, see the examples below.

Following specifications shows the scientist’s commitment to presenting code properly.

Server-side scripts process forms silently and in the background.

Innovation and careful planning lead to elegant and complex search mechanisms.

Keeping things simple increases speed and minimizes redundant code.

Frameworks and microformats facilitate well-maintained, elegant, optimized code.

The Philosopher

Our friend the philosopher sits on a train. He is on his way to meet a company. His laptop is open, and he is reading the business plan — or so it seems. Underneath, the wheels are turning; he is dreaming up a revolutionary way to help the business evolve. The philosopher, a unique breed, incorporates the skills of the artist and scientist while bringing to the table his keen insight into trends and target audiences. He is engaging and friendly, and he shows empathy, that rare and valuable gift.

Definition: Philosophers are consultants, officially and unofficially. They are masterful advocates and are able to coordinate and empathize with both artists and scientists. Think of accessibility and usability gurus, UX and IA advisors, SEO planners and information architects.

Those who design and build websites tend to receive the most credit in our industry. The philosopher knows that if he does his job well, he is invisible. His work should integrate seamlessly with the work of his colleagues. He is the person who performs UX and usability tests, audits websites and advocates for the end user.

The skills of such a person might seem questionable, but their understanding of the end user’s needs and their ability to help execute the team’s vision for the Web are attributes worthy of distinction. The philosopher is calmly neutral and can sense what is best for everyone involved.

Below are a few examples of contributions made by philosophers to the evolution of the Web.

Techi highlights that a well-structured navigation menu is paramount.

Jakob Nielsen is a famous master of usable Web design.

Philosophers put a great deal of thought into simplifying information requests.

Accessibility gurus consider the potential of mobile and handheld devices.

Looking for errors and potential improvement is all part of the job.

Which Are You?

The world is full of job titles that are meant to define people’s roles and usefulness. While a title can delineate a person’s skill set, it doesn’t come close to explaining how each professional sees themselves or what they mean to a community. A question inevitably left unanswered is: what makes an individual’s style and approach unique?

Bridge the Gap

Under the right circumstances, each of us gets to be all three: artist, scientist and philosopher. Being a Web professional often requires an equal measure of skills related to art and design, development and theory. Still, the way we conduct ourselves and perform our duties hints at our true “inner being.”

You’ve met these three equally gifted professionals (in this article and probably in real life), but keep in mind that distinguishing between these three types is simply an exercise in professional development. None are in any way better than the others; this field has a genuine need for all three. It goes without saying that approaching tasks in different ways helps us to be innovative. If you’re just entering the industry, perhaps a little self-analysis will help you find your niche.

We are all a bit of everything. Most of us can draw; even if we’re limited to stick figures and finger paintings, we all have an artistic outlet when we need it. We can all think logically, even if we don’t always show it; and our ability to work and code within parameters is helped along with HTML and CSS. We are all social beings, able to interact and understand one another, and we all have personal tastes. Everyone also has bad habits and prejudices. Stay open-minded and accept that “it takes all kinds”; a variety of skills and personalities makes the workplace vibrant.

We possess the knowledge and skills required to undertake the work our clients pay for, and acknowledging these three approaches can aid us in our work. In doing so, we might feel driven to learn new skills or find ourselves better able to understand and cooperate with our colleagues, and we might gain enough insight to take a step back from a project to get a fuller view of our goals.

Be proud of your unique approach (if it’s working), whether you’re an artist, a scientist or a philosopher. We are, each of us, unique, and we are more than the sum of our qualifications.

(al)

© Alexander Dawson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

  

You’ve met with the client, done the creative brief and gotten some kind of written agreement or contract. Work has been creative and progressing nicely. The joy and hope for life slowly return as the scent of money looms. So, with an overdose of sleeping pills no longer your retirement plan, you start to delete your suicide note and dispose of the envelopes containing instructions on terminating your accounts on Twitter, Facebook and LinkedIn.

Then, someone crunches some numbers and realizes that you can’t be paid what was agreed on. Suddenly, your contract becomes either a weapon in a brutal fight or a token to keep the job going in the hope of some pay and a return client.

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

The Hard Part Is Behind You

Many people start an assignment only after a percentage of the job has been paid. 50% is nice, but convincing the big clients that they are not your bank is becoming harder and harder, and the promise of payment in 30 days does not give you a warm feeling inside.

I am currently awaiting word from a client who has to evaluate some concepts and inform me of which to invoice (per piece). I am now in my sixth week of waiting, and then I have to wait 30 days beyond that to receive payment. I’ll be paid faster than the waiting period for approval for a large corporation. If you have the deposit fee, walking away is an option, but if you don’t, then you’re in a tough spot.

For hourly jobs, I always include a summary in each email of my hours spent. Sometimes, they actually pay attention and step on the brakes so hard that you can hear the job screeching to a halt. I have never worked on a project that didn’t go around and around and rack up the hours. Clients rarely connect the hours spent on committee decisions to the many extra hours they eat up. When they do and the budget is dried up, who do they turn to to make the project fit the budget?

When this happens, the strongest contract is worthless if you’re trying to finish the project, educate the client and show them a better method of coming in under budget while getting exactly what they want. The alternative is a collection agency or small-claims court (check your local laws for limits on small claims and civil claims); I prefer collection agencies, but you still may never see the money.

My Story Of Horror Averted… For Now

This story involves a website for a mid-sized company. Because the boss’ son knew my wife, his cousin asked for the “family discount.” The discount wasn’t enough to sting, so I agreed on an hourly rate and began. I was to work with the boss’ secretary as my contact person. A couple of weeks rolled by, with changes and odd requests coming in. The requests were implemented, and more requests came in, sometimes reverting the project to a previous version. This went on for a while until I got a call from the boss one weekend. He was angry that I wasn’t following his directions and wanted to know what my problem was.

I sent him several emails showing the instructions for the changes. There was some silence on the phone before he muttered, “Oh… my… God.”

He said he’d get back to me and hung up. Monday afternoon he calls to relate a story that is unfortunately not entirely unfamiliar. His secretary, it seems, has always wanted to be an art director. She had no formal training but apparently loved the idea of having the power to hold meetings and tell designers what to do, because apparently that was her impression of what art directors did. That and drink a lot of gourmet coffee.

She ignored what the boss wanted so that she could run the project and present it to him as her “art direction.” When I told him that she had wracked up about $2,000 in changes, he hit the roof.

“You can’t expect me to pay that!?” he boomed.

“I did everything I was told to do by the point person you assigned to me,” I answered softly, hoping my tone would bring him down a little. I knew he was furious and wasn’t about to part with another $2,000 (family discount included).

“I can’t afford another $2,000 in the budget.”

“I can’t afford to walk away from $2,000 of work I did, forsaking other work, so the money can’t be replaced or forgotten.”

“You’re going to have to work with us on this,” said the client, a little more down to earth, but obviously worried I hadn’t given in right away and cut my bill.

“May I suggest you take it out of your secretary’s pay?” I gently suggested. “I’m sure she’s worried about losing her job right now, and she’d probably prefer to pay out of pocket than just be fired.”

“I’ll get back to you,” said the boss before hanging up. His tone indicated that he hadn’t decided whose head would roll.

After about a week, he called back and informed me that I would be working directly with him. He told me what he had asked for before the secretary (whose name he never brought up again) messed with his directions. We completed the whole thing in a week. I don’t know what ever happened internally. Later on, they called a couple of times to revise a page or two on the website, but eventually they stopped calling and later redid the website with someone else very cheaply — probably in cost and certainly in look.

I did get paid the entire amount, minus the family discount, and it led to more work. I never renegotiated, but I would have to save the client. My gamble may or may not have paid off because the relationship went on for a brief period, but I was prepared to renegotiate to keep this client with the “dysfunctional family discount.”

I’m Often Asked to Renegotiate

Sometimes renegotiating gives you a better deal. Sometimes you just have to take a lower fee and hope it leads to something better down the road. And sometimes you have to cut your losses, take some money and learn a lesson. I wish I knew what that lesson was. I think it’s to say, “Yes.”

A good client of mine, a huge corporate entity, assigned me the challenge of coming up with innovative initiatives. I could submit up to three, and each idea accepted would pay me enough to buy all the fast food lunches I wanted for the rest of the hour. I submitted three, but the point person felt that one of them wasn’t quite there and so would pay me a fifth of the agreed-upon slave wages. What kind of candy bar would I buy with that money?

“I could never, in good conscience, invoice you for something that you are not 100% happy with and will not invoice you for that initiative,” I wrote. “I must also state that this negates our contract for ownership on this piece only.”

He agreed and was obviously happy with the renegotiation because he has since sent me better-paying work, and I was happy to retain the rights to the initiative, which I shopped elsewhere.

What if he had insisted on paying less for ownership of the third idea? I would have given in. The client was too important, and all that would happen is my pride would be hurt and the client might have made a huge windfall from the idea and looked forward to cheating me again… well, you know what I mean. They would see my value, and obviously I’m willing to be “flexible.”

Being “flexible,” in my experience with work and life, means inconveniencing myself because someone else screwed up. I use different words, but never in mixed company.

In negotiating a contract with another client, the partners agreed that I should include “… and anything else we deem necessary.” (People who have heard this story love it.) Obviously, entering the slave creative trade wasn’t acceptable to me, and so they told me they needed to work with someone “more flexible.”

My guess is that either they never found someone to launch their business or some poor soul is owed many thousands of dollars.

What To Do When Asked For a “Flexibility” Mid-Project?

There are many schools of thought on what to do when you’re asked to be “flexible” with your work and invoice right in the middle of a project, ranging from quiet acceptance to violent government overthrow. Let’s explore the middle road.

When you’re asked out of the blue to reduce an invoice or provide extra unpaid work, the first thing you have to do is think. It’s okay to sit on your response overnight, depending on the deadline. If it comes via a phone call, then you can say to the client, “I understand your dilemma. I’ll need to crunch some numbers and come up with an option or two that will make us both happy and allow us to finish the project on time. Let me call you tomorrow with some great solutions.”

They may press for an answer right away. You’ll feel the pressure. Explain that a lot is at stake, and you want to be sure that everyone walks away from the renegotiation happy.

If they press further still, well then, think quickly and engage them in a negotiation. Here are some possible responses you can give:

— The first thought off the top of my head is to cut the number of changes by having one point person draw together the requests and decide what is necessary. That would cut the number of hours. Does that help you out?

— I can’t really reduce the invoice because it’s time that I can’t make up with other projects. What if I stretch out the payments over six months so that the overage falls into another budget period?

— I’ll give you a discounted rate on the next assignment to even it out.
[Wouldn't it be something to use that line on a client for a change?]

— If you can get me two dozen items of the product, I could easily agree to changing the monetary part of our agreement.

— You carry some products that we could use to barter.

— You have a service I could use, so let’s barter.

(Check your local laws on the value of bartered goods for taxation purposes, and always barter at the wholesale cost, not the retail cost.)

There are several ways to get paid while remaining “flexible.” When asked to renegotiate, think of what you want. Do you want the client to be a regular client? Do they give you enough work to even be regular? Has working with them been a positive experience? Is the fee structure good? What are you really giving up? Do you have another project waiting? Will a few unpaid hours dent your income from other clients? Is the client the type that would appreciate your sacrifice? Will you get referrals from this client? Does the 50% deposit cover your output so far, and could you just walk away now and leave them to find another freelancer?

Big Lies About Being “Flexible”

I became very close with many ad agency art buyers, and when they would get liquored up, I could easily get them to spill the industry lingo. They would laugh as they spat out slogans that had no meaning to anyone. I think back to the many times I heard those slogans thrown my way and how the laughs must have mounted at my expense as I left.

If you hear this:
“We’ll remember that you did us this favor…”

Insert the following:
“… and avoid you like the plague because of it.”

If you hear this:
“We ran over budget on this project, but you can add it to the next invoice…”

Insert the following:
“… which will never be happen because we’ll never run out of freelancers to screw.”

If you hear this:
“It will take you 10 minutes to do this…”

Insert the following:
“… But it will take you six weeks to listen to me say ‘I’ll know it when I see it’ and to listen to all my stories about my vacation to Fiji and my new Maserati.”

If you hear this:
“I just don’t understand how a design for one simple movie poster could cost more than $500?…”

Insert the following:
“… After all, it’ll only be used for the worldwide rights to all merchandise for this blockbuster film, and we expect the poster image will bring in only $485 million.”

(It’s long been the practice that illustrators, photographers and designers would charge more for work that would be licensed out. Licensing rights are just as important as the money earned from time spent on the actual work. The story of the Nike logo shows a happier ending.)

If you hear this:
“Oops! I typed $500 instead of $5,000 on my budget report. Could you give me a break here?…”

Insert the following:
“… so that I’m not fired when you show the contract to my boss.”

If you hear this:
“The client loves your work and wants to use you for further projects, but could you lower your fee as a kind of test?…”

Insert the following:
“… which you will fail, even if the work is great. Ha-ha! Satan wins again!”

It seems Satan has quite a following in advertising. As if we didn’t know that. How do you think agencies get work for the Super Bowl?

People will tell you all kinds of things to get what they want. We do it, too. The key is to know when to keep one’s mouth shut and when to negotiate one’s way to a happy solution, with as little of Satan’s influence as possible. You may not be cowering from him in subservient terror, but you’re stuck next to him on a cramped bus for the entire ride.

Related Posts

You may be interested in the following related posts:

• How To Spot A Sketchy Client (Plus A Contract Template)
• Web Design Criticism: A How-To
• Why Design-By-Committee Should Die
• Dealing With Clients Who Refuse To Pay

Would you like to see more similar articles on SmashingMag?online survey

(al)

© Speider Schneider for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: contract, freelance, renegotiation

  

Despite its privacy issues, Facebook clearly has a key role in global Internet activity. It has become a kind of universal social network, being used for both personal and business needs. For many individuals, companies and organizations, Facebook has become an integral part of their branding strategy and promotional campaigns.

Facebook provides many tools for maximizing the effect of your presence on the social network, most of all by means of business pages, also known as fan pages. Using a variety of applications and Facebook API tools, one can get creative not only with the page content, but with the design, too.

In this post, we’ll give you an idea of how to use Facebook for your business and self-promotional efforts. Below, you will find best practices for custom Facebook fan page designs, with various approaches to creating an attractive, descriptive and engaging Facebook business page. In addition, the selection of tutorials and resources for Facebook fan page development might help you get started with your own effective Facebook presence.

By the way, it’s been two years since Smashing Magazine’s Facebook fan page launched (now with 18,500 fans). We have worked hard to integrate discussions, useful tips and give-aways to make the fan page more appealing and engaging.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Showcase Of Well-Designed Facebook Fan Pages

Giants of the Industry

Big brands demonstrate the best use of Facebook by far. Getting millions of fans may not seem like a big deal for Coca-Cola or Victoria’s Secret, but these companies managed to create fan pages that engage users on a much deeper level than by just asking them to click the “Like” button. An interesting trend seen across this category is of large companies taking Facebook to a new level, putting it at the center not only of their social media campaign, but of their entire online presence.

Starbucks
Currently with the number one fan page for a brand on Facebook (with almost 8 million fans), Starbucks takes a distinctive approach, focusing less on loud entertaining apps and more on high-quality content and beneficial offers for its fans. Starbucks has learned how to effectively use status updates and how to share a lot of interesting, useful and engaging material aside from its product updates. The company also offers a couple of interactive apps that not only are fun (e.g. the Instant Story tab) but that offer tangible benefits (e.g. discount coupons, and functionality that allows fans to manage their Starbucks accounts right in Facebook). The fan page also has an interactive map that links to the company’s regional Facebook pages (just as BlackBerry does, as we’ll see). With no unusual visual indicators on its fan page, Starbucks demonstrates that functionality is at least as important as aesthetics.

Red Bull
The fan page for Red Bull is by far one of the best on Facebook. By implementing a number of innovative ideas and engaging apps, Red Bull makes the best of its Facebook presence and thus stands out from business pages for other brands. A good example of this is its Twitter stream, which, instead of featuring just Red Bull’s corporate feed, assembles tweets from sponsored sports athletes and allows fans to connect with them beyond Red Bull’s domain. Live Web TV that anyone can view right on Facebook and a variety of fun games also encourage users to interact with the brand. While the welcome page is not in the default menu bar, it’s quite informative and serves as a compact graphic map of the entire Facebook page. Red Bull is also a pioneer of using Facebook as a recruiting tool; adding a careers board to a profile with so many fans makes sense indeed. Bravo Red Bull!

Skittles
Although Skittles’ fan page features two brightly designed, eye-catching tabs (one a graphic presentation with links, the other promoting its “Mob The Rainbow” campaign), the company has set its Wall tab as the default. This is typical of popular brands that don’t require an introduction. It allows fans and visitors to the page to immediately follow the company’s updates and join the conversation.

Coca-Cola
Another giant with a million-plus Facebook fans, Coca-Cola has a fan-centric Facebook page. It encourages active user participation and interaction between the brand and its fans. The landing tab is set to the Coca-Cola introduction, which contains a dynamic box with latest updates and a “Like” button, links to other social network profiles for the brand, a fan highlights strip, and info about the product and the page’s creators (by the way, this Facebook page was created by two Coke fans and then later supported officially by the company). Another highlight of the Coke fan page is photo albums: in addition to some standard product shots and event photographs, many other albums are included, presenting Coca-Cola not only as a popular beverage but as a multi-generational icon. Here is a good example of how to make use of photos on Facebook.

Twilight Saga
The default tab for the official fan page of the blockbuster series Twilight Saga is a large graphical tab promoting the latest episode, Eclipse. The custom tab incorporates elements of the movie’s website and the trailer, live Twitter updates, links to official websites and other info. Two other custom tabs are dedicated to the second film, New Moon, and the official movie soundtrack. The entire page is rich in content and delivers its information effectively.

More Beautiful and Engaging Facebook Pages

Room 214
A nice approach to the Facebook welcome page is demonstrated by social media agency Room 214, based in Boulder, Colorado. The default tab, with its nice duo-tone and sketchy font, looks minimalist and attractive, and it focuses on introducing its team members. The “About” tab has a clean two-column layout, with some basic info about the company in the left column and cute roll-over links to the staff’s Twitter accounts, official website, blog, contact page and corporate Twitter page. Another graphic tab covers the agency’s clients. A simple yet well-executed fan page design.

Porsche
The ColorStyler tab on the fan page for Porsche is so darn great that one immediately wonders why on Earth they didn’t make it the default tab? The pure FBJS tab allows users to select a Porsche model and customize its look in a live preview mode, with a nifty color and rims picker. One then can send the Porsche image to a friend or publish it on the page’s wall. This hidden gem makes the entire page shine.

Digital Turf
The fan page for Digital Turf is an interesting and rather confusing case. The page design itself is wonderful: the excellent company presentation, two-level sub-navigation, diverse data and cute style is a feat of FBJS and makes this one of the most attractive business pages you’ll see on Facebook. Here’s the confusing part: Digital Turf specializes in developing Web-building and media solutions for political campaigns and organizations (maybe not exclusively, but that does figure prominently in its list of services). The question is whether this design style communicates the company’s strengths well enough to attract its target audience. If it solved this concern, Digital Turf could turn its fan page, which is awesome as it is, into a Facebook promo bomb.

Revision Eyewear
The main tab of the Revision Eyewear fan page features an impressive Flash intro, with bold photographs and transitions and a dynamic “Become a Fan” link. The eye-wear manufacturer also uses Facebook for its charity work; a custom graphic tab on the page explains its causes and displays donation links (the “Become a Fan” button turns into a donation button—very clever).

Thurston & Betts PLLC
The Facebook page for law firm Thurston & Betts is notable for its “Like Us!” tab. A simple informational scheme in the center, with nice roll-over buttons leading to the company’s website, is a clever solution: neat yet substantial. The tab also includes the firm’s main contact info and a map of its location. It’s difficult to imagine a better Facebook page design for a law consultancy.

Daddy Design
The fan page of Miami-based Web design studio Daddy Design includes two custom tabs: “About” and “Portfolio.” Both tabs use the page’s entire width, which, along with the striking orange color scheme, makes this page hard to pass by. The business page is tied closely to the company’s official website design, and it highlights a neat FBJS portfolio, with links to Daddy Design’s social profiles. It actually creates the feeling of a website within the Facebook page. Great work.

1-800-Flowers
In our opinion, this is one of the best uses of a Facebook business page for e-commerce. By becoming a fan of 1-800-Flowers on Facebook, you can access up-to-date content, send virtual gifts to friends and shop for flowers right on Facebook (via the Flash-based application Alvenda). The company’s “Welcome” page has a simple and attractive grid, consisting of four sections that engage visitors with various activities. Also, the cool promo code field offers a discount to anyone who hits the “Like” button.

The Game – Team A
The Game, for the Sony PS3, has two beautiful fan pages on Facebook, dedicated to each of the two teams in the game. The two pages have a similar design, featuring beautiful graphical tabs (and especially fine typefaces) that link to the interactive Facebook applications. The “About” tab includes an interactive worldwide game stats map, which is a nice touch.

Oxelo
Oxelo’s fan page would be rather generic if not for the inventive Diabolo Roller tab, which promotes its new model of roller blades. Built with a Flash app, it allows a nifty 360-degree view of the product.

Teesey Tees
Teesey Tees use its Facebook presence effectively: it partially implements an e-commerce element from its website that allows Facebook users to browse t-shirt designs in a sleek FBJS gallery, directing them to the regular store for purchases. The fan page also includes a blog and a charming fan-only tab containing a discount code. There is no “About” or “Welcome” tab, and the default tab is set not to the product gallery (which one would expect) but to the Wall. While this is normal for big brands, it’s not so clear why a company with a smaller audience, such as Teesey Tees, would do this. Still, this is an attractive and well-executed fan page.

Threadless
Popular t-shirt producer Threadless takes the e-commerce on its Facebook fan page to the next level. Here, the native Facebook tee design gallery is supplemented by a size-selection menu and shopping cart buttons, which direct the user to the cart on Threadless’ website. The customer review section, with its “Share” and “Like” buttons, enhance the shopping experience of this fan page. Threadless also makes good use of the video and photos tabs, which, along with the live webcast section and active discussion board, make for an engaging, community-oriented Facebook presence.

Cranium
Board game Cranium has a beautiful Facebook fan page, which includes several promotional FBML pages. It doesn’t have any JavaScript gimmicks, just cutely drawn illustrations and cheerful colors that make for a positive visual experience.

Mark Meyer Photography
Mark Meyer’s business page is a good example of how to promote one’s personal brand effectively on Facebook. Using FBML and FMJS, the Alaska-based photographer outfits his custom tab with sub-tabs for his blog and photo gallery and an exquisite image slideshow. Status updates are also cleverly done, so that the Wall (the default tab) takes on the appearance of a photoblog.

Livescribe
The “Buy Now” tab on the Livescribe Smartpen fan page has an Amazon-ish design: it’s rich in content and options, but may require the touch of someone like Jacob Nielsen to be truly usable. Livescribe effectively uses multimedia on its Facebook page, which certainly presents its product favorably and is good for fan interaction on the page. But we would suggest that the company rearrange the position of its tabs, putting some interesting sections (such as the Pencasts, which are animated Flash videos of handwritten notes and audio captured by the Smartpen) in the main bar, instead of, say, the standard “Boxes” tab.

Bodum USA
The highlight of Bodum’s Facebook business page is its excellent use of an iFrame to embed the company’s online store and interactive catalogue, which is powered by iPaper, onto the Facebook profile. In other words, Facebook users can shop for Bodum products without leaving the page.

Soul City Church
The “Welcome” tab of the Soul City Church Facebook page is by far the smoothest pearl in our collection of fan page designs. The clean layout, the neat typography and icons and, of course, the awesome combination of black-and-white photography and energetic green elements result in a stunning intro page. It portrays the church as a progressive and contemporary community. Credit for the great job goes to Monster Eyes.

Diesel
Famous apparel brand Diesel has three out-of-the-mold tabs, the most noteworthy of which is the one labelled “Sex Sells.” It is built on a Flash app and provides a stylish and original showcase for the denim collection of the same name.

Lancome Germany
This one will appeal to those who admire good typography. The “About” section of Lancome Germany’s Facebook page takes on a website-within-a-tab format. It features elegant and polished typography, accompanied by high-quality photography.

Eco-Artware.com
The Facebook business page for Eco-Artware.com features a nice FBJS “Shop” tab. It’s a pseudo-shop, though; in fact, it’s just a featured product gallery, in which both product thumbnails and catalogue categories are linked to the official online store. Nevertheless, the clean grid layout and nice roll-overs for the product images make this a beautiful and useful fan page tab. Eco-Artware.com also makes good use of the “Boxes” tab by setting it as the default.

311
The official Facebook page of music band 311, particularly the “News & Multimedia” tab, is eye candy. Designed in a cool retro poster style, it contains basic info about the band and a built-in multimedia player. A large “Fan Photos” section reflects the band’s commitment to communicating with its fans. Well done!

Rei
Outdoor gear and clothing provider REI uses its Facebook profile to foster strong interactivity, rather than merely to present a plain front. Its fan page is basically a community portal where the company engages people with its social campaigns and projects. The fan page includes two Flash tabs that feature community pictures, links and fun family games.

Desigual
The fan page for Spanish apparel brand Desigual is bursting with color, freshness and style. It is versatile, with various types of promotional and entertaining content, yet not overwhelming. The mood is set equally by great content and classy design elements. Desigual points out that the page was started by fans and then made official by the brand; this is clearly illustrated on the Wall feed, where user-created updates are set to default along with the company’s messages.

Volkswagen
Currently featuring its soccer fan campaign, VW shows amazing use of FBJS on its page. Rich in content, up to date, well designed and heavily supportive of user-created content, this is the best Facebook business page that a popular automotive brand could have.

Living Proof
The fan page of cosmetics manufacturer Living Proof is all about interactivity and dialogue between the company and its customers. Chief among its many features is the dynamic Flash introductory tab, containing basic info about the company,a lab tour,a mini blog, links to customer support services and a corporate Twitter feed. The business page also includes an interactive app that helps customers choose the most suitable products.

Inspired Magazine
Inspired Magazine is one of the few Web design blogs that have customized their Facebook fan page. No fancy applications or high-volume presentations here; a minimalist FBML tab is quite enough to grab the attention of a random Facebooker and give them reasons to “Like” the page.

Sony Ericsson
Current Sony Ericsson promotions are presented via beautifully designed tabs, with videos, contest forms and interactive applications inside.

BlackBerry
Besides its several promotional tabs built with Facebook Javascript and Flash, the BlackBerry fan page features a nice FBJS map with links to local Facebook business pages. This does a good job of integrating the company’s Facebook presence and promoting its local pages.

Resources And Tutorials

Here is a list of websites and tutorials to help you understand the basics of developing and promoting your Facebook business page.

Facebook Developers
This is the ultimate resource for anyone who wants to take advantage of the variety of opportunities offered by Facebook. Related documentation, forum discussions, wikis and a showcase of best practices for Facebook integration are all aggregated in one place for both beginners and advanced developers.

Hyperarts
A lot of excellent tutorials related to Facebook fan page development can be found in the Static FBML & FBML archive on the Hyperarts Blog. The tutorials are geared to both beginners and advanced developers. The blog also features a series of video tutorials, which we’re sure will come in handy for many of you. Some of the most interesting tutorials from Hyperarts are highlighted below.

All Facebook
On the unofficial Facebook Blog, you will find news, articles, tips and stats related to the world’s fastest-growing social network. An extensive guide titled How to Develop a Facebook Page That Attracts Millions of Fans addresses its subject well.

How to Use Facebook for Business and Marketing
This guide takes a look at the potential of Facebook for business and reviews the various options business owners have in order to be effective with Facebook business marketing. Recommended reading.

How to Create a Facebook FBML Template
In this tutorial, you’ll learn how to create a Facebook fan page in Photoshop. It uses a page for a photographer as an example. This is the first in a series; the second lesson covers the coding part. The source files, including the code, are available for download.

Facebook Programming step-by-step tutorial
This tutorial series consists of 22 lessons and covers all aspects of Facebook programming, including application development, displaying fan-only content and creating an interface for a Facebook page.

Static FBML: Not Every Facebook Fan Page Needs an Application
In this tutorial the well-known blogger Alison Gianotto walks you through what a Static FBML is and why it’s sometimes quite enough to create an attractive and efficient Facebook fan page.

Extending Facebook Static FBML Tabs with Dynamic Content
Continuing from the previous guide, this tutorial explains how to add some spice to your Facebook fan page using the DynamicFBML function. You can build an image or video gallery or even a micro-site inside a Static FBML tab quite easily.

Taking Your Static FBML Microsite to the Next Level

Learn how to create sub-nav tab navigation within your Static FBML microsite using only DynamicFBML.

Creating a Custom Facebook Page
This useful guide gives you a head start on building your own fan page on Facebook. The tutorial includes such basics as Facebook page creation, restrictions on Facebook, creating tabs and displaying navigation and content elements using FBML and FBJS.

Google Analytics for Facebook Fan Pages
Another great post by Webdigi.co.uk, in which they show you how to get around Facebook’s limitations. Even though Facebook supports only restricted JavaScript, which is usually not enough for Google to correctly track visitors, the guys from Webdigi.co.uk successfully managed to get all functions of Google Analytics working on their fan page. You can learn how they did it by reading this tutorial.

How To: Build a Facebook Landing Page for Your Business
This is Mashable’s brief guide on how to add and configure a Static FBML tab on your Facebook fan page.

Internet Explorer and Static FBML: Using External Style Sheets for CSS
This insightful article discusses aspects of applying CSS styles to your Static FBML application in Internet Explorer versions and other browsers. The post includes an important update that takes into account changes in Facebook’s API that affect the implementation of CSS styles in static tabs.

8 Essential Apps for Your Brand’s Facebook Page
This article suggests a number of Facebook apps you could use to attract fans to your brand’s landing page and to make them return repeatedly.

Add a Custom Tab to Your Facebook Fan Page (Starter Template Included)
Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments.

Facebook Best Practices for Non-Profit Organizations
This Facebook fan page guide is written by Diosa Communications, a company that specializes in social-media consulting for non-profit institutions and small businesses. It’s not exactly a list of best practices in the traditional sense, but rather a number of recommendations on how to set up and promote a fan page to the best effect.

How To Create the Perfect Facebook Fan Page
Some tips you can apply to your Facebook marketing strategy that will put your Facebook Page leaps and bounds ahead of the competition.

Adding iFrames to Your Facebook Applications: 2010
Recent modifications in Facebook’s API further restricted the use of iFrames. For instance, you can’t embed one in Static FBML anymore. iFrames can still be used in the Canvas Pages application, though, which is the topic of this tutorial.

Developing a Facebook Application for Absolute Beginners
Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato.

Showcase

Not many galleries of Facebook pages exist yet. Still, the ones that do give us a pretty good idea of trends in this area.

Facebook Designs
This gallery is rarely updated, but it features some really cool Facebook page designs that we haven’t seen in other showcases.

Custom Facebook Page gallery
Custom Facebook Page is run by the social media marketing group North Social. The gallery contains over 60 Facebook page designs, sorted into several categories. The most recent showcase is dated December 2009.

Facebook Showcase
Facebook Showcase is the most frequently updated gallery of the ones covered here. A lot of inspirational Facebook page designs can be found here.

Facebook Platform Showcase
This showcase is slightly different. Here you can explore how companies around the world integrate Facebook on their websites.

Customize Your Facebook Fan Page: Tips, Tricks, Applications
A quick overview of basic tips and tricks for customizing and improving your Facebook fan page.

Facebook Fan Page Templates

Many freelance designers and design studios offer customization services for Facebook pages. Standalone fan page templates are less widespread, at least so far. To provide you with the best possible starter kit, we’ve collected Facebook business page themes that you can get either free or at a cost.

Free Templates

Free PSD Facebook Template | Preview | Details
This 520-pixel Photoshop layout of Facebook fan page tab is available for free downloading. If you are looking for a simple graphical presentation for your Facebook page, this template may come in handy.

Free PSD: Facebook Fanpage Template | Preview | Details
This is a free mock-up Facebook fan page with editable text, posting times and other elements.

Absolutely Free Cool Facebook Template | Preview| Details
This graphic FBML template, along with the PSD file, fonts and HTML mark-up, is available for free downloading. The package also includes an installation manual.

Free FBML Template | Preview | Details
You can use this multi-tabbed Facebook page template for free only if you maintain the links to its creators and the copyright info in the footer.

Facebook Template Page | Details
This is quite a different Facebook page template. Basically, it’s a worksheet available in text and PDF formats, allowing school students to construct a Facebook page for a character from a story or some other purpose. The template has been downloaded over 10,000 times and has gotten a lot of positive feedback because it is a new and exciting way for students to comment on their readings. You have to register to download the template.

Commercial Templates

Photographer Facebook Template | Preview | Details | All FB templates
A sleek graphical FBML tab, with an image gallery, text sections, social networking buttons and a reminder to “Like” the page. The template package consists of source files and the Facebook installation guide. Price: $15.

Corporation Number 1: Facebook Tab | Preview | Details | All FB Templates
A minimalist Facebook page theme, with space for one main image, the company’s logo or tagline, two paragraphs of text and links to social media resources, including an optional RSS feed. The user can also add images, contact forms, videos and other elements to the template (no coding skills are required). Price: there are two subscription plans to choose from, although only one of them (Standard) is active at the moment – $14.99 per month. Free trial option is available, too.

My Style Facebook Flash Template | Preview | Details | All FB Templates
Among the highlights of this Flash-based FBML template are diverse transitions, multi-tab sub-navigation and a large image gallery in the tab header (760 pixels in width, of course). Instructions on how to upload the template are attached; and the developer offers additional customization services. Price: $18.

Website Image Gallery Template | Preview | Details | All FB Templates
This FBML template features a FBJS image gallery, horizontal top menu navigation, social networking links and side images. The website does not mention whether installation documentation is provided; perhaps it is provided upon purchase. Price: $20.

Facebook Flash Template | Preview | Details
This is another version of the Flash-based “Welcome” tab for Facebook fan pages. It’s actually a mini-site, 520 pixels in width, with three sub-pages, including a slideshow and image gallery. It comes with step-by-step instructions on setting it up on Facebook. Price: $13.

(al)

© Julia May for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: facebook