Curated by: Luigi Canali De Rossi

Monday, January 15, 2007

Create Interactive Image Portfolios That Can Be Embedded On Any Web Page: Leafletter

Sponsored Links

If you want to create an electronic portfolio of creative works or a visual conundrum of images on a specific topic, to be easily integrated within an existing web page or in need to be distributed virally across as many sites as possible, Leafletter may just have what you are looking for.

As a matter of fact, Leafletter new web-based solution, makes it possible for you easily to create great-looking micro-websites out of any text and set of images you may want to utilize. The resulting visual mini image portfolio is completely navigable and can be embedded into any web or blog page effortlessly.

"Leafletter allows you to create a Flash mini-site and to integrate it (via cut and paste) in any web page, blog or social network page. This application is very useful to create a virtual portfolio and it has been conceived for designers, for media and to share multimedia content."
(Source: Telapuntozero)

"If you are artist, designer, or photographer, or you dedicate yourself to any profession in which you have portfolio to show your work, Leafletter is indispensable."
(Source: TecnoChica)

Leafletter greatly appeals to non-geeks, to all those who crave for the effective integration of visuals and text within their web sites, and in particular to those who need to showcase or provide more in-depth access to annotated image sets without wanting to break flow of the web page they live on (as it often happens today).

With it, anyone can quickly upload and arrange multiple digital images within a customizable visual box, add text and hyperlinks, and publish the resulting web widget with the minimum of hassle.

In the following review, I take a look at how Leafletter promises to take the pain out of creating interesting and innovative dynamic mini layouts that can contain multiple interactive information elements, regardless of your technical and design abilities.

Introducing Leafletter

Leafletter brings good looking layouts to the rest of us, and I was pleasantly surprised by how easy it was to get simple pages up and running. If you think of it as a cross between web widgets - in terms of the ability to quickly create and embed dynamic content - and the recent online presentation tools such as Spresent, you will be in the right ballpark.

But Leafletter doesn't really fall into either category in that it's main function is the creation of visually driven micro-websites that you can easily navigate as if you were thumbing through a leaflet or portfolio. For this reason, it will be a popular tool for anyone looking to put together a collection of page layouts gathered together as an online brochure, portfolio, site introduction and so on.

It's all about grids

These days, of course, design takes place almost exclusively using computers, but some of the fundamental methods used in putting together layouts remain the same. Grid layout evolved in the pre-computer era as a way of creating coherent designs that hung together well, with a certain visual consistency. If you think of the page (or screen) as a grid, it becomes easier to start placing elements together in a visually pleasing way, rather than just slapping images and text haphazardly together.


Leafletter works from this simple grid system to make image sharing and presentation as easy as selecting from a range of 36 preset layouts. If that sounds restrictive, what you have to bear in mind is that these grids are little more than a skeleton for your content. By the time you have selected the colouring, image and text placement of your final page, the grid will have all but disappeared, leaving just well placed design in its wake. Pick up any magazine, and if you look hard enough, you'll see the same process has taken place.

Making grids your own

If the grid is the skeleton of your design, it is made your own through the selection of content, colour scheme and spacing. While Leafletter can't teach you which colours work well together, or where to place your images and text in relation to one another, what it can do is make trying out different possibilities very easy.

Within the squares and rectangles of your chosen grid, you have three basic decisions to make:

  • Which colour would you like the square to be?
  • Is the square going to be host to an image, or left blank?
  • Or will you use it to add text to your layout?

These are, of course, the fundamentals of layout - text, images and blocks of colour placed on a page. Leafletter does allow for a little more than that, but let's look at the basics first.


The menu is a simple one, and lets you quickly get to work on customizing your layout grid. Each individual square can have a different colour, which can be left blank, or else used as a backdrop to an image or chunk of text. As you would expect, there is a good colour range to choose from and there is a fair selection of different tones available should you want to go for a monochromatic look to your design.

One thing I would like to see made available is the ability to turn off the grid lines, which I sometimes find distracting in the visual results of my final layout. It would be nice to have blocks of colour available without these black lines penning them in, and hopefully future editions of the service will make this an option.


Selecting images is also both easy and versatile. You can upload images directly from your hard drive, access your Flickr account and import from there, or even point Leafletter at any URL containing an image. This makes for a very flexible way of sourcing images, and takes the pain out of having to upload them individually if you already have your visual work online.

So, while Leafletter's image sourcing options are indeed commendable, another potential improvement I would really like, would be the inclusion of a visual Flickr browser, like that featured in SPresent.


Adding text to a block of your grid is even easier than adding images, and there are several fonts to choose from, in addition to being able to select text colour, alignment, justification and all of the other typographic controls you normally would find in your preferred word processing program.

