Tuesday, April 20, 2010

Interactive calligram

by Rick Ligas

I must confess that I would not ordinarily think of a calligram in terms of search engine results. Laura Ruggeri however would. In fact figuring out how a calligram could effect search engine results was part of Laura's thinking when she set about designing a calligram to celebrate her (first) 25 years as a graphic designer and I am happy that she involved me.
Laura had the idea to create a "25th anniversary" calligram and post it as the home page of her website. At first it sounded straightforward: a block of text describing her projects would spell out the numbers "25" in color, but Laura wanted it to be more than that. In addition to the "25" calligram she also wanted the individual words to be links that showed corresponding examples from her portfolio - and the words would be something that she hoped the search engines would take note of, after all, she intends to be an active graphic designer for another 25 years.

So, with this specification she came to me and asked, "Can I create a square, fill it with text, colorize some of the words to create a 2 and 5 then add links here and there and have them show portfolio images when visitors roll over them? And do it in html and css and have that work in all the browsers?"

Well, I like a challenge so I said, "Ahhh, sure." It took a bit of work in HTML/CSS/JavaScript but the results are what I believe to be the first ever in the world interactive calligram, a calligram that responds to you hovering your mouse over it.

Give it a try on her home page: www.LauraRuggeri.com

There were a number of technical challenges to overcome, as there always are in HTML/CSS/JavaScript. For anyone interested in how we did it just view the page source. All the necessary HTML/CSS/JavaScript is contained in the page. We were able to make it work in recent versions of all the major browsers except FireFox on the Mac. And for that I created a special exception in the JavaScript.

Congratulations to Laura for her first 25 years of design and also for creating what seems to be the first ever interactive calligram.

Rick Ligas

Sunday, April 11, 2010

Six-legged dog calligram

Eni transformed its famous and historic six-legged dog logo into a calligram advertising its "Master in Energy, Environmental Management and Economics" program at Eni Corporate University.

The audience for this calligram is young, intelligent, creative, sensitive... students from universities called to be trained in strategic planning, business analysis, relationships with regulatory authorities, etc. in the specific context of energy and environment.

The calligram is formed by hand-written words recalling the sixties.

The six legs say (from left to right):
internazionalità (internationality)
ricerca (research)
cultura (culture)
rispetto (respect)
formazione (education)
sviluppo (development)

The main part of the body of the dog is taken by the name of the company's educational facility "ENI CORPORATE UNIVERSITY" (notice the capitalization). The head is the company's name, "eni" while "energia" (energy) is reserved for the red spit flame.

I was able to take a quick screen shot of the animated Eni online campaign featured on a side bar of a national newspaper so I don't know who created the calligram.
Below the six-legged dog there is like the artist's signature, but because of the low quality web resolution the name it's not legible.
If you have more information, please, make a comment to this post, it will be very much appreciated.

Read more info about