Items Tag › Design Treats

I posted to designmeltdown.com

Floral typography

http://feedproxy.google.com/~r/designmeltdown/uecD/~3/sM2k9gZJTPI/

While not web focused, I can’t help but share sets like this. I love typography, and illustrative type is some of the most amazing stuff. This set of samples is all done in a floral style. http://vandelaydesign.com/blog/design/showcase-of-floral-typography/
- Tags:
- typography
February 4 2010, 10:00am | Comments »
I posted to smashingmagazine.com

25 New High Quality Free Fonts

http://feedproxy.google.com/~r/SmashingMagazine/~3/ky-bskVcB9k/

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to.In this selection we’re glad to present you PT Sans, FF Celeste Sans Offc Black, Secca STD, Cantarell and many other regular and experimental high-quality free fonts. Please read the license agreements carefully before using the fonts — the license can change from time to time.You may also want to take a look at our previous typography-related posts:20 New High Quality Free FontsIn this previous “free fonts” edition we present Madawaska ExtraLight, Apparatus SIL, League Gothic, Contra and many other high-quality free fonts.40+ Excellent Freefonts For Professional DesignThe price of good fonts usually reflects their quality and starts at 50$ per typeface. However, before purchasing a font you will probably use only once in your designs you might want to take a glance at outstanding free alternatives first.50 Useful Design Tools For Beautiful Web TypographyA review of useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly.[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]New High Quality Free FontsPT Sans (PDF specimen) The Russian type design company “Paratype” released an extensive free sans-serif family with 8 font weights: Regular, Italic, Bold, Bold Italic, Caption Regular, Caption Bold, Narrow Regular and Narrow Bold (700+ glyphs each). The family can be used for legal documents on screen and in print. The family contains glyphs to various Cyrillic languages as well Latin glyphs, signs, fractions, numerators etc. A very impressive free font. License: free for personal and commercial projects.FF Celeste Sans Offc Black Set (Registration is required)FF Celeste Sans Offc Black Set comes in an easy-to-use format optimized for everyday use in Microsoft Office apps. You can use the style-linked (regular and italic in one menu item) FF Celeste Sans Offc for free. License: free for personal and commercial projects.Secca STD (2 Demo fonts) (Registration is required)Secca is a fine and simple typeface honoring the roots of early German grotesque type designs but mastered for the needs of today. The weights work perfectly for body text. Two weights are available for free downloads: Secca Std Demo Regular and Secca Std Demo Bold. Designed by Andreas Seidel. A registration is required.Fh_Lentil Regular (the designer has removed the font)For more fonts, and other resources, visit Fictionalhead.com’s Fonts New font created for personal use. Additional families being developed (bold, italic, etc.) to be released at a future date. License: free only for personal projects.Mr Jones BookMr Jones was originally conceived as a family for print design consisting of a sans and a headline. The lowercase are wide for legibility at small sizes while the caps are narrower to save space and keep an even balance of negative space when used in body copy. The overall widths of certain characters have been adjusted to almost extremes to keep an even balance of white space around each letter. He works well in body copy, but will need decreased tracking for larger settings. Two weights are available for free download: Mr Jones Book and Mr Jones Book Italic. Designed by Richard Miller.ClutcheeClutchee Font is perfect for t-shirts, also applicable for any type of graphic design, web, print, motion graphics etc. License: free for personal and commercial work.DigiticaA very interesting, original geometric font, designed by Samuel Delabarre and available for free download. License: free for personal and commercial work.CantarellThe typeface is designed as a contemporary Humanist sans serif, and was developed for on-screen reading; in particular, reading web pages on an HTC Dream mobile phone. Each font file currently contains 391 glyphs, and fully support the following writing systems: Basic Latin, Western European, Catalan, Baltic, Turkish, Central European, Dutch and Afrikaans. To date, Pan African Latin has only 33% glyph coverage. Since the design is aimed at display on-screen at small sizes, the printed output (especially of the bold and oblique) may not work well. License: free for personal and commercial work.tribbon ‘Layered’ fontThis layered ‘ribbon’ style font was created by Dominic Le-Hair. It is a working ‘ribbon’ style font that consists of several layers and is available in both TTF and OTF font formats for free download. License: free only for personal work.Exus PilotAn original geometric free font in True Type format. A good choice for poster design. Designed by Mauro Hernández. License: free for private and commercial projects.OrbitronA geometric sans-serif typeface intended for display purposes. It features four weights (light, medium, bold, and black), a stylistic alternative, small caps, and a ton of alternate glyphs. Orbitron was designed so that graphic designers in the future will have some alternative to typefaces like Eurostile or Bank Gothic. License: free for private and commercial projects.Ripe Font FamilyA geometric post-modern slab serif face. The serifs feature simplistic rounded terminals and its stroke is uniform. Ripe was designed to be a practical typeface. Each character is distinct, yet consistent. Its subtle differences are clear enough to be easily read at both high and low resolutions, perfect for print, web and screen media. The family has 4 weights (Regular, Light, Semibold, Bold) containing 577 characters in each weight. License: free for private and commercial projects.Goudy Trajan RegularGoudy Trajan is based on the drawings by American type designer Frederic W. Goudy of his rendition of the capital letters inscribed on the Trajan column. One of the most elegant typefaces in the CastleType library, Goudy Trajan works especially well at large sizes. The Regular weight (shown above) contains many alternate letters and discretionary ligatures for more versatile typography. It also includes the Cyrillic alphabet and over 100 classic fleurons. Click here to view all glyphs. Download specimen. “Goudy Trajan is possibly the finest font I have discovered” (D.S. from Omaha, Nebraska.) The Goudy Trajan family includes: Regular, Medium, and Bold. A single font is available for free download. License: free for private and commercial projects.St Transmission (free for personal use only)This free font is available in two weights: thin and extrabold. It has standard OpenType features such as ligatures, slashed zero, contextual alternates and lining figures. The Extrabold weight is ideal for bold headlines. Designed by Sascha Timplan. License: free only for private projects.Keeparty (Large preview)A very original, colorful typeface created by Eugene Rudyy. License: free for personal and commercial projects.LOT (large preview)LOT is a free font applicable for any type of graphic design – web, print, motion graphics etc. It is a good fit for T-shirts and other items like logos or pictograms. Format: Opentype (.otf) Compatible: PC and Mac. The font contains 78 glyphs. License: free for personal and commercial projects.Recycle it fontLicense: free for personal and commercial projects.Denne’s aliensA hand-written, original, playful font with basic glyphs set. Designed by Denise Bentulan. License: free for personal projects, designer’s permission is required to use the font for commercial purposes.Pac FontAn older, yet quite original and attractive free font. License: free for personal use only.MergeA very simple, yet playful and nice looking free font, designed by Philatype type foundry and released for free download in the OpenType format. License: free for personal and commercial projects.Further useful collections24 high quality free and stunning symbol fontsFonts are the vital need of any designer. But now a days font demands are increasing in regular computer users as well. Depending on the needs and modern trend we are going to list down some really beautiful and unique examples of 24 High Quality Free And Stunning Symbol Fonts. We hope these fonts will be useful for you.Top 10 Programming FontsA round-up of 10 readily-available monospace fonts. Many of these fonts are bundled along with modern operating systems, but most are free for download on the web. A few, notably Consolas, are part of commercial software.40 free unique cartoon and comic fontsHave you ever feel that traditional fonts are a little too boring and plain for your designs and artworks? Ever wanted to use fonts that are funkier, stylish and fun to look at? Cartoon and comic fonts are very popular and most people are only familiar with Comic Sans MS and that’s about it. We have now discovered 40 unique and refreshing cartoon and comic fonts for you to give your artwork and design that extra ummmppphhh. Here are a few for sneak preview and the full list is right after the jump.5 Excellent Calligraphic FontsA small collection of nice calligrapic fonts found over at Dafont.com.Related PostsYou may also want to take a look at our previous typography-related posts:20 New High Quality Free FontsIn this previous “free fonts” edition we present Madawaska ExtraLight, Apparatus SIL, League Gothic, Contra and many other high-quality free fonts.40+ Excellent Freefonts For Professional DesignThe price of good fonts usually reflects their quality and starts at 50$ per typeface. However, before purchasing a font you will probably use only once in your designs you might want to take a glance at outstanding free alternatives first.50 Useful Design Tools For Beautiful Web TypographyA review of useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly.© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 56 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Fonts, typography
- Tags:
- design
- typography
- Fonts
January 18 2010, 1:11am | Comments »
I posted to smashingmagazine.com

15 Fresh High-Quality Free Fonts

http://feedproxy.google.com/~r/SmashingMagazine/~3/yV21Ra6QEdY/

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to. In this selection we’re glad to present you Junction, Nadia Serif, Nilland, CartoGothic Std, Bergamo Std, Comic Serif, Birra Stout, Vegur and a couple of other high-quality free fonts. Please read the license agreements carefully before using the fonts — the license can change from time to time.
- Tags:
- free
- typography
- Fonts
May 11 2009, 7:39am | Comments »
I posted to smashingmagazine.com

50 Useful Design Tools For Beautiful Web Typography

http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right. Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website. Below we cover typographic tools, useful typographic references, font browsers, typographic CSS- and JavaScript-techniques, hyphenation techniques, sIFR tools and resources, grids and related tools, free and commercial fonts, a guide to Web typography, examples of great Web typography. Please feel free to suggest further tools and resources in the comments to this post. And if you like this post please feel free to subscribe to our RSS-feed and follow us on Twitter . You may want to take a look at the following related articles:

50 Extremely Useful PHP Tools 50 Extremely Useful CSS Tools
1. Typographic Tools Instead of doing your own testing, use the useful and time-saving tools below. They’ll help you play with typography and make choices by giving you a real-time preview of many of the available CSS font properties. HTML IpsumA useful little website created by Chris Coyier. It provides you with the standard Latin text already in HTML tags. Clicking on any of the blocks automatically copies the text to your clipboard!
TypechartTypechart lets you flip through, preview and compare Web typography while retrieving the CSS. You can browse different typographic styles. Each style corresponds to a style ID, which allows you to annotate prototypes and retrieve the CSS while coding. Another useful feature is that you can compare Windows (ClearType) rendering with Apple font rendering.

TTFTitles WordPress PluginThis plugin lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed (via hyperdjango).

FontstructFontStruct is a free font-building tool that lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

abcTajpu Firefox ExtensionType in accented letters, international characters or symbols into Firefox or Thunderbird, either simply by using a context menu (there being support for many languages), or quickly by keyboard macro (you can even define your own).

PXtoEMThis tool converts pixel-units to em-units using the 16px browser default size (via @briancray and @CasJam on Twitter).

Em CalculatorEm Calculator is a small JavaScript tool that helps you make scalable and accessible CSS design. It converts sizes in pixels to relative em units, which are based on a given text size.

