September 2010 Archives

Beauty Packaging: Lip Balm & Gloss

| No Comments | No TrackBacks
I really like cute package designs of lip glosses and lip balms. These can come in all shapes, including plastic cupcakes, tarts, doughnuts, and chocolates. Some also come in cute branded tins. The cute lip gloss designs appeal to the little girl in me. In this post, I've added several examples of innovative designs for lip balm and gloss.

"Joe and Paul" have several nicely-designed products. They use a lot of old-fashioned designs and florals in their packaging. One of their past products was lip gloss branded with 'Alice in Wonderland'; the most recent addition to their brand are patterned sticks of lipstick with cat heads carved out of the top of the lip stick. This is a little unusual, and I am not aware of any other company carving a design out of their lipstick, but it's certainly different.


Other gloss includes Victoria's Secret limited edition lip gloss, Maiko lip balm, and DuWop's Lip Venom. Victoria's Secret lip gloss celebrates the style of demin/jeans. Maiko, a Japanese company, sells lip balm with cool and collectible Japanese-style design on the packages, and DuWop's Lip Venom package stands out with a simple design, muted colours, and large font.


Scharffen Berger's Ganache for Lips comes in several dessert-themed flavours with edible-looking packaging. Cheeky Chimp has several cute package designs for its lip balms, including several with chimps, but I like Chocolate Truffle.

Urban Decay has launched a series of lip glosses with different men on them. When the lip gloss package is turned upside down, the men are revealed in just their underwear. Nice! I also liked the antique-looking little tins of lip balm from MOR Cosmetics.


Love & Toast has some very cool package designs for its whole product range. I love the colours - bright pink packaging and neon green lip balm. The packaging uses hand-drawn imagery and fonts, and it's very well-placed for young-at-heart (music and festival) buyers. 


Colour and Branding on the Web: Blue and Red

| No Comments | No TrackBacks
I have always been interested in the role that colour plays in psychology and marketing. Obviously, different cultures perceive different colours in a different way. 

The following articles look at colour branding trends for websites and logos - blue and red are the most used colours on the web, and this has been the trend for awhile (1). I think that blue has always been a popular colour in branding because it is a colour that most people respond to; typically it is also a favourite colour of many worldwide. Blue is a colour accepted by other males and females as the most favourite colour worldwide (2).

Using the correct colours or colour combinations in branding is important, and companies spend a lot of money on their image. Blue is one colour that has wide appeal, so I believe that many companies, particularly start-up companies, use this colour. The colour is also widely-used across different types of companies. The colour is a calming and stable colour, but blue can also be used to signify importance and power. Twitter, Facebook, Hewlett Packard, Dell, Paypal, Expedia, CNN, Wal-mart, NHS, and Microsoft are all examples of websites (and corporations) that use blue as a predominate colour.

Red is popular as well, and popular brands that use this colour include BBC, CNN, YouTube, Yahoo!, Adobe, Coca Cola, Canon, and

Although blue and red are the most popular colours for brands, other brands are spending more money on selecting other colours and getting the shade of colour trademarked, such as T-mobile has done with the colour magenta; if all brands did this, colours would be a limited resource (3).

(1) The Most Powerful Colors in the World, COLOURlover. September 15, 2010. [].

(2) Anatomy in Colors in Web Design: Blue and the Cool Look, Aidan Huang. January 22, 2010. [].

(3) Color: the Next Limited Resource?, Francisco Inchauste. November 11, 2009. [].
FaceBook has launched a new tool to enhance its social network. Open Graph is a protocol for representing subjects (such as books, websites, films, restaurants, celebrities) as searchable Facebook pages. 

Imagine that you own a personal website. For marketing purposes, you wish to add a FaceBook 'LIKE' button to your website. In addition, you would like FaceBook to 'know' about your website and for it to show up in other user's profiles. This is where Open Graph comes in. In order for FaceBook to use your website as a FaceBook object (page), you will need to define the markup/schema, META tags, and include a 'LIKE' button.

In the <html> tag, you will need to add the Facebook and Open Graph schema:
<html xmlns:og=""
Next, you will create your Open Graph META tags within your <head> tag:
<meta property="og:title" content="Personal Website"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="http://URL"/>
    <meta property="og:image" content="http://URL/image.gif"/>
    <meta property="og:site_name" content="personal"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description" content="A description goes here."/>
Thirdly, you will need to create your 'LIKE' button; I've used both the IFRAME and the XFBML versions. (The XFBML version offers more control.) The FaceBook Developer website has a tool that creates the code for the IFRAME version of the 'LIKE' button for you.

That's all there is to it. Simple. However...I have racked my brains this weekend on a particular issue; it's the first development piece of work that I have done using the Open Graph API. Upon creation of all the elements mentioned above and looking through numerous examples and the developer forums, I came to the conclusion that this feature in FaceBook is 'broken'. Facebook never created the 'object'/page for my entry; my entry was never added to the Open Graph. (I understand that this could take a few hours to happen as FaceBook needs to scan the tags on the pages.)