By leveraging these fine information design variables such as background and text colours or alignment and font size it is possible to create some truly effective micro-designs which can be used for a wide number of useful applications.

Beyond print - the dynamic elements of Leafletter

Leafletter goes a step beyond the print medium, however, by bringing in dynamic elements that make it possible to both hyperlink images and text, and also to enlarge and display information about a given image.

Indeed, upon selecting an image when creating one Leafletter layout, a unique feature provides the ability to add more information depth to images themselves: you are given a choice between two image types - a "static" image, or a "springboard" one.


If you choose to have a static image, the image will nicely sit in the grid block you will place it in, but if you opt to have a springboard image, the picture utilized will take on a dynamic aspect. Springboard images have the ability to dynamically display an 'information' icon every time you hover your mouse cursor on them.


Furthermore, by clicking on these images, these will be resized to fill the Leafletter full layout and "mousing" over the 'information' button beneath each, will display further text-based info about the image in a semi-transparent text box.


Such a feature allows you to make communicate at two possible levels: one more exclusively visual, and a deeper one, which leverages the aid of textual information.

One effective use of such ability for Leafletter would be also in the delivery of widget-like presentations where the additional text info connected to each slide can be visualized on demand by click-zooming on the image, or in personal electronic portfolios, which would greatly benefit from the simplicity and effectiveness of such a tool.

For media designers for example, Leafletter provides an unbeatable portfolio creation and publication instrument, making it extremely easy and effective to provide access to design and publication work that you have created. This provides the unique benefit of being able to provide easy access and showcase of your best work in context, without needing to immediately send your readers off to another site.


Nevertheless, should you wish to have your micro-site hosted, this is also an option, as you are provided with a unique web address for it as soon as it has been saved.

Not one, but several

Given that the resulting layouts can easily be embedded into another website, Leafletter would work pretty well if it just created single page layouts. As it is, Leafletter gives you option to multi-page layouts as well. These can be navigated via numbers displayed at the bottom of any new micro-site you create. The result is a quick navigation scheme, especially given that pop-up titles appear for each page as you roll over it, and this additional ability to rapidly create a series of interconnected pages is absolutely great.


As nothing is perfect on the web and given the fact that Leafletter is a brand new service, I do have one slight frustration about this navigation bar, which could be made even more intuitive to use. To move between pages you have to click on number one, and then slide the mouse left or right to activate the next page in line. For me, it would be better to be able to simply click on the numbers, and display them along the bottom, so I have an idea of how many pages are involved. As it stands, it would be relatively easy for users to overlook pages 2, 3, 4 and so on because of this slightly unusual navigation choice.

In conclusion

Leafletter is a very useful tool and will appeal to both those looking to sharpen up the look of their Flickr sets, and to those looking to put it use for professional applications, such as electronic portfolios and web-based product brochures.

The ease with which good-looking layouts can be produced with Leafletter is impressive, and while the service is not meant in any way to be a replacement for traditional information architecture and web site design, the micro-content widgets you can create may positively enhance your news or blog site by providing the ability to seamlessly mesh in valuable sets of navigable images, presentation slides or news story views directly within a larger specific context.

With a great selection of predefined layout grids and click and drag editing, Leafletter provides a completely new and very effective way to enrich, deepen and extend any web page with the addition of an embeddable, navigable and fully customizable image and text navigator.

With it, online slide presentation references, professional electronic portfolios, digital brochures, as well as research reports and breaking news stories can all add an extra layer of visual information that not only enriches the user experience in multiple ways, but which can be discovered and navigated by the reader to learn more about the topic presented in a fully interactive and personalized fashion.

On the cons side, Leafletter has still some way to go in making this simple tool and its features even more effective. For one, all images in a leafletter shoud be zoomable, and the designer should be free to decide whether to display a transparent "i" on those that contain extra info. Bottom navigation when using multiple pages should also be made more intuitive as I have noted earlier in this review.

Performance may not be Ferrari-like yet, but it appears as Leafletter is already working on improving this.

The ability to select arbitrary groups of cells rather than single ones only would be a welcome addition.

Being able to integrate also miniature web page thumbnails, generated on-demand by specifying a URL, or the upload and integration of other standard file formats, the ability to optionally enlarge specific images in a floating window, or the one of adding small audio clips, could also be, from my personal viewpoint, useful additions and effective ways to monetize with premium features an already useful free service.

Further reading

If Leafletter has pickled your fancy, you might want to visit the following websites:

Robin Good and Michael Pick -
Readers' Comments    
blog comments powered by Disqus
posted by Michael Pick on Monday, January 15 2007, updated on Tuesday, May 5 2015

Search this site for more with 








    Curated by

    New media explorer
    Communication designer


    POP Newsletter

    Robin Good's Newsletter for Professional Online Publishers  



    Real Time Web Analytics