Paul Gueller » Design

Innovative Layouts and Content Transitions with JavaScript

Paul — Sat, 07 Feb 2009 20:46:17 +0000

I started following @jquery on Twitter sometime ago, and they have provided a lot of great links and information.

One interesting link is to an article about methods for presenting information and creating systems to enhance user experience:

Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content.

Read the full article on Noupe.

Examples of jQuery In Action

Paul — Wed, 28 Jan 2009 20:41:28 +0000

The jQuery foundation has created a new site showcasing designs that Use jQuery. They currently have only about 30 samples organized by effect/function category, but they do accept submissions so show off that great interface or behavior that you’ve created!

Logo Design Inspiration

Paul — Sun, 25 Jan 2009 01:55:42 +0000

I recently stumbled upon a list of 54 Kick Ass Creative Logos which in turn led me to Logo Faves, who accept submissions from designers, and describe themselves as:

A collection of best designed logos around the web is showcased in Logo Faves. We don’t want to be like other Logo repositories, our idea is to bring you all the best of best logos.

Also relying on suggestions and entries from webmasters to compile its collection, Web2.0 categorizes over 100 logos and displays the user-ratings for each.

FontFeed took a bit of a different approach in grouping popular web logos by style, and even though the article was published in 2006, it is still a great source of information.

So what are you waiting for? Check out some of the design resources over at For Web Designers and submit your best work!

Of course, you could always just use a pre-configured generator.

21 Useful Font Utilities

Paul — Wed, 21 Jan 2009 15:07:57 +0000

Looking for the perfect font system for your design, compare different styles side-by-side, or embed non-”web-safe” typeface in the layout? There’s a web application for that.

Highlights include:

STC fontBROWSER – an online tool for browseing varoius fonts and viewing how your selected text looks with each.
WhatTheFont – upload any image with characters and instantly find the closest matches within their database
Typetester - compare different fonts for the screen, up to three at a time
Font Burner – replace text on your page with one of 1000 vector-based fonts with a simple block of code

Check out the entire list of 21 Typography and Font Web Apps You Can’t Live Without.

Ecofont: Less is More

Paul — Sat, 17 Jan 2009 16:18:06 +0000

What’s “Black and white and ~~read~~ GREEN all over?”

Spranq, a creative communications agency in the Netherlands taken the conservation movement to typography.

The theory behind the font face:

Appealing ideas are often simple: how much of a letter can be removed while maintaining readability? After extensive testing with all kinds of shapes, the best results were achieved using small circles. After lots of late hours (and coffee) this resulted in a font that uses up to 20% less ink. Free to download, free to use.

sIFR + jQuery = Custom Typography Without Image Replacement

Paul — Tue, 16 Dec 2008 22:41:56 +0000

If you haven’t heard of it already, sIFR lets you appease all those designers by integrating custom fonts onto your standards-compliant web page without turning them into images. On its own, it’s not a small or straightforward undertaking, requiring a number of additional CSS and JavaScript files to function. However, the recent release of the sIFR jQuery plug-in should make it more accessible to developers:

First, jQuery makes finding the item(s) that you want to replace as easy as using CSS. Then, the jQuery sIFR Plugin does all the work of figuring out the text, files, sizes, colors, and any other configurations needed for the conversion. The jQuery sIFR plugin is fully configurable and can choose how little or how much you want to customize the display of the sIFRed text. Finally, the jQuery Flash Plugin does a most excellent job of embedding the sIFR flash into your web page. After all is said and done, you should have beautiful sIFR replaced text with consistent behavior across all major browsers.

All the resources are available for download from the developer’s site, as well a simple API and usage examples for easy customization.

UPDATE

While sIFR may have its uses it also has a number of serious drawbacks. Check out some of the emerging web typography technologies, including Cufón, @font-face and Typekit.