CSSTYPECSSTYPE v2 lets you preview your text as you modify it. You can set the font-family, size, color, letter-spacing, word-spacing, line-height and other properties. The CSS code can be generated easily once you are satisfied with the previews.

CSS-Typoset Matrix and code generatorThis tool (unfortunately, only in German) calculates font-sizes and line-height in em and px and presents them in a matrix. The tool computes both symmetrical and asymmetricam margin. Useful!

wp-typogrify WordPress Pluginwp-typogrify is a collection of Django template filters that help prettify your web typography by preventing ugly quotes and widows and providing CSS hooks to style some special cases. Python-script for Django is available as well.

FontBurnerAfter you find the font that you would like to use, Font Burner gives you a chunk of code that you will insert into the head of your webpage. Provided you don’t have any stylesheet conflicts, the new font will show up on your site immediately.

Convert TrueType Font to sIFR Flash FileUpload your typeface and the tool generates the Flash-file (swf) and sends it to your e-mail. Text 2 PNG ConversionThis service provides you with the ability to convert you headlines and navigations to PNG images automaticlly. It works by adding a JavaScript file and selecting which tags to replace. Useful, for instance if you want to generate an image with an embedding e-mail-address. 7 Free Tools To Identify A FontA list of free online tools to speed up the identification process. 21 Typography Web Applications You Can’t Live Without 2. Useful typographic references Better CSS Font StacksA couple of useful font cascades for your CSS-stylesheet.

FontsMatrixMatrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite (via @lucianosb on Twitter)

Common fonts to all versions of Windows & Mac equivalentsThe list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as “browser safe fonts”.

Default Mac OS X 10.4 fonts list (via Elementiks)

Default Windows fonts list (via Elementiks)

3. Choosing a font Type TesterType Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.

STC fontBROWSERThis tools enables you to preview fonts installed on your system online.

Font PickerThis simple tool shows you all the fonts installed on your computer and helps you choose which one is most suitable for a particular project. Also available as Adobe AIR application. FontTesterFont Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them.

CSS Type SetCSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately (@jmreedy).

Flipping TypicalThis is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.

4. Typographic Techniques 12 Examples Of Paragraph TypographyA showcase of some interesting techniques for designing paragraphs, by Jon Tan. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent.

Rendering Complex Type — Who’s got the Love?Learn how to create a complex typographic sample with pure CSS.

10 Examples of Beautiful CSS Typography and How They Did ItA lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.

typeface.jsWith typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR, or JavaScript and PHP like FLIR. So, instead of creating images or using Flash just to show your website’s text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as though your visitors had the font installed locally. It’s pretty easy to use: load the typeface.js library and some typeface.js fonts, then proceed as normal.

Facelift Image Replacement (FLIR)Facelift Image Replacement (FLIR) is an image replacement script that dynamically generates image representations of text on your Web page in fonts that otherwise might not be visible to your visitors. The generated image is automatically inserted into your Web page via JavaScript and is visible in all modern browsers. Any element with text can be replaced, from headers (<h1>, <h2>, etc.) to <span> elements and everything in between! FLIR is SEO-friendly and only renders an image if JavaScript is enabled on the user’s browser. If you are using WordPress for your blog, you might find this plug-in useful to easily apply FLIR to your Web pages.

P+C DTRPHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method, allowing you to take a vanilla, standards-based (X)HTML Web page and dynamically create images to replace page headings, using only PHP and CSS. The technique is currenty unavailable for download.

Advanced Typography Techniques Using CSSWhile descriptions and basic uses of CSS typography controls have been beaten to death, many rich typographic capabilities of CSS are still not well documented. This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.

Typographic Contrast and FlowTypographic contrast is important because not every piece of content on a page has the same weight: some have greater significance than others. By creating contrast, you direct the reader’s attention to the important messages and also enhance visual appeal. Here are seven basic methods for creating typographic contrast, using size, typeface, color, case, style/decoration, weight and space.