When the Open Graph is used and the 'LIKE' button is clicked (by the profile listed in the META 'Admin' tag), this profile should create a FaceBook page as an 'object' which can then be tracked in your Facebook profile under 'My Pages'. The 'object' is also meant to be added to your profile's 'Likes and Interests' section in the 'Info' tab. This did not happen. The 'LIKE' button can be clicked and added to my profile's wall with an optional comment, but that is it.

My next test relied on using an existing URL in my 'LIKE' button's IFRAME code that already has a FaceBook object associated with it. Whereas I obviously would not see the page in 'My Pages' (as I am not an administrator), I did note that the item appeared in my profile 'Likes and Interests' section in my profile. But, as soon as I swapped the URL in the IFRAME for my website's domain name, the URL was not happening. The existing URL worked because an OpenGraph object had already been created.

I also completed another test to ensure that my META tags are correct. FaceBook's own URL Linter has been down for a while, but I came across this:, and this does the same checks.

It is a little disappointing that FaceBook seems to be neglecting its development tools, which some companies do want to use for marketing their businesses. Let's hope FaceBook fixes the issues soon so we can continue developing.

An Afternoon At Kew Gardens

| No Comments | No TrackBacks
I visited Kew Gardens (on the outskirts of London) recently, and I got a few photographs of the different plants and the grounds of Kew Gardens. Kew Gardens has many outdoor and indoor gardens showcasing plants from all over the world. One of the activities includes climbing many stairs to the same level as the tops of the trees for excellent views and a walkway over the gardens.



Planning for A/B Testing

| No Comments | No TrackBacks
One of the tasks that I am currently working on involves using A/B testing and investigating areas where this can be used on the current websites. For those who have not heard of A/B Testing, A/B Testing is the ability to test changes to the user interface on a website in order to determine if these changes are beneficial to the users. This tests one version (or aspect of the user interface) with one or more versions; a defined percentage of users will randomly get one version. The test results statistics will be examined to determined if the user interface change should go live. A/B Testing will highlight whether or not the change draws users in or sends them running away.

However, there are certain aspects of A/B Testing that should be followed. One of the clients had mentioned making several changes to several different areas of the website and tracking which version of the website was more useful to users, but multiple changes are not recommended. With multiple changes, it is unclear which aspects or changes are beneficial. 

In "The Dark Side of A/B Testing: Don't Make These Two Mistakes!", the author mentions a retailer website's multiple A/B tests; the company's revenue increased, but they were unable to conclude which aspect of the test increased their revenue because major multiple changes to the website had been made (1). In short, developers and business owners need to be very careful when writing their tests.

However, if multiple changes need to be made, developers can use Multivariable Testing. This form of testing allows multiple versions for user interface changes to be created, categorised, and tested over a period of time. According to "Multivariable Testing", A/B Testing is superior to Multivariable testing because A/B Tests are easier to set up, results are quicker, clearer and more accurate; however, Multivariable Testing is acceptable if used with care and when multiple changes are absolutely necessary (2). The article also provides a checklist of notable considerations and influences when using A/B Testing as opposed to Multivariable Testing, and this is well worth a read.

In short, business owners need to be clear of the A/B Testing objectives and to take care when making decisions about testing their websites.

(1) Balkin, Matt. "The Dark Side of A/B Testing: Don't Make These Two Mistakes!". [2 November 2006].

(2) Alt, Brian and Usborn, Nick. "Multivariable Testing". [29 December, 2005].

Facebook 'Like' Button URL errors

| No Comments | No TrackBacks
In the wonderful world of the web, a problem was encountered today with an implementation of the FaceBook 'LIKE' button and certain URLs. (The fun never ends.) 

I am currently working with a website that contains many dynamic links that are created based on names. Normally, the names contain straight-forward text. However, there are some names that contain other characters, notably the forward slash. The 'LIKE' button works perfectly until it encounters the forward slash in the URL. (A quick test of the ampersand revealed a success on the 'LIKE' button, so it only seems to be the forward slash that creates the error.)

Encoding the URL with the value of the forward slash was the obvious fix for this issue, but FaceBook encodes the values back to the forward slash. The result throws a 'Page Not Found' error when clicking on the posted URL in the FaceBook profile (the result of clicking on the  'LIKE' button.)

At least I am not the only one having this problem; the problem has been flagged by other developers as a bug. Until then and if possible, the work-around would be to remove any forward slashes from the URLs if you intend to use the FaceBook 'LIKE' button.

Happy developing!


Recent Comments

  • jenn: Thank you. read more
  • Murge: Amazing post. read more
  • Herbert: good post. site read more
  • Frank Quake: Hey, This is great when you said that I had read more
  • Chappy: You mention peptides here? I have had first hand experience read more
  • jenn: Thanks! I love the work. I have got more recent read more
  • Fanakapan: Thanks for the write up. This was some of my read more
  • jenn: Yes.... but that's only for the islands. Mostar and Montenegro read more
  • jenn: Hello, the code is not mine to hand out. I'll read more
  • pantich: More info about the best day trips from Dubrovnik can read more
OpenID accepted here Learn more about OpenID