5. Hyphenation OnLine HyphenationThis tool takes care of automatic Automatic hyphenation for texts and sites. The tool uses  and inserts hyphens in the right places to make the justified text look readable. The tool is a little bit buggy and not perfect, but is still useful. HyphenatorHyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation. 6. sIFR sIFR 2.0: Rich Accessible Typography for the MassessIFR (or Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on the page with Flash equivalents. It uses JavaScript to target certain text page elements and replace them with Flash, which results in the same text but rendered in a new font. This means you are free to use any font you wish in your design, instead of being limited to a very small set of “safe” Web fonts. sIFR is easier to implement than any other image replacement technique. Instead of manually generating each header with an image editor, you’re able to skip the editor completely.

sIFR liteA solution similar to the original sIFR package, but smaller (3.7 Kb) than the original (22 Kb) and including even more nifty features. It auto-detects the color of text elements, is completely object-oriented, doesn’t use CSS selectors and targets elements by tag name and class. sIFRvaultA repository of sIFR fonts, rated, tagged and available for download. Users can submit their SWF-files as well. Please notice that you need to respect all copyright and licensing laws - some of the featured fonts appear to be commercial (via chrisjlee).

jQuery sIFR PluginThe jQuery sIFR Plugin is an addon for jQuery that makes it easy to replace text in a web page with flash text (sIFR). It gives you a function in javascript to replace text in a web page dynamically with sIFR (Scalable Inman Flash Replacement) text, using native jQuery functionality along with the jQuery Flash Plugin.

Multi color sIFR 2.0.1This version of sIFR supports strong, em and span-elements and can color parts of the headline in colors.

jQuery sIFR PluginThe jQuery sIFR Plugin is an add-on for jQuery that makes it easy to replace text on a Web page with Flash text (sIFR). The jQuery sIFR Plugin does all the work of figuring out the text, files, sizes, colors and any other configuration needed to convert text to a beautiful sIFR font, with consistent behavior across all major browsers.

sIFR GeneratorThe big disadvantage of sIFR is that creating sIFR files is a tedious task that also requires Adobe Flash Studio in order to create a .swf file with the font of your choice. At least, that was the big disadvantage until now. sIFR Generator is an online tool that allows you to create sIFR .swf files with a few clicks of your mouse. Simply upload the TTF font of the font you want to convert, preview and download. 7. Grids gridr buildrrrThis tool generates various grids on the fly and allows users to define the width of the grids, gutter as well as boxes for the layout.

The Grid SystemAn aggregator of articles, tools, books and resources related to grid-systems.

Typographic GridIf your website is heavy with text content, you will need to pay attention to the underlying grid. Check out Typography Grid, created recently by Chris Coyier: “I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. It was inspired by the Compose to a Vertical Rhythm article by Richard Rutter a few years ago, except uses unitless line height.” Check out the demo here.

Grid DesignerAnyone looking for a little help to get going with grid design should look at this handy tool. Grid Designer 2 lets you set variables for your layout, such as the number of columns, the width in pixels, gutters and margins. You can also set variables for the typography, so that you can control the size, weight, line height and other variables for your paragraphs and titles. After you set up your desired layout, all you have to do is export the CSS to use in your own design.

Vertical rhythm calculatorThis AIR application allows Web developers who use XHTML and CSS to build their pages to understand and calculate values for vertical rhythm. Enter your starting values in the application, and then you have the option of copying the resulting CSS code onto you clipboard for pasting into your existing style sheet.

8. Free and Commercial Fonts 40+ Excellent Freefonts For Professional DesignAn overview of over 40 excellent free fonts you might use for your professional designs in 2009.

60 Brilliant Typefaces For Corporate DesignOver 60 first-class commercial typefaces for corporate design.

80 Beautiful Typefaces For Professional DesignOver 80 gorgeous typefaces for professional design, based upon suggestions from designers and web-developers all over the world.

FontsquirrelA growing collection of free high-quality fonts. More high-quality free fonts.

Top 10 (Commercial) Fonts Of 2008This article lists this year’s most successful fonts on MyFont – in each genre. Based on sales numbers.

Clean font showcaseAn extensive collection of clean, legible free fonts.

Veerle Pieters’ 10 favourite typefaces

9. A Guide to Web Typography Good typefaces are designed for a purpose. Below, you will find very informative articles and guidelines, created by masters of typography to show us the overall effect that good type has on a project. On Choosing TypeA good article from I Love Typography on choosing the right typeface. The article explains everything from choosing between serif and sans-serif fonts to remembering to honor and read the content. It’s a great post for improving your typography skills.

The 100% Easy-2-Read StandardBest practices for good typography on the Web from Oliver Reichenstein.

Don’t be afraid of Serif FontsDavid Rodriguez discusses the advantages and disadvantages of sans-serif and serif fonts and suggests best practices. Elegant Web TypographyA great presentation by Jeff Croft about Web typography.

10 Common Typography MistakesThe goal of this post is to help designers and clients understand the importance of good typography skills and avoid some common mistakes. The Non-Typographer’s Guide to Practical Typeface SelectionCheck out Cameron Moll’s magic formula for picking the right typeface for your needs.

Make a list of those familiar typefaces that you trust and know will work well in a variety of projects. Supplement that list with a list of unfamiliar typefaces that address specific objectives for the project at hand. Test each typeface in small and large sizes. Test in both caps and lowercase.

The Principles of Beautiful TypographyThis is a great article that is actually extracted from the SitePoint book The Principles of Beautiful Web Design. The article goes into detail on fonts, letter forms, spacing, text size and more. It’s a great and informative read. Five Simple Steps to Better TypographyA series of articles by Mark Boulton that is highly worthwhile to read. 101 Typography Resources for Web DesignersA great list of typography-related resources from our author, Steven Snell. 10. Examples of Great Web Typography Some of the designs shown below demonstrate that sometimes less really is more. Others made it onto the list because they use text very well and demonstrate how the grid can be used to do wonders for the whole design. Jon Tangerine

Viget Inspire

works4sure

24ways

Alex Buga

Wilson Miner

Colour Pixel

Maxvoltar

Mark Dearman

Blogger Bake Off

Fixie Consulting

Drupalcon

Guilherme Neumann

Sursly

17 Stimulating Flickr Groups to Get You Typographically InspiredThis is a list of some of the best typography Flickr groups to feed your creative appetite.

17 Stimulating Flickr Groups to Get You Typographically InspiredIn this collection, you’ll find a variety of websites that showcase creative and functional uses of typography.

(al)
- Tags:
- useful
- typography
- tools
- Fonts
- CSS
January 27 2009, 8:00pm | Comments »
I posted to smashingmagazine.com

The Right Type: 5 Inspiring Typography Tales

http://www.smashingmagazine.com/2008/12/08/the-right-type-5-inspiring-typography-tales/

Nowadays, typefaces are a dime a dozen; there’s certainly no shortage of free fonts. But as in any artistic field, the standouts are rare, and understanding why they excel takes gradual experience. In this yarn, we’ll take a closer look at inspiring stories behind the design of typefaces that you may have seen or used but didn’t know the history of. We’ll explore the nooks and crannies — both literal and figurative — of the evolving printed word. By the end, we hope you come away with a better appreciation of how things came to be. 1. Sign language: of subways and skies The signs are all around us: both text and pictograms that indicate where to go, what not to do and situational info. Simply S-P-E-L-L-I-N-G it out is insufficient. A modern descendant of ancient hieroglyphs, stylized text enhances understandability and, hence, memorability. Many public transportation systems in cities around the world have gone through progressive transformations; like a bric-à-brac cake, new layers don’t just replace old ones but are often built on top of previous structures.

by FredoAlvarez The subways of New York City are one such example. While the crisp, nearly universal Helvetica — the subject of its own documentary — now flanks its tunnels, it wasn’t always this way. Paul Shaw investigated the subway’s depths and wrote an intensely dense article, which I highly recommend. Delving into the various NYC subway typefaces used over the past few decades, with plenty of pretty useful imagery, the article is a treasure.

by Catchpenny Furthermore, iconic typography need not be limited to real-life transportation systems: you only need to turn on shows like Lost, with its Oceanic Airlines logo, and the Hanso Foundation’s Bagua-inspired badges. Or what about the cyberpunk trappings of The Matrix Reloaded, in which Mobil Ave is shown on stark tiles before Neo confronts The Trainman?

by gulicious Fresh inspiration can be gleaned by glancing at logo compilations. You’re likely familiar with many airline logos, but lesser-known are subway logos from around the world, such as the ones in this impressive collection:

by Annie Mole Note the prevalent use of certain letters (in particular, M and S, for “Metro” and “Subway”), which are integrated in the designs. Most of the logos are simple but have diagonal or curved lines, suggesting motion. Others rely heavily on circles, lending a feel of the “round trip.” But however you analyze them, it’s clear: no great trip into the city is complete without a keen aesthetic touch. And if you crave more, here you are! 2. Metafont: Don Knuth’s math mastery It’s a rare soul who dedicates most of his life to an ambitious project that transcends his own existence and influences many in the process. I refer to legendary computer scientist Donald Ervin Knuth, whose speech is shaky but writing is sound, and whose home page looks like a Mosaic relic yet contains mounds of unique genius. (Maybe we could hook him up with some of our native talent?) He even knows how to “get down”!

by ioerror Synonymous with excellence in computer science because of The Art of Computer Programming (ongoing since 1962), one of his lesser-known and lesser-used works outside of intellectual fields is Metafont, which wields great precision in creating vector fonts. It’s amazing that one person can do so much and, not only that, keep at it. Case in point: Metafont continues to be updated but comes from a base developed in the late 1970s. Also, any typographer worth her ink (virtual or otherwise) is familiar with Hermann Zapf of Zapf Chancery fame (which I first became acquainted with through my high school’s LaserWriter). Or perhaps you’ve heard of Zapf Dingbats?

by Kent Wang Anyway, Knuth and Zapf collaborated to combine intricate computations based on the centuries-old growth of movable type — elegant equations that form beautiful characters. Keep in mind that in some circles there is a conceptual divide between tradition and technology, and these ideas were often shunned or outright lambasted years ago. But they didn’t give up. Far from being two old fogeys awaiting the Grim Reaper, Knuth and Zapf, grandmasters of their respective fields, continued to passionately push forth, even though newer generations know not of their original works, only of mere knockoffs and jokes. If you haven’t heard of Metafont, let alone used it, even Knuth concedes it’s too difficult for some to use: “Asking an artist to become enough of a mathematician to understand how to write a font with parameters is too much. Computer scientists understand parameters, the rest of the world doesn’t.” Admirable how instead of waiting for the world to catch up, Knuth forged ahead with impeccable precision. We’re still feeling the effects through our PostScript and TrueType vectors now. It’s also interesting how we’ve moved so far past bitmap fonts, in part thanks to Metafont, but pixel fonts continue to find their way into Flash animations and lo-fi tributes. 3. Opening titles: Kyle Cooper’s movie magic Kyle Cooper isn’t a computer scientist, but he does have something strongly in common with Don Knuth: he takes a driven, focused interest and becomes the best at it. On occasion, when Smashing Magazine has published lists of impressive motion graphics, Kyle Cooper gets called out in the comments, as in “You missed mentioning him!” I don’t think he gets enough credits (pun!), so here’s his due. Sure, Saul Bass brought love and life to cinematic type sequences and continues to inspire posters in his style from beyond the grave…

by jamacdonald … but in the present, Kyle Cooper rules with a diverse, deft touch. Learning from the late Paul Rand (who was like the Elvis of graphic design, sans impersonation), Cooper created work that stretches from the grimy, unnerving sleaze of Se7en to the neo-militarism of the Metal Gear Solid games. His work leads to many forum questions like, “Where can I get the font in that movie’s credits?” He’s even played a major role in revitalizing comic book movies with the Spider-Man titles, as detailed in this Wired article. Pop your eyes out with his 2006 demo reel:

So the next time you’re at the movies and being wowed at the beginning, look up who’s responsible, and it’s likely you’ll find Kyle Cooper or one of the many who have been influenced by his trendsetting ways, turning the intro tease into an art form all its own. As was the case with the cracktros that preceded Commodore 64 titles (an unlikely comparison), sometimes the appetizer is better than the entrée.

Cooper’s entry in the Monographics series is well worth the stare into the artist’s mind. 4. LilyPond: notation sensations Music notation is a special kind of typography of its own. Like the language of literal type, the classical “staff view” possesses its own breed of ligatures and accents. Much the same way that calligraphy often expresses the intent, even the “soul,” of the creator, handwritten music script conveys much of the composer’s temperament. To the untrained eye, notation can look the same: notes, slurs and pedal markings are all in plain sight. But like a golf pro following through, there’s a flow underpinning everything that happens.

by pfly That’s where LilyPond comes in. Similar to Metafont in the respect that it’s a blend of art and science, LilyPond helps create beautiful engravings. Think about how kerning on the computer makes digital typography flow better; LilyPond works on a similar principle for musical glyphs. It even has its own typographical features, which are readily apparent after the fact. LilyPond is among the latest in a long line of music notation software and certainly takes an original approach. I remember playing with the Music Construction Set by Electronic Arts (before it was a multi-national behemoth) in the ’80s on my Commodore 64, and that was a time when editing movies on your home computer was unthinkable. The democratic waves of technology continue to be dispersed, and open source has benefited from the contribution of LilyPond. Alas, like Metafont, LilyPond is highly technical: an input file resembles a programming language and isn’t as intuitive as putting pen to paper. However, it may be easier than you think. The degree of control it offers is astounding. But LilyPond’s true promise could lie in bridging the gap between ease of use and incredible depth, much the same way as WYSIWYG-style rich-text editors have promised since the dawn of selectable fonts on the computer. This is controversial for some but needs to be contended with. And writing of controversy… 5. Comic Sans: who’s laughing now? This is not a joke. But there is a valuable lesson herein, given all the design excellence we have featured here. Bear with me: many professional typographers loathe Comic Sans, which is, oddly enough, a fitting testament to its stand-out presence in a sea of look-alikes. Comic Sans is a curious cultural case that not only has spawned haters who vigorously oppose it, but paradoxically continues to live on with increased usage. From its origins, being plastered across the word bubbles of Microsoft Comic Chat, to more contemporary uses, such as the packaging of the top-selling game The Sims, Comic Sans has more lives than a cat! Can you spot the irony in this?

by Andreas_MB Its creator, Vincent Connare, is perfectly capable of creating marvelous typefaces, so what went wrong here? We shouldn’t lay the blame on Comic Sans itself, but rather on how it’s being used, much like a poorly sized screwdriver stripping a screw. After all, each typeface carries its own “signature,” which is why flourish-filled simulated handwriting is favored for wedding invitations and big block typeface adorns pro sports jerseys.

by mactiste Like generic clip art tastelessly resized and aliased (which is enough to make anyone who knows better grind their thumbs into their eyes) Comic Sans is often abused in inappropriate contexts. Poor font. Connare says: “There was no intention to include the font in other applications other than those designed for children when I designed Comic Sans. The inspiration came at the shock of seeing Times New Roman used in an inappropriate way.” Be sure to see the Comic Sans documentary, which is the intriguing antithesis to Helvetica:

I’m never one to withhold what the creator has to say, and now you know the rest of the story. Throughout these five tales, we’ve seen feats, fables and foibles. There are many more stories to be told, both those that lie undiscovered and wait for a voice to shine on them like a light, and those that will soon be in the making as a result of your creative energies. Related resources

Smashing Magazine’s Free Fonts Sexy, Bold and Experimental Typography Vintage and Retro Typography Showcase Behind the Design: 5 Stories of Great Inspiration

What amazing typography tales do you have to share? Tell us in the comments! About the author Torley Wong amplifies your awesome with the useful and fun. He also has an irrepressable passion for discovering the connections between seemingly unrelated things, and unfolding how they were invented. Enjoy his personality at Torley Lives. (al)
- Tags:
- inspiration
- typography
- Fonts
December 8 2008, 6:30am | Comments »
I posted to smashingmagazine.com

Vintage and Retro Typography Showcase

http://www.smashingmagazine.com/2008/10/26/retro-and-vintage-typography-showcase/

Typography talks the talk, to go along with the overall work’s walk, speaking volumes for the artist. This important design element surrounds people daily as they move through their routines, rarely taking notice. It’s literally everywhere. In advertising, product packaging, printed publications, graphic designs, and more. Accentuating and centralizing the overall theme of the design that it inhabits, communicating the message to the masses through creative inclusions in the work. For decades this design tool has given rise to some truly elegant type that still have impressions echoing through design today. Revisiting these themes is a cyclical commonplace that the design community embraces with stunning results. In this article, we go retro, finding beautiful examples of vintage typography and the modern work they’ve inspired. Looking back, it’s easy to see why some of this type has stood the test of time and is still lingering in the design community today. You may want to take a look at the following related posts:

Celebration of Vintage and Retro Design Retro and Vintage in Modern Web Design 30 Beautiful Vintage and Retro Photoshop Tutorials Sexy, Bold and Experimental Typography Breathtaking Typographic Posters

Let the Good Types Roll Checks Gig Poster

Andy Poster

Hard Rock Cafe

Typography Retro Poster

Cadillac

Souvenir Kodak

Vintage packaging

Lovely Lettering

Marcus Walters

Festival der Sinne

Miss Jessie’s

Tenucci Conferioni

The Econasign

Mustard 03

Las Vegas

Book Covers

Kodak

Jack Daniel

Emblem & Type

Elevator

Smooth Jazz

Live Together Forever

Ampersand

Straub Beer

C365, day 232 - Haberdashery!

Vintage Ribbons

Home Memories

The Long Winters

The Pen Is Mightier Than The Sword

The Outfit

Charming Suicide

Artistic Hebrew Type

Spune Launch Poster

Retro Logo Mock-ups

Wheels o’wisdom

Straub Beer

2100 Victorian Monograms (via)

Wood Type Notecards

Last Click Gaslight MenusGaslight is an American Brasserie in Boston’s South End district. The menus incorporate the feel of a traditional brasserie with an American twist. Designed at Tank Design by Rebecca Alden.

Bull

Craig Ward

Related posts You may want to take a look at the following related posts:

Celebration of Vintage and Retro Design Retro and Vintage in Modern Web Design 30 Beautiful Vintage and Retro Photoshop Tutorials Sexy, Bold and Experimental Typography Breathtaking Typographic Posters
- Tags:
- inspiration
- retro
- vintage
- calligraphy
- handwriting
- lettering
- typography
October 26 2008, 3:53pm | Comments »

Best Of April 2008

http://www.smashingmagazine.com/2008/04/30/best-of-april-2008/

Every month we take a look around and select some of the most interesting web-development-related web-sites. We read articles, check out tools, analyze the advantages of new resources. Below you’ll find useful references, tutorials, services, tools, techniques and articles we’ve found over the last 30 days - an overview of web-sites you shouldn’t have missed in April 2008. All images can be clicked and lead to the sites from which the screenshots have been taken. References, Tutorials, Tips

 Wallpaper of the WeekJames White&#8217;s &#8220;La Femme&#8221; wallpaper is available in resolutions 1900&#215;1200px, 1680&#215;1050px, 1440&#215;900px and 1280&#215;1024px.



 Create a Sleek, High-End Web Design from Scratch&#8220;In this tutorial we&#8217;ll put together a high-end web design using a crisp, thin font, gorgeous background images and clever use of space and layout. You can easily use the technique to create your own unique designs.&#8221;



 Create a Powerful Mental Wave Explosion Effect&#8220;In this tutorial I will show you how to create a crazy explosion, like a mix of Magneto&#8217;s ability with Peter Petrelli&#8217;s power. We will use images and filters to produce this wave explosion effect. Even though it may look like a difficult tutorial, it&#8217;s really not that hard.&#8221;



 Dropclock ScreensaverDropClock is a screensaver in which every minute is numerically expressed with heavy Helvetica dropping into water in super slow-motion. Win, Mac. Free Alternative for Mac. [via]



 Should Redesign? Cast Your Vote Now!This project aims to help webmaster determine if their websites need a refresh. Users who visit ShouldRedesign.com are presented with a website and cast their vote if they think the website should be redesigned or not. Quick and easy to use, anyone can cast a vote.


 Flash Photo BrowserThis photo gallery impresses with a quite different design of a photo gallery. You can literally toss images stacked upon each other. Both stack and thumbnail views are available. Flash and PHP are required. Developed by Andrew Berg.



 Free Admin Template For Web ApplicationsRather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.


 WordPress Wassup Plugin : The Real Time Visitors Tracking &#038; Statistics ToolWassUp is a Wordpress plugin to track your visitors in real time. It has a very readable and fancy admin console to keep tracks of your blog’s users visits.


 Google Earth 4.3Google Earth 4.3 adds new and innovative features, including photo-realistic 3D buildings, improved navigation, and sunlight. Now a photorealistic 3D-view of a city is possible. Details.



 XHTML Character Entity ReferenceThis page contains the 252 allowed entities in HTML 4 and XHTML 1.0, as outlined in section 24 of the official HTML 4 specifications, published by the W3C.


 Free eBay Fee CalculatorThis tool calculates eBay fees for 19 countries. You may want to use PayPal Fee Calculator as well.


 Aviary tutorialsAviary is a suite of rich internet applications geared to develop advanced web applications - from image editing to typography to music to 3D to video. This post presents 18 tutorials on how get started with Aviary.


 Free Web Design Ebooks And GuidesThe following list of free web design ebooks and guides will get you started building accessible, usable, and useful web sites in no time.

Design-Galleries, Showcases, Inspiration

 Inspiration: Stars, Planets, and GalaxiesWe&#8217;ve gathered some resources that will inspire you to look to the sky and beyond. This article will have you grabbing a telescope or heading over to NASA. Learn about the recent rage in space style effects in design. Take a look at artists that have been working in this field long before Apple branded Leopard with such cool space imagery and lighting effects.



 Best of Wallpapers Made in RussiaA selection of some impressive wallpapers designed by Russian graphic designers and artists.



 63 Impressive Website Background-Images: Trends, Resources and TutorialsA collection of web designs with an effective use of background images.


 Packaging design inspirationSome interesting examples of beautiful packaging design.



 12 websites that slide and scroll with javascript12 websites that use javascript to scroll or slide the viewing window and the different ways the effect is used for user experience, effect, and design.


 Comment Designs Showcasehis list shows 30 blogs where the web designer didnÆt just throw together the same old comment design and put extra effort into their comment design to make it fit with their blog design. More inspiration.



 Design Gallery: eCommerce Progress BarsA progress bar is one of those ôbest practicesö for a checkout process, which shows the user how many steps are in the checkout process, and what step they are currently on.


 On the MapImpressive infographics, designed by Stephanie Posavec. ôOn the Mapö uses craft and design to understand the symbolic and representative nature of maps. Works included a dress made of maps, numerous old maps of London, a gorgeous Kerr | Noble representation of the River Thames through graphic design and the words of the John BanckÆs Description of London.

Typography

 eXtreme Type TerminologyTypography explained. An extensive introduction to type terminology.



 FontStructFontStruct is a free font-building tool that lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.



 On Choosing TypeJohn Boardley reveals important principles and guidelines on choosing type. Among them: honour content, read it, consider audence and canvas and print it and check if it looks right.



 Techniques for designing with type charactersTypography and typefaces, without a doubt, are two of the most fascinating aspects of visual design. After weeks of code speak, let’s totally shift gears and talk exclusively about visual design in all its splendor and beauty.



 Font Game: The Rather Difficult Font GameHow many out of 34 fonts can you recognize?


 Type CityTake a tour through a world of type that can help transform your design landscape.



 .t.y.p.o.r.g.a.n.i.s.m.Typogranism is a web-based project focused on interactive kinetic typography and communal interactivity in the Web environment.

Icons, Fonts, Wordpress Themes

 Sticker Pack 2Windows Icons Sticker Pack 2, designed by David Lanham. This collection contains 41 individual sticky icons with large resources for Vista &#038; Leopard.



 Web Applications Classic Button SetWeb applications classic button set includes a PSD file with well grouped layers. You can easily create new buttons by duplicating or editing the current ones.


 Designers Toolbox: OS Form ElementsNeed a Windows XP button when you work on a Mac? Or a Mac OS X pulldown menu when you&#8217;re on a Windows system? You can download these free standard HTML form elements for free and use them in your designs. Further images and icons (DVD/CD-covers, envelopes etc.) are available as well.



 Free Icons Download - Icons,Free Icons,XP Icons,Vista Icons,Stock Icons,Mac iconsHigh Quality Royalty Free icons for Windows, Mac and Linux, Offers Ico,Gif,Bmp,Png various icons format.


 The Open Share Icon ProjectAn Open Source project which attempts to establish standard icons for OPMP icons, Geotag Icon and Open Share Icon. All icons are available as .png and .psd-files.



 Free Web Development Icon SetIcojoy team have released new free icon set (addon for this set). The subjects of this set are blogs, dating, player, social networks. These icons are free to use in any kind of project.



 Dotted world map vectorThe dotted world map vector free for download. It comes with three different dot sizes which is fine, medium and large to cater for different purpose and needs.

CSS-techniques, (X)HTML, PHP

 Accessible Data Visualization with Web StandardsHere are three techniques for incorporating data visualization into standards-based navigation patterns.



 Can We Prevent CSS Caching?When you are developing a site, there is a heck of a lot of ôrefreshingö going on. You start to get a pretty good feel for what your browser is going to pick up on a single refresh, and what it wonÆt. Can we make sure CSS is always reloaded and not cached? Is there some way to prevent CSS caching?


 Css Techniques For LinksThe main feature that made following techniques possible is cross browser :hover pseudo class support. Each of these techniques is pure css, no ugly hacks, no JavaScript.


 Create a Slick Tabbed Content Area using CSS &#038; jQueryTutorial on how to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieve the same thing using the jQuery library.



 Using captcha without displaying itDoes the user have JavaScript enabled? If yes, he&#8217;s ok. Let him comment. No? He&#8217;s a suspect. Read him his rights and give him the ultimate &#8220;are you human?&#8221; test.


 The CSS-Only Accordion Effect&#8220;Our accordion will work exactly the same way: all of the elements will be partially visible when the user loads the page. And then when they mouse over a particular section, it will instantly expand û and the other elements will contract û to make reading more easy.&#8221;


 Nice comments counter style for your blog postThis post illustrates how to design a nice comments counter for your blog post and obtain an elegant post header using just some lines of CSS code.



 Some PHP Abilities You May Not Know AboutSome useful PHP tricks. Among them calling a PHP function from a string, ternary operator, variable variables and calling a variable variable function.


 Using Definition Lists: Question &#038; Answer formatting - CSSnewbieA brief tutorial on how to use definition lists (dl) to format question &amp; answer blocks.



 Top-Down approach to simplify your CSS codeThis post illustrates some tips which can help you to write a better CSS code using a Top-Down approach.



 Adding a magnifier to images with CSS and JavaScriptA script that allows visitors to turn the magnifier on and off with the æon/offÆ link. Visitors can move it around by either dragging with the mouse, clicking on the photo to select a particular point or use the cursor keys when the on/off link has focus.


 Add a loading icon to your larger imagesYou could use a piece of javascript to embed a ôloadingö image for all images that have not yet loaded, but unless you are loading a ton of very large images on a single page, there is a simpler (and cleaner) method to accomplish the same thing.


 Improve form usability with auto messagesThis tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field.



 Pure CSS Animated Progress BarHere&#8217;s a simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements.


 Create Custom Search BarsThis tutorial explains how to create custom search bars with Image Replacement using CSS


 Datasheet-style form using HTML, CSS and JavaScriptThis example creates a compact form with multiple similar records, with the familiar appearance of a datasheet.


 List Based CalendarThis isn&#8217;t a replacement for table based calendar. This is a simple way to add multiple views to a calendar, so you can view your events in a simple list, or in a month based calendar format.



 CSS Variables Using PHPWhat about a PHP-like syntax for CSS variables? Using PHP, one can make easy, dynamic CSS a reality.


 NSFW Blocker Using MooTools and CSS&#8220;Since most of the time itÆs just a portion of a given picture that could be considered inappropriate, I asked myself if there was a way to get the gist of an articleÆs graphic without having to hide the entire image. For that reason, IÆve created a NSFW blocker using CSS and MooTools.&#8221;


 Two CSS vertical menu with show/hide effectsTutorial with two vertical menu examples with show/hide menu effect. First example uses a simple JavaScript code. Second example uses mootools to show/hide the menu with a nice vertical slide-in/slide-out effect.



 Optimize Your Links For Print Using CSS: Show The URLProviding URLs for links in the print version of your page can be extremely helpful to the reader. Using a small snippet of CSS code, you can get printouts to display link URLs right next to the link text.


 The 6 Most Important CSS Techniques You Need To KnowThe article covers getting a consistent base font size, getting consistent margins, setting a float to clear a float,  image replacement, faux columns and CSS Sprites.


 Date StampsA set of six datestamps (the area of a blog post that displays when the post was made). Below you&#8217;ll find a list of all six styles, each with an example of the timestamp and the code you can use to create it. More inspiration.


 Pushbutton LinksUsing no images, an awful lot can be done with a style sheet and some basic markup alone. An example is creating real, working pushbuttons out of ordinary links ù listed or standing alone, even within the content if margin or word-spacing and a suitable line-height is given.

CSS tools and services

 syntaxhighlighter - Google CodeSyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It&#8217;s 100% JavaScript-based and it doesn&#8217;t care what you have on your server.



 KotatsuThis tool is supposed to help you create a table and throw in column classes quickly.


 GridFoxGridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.



 Hartija: CSS Print FrameworkHartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.


 PSD 2 CSS Online Converterpsd2css online converts your fantastic, creative, artistic, no holds barred web page designs into strict XHTML compliant CSS web pages automatically. Upload your .psd designs, download your .html file and images. It&#8217;s that simple. The results aren&#8217;t always impressive. Tutorials on using psd2css.


 Collection of Web Developer Tools, per BrowserSometimes, it is not easy to keep track which tools are at a Developer’s disposal (and which are actually usable). The following article seeks to list the best tools available and quickly describing how to activate/install/use them.



 CSS Frame GeneratorFor a given markup, this tool generates a list of all CSS selectors which can (but not necessarily should) be defined in a stylesheet.


 WoopraWoopra is a comprehensive, rich, easy to use, real-time Web tracking and analysis application. Among features are live tracking and statistics, visitor and member tagging and real time notifications.


 My DebugBar | IETester / HomePageIETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.

Ajax, Javascript

 Switching to the On-State dynamicallyLearn how to switch the &#8220;on&#8221; state of navigation links for dynamic pages.


 Fade-in Spoiler RevealerjQuery has some really simple built in features for ôfading inö and ôfading outö different page elements. I thought we could exploit some of those functions for a really simple Spoiler Revealer.


 jQuery ExamplesHandy jQuery-based scripts one can use in a variety of projects - Digg Header, Photo Revealer, Gallery Roundup and Menu Fader.



 Useful jQuery: a Compilation of jQuery UtilitiesHere is a hand-picked list of useful jQuery scripts and utilities, created to make your web development easier. You wonÆt find any fancy slides or animations in here, instead I have compiled a list of the best, most well-written and useful jQuery components on the web that I would use myself.


 FancyForm - Javascript checkbox replacementFancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It&#8217;s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.



 jQuery for DesignersjQuery for Designers  is a project dedicated to developers who&#8217;d like to learn how to apply web interaction using jQuery. Related tutorials and screencasts.


 Scalable CSS Buttons Using PNG and Background Colors&#8220;The script I am providing to this article can create the same stylish buttons out of boring input buttons as well as plain anchors.&#8221;



 DevKick | Web Development for DesignersDevKick Lab is a growing repository of web development experiments that we conduct using technologies like jQuery, CSS and HTML.


 TimeframeTimeframe is a click-draggable, range-makeable calendar which allows users to select a range of time instantly. By Stephen Celis.

Articles and Publications

 7 Principles of Effective Icon DesignBefore approaching icon design there are some guidelines and principles that are worth studying. If you want to create effective icon designs, then you should take a holistic approach to issues such as: audience, size, simplicity, lighting, perspective, and style. This article gives you a good starting place for creating icons that work well together and fit seamlessly within your designs.



 Stop using Ajax!Ajax vs. Accessibility. This article discusses why you should focus on accessibility issues and avoid Ajax in your web applications.


 Entering IllustrationKevin Cornell shares his experience and his insights for designers and artists looking to enter illustration as a career.


 Extensible CSS Interface IV: Testing for ExtensibilityCameron Moll finishes his series of articles regarding design of extensible and advanced CSS-based interfaces. This article explains 8 benchmarks to measure the extensibility of your site or application.


 Creating More Using Less Effort with Ruby on RailsOne of the main reasons Ruby on Rails increases productivity is that it makes building new applications, adding features, and making tweaks much easier. The combination of the language (Ruby) and the framework (Rails) means you can do more with less code.


 Getting Started with Ruby on RailsWeb designers have time-tested CSS tricks to use as a starting point, web standards to adhere to, and Photoshop workflows they can rely on. Like these tools, Rails provides standards, conventions, tools, and a foundation upon which developers can construct applications by writing customized code using pre-built Rails libraries.


 IE CSS Bugs That&#8217;ll Get You Every TimeIE 6 actually had the best CSS support of any browser when it first came out… 7 years ago. The little bugs in it’s CSS support still haunt us to this day. Here are some major bugs in IE that’ll get you every time.



 3 Important Usability Challenges for Designing Web AppsMatching the user&#8217;s natural flow is just one challenge a web-based application developer needs to address during the design and development process. To help our clients, we&#8217;ve compiled a list of three challenges they&#8217;ll want to keep their eye on.


 Bigger And Better: Trends in Mobile Screen SizesBigger And Better: Trends in Mobile Screen Sizes


 The Meaning of Colour in Web DesignDifferent countries - different perception of colors. Some interesting insights into the way people from different countries perceive colors.


 25 Must Buy, Borrow, or Steal Books for Web Designers | Creating a blog web design blogAn overview of useful web design and development-related books. Even more books.

The Last Click

 Homer CSSCSS is indeed a powerful tool capable of achieving impressive results. However, it can be used not only for web layouts, but also for&#8230; well, images. This image of a Homer was created using only CSS. The image is also resizable &mdash; well, apparently em sizing has its advantages.



 Dosugus cushionDosugus cushion looks like a black screen and has good old DOS directories embroidered on it.



 Lighting designer stuart haygarth london berlinThe chandelier is made of 1000 exploded Party Poppers collected ( on 01.01.00 ) after the Millennium celebrations in London. Each Popper is suspended on a line from a platform above. The sculptural shape sways and moves like an organic form when hit by a breeze of air.



 The impossible art of Li WeiLi Wei&#8217;s photos are&#8230; unusual. His work is a mixture of performance art and photography that creates illusions of a sometimes dangerous reality. Li Wei states that these images are not computer montages and works with the help of props such as mirror, metal wires, scaffolding and acrobatics.



 Christiaan PostmaThe starting point with this project was a personal study about form &#038; time. I put together more than 150 individual clockworks and made them work together to become one clock.  I show the progress of time by letting the numbers be written in words by the clockworks. Reading clockwise,  the time being is visible through a word and readable by the completeness of the word, 12 words from “one” to “twelve”.



 Zurich Chamber OrchestraThe latest video-spot of Zurich Chamber Orchestra, created by Euro RSCG, is simple yet quite impressive. The camera seems to follow the music notes in the music sheet.

April 30 2008, 9:48am | Comments »

I posted to smashingmagazine.com

Best Of March 2008

http://www.smashingmagazine.com/2008/03/27/best-of-march-2008/

Every month we take a look around and select some of the most interesting web-development-related web-sites. We read articles, check out tools, analyze the advantages of new resources. Below you’ll find useful references, tutorials, services, tools, techniques and articles we’ve found over the last 30 days - an overview of web-sites you shouldn’t have missed in March 2008. All images can be clicked and lead to the sites from which the screenshots have been taken. And please, please, don’t forget to check out the last link. You won’t regret it. Design-Galleries, Showcases, Inspiration

 We All Love Typography&#8220;Whether it’s spacing, font choice, position, kerning, I just can’t seem to get that look. I am always looking for designs that showcase amazing typography, below are 50+ examples of what I have found inspiring in my quest to achieve typography greatness.&#8221;




 ChangethethoughtChristopher Cox collects great works that have been awarded many times and was mentioned by Computer Arts, Design Taxi, Webby Awards, Pixel Surgeon and others. [ via abduzeedo ]



 Create Spectacular Concept Art in PhotoshopCreating conceptual work can be fun and relies heavily on your imagination. This tutorial shows how to combine stock photographs to create a stunning effect that can be easily reproduced to work with almost any combination of images.



 The Rainbow MonkeyA portfolio of Markus Hofko. Interactivity meets style. Impressive works.


 Vintage LogotypesWell Eric Carl has graciously posted all of the pages from the book to his Flickr page. You can also download all the images in a handy Zip file directly from his blog. More vintage logos. [ via iso50 ]



 Color Chart: Reinventing Color from 1950 to TodayThis MOMA exhibition takes as its point of departure the commercial color chart, an item that openly declares the status of color as mass-produced and standardized. It features the work of 44 artists who take a position in which art and life mingle rather than remain separate, and where beauty is found in the everyday rather than in the ideal.



 Cool Web CharactersA collection of mascots used in modern web design. We&#8217;ve collected some, too.



 bottle caps!A showcase of&#8230; well, bottle caps. This photoset on Flickr includes 162 photos.

Ajax, Javascript

 iCarouseliCarousel is an open source (free) javascript tool for creating carousel like widgets.



 FancyZoom 1.1Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoomis providing a smooth, clean, truly Mac-like effect, almost like it&#8217;s a function of Safari itself.


 FlexigridLightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.



 markItUp! Universal Markup EditormarkItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.


 jQuery Tutorials for DesignersThis article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.



 WaveMaker Visual Ajax StudioWaveMaker Visual Ajax Studio is an visual builder that enables the drag &#038; drop assembly of scalable, web-applications using Ajax widgets, web services and databases. WaveMaker&#8217;s Studio enables data-driven and web-services based applications to be quickly created without complex code, forms, patterns or portal frameworks. Both open-source and commercial licenses are available.



 dfFlexiGrid - Liquid Javascript Grid LayoutThe dfFlexiGrid allows you to build extreme user friendly liquid grid layouts on HTML.

CSS-Techniques, (X)HTML, PHP

 CSS Message Box collectionA collection of some simple CSS styles you can apply to your message boxes (clean, solid, iconized, alternated rounded borders, tooltip).



 Clean Tab Bar Digg-like using CSSThis tutorial explains how to design a clean Tab Bar (Digg-like) with rounded tabs (liquid width) using CSS and just one background image to manage all status for each tab (standard, active, hover).



 CSS Drop Column LayoutWhen I created this site I wanted to have 4 columns which are all fixed width. The idea was that if you resized the window then the columns would drop down when there wasn’t enough room.



 Creating a Body-Border&#8220;“Body Border” is a stroke of color just inside the entire viewable area, all the way around, in the browser window. I thought it was a nice touch and a pretty spiffy little CSS trick so I thought I’d feature how it was done here.&#8221;


 Nine Techniques for CSS Image ReplacementCSS image replacement is a technique of replacing a text page element with an image. This article covers nine techniques, including a testing page with all nine techniques put to the test.



 Combating Classitis with Cascades and Sequential Selectors&#8220;There is a disease out there in the CSS world. It can afflict anything from the meanest weblog (or the nicest ones too, I suppose) to the greatest of corporate websites. It’s called Classitis, and I’ve encountered it far too often in my professional work.&#8221;


 Cross-browser text-shadowCross-browser text-shadow is possible. The implementation code to achieve this effect is quite nasty, though.


 Equidistant Objects with CSS - CSS-TricksCreating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially in fluid width layouts when you are trying to make the most of whatever horizontal space you have.



 Table-Based Layout Is The Next Big ThingWith the release of Internet Explorer 8 some of the more obscure areas of CSS are going to become very important. One of them: CSS tables.


 How to create CSS layouts without using FLOATThere are many CSS layouts out there. Some rely on AP (Absolutely Positioned) elements, others use FLOATs. This article demonstrates an original solution that addresses semantics, construct, and design issues to deliver robust layouts.


 The Highly Extensible CSS Interface ~ The SeriesCameron Moll continues to publish the parts of his series of how-tos and savvy conversation about highly extensible CSS-interfaces. Recent publications cover CSS Selectors &amp; jQuery as well as Ajax Interactivity.



 delivering code / how to avoid conflict&#8220;So let&#8217;s assume we&#8217;re delivering a clean piece of html code with all the necessary styles in a separate css file that both need to be included in the source document. The problem we&#8217;re dealing with is that there&#8217;s a realistic chance that your nicely tweaked piece of code will be overruled by already existing css declarations. Luckily, we can take some measures to avoid this.&#8221;


 29 CSS-Snippets for Google AdSenseGetting creative with Google AdSense.


 Most used CSS tricksIncluding rounded corners without images, ordered lists, tableless forms, blockquote, vertical centering with line-height and CSS drop caps.

Freebies

 Free Vector Maps and Country OutlinesThis collection of free vector graphics features an extremely useful compilation of country and map outlines from across the web.



 Free XHTML/CSS website templates for download28 XHTML+CSS-based templates, valid, accessible, well-formed, tested and available for free download. Print style sheet is also included.

Tools, Web-Services

 XHTML/CSS Markup GeneratorMarkup Generator is a simple tool created for xhtml/css coders that are tired of writing boring frame code at the very beginning of slicing work. It&#8217;s main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.



 960 Grid SystemThe 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.



 MoreCSSMoreCSS is a small JavaScript library for everyday things, like creating tab menus (for example like the one above), tables and lists with zebra-style etc. But the really special thing is: you can do these things like in regular CSS.


 Dummy Text GeneratorThis handy tool helps you create dummy text for all your layout needs.


 Spam Proof eMail Address GeneratorThis tools enables you to enter your email, choose colors and font types and create a picture of your email address which spam bots will not be able to read.


 PiwikAn open source web analytics application which is supposed to be an advanced alternative to Google Analytics. The features are built inside plugins: you can add new features and remove the ones you don’t need. Sounds promising.



 codepadCodepad is a pastebin that runs your code for you. It works like a compiler or interpreter, not like the read-eval-print loop of an interactive interpreter prompt. If you want to print the value of an expression, you need to use your language&#8217;s print command. The tool supports C++, Perl, Python, Ruby and others.


 Feed Analysis v1.1This tool analyzes your FeedBurner feeds, provides statistics about the growth rate, calculates average subscribers and predicts further development. Growth rate is particularly useful.



 snippelySnippely is a basic text and code organizational tool. Instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize &#8220;snippets&#8221; in one convenient location.



 SHIFD Beta - Shift Content Between Your Devicesa really easy way to capture and view notes, places and links from your mobile phone, web browser or computer desktop. I most often use it for mobile notes-to-self; whenever I need to capture a name, place, task or thought I just text it to ShifD. [ via Coolhunting.com ]



 RotateeRotatee lets you create ad campaigns to manage different advertising spots on your website. Each campaign can target certain spot (ex. sidebar). You can specify how many ads should be shown on each spot and how often each of them should appear. Currently in private beta. [ via Makeuseof.com ]


 favicon.ico GeneratorThis tool lets you draw 16px &times; 16px favicons online, store them, share them and rate them.


 DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewerAn Internet Explorer plug-in that brings you new powerful features . Free for personal use. The tool includes a DOM inspector, HTTP inspector, Javascript inspector and Javascript console,HTML validator and other features.

News, References, Tips

 How much do web designers earn?Not much. $54,000 a year. The results of AIGA&#8217;s 2007 Salary Survey. The survey covers all aspects of designers and their compensation. [ via WakeupLater ]


 DOM ReferenceThis chapter provides a brief reference for the general methods, properties, and events available to most HTML and XML elements in the Gecko DOM. The articles listed here cover DOM Core Specification, DOM HTML Specification and DOM Events Specification.


 Open-Source Social Networking SoftwareA brief review of three open-source social networking applications which you can use to create online communities  or social networks. Among them Dolphin, Elgg and PHPizabi. Lovdbyless is worth mentioning as well.



 Internet Explorer 8 Beta 1 releasedMicrosoft released the first beta of Internet Explorer 8. Among new features the integration of pseudo-classes :after and :before. IE8 improves rendering of content authored to various web standards in standards mode. The new version features an enhanced and standardized DOM that brings it in line with implementations in other browsers.  Additionally, IE8 has dramatically enhanced AJAX support with features like DOM: Storage, Cross Document Messaging (XDM) and the Selectors APIs. And (hurrah, hurrah): IE8 will use Standards mode by default. Details, comments, analysis and ideas. And, finally, IE8 Readiness Toolkit for web-developers.


 Safari 3.1 UpdateThe new release adds support for CSS 3 web fonts, broader SVG images capability , and offline storage for Web applications in SQL databases.


 Acid3 Test ReleasedThe Acid3 test has been released and most current browsers fail it miserably. Exception: Safari has done its homework perfectly. [ via Thinkvitamin ]



 5 Free Screencasting Apps for Creating Video TutorialsThis article features AviScreen, CamStudio, Copernicus, Screencast-o-Matic and Jing. Both Windows and Mac-applications are included.


 Pixton - The User-Generated Comic StripPixton is a user-generated comic strip, that you create, publish, share and remix with your friends. Pixton characters are created by choosing from preset attributes and expressions, specifying hair and skin color, rotating body parts, and setting height and girth with a drag of the mouse. Registration is required.



 9 Tools PayPal Users Should Know AboutFor instance, PPcalc helps you to figure out your PayPal fees.


 Catalogue of Corporate IdentityThe catalogue of corporate identities including colors, size and typeface. 640 logos are featured.


 Best of JoomlaA growing repository of Joomla templates, extensions and tools for Joomla.


 Photoshop BrushesA growing collection of free Photoshop-brushes. Currently over 500 brushes are available and the collection is growing.

Articles and Publications

 The Evolution of WebsitesHow 10 popular websites have (and have not) changed over the last 10 years.



 Write a well structured CSS file without becoming crazyThis is a descriptive post about how to write a well structured CSS file. Main principles of successful CSS-coding: be simple, be &#8220;elegant-code&#8221; oriented, be methodic. A useful read.



 An Introduction to ExpressionEngineEE has the power to drive even most medium- to large-scale websites. If you’re looking for a reason to invest some time and effort into learning and installing it, keep reading.


 Fixed Width, Fluid Width and Elastic WidthWhat&#8217;s the difference? An explanation and basic examples in a pretty long screencast.


 Subversion for DesignersThere’s no question that developers need version control when working on an app. But what about designers? In this article Chris Nagele talks about the benefits and basics of Subversion for designers.



 Web/Graphic Designer Group InterviewAn extensive group interview of 10 web-developers. Some interesting insights into designers&#8217; workflow, how they seek for inspiration and what they begin their projects with. More useful insights.


 6 Phases of the Web Design and Development ProcessWeb Design Engineering: an attempt to introduce some structure into the design and development process into 6 pieces: information gathering, planning, design, development, testing and delivery and maintenance. These stages are typical for usual software development process.



 MediatypingWhat does it take to refactor a stylesheet for a mobile version of a web-site? How to start and what to consider? Dave Shea delivers answers.


 Coding for the mobile WebDeveloping for the iPhone is great, but it’s only a sliver of the mobile market, and the real world of mobile development is a lot hairier. Opera developer relations manager Chris Mills writes about do’s, don’ts and best practices.



 9 best practices for email designDesigning for an email is still quite far off from designing for a browser. In fact, email reader standards are pretty historic in the sense that (a) it requires designers to degrade their modern coding practices and (b) there really are no true standards.


 Legends of StyleIt’s a well-established fact that achieving cross browser consistency when styling form controls is an “exercise in futility”. And one of those elements that just won’t play ball is the legend tag.


 A Guide to Pricing for DesignersWhat should you consider when estimating the price for your work? Armen Thomassian suggests to consider business overheads, part-time or full-time, experience, image and&#8230; respect. More pricing factors.



 12 Ways to Tap Into an Endless Well of CreativityThere is no reason to ever run out of ideas. The world, our minds, history, and the Web offer an infinite realm of artistic exploration. Consider the impact your habits, approach, organization, and internal rhythms have on your finished work. Find out some approaches professional artists use to continuously wave a wand of endless creativity.


 Sign Up Forms Must DieWhen planning a customer’s initial experience for your web service, think about how you can avoid sign-up forms in favor of gradual engagement. Show potential customers how they can use your service and why they should care.



 Design is in the DetailsPaying attention to small details—and in some cases, obsessively focusing on “what isn’t right”—can take a design from “nearly there” to “there” and beyond.


 10 Complaints10 complaints the customers have about the design of corporate web sites


 Six suggestions that can make you a better designer

Struggling with too many projects, and not sure where to start? Wish you had a few tricks up your sleeve to make things easier? While the following is certainly not a definitive list, it does contain a few of the things which sound quite reasonable.

The Last Click

 Alphabet Popup Book by Marion BatailleABC3D is a pop-up book featuring the alphabet. Each letter is displayed in a creative way. [ via Geekologie ]


 StatAttakImpressive typographic t-shirts.



 Lazy Oaf Pimp My PumpsLazy Oaf&#8217;s off-the-wall designer shoes are inventive one-offs all using the classic plimsol as a canvas. Each pair is one-of-a-kind and made using materials that aren&#8217;t necessarily street-safe, which means they might be more functional as sculptures than as footwear. They start at £35 from Lazy Oaf.



 CableyoyoThis is damn useful. Cableyoyo is an empty spool around which you wrap your existing cord. It will take any cord up to 5mm in diameter, and this covers all low voltage chargers, USB, firewire, data and telephone cables.



 Designing for DisagreementDesigning for Disagreement is a visual explanation of think/make, a new method of creative problem solving with the ultimate focus on expeditions, honest, and accurate results. A new concept by Paul Burke. Nice visualization.



 Easter Egg Coloring ContestColoring easter eggs&#8230; online. [ via swissmiss ]



 ASCII Art in Google AdWordsHow to distinguish your ad from other competitors&#8217; ads? Get creative. In Google AdWords you can use ASCII to stand out. Result: this ad received 47% more clicks than before.



  Music using ONLY sounds from Windows XP and 98!Absolutely incredible. This song consists only of alert sounds from Windows OS. And the best thing: the song is absolutely smashing!

March 27 2008, 7:44am | Comments »

I posted to smashingmagazine.com

Best Of February 2008

http://www.smashingmagazine.com/2008/02/29/best-of-february-2008/

Every month we take a look around and select some of the most interesting web-development-related web-sites. We read articles, check out tools, analyze the advantages of new resources. Below you’ll find useful references, tutorials, services, tools, techniques and articles we’ve found over the last 30 days - an overview of web-sites you shouldn’t have missed in February 2008. All images can be clicked and lead to the sites from which the screenshots have been taken. Design-Galleries, Showcases, Inspiration

 20 Beautiful HDR PicturesThere are some photography techniques that really give me the goose bumps, but the good ones. HDR is one of those techniques&#8230; and you&#8217;ll probably love these as much as we do.



 Pattern InspirationSometimes it&#8217;s needed to go look in odd places to find inspiration. Take patterns for example, often used for backgrounds etc. There is a bit of a trend in interior design at the moment with the revival of the vintage wallpaper backgrounds from the sixties &#038; seventies.



 The Evolution of Tech Companies&#8217; LogosYou’ve seen these tech logos everywhere, but have you ever wondered how they came to be? Did you know that Apple’s original logo was Isaac Newton under an apple tree? Or that Nokia’s original logo was a fish? Let’s take a look at the origin of tech companies’ logos and how they evolved over time.



 Modernist Stamps Flickr SetA set of Modernist stamps featured in January&#8217;s Monograph, a collectable A5 Booklet from Creative Review. [via cpluv]


 Quick Grungy Poster Photoshop TutorialThis tutorial shows how to create a sort of grunge poster. You&#8217;ll learn how to make some elements look a bit dirty, create textures and add some depths to the elements using shadows and blend modes.



 Logo Design Trends 2008Logos are the ultimate mark of distinction and everyone loves them. This article attempts to discuss current trends in logo design; among them - organic 3D, Waves, Transparency, Minimal Typography and The New Crest.


 Grid and Column DesignsIf you are looking for inspiration for grid and column design, here is a nice collection of 32 column-based websites. These sites show how grid layout can be applied on various type of sites — whether a massive content editorial site or just a personal blog.



 Movable LoveA showcase of interesting and beautiful sites powered by Movable Type. Textpattern Showcase and Wordpress Showcase might turn ot to be useful as well.


 Home Page Carousel Showcase: 40+ Carousel DesignsChristian Watson strikes again. A showcase of home page carousel designs to see what common themes emerged and also what different approaches designers took.



 Pre-owned bookmarksPre-owned bookmarks, collected over the years from books purchased at flea markets, garage sales, used bookstores, etc.


 TypesitesTypesites is a weekly showcase of websites with interesting typographic design.


 Insanely Creative Portfolios From Around the WebA growing collection of beautiful online portfolios. Not single one of them is Web 2.0ish, which is a good thing.

Icons, Fonts

 Flower Folders IconsetAll icons are transparent, created in Illustrator, completely vectorized and available in .png 512 x 512. Format: .psd, scalable, layered, editable. Illustrator file .ai is attached. Licensed under Creative Commons Attribution-Non-Commercial 3.0.



 iPhone WallpapersA collection of excellent wallpapers for your iPhone.



 Free Vector Icon Set - Containing 25 Icons&#8220;This set contains 25 scalable Illustrator icons. You can open the .ai file with any version of Illustrator above 8.0. With earlier versions, you might loose some of the effects on the icons.&#8221;



 PNG Icons &#038; Icon PacksA large collection of free and fresh icons collected on one single site.


 Free Flag IconsMore than 220 free flag icons representing countries and unions all over the world in PNG format. Sizes : 16&#215;16, 24&#215;24, 32&#215;32, 48&#215;48.



 16 Incredibly Detailed, Useful (and free) Dingbat FontsAn overview of useful Dingbat fonts available for free download.

News, Updates, Tips

 NYTENew York Talk Exchange illustrates the global exchange of information in real time by visualizing volumes of long distance telephone and IP data flowing between New York and cities around the world. Videos and images are included.



 Netdiver Magazine - Best of the Year / 2007Netdiver reviews some of the most interesting and inspiring projects of the year 2007. &#8220;These folks whatever their disciplines create memorable and dazzling projects, taking us to uncharted territories where imagination, skill, talent abide - inciting us to keep pushing forward.&#8221;


 Konigi: Form, function, fetishKonigi community researches how others have designed the look and feel of web sites and crafted their user interfaces. &#8220;If you&#8217;ve ever searched around for market research and competitive information related to the user experience and design of web sites within any industry, then you&#8217;ll want to watch this space.&#8221;



 Make3DMake3D generate a 3D model out of any uploaded photo. The results are quite impressive. 3D models can be downloaded in VRML, Flash or 3dS format. You need to register before uploading your own images.


 Firefox Hits New High as IE7 LagsIE: 66%, Firefox: 28% (European browser usage statistics). Mozilla Firefox continued its slow but steady march against the worldwide dominance of Microsoft Internet Explorer in 2007. Though the open-source web browser continues to sit firmly in second place behind IE, where it&#8217;s been for years, usage of Firefox is still on the rise.



 Adobe AIR v1.0 &#038; Flex 3.0 Released; New Adobe Open Source Site LaunchedContinuing their march into the RIA space, Adobe announced the official release of AIR v1.0 and Flex 3.0. The new Adobe AIR runtime enables Ajax developers to build rich Internet applications (RIAs) that deploy on the desktop. AIR applications run across operating systems on the WebKit HTML engine and are easily delivered using a single installer file.



 Map of social network popularity around the worldAsia loves Friendster, Russia loves LiveJournal, and Orkut still dominates Latin America. [via Waxy]



 OpenID goes BigIn February Google, IBM, Microsoft, VeriSign and Yahoo joined the OpenID Foundation: will OpenID-enables sites (where users do not need to remember traditional authentication tokens such as username and password and can use universal authentification instead) soon become a standards?


 Web Developer Crossword PuzzleThis crossword puzzle&#8217;s questions cover such topics as: search engines, CSS, C#, JavaScript, Browsers, Programming and just about anything else Web-related (.pdf). The answers are already published (.pdf).


 Free Photoshop Actions to Boost Your DesignsAn action is a series of tasks that you play back on a single file or a batch of files - menu commands, palette options, tool actions, and so on. This article presents a number of actions for Photoshop you can download and use for free.



 Things I have learned in my life so farAnother social project focusing on people&#8217;s experiences summarized in a brief statement and a photo.


 SitePoint CSS ReferenceSitepoint has published an updated version of its comprehensive CSS reference.


 You Suck At Photoshop Video TutorialsDonny Hoyle is damn good. The most entertaining Photoshop video tutorials you&#8217;ve ever seen.

CSS-Techniques

 How to recreate Silverback&#8217;s ParallaxParallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site.



 Five CSS menu tutorialsThis post includes five CSS menu tutorials inspired by some Web 2.0 sites with round corners, scriptaculous and Ajax effects. Among them: Digg-like navigation bar using CSS, Flickr-like horizontal menu and Gettyone-like search options menu.



 Elegant navigation bar using CSSThis tutorial explains how to design an elegant navigation bar (gettyone inspired) for your site using CSS.



 Vertically center content with CSSA convenient benefit of using tables is the ability to vertically center content within a cell using the valign attribute. Unfortunately, acheiving the same effect with CSS isn’t so convenient. So, as we continue to move towards tableless structures, there comes a need for a simple and valid CSS alternative.


 Em &#038; Elastic Layouts with CSSThis article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm.


 Custom Double Solid Borders for ImagesWe are not going to use border-style:double; As we know these are not easy to control. Imagine a situation where you want outer border on the image. How would you achieve this? And further more, how would you achieve this with no additional markup? A small but very useufl trick.



 Create Resizing Thumbnails Using Overflow PropertyThis tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don&#8217;t have enough space to spare to fit in large thumbnails. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it.


 Pure Css Data ChartData visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let&#8217;s say simple data chart? How about giving it a try with nothing but good ol&#8217; css?



 Open External Links in New Window AutomaticallyThis script initiates on page load and goes through all links (anchor tags) in document. It then checks links, and based on current domain name it recognizes link as internal or external. Furthermore, to external links script adds a class name &#8220;external&#8221;. That way you can visually separate them from internal links.


 Cross-browser transparent columnsA demonstration of how to implement cross-browser transparent columns. It&#8217;s used by having combination a transparent div with the same height as it&#8217;s parent and a div containing the content. Then we pull the overlay div to the left and set the content div to position: relative; to fix the z-index. 



 CSS Browser SelectorYou should always avoid feeding browsers with specific CSS-style sheets, but if you badly need to solve some inconsistency issues, CSS Browser Selector might be an option to consider.


 Book-style Chapter Introductions Using Pure CSSThis article describes how you can create the scripty drop-caps at the beginnings of chapters, and the first line of small caps leading into the first full paragraph. With CSS. The technique doesn&#8217;t work in IE.



 Perspective CSS ExperimentPerspective-effects with pure CSS.



 A very different approach to taggingPeople normally use tags to link related posts. On his forum Edward Tufte uses a totally different approach. Instead of linking to pages for each tag, it simply shows the tagged articles inline. No separate screens. No navigation. It&#8217;s a beautifully simple solution.


 How to create CSS layouts without using floatThis article demonstrates an original solution that addresses semantics, construct, and design issues to deliver robust layouts without using absolute positioning or floats.

CSS-Tools, References, Templates

 Free Web Templates - Nuvio Templates72 free, valid, tableless, standard-conform, carefully commented templates which also contain print style sheet. The Simply Theme is also available as a WordPress-theme.



 Pixels to Ems Conversion Table for CSSThe em values in the table assume that the generic browser default setting of 16px font size has not being changed. It also assumes that the  has font size set to 1em or 100%.


 Blueprint CSS ResourcesA growing collection of tools, tutorials, articles and references related to the Blueprint CSS Framework.

Ajax, Javascript

 Sniff browser history for improved user experienceThis article teaches you how to mine the rich treasure trove of personalization data sitting inside your visitor&#8217;s browser history for deep personalization experiences. &#8220;I can scan a current visitor&#8217;s browser history to determine an active presence on one or more bookmarking sites. Once I determine the current visitor is also a Digg user I can show live data from Digg.com to prompt a specific action such as submitting a story or voting for content. I can create a much better user experience for 3 services I know my visitor actively uses instead of spraying 50 sites across the page.&#8221;


 Facebook Style Input BoxThe approach to re-create the autocomplete method of adding multiple recipients to messages used on Facebook. &#8220;I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)&#8221;



 mooSocialize - social bookmark widget, ajax based, add your post to the most common social networksThis Ajax-based widget allows you to integrate the bookmarking feature directly into your post. By clicking the mooSocialize button, a window will appear, which lets you choose a preferred service without leaving the site you&#8217;d like to bookmark.



 Step by Step - Show and explain visitors what your page has for themYou might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.


 GWT-Ext Widget LibraryGWT-Ext is a powerful widget library that provides rich widgets like Grid with sort, paging and filtering, Tree’s with Drag &#038; Drop support, highly customizable ComboBoxes, Tab Panels, Menus &#038; Toolbars, Dialogs, Forms and a lot more right out of the box with a powerful and easy to use API. It uses GWT and Ext.



 GlassBoxGlassBox is a compact Javascript User Interface (UI) library, which uses Prototype and Script.aculo.us transparent border, colorful layouts and &#8220;Flash-like&#8221; effects.


 Soft Edge Technique: Soft Edges and Opacity Gradients for ImagesThis snippet creates soft edge for content images using lightweight and unobtrusive JavaScript and CSS interventions. With it you can create &#8220;cloudy&#8221; soft edges or one-side opacity gradients without any image editing software.


 How to highlight search results with JavaScript | Eric WendelinUse the combination of a JavaScript snippet and CSS-style to highlight words or phrases in the search results making it easier for your visitors to find the most relevant content on your weblog.

Web-Typography

 A Guide to Web TypographyTypography is not just about choosing a font, or even distinguishing one typeface from another. In recent experiments, trained Monkeys were able to correctly identify Helvetica 90% of the time. Today we’re going to talk about web typography in terms of a recipe of four fundamental ingredients: Contrast, Size, Hierarchy and Space.


 Twenty-Six Types of Animals by Jeremy Pettis26 impressive examples of original lettering style; each of the illustrations is supposed to capture the essence of a beast with&#8230; pure typography.



 The Funkiest Ampersands You Have Ever SeenAn ampersand is the figure used to represent the word ‘and’, it is widely recognized by the symbol &#038;. Have a look at some of the funkiest ampersands you have ever seen.



 Flickr: International Typographic StyleThe International Typographic Style, also known as the Swiss Style, is a graphic design style developed in Switzerland in the 1950s that emphasizes cleanliness, readability and objectivity. Hallmarks of the style are asymmetric layouts, use of a grid, sans-serif typefaces like Helvetica, and flush left, ragged right text. A typographic Flickr Pool. More Typography.



 CSS Type SetA handy tool that lets you define an optimal font family, font size, color and further settings such as leading and letter-spacing online.


 TypeflashTypeflash is an interactive typo site that lets you create personalized eCards with animated typefaces designed by Peter Vajda.

Tools, Web-Services

 Firebug 1.1John J Barton has released a new beta-version of Firebug. Among new features are eval&#40;&#41; debugging, external editor interface, browser-generated event handler debugging, stack side panel on “Script” panel for callstack and support of Firefox 3.


 YUI 2.5.0 ReleasedThe YUI Team released the new version 2.5.0 of the YUI library. Six new components were added — Layout Manager, Uploader (multi-file upload engine combining Flash and JavaScript), Resize Utility, ImageCropper, Cookie Utility and a ProfilerViewer Control that works in tandem with the YUI Profiler. 



 File Destructor 2.0 - Hype MagazineWant to play games on your Playstation but got a deadline for an exam or report that didn’t match your gaming ambitions? Send trashed files and blame your faulty computer, instead of confessing that you are a lazy bum who just wants to play videogames.


 Ajaxonomy del.icio.us SpyThis tool enables you to observe live which bookmarks are added to Del.icio.us.


 PicLens Firefox ExtensionPicLens transforms Firefox into a full-screen, 3D experience for viewing images in full-size. The developers promise that &#8220;photos will come to life via a cinematic presentation that goes well beyond the confines of the traditional browser window&#8221;. Impressive.



 Nourish: RSS to Email ServiceNourish is a next generation newsletter service which allows you to take any RSS feed from content you publish (like a blog), and convert it into an automated email newsletter your readers can subscribe to.


 BrowserSim PSD + Action setBrowserSim is a Photoshop psd + action set for quickly producing customized browser chrome framing (IE 7, Firefox 2) for web design mockups. An action file for automatically formatting window titles and URLs is included.


 HelloTxtHelloTxt is an aggregate of microblogging services through which users can quickly publish updates to multiple networks simultaneously. You can post to Twitter, Pownce, Facebook, Tumblr and other networks at the same time, with one click. One message that goes to all accounts. [via MakeUseOf]



 Easy Text to PNG conversionThis service provides the ability to convert headlines and navigations to PNG images automaticlly. The process is automated as you simply need to  add a JavaScript file and define which tags should be replaced.


 Jawr - More than a Javascript/CSS compressor Jawr is a tunable packaging solution for Javascript and CSS which allows for rapid development of resources in separate module files. Writing a simple descriptor properties file, and using a servlet and a tag library are all the requirements to use it.


 FeedJournal - The Newspaper You Always WantedFeedJournal automatically converts RSS feeds to a printable newspaper. Once the feed is selected, yo can define preferred newspaper layout (number of columns, margins etc.) and generate a printable newspaper-style PDF document.



 .htaccess EditorThis tool enables you to easily create .htaccess files online.


 PDFescape - Your Online PDF Reader, Editor, Form Filler, Form Designer, SolutionPDFescape lets you open PDF files online, make changes and save them right into the .pdf-file for free. Thus you can fill in PDF forms, add text and graphics, add links, and even add new form fields to a .pdf file.

Articles and Publications

 10 Mistakes in Icon DesignThe article 10 Mistakes in Icon Design reviews the most commonly observed mistakes in icon design. Among them are insufficient differentiation between icons, unnecessary elements and overly original metaphors. Worth reading.



 Version Targeting: Threat or Menace?Version targeting shakes our browser-agnostic faith. Its default behavior runs counter to our expectations, and seems wrong. Yet to offer true DOM support without bringing JScript-authored sites to their knees, version targeting must work the way Microsoft proposes, argues Jeffrey Zeldman. They Shoot Browsers, Don&#8217;t They? &mdash; Jeremy Keith about the same topic.


 Keeping Your Elements Kids in Line with OffspringMaintainable code is even more important if you’re going to hand off your code to a client or a content management system: the less intricate the markup, the fewer chances there are for the nuances of your code to become lost in the shuffle. Alex Bischoff about how to keep your markup clean.


 Product pages: so much suck, so easy to fixAmy Hoy covers a lot in this article &#8212; from James Joyce and upchucking, to Firefox, telepathy, and Opera. Through it all she shows you how see through the eyes of a user and an experience designer, and how to use that viewpoint to improve your site.



 The Principles of Beautiful HTML Email [Design Principles]As web designers, we&#8217;re used to designing for the particular constraints and capabilities of web browsers, and there&#8217;s a ton of great advice out there to help. HTML emails are a different story, though &#8212; they&#8217;ve often been the black sheep of the web design world, and have either been ignored or actively repelled.


 The Highly Extensible CSS InterfaceCameron Moll&#8217;s extensive series of how-to create highly extesnible CSS-based interface. The phrase &#8220;highly extensible&#8221; is in reference to designing and coding interfaces that are flexible enough to adapt in ways the designer or developer may not foresee when handing off coded templates, while still retaining the overall aesthetic integrity of the layout.



 The Immutable Laws of Web Design and Development | Blue FlavorAre software engineering rules, principles and laws applicable to web design? Brian Fling tries to find out.


 Detailed Look at Stacking in CSSUsing the z-index to affect stacking order in CSS is a much deeper topic than it may appear at first. The idea seems quite simple, but if we take a look we can see that there is actually quite a bit going on here that warrants a closer examination. z-index explained.


 Top-10 Application-Design Mistakes (Jakob Nielsen)Jakob Nielsen: Application usability is enhanced when users know how to operate the UI and it guides them through the workflow. Violating common guidelines prevents both.

Last Click

 Typographic home decorationHave you ever thought about decorating walls in your house with&#8230; typography? Well, harmonie interieure does exactly that. The results are pretty cool. [via Siwssmiss]



 Good 50&#215;70The aim of Good 50×70 is to use these skills to highlight more important things than beer and trainers. It’s a competition to raise awareness amongst the creative community of the power we have to be a force for good. There are 7 briefs from 7 charities on 7 issues that affect thousands of people around the world. All you have to do is pick a topic that inspires you and submit a poster on that theme. Good 50&#215;70 is open for entries from February the 18th, 2008. The entries close on midnight April the 20th, 2008.


 MothergooseIt&#8217;s teatime! This tee-set will never get broken once you let it drop on the floor. It has nothing to do with web design, but the set is pretty sweet.



 Broken Link NecklaceSo this necklace just didn&#8217;t load. Now you can imagine how great the image would&#8217;ve been. The pendant is made from non-toxic shrink plastic, and coated for durability. The cord is made from leather with sterling silver clasp.



 Moleskine&#8230; Mac NotebookLaser engraved half white - half black Mac Book. Designed by Jona Bechtolt, laser engraved by Engrave Your Tech of Portland, Oregon.



 Rainbow BookshelfNot practical, but gorgeous: Rainbow Bookshelf is an example of organizing books by color. What comes out of it is pretty unusual. A good way of changing the whole aspect of a bookshelf with a little bit of creativity.



 Designing Marvels: Simple yet Incredible!Some interesting design concepts: scroll down to the rolling bench and the umbrella bag.



 YouTube - Surfin&#8217; on the WebThis song was written when nobody knew what that means. There were about 100 websites in the World, and not more than 3000 &#8220;Web surfers&#8221;. Dedicated to Tim Berners Lee, the inventor of World Wide Web.

February 29 2008, 3:29am | Comments »

Design Treats

Floral typography

25 New High Quality Free Fonts

15 Fresh High-Quality Free Fonts

50 Useful Design Tools For Beautiful Web Typography

The Right Type: 5 Inspiring Typography Tales

Vintage and Retro Typography Showcase

Best Of April 2008

Best Of March 2008

Best Of February 2008

Popular Tags

Search