BlogmyQuery – BMQ

Web typography has evolved a lot over the last years. Today we see rich, accessible typography, a plethora of type design choices for the web and a number of remarkable, type-based web designs. It’s a great time for web design, and it’s a great time for web typography. Still, being as excited as we are, we should not forget about the foundational principles of good type design on the web and use them properly within our projects. Great choice is good, but, most importantly, we should be making meaningful typographic choices in our designs.

In this post we present an extensive overview of educational resources, tools, articles, techniques and showcases all related to web typography. Please notice that the overview presents resources which we have stumbled upon, discovered, collected and reviewed over the last six months. This round-up is quite long, so save some time for a thorough study.

We believe that such round-ups are valuable because they present many useful pointers in one place. From time to time we have many inquiries about such round-ups and we gladly prepare them for our readers, along with in-depth articles which are regularly published on Smashing Magazine.

Educational Typography Resources

So You Want to Create a Font
Alec Julien’s introductory piece on how you can create some beautiful fonts with a little hard work, a lot of knowledge and a little inspiration. The series covers font editing software, transition from paper drawings to screen drawings, vertical and horizontal metrics and kerning. Don’t forget to check out part 2 as well.

Kerning Type and Great Typography
There are lots of tips on the best way to perfectly kern a piece of type. As with all designs, kerning can be subjective, but some are just plain right or wrong.

Perfect your Kerning Skills
Kerning is the art of spacing individual characters in a word so that they sit in correct relationship to one another, creating a subtle harmony and rhythm. In this article, Tom Sewell gives some recommendations for good letter spacing.

Font Hinting
Hinting, or screen optimising, is the process by which TrueType or PostScript fonts are adjusted for maximum readability on computer monitors. This article compares different ways of hinting (black & white, grey-scale, ClearType, DirectWrite) and explains the behaviour of fonts under different rasterisers. You may want to read Font Hinting Explained By A Font Design Master and TrueType Hinting as well.

Type Rendering On The Web
This article introduces a series of posts about type rendering on the Web. The translation of a font’s outline into pixellated text of varying quality, consistency and sharpness is not straightforward. It involves both a font and a rendering engine, and only so much can be controlled by type designers and web designers. Also, check design of fonts for the web.

Type Rendering: Web Browsers
Every great web browser has a layout engine that explicitly decides how to turn our markup, stylesheets and scripts into living, breathing websites. Layout engines have everything to do with how our web designs are generated and visualized. However, for the specific task of type rendering, layout engines almost always defer to the operating system’s text rendering engine. This article looks at how type rendering is affected, or not affected, by each popular web browser. Also, check operating systems.

Four Ways to Mix Fonts
H&FJ’s excellent article about ways to combine fonts in your designs. “Building a palette is an intuitive process, but expanding a typographic duet to three, four, or even five voices can be daunting. Here are four tips for navigating the typographic ocean, all built around H&FJ’s Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.”

Mixing Typefaces (PDF)
A handy overview of typefaces that fit and do not fit together when combined in a design. A September 1992 issue from the “International Journal of Typograpics�.

Font Metrics and Vertical Space in CSS
If you have ever wondered why some fonts look smaller than others at the same typeset size, or why the vertical space between lines of text is such a guessing game, this one’s for you.

Fundamentals: Combining Type With Helvetica
An interesting article presenting some choices that work well with Helvetica, presented by the German typographer Indra Kupferschmid.

The Ails Of Typographic Anti-Aliasing
As printed typography enjoys the fruits of high-DPI glory, proudly displaying its beautiful curves and subtleties, its on-screen counterpart remains stifled by bulky pixels, living in a world of jagged edges, distorted letterforms and trimmed serifs. Until display manufacturers produce affordable 200 or 300 PPI monitors, we’ll have to rely on software advances to fix these problems. Anti-Aliasing is the next best thing to a world of higher-resolution monitors.

An Introduction to OpenType Substitution Features
John Boardley’s beautiful article about OpenType substitution features. The article explains both pasic and more complex features and ideas. All examples should be considered starting points, just to pique your interest.

Beginners Guide to OpenType
Using OT technology, you can substitute your characters for different glyphs using many different methods. This beginners guide will help to illustrate some of the more common features found in OT fonts and when they should be used.

The Beauty of Typography: Writing Systems and Calligraphy of the World
Pick any language you like: Arabic, Chinese, Japanese, maybe Nepali? Each is based on a different writing system, which makes it interesting to figure out how they work. This article covers five categories of writing systems. This may sound tedious and academic, but it’s not. If you take the time to understand them, you’ll find that they all give us something special. Check part 2, too.

Linux Font Equivalents to Popular Web Typefaces
Linux distributions each ship with their own font libraries. This article focuses on similar typefaces you can use within a font-family to help make your design look better across operating systems.

The Grammar Cheat Sheet
When you know the correct way to structure a sentence, the world becomes a scary place — you start to notice how many people get it painfully wrong. The ease of content creation that the web now affords us is making the problem worse, so why not get a basic understanding to help make your text a little more professional.

Typographic Marks Unknown
There are many typographic marks which are familiar to most, but understood by few. Most of these glyphs have interesting histories and evolutions as they survived the beatings given to them through rushed handwriting of scribes and misuses through history. This article is an overview of typographic marks often seen or used, but not well known. Take a look at part 2 which discusses ligatures and blockquotes.

eXtreme Type Terminology
Paul Dean’s detailed introduction to type terminology. The series explains the various kinds of typefaces, their properties as well as general typographic terms.

Better web typography with OpenType features
In this article Ralf Herrmann shows some of the typical features of OpenType fonts and how they can be used in Firefox. The article describes the support of small caps, figure sets, descretionary ligatures, contextual alternates, case feature, stylistic sets and fractions.

Best Practices of Combining Typefaces
Creating great typeface combinations is an art, not a science. Indeed, the beauty of typography has no borders. While there are no absolute rules to follow, it is crucial that you understand and apply some best practices when combining fonts in a design. When used with diligence and attention, these principles will always yield suitable results. This Smashing Magazine’s article takes a close look at some the best practices for combining typefaces — as well as some blunders to avoid.

Some Typographic Rules to Remember (PDF)
A nice compact set of typographic rules, adapted from The Mac Is Not a Typewriter by Robin Williams. The document also contains a typographic checklist.

Making Geometric Type Work
For graphic designers beginning to experiment in type design, a geometric or modular typeface is a natural starting point. Illustrator and other programs offer a simple collection of elements such as circles, squares, and triangles which can be combined to create a passable alphabet. Dissatisfied with the limits of commercial fonts at the time, this designer twisted and distorted each character to fit into a few simple, very strict rules of construction. Invariably this produced a wide range of exotic letterforms, some more legible that others.

The Typographic Scale
A detailed introduction to the typographic scale, its history, relationships of hierarchy, its implications and practical applications.

Serif Font Guide
A useful slideshow for those interested in the history of serifs and their usage in design. Prepared by Rob McMinn.

Choosing the Right Font: A Practical Guide to Typography on the Web
Typography is an huge field. People devote years of their lives to this ancient craft, and yet there’s always something new to learn. In this article, the major points that you should consider when selecting a typeface for a website will be reviewed.

Useful Typography References

Typedia: A Shared Encyclopedia of Typefaces
Where do typefaces come from? Who made them? If you want to learn about type and share your own knowledge, Typedia is the right place. It’s a community website and resource to classify, categorize, and connect typefaces. Anyone can join, add, and edit pages for typefaces or for the people behind the type.

Typography Primer: all you need to know in one PDF
This informative PDF from Adobe concisely covers all the basic terms about typography. Among others: Serif and Sans Serif, X-Height, Alignment, Spacing and Choosing and Using Typefaces. A quick download for a nicely designed and easy to read boost to your typography skills.

Typographic Sins
Smart quotes instead of dumb quotes and when to use hyphens instead of a en dash. The most common typographic errors you want to avoid. Here they are all gathered together in one place. Worth saving and re-reading every once in a while.

FontShop Type Education
FontShop provides useful educational resources for typographers and designers interested in typography. The documents are formatted for easy downloading and printing, perfect for the classroom or studio.

Typography for Lawyers
Matthew Butterick prepared a very detailed overview of typographic rules, guidelines and examples for legal documents (e.g. court rules regarding the format of pleadings). As a result, the website is useful not only for lawyers but for everybody who is interesting in typographic rules and its subtleties. The overview is also available as a physical book.

Fonts for iPad & iPhone
Michael Critz gives you a long and handy reference table of the most popular typefaces available for the iPad and iPhone and their classifications.

The Great Typekit Table
Finding a good Typekit font for long blocks of text is hard, but this site made it a little easier. The guys behind Sleepover sifted through the Typekit library and pared it down to the list according to two simple rules: first, the font had to have lowercase, upper case, bold, italic, and bold italic; second, the font couldn’t be hand writing, script, or mono space.

Useful Typography Tools

TypeSet
An implementation using JavaScript and HTML5 canvas elementm which is meant to optimally set justified text in the new HTML5 canvas element, and ultimately provide a library for various line breaking algorithms in JavaScript.

Lettering.JS
Here is a nicely developed lightweight and easy-to-use jQuery plugin for radical Web Typography.

Web Font Specimen
Real web type in read web context. Web Font Specimen is a handy, free resource web designers and type designers can use to see how typefaces will look on the web. Prepare your own web font specimen in three easy steps.

Type Folly
TypeFolly allows designers to easily create beautiful, HTML/CSS3 “type follies�. The tool gives designers the freedom to create beautiful type compositions and test new font combinations. TypeFolly supports the following CSS properties: font-family, font-size, color, letter-spacing, word-spacing, font-style, font-weight, text-decoration, text-align, z-index, line-height, width, height, opacity, moz/webkit-transform, text-shadow and font-face.

Awesome Fontstacks
Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code!

Soma FontFriend
A bookmarklet for typographically obsessed web designers. Enables rapid checking of fonts and font styles directly in the browser without editing code and refreshing pages, making it the ideal companion for creating CSS font stacks.

Font-Family.com
Here is a site you can turn to in case you’re wondering what font family a particular font type belongs to. Preview available as well.

EmChart
Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when you want to resize text in your browser. Constantly reaching for a calculator to compute the correct EM value to use every time you need to is also a great way to drive yourself mad.

FontFonter
High quality, screen-optimized fonts that are designed specifically for web use. FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.

Good Web Fonts for Online Text
In case you don’t manage to find the time to test web fonts, you’ll be happy to discover this site.

Font Previewer
A preview is available to let you see how a font looks like once its size, variant, shadow have been changed. It is also possible to transform, decorate and add spacings. Font family names and their designers provided.

TypeIt
If you have the need to type anything in a foreign language which has accents and other strange-looking characters, and you only have a US keyboard, your life used to be miserable.

Letters & Ligatures
Scroll through and find the letter you have been or are still looking for. Simply by clicking on it, you can paste it into your text or your personal collection of letters.

JavaScript / CSS Font Detector
A JavaScript code that detects availability of a particular font in a browser using JavaScript and CSS.

How to Detect Font-Smoothing Using JavaScript
Some fonts look bad in certain browsers without font-smoothing enabled in the operating system (e.g. Win XP systems don’t have the ClearType font smoothing activated by default). This post provides a way to detect whether or not font-smoothing was being used using JavaScript.

Type-a-file
This tool provides a few looks or “flavors” for beautiful typography on the Web. These “flavors” make use of Typekit for their special font faces.

A Typekit Colophon Bookmarklet
This bookmarklet produces a colophon that gives you the name of the Typekit fonts used on a site. After adding this bookmarklet to your bookmark toolbar, click on it and it will open the site’s colophon. If the site doesn’t use Typekit, it’ll pop up a little alert to let you know.

50 Useful Design Tools for Beautiful Web Typography
When chosen wisely and used carefully, typography 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.

@font-face face off
The wast arrey of font delivery services can be confusing at times. @font-face Face Off comparison table offers an overview of many of those services and what they offer. Including number of fonts, foundries and payment models.

50 Helpful Typography Tools and Resources
A roundup of beautiful typography with great typographic techniques and tools. Here is the place you can find a fresh dose of further typography-related resources.

Altfontprev – Project Hosting on Google Code
A JavaScript bookmarklet that allows you to preview how any website would look if a particular font was not available or a different font chosen.

wp-Typography
A plugin for your WordPress engine that helps you improve your web typography including hyphenation, space control, intelligent character replacement as well as CSS hooks.

Type-Related Articles

Ode, a Fresh Start for a Broken Script
This article describes the origins and development of the typeface “Ode”. From the article: “When designing a typeface, I prefer to explore a construction principle rather than revive an existing typeface idea. These principles or writing models are based on the tools and techniques originally used. Understanding these workings are often a great source of inspiration for me.”

‘Dreams’, ‘Stars’ & ‘So Much To Do’
A look behind the design process of prints “Dreams”, “stars” and “So Much To Do”. From the article: “I’ll show all three prints in this article, but for practical purposes I’ll focus primarily on ‘Dreams’, one of my most ambitious prints to date. What follows is an outline of what I wanted to achieve, the lettering styles I developed, and why I produced it.”

The Origins of ABC
A world full of A, B and Cs, but how did they come to being? The Latin or Roman alphabet, the world’s most prolific, most widespread – where did it all start? This site lets you travel much farther back in time when even (agricultural) civilisation emerged itself.

History of Arabic Type Evolution from the 1930′s till present
The origin of the Arabic script goes back to the first alphabets which were created by the Phoenicians. The Phoenicians were living on the costal area of Lebanon, Palestine and Syria. Since the Phoenicians were business traders sailing the Mediterranean, the alphabet influenced all the Mediterranean nations.

The Art and Tradition of Typography
Here is a brief overview of some of the highlights of ‘typographic engineering’Â� from the past 500 years. Usually, it is the development of type and typography for Latin based scripts that are discussed; in this post however, you will learn that there is an equivalent rich history of other type scripts throughout the world as well.

Web Fonts at the Crossing
Latest browsers all known to us have rolled out roughly comparable implementations of @font-face font linking, making it possible for us to experiment with numerous and different fonts on our websites. Richard Fink describes the state of the art, explains various formats and the possibilities currently available for web designers.

What are the Origins of the World’s Most Important Typefaces
Here you can find a selection of stylistically related letters that make up a family of alphabetical letters used in typesetting as well the origins of the most famous typefaces used throughout the centuries.

Why Did I Start a Type Foundry?
Christian Schwartz tells us his story about how he started a type foundry. A pretty successful one.

A few things I’ve learned about typeface design
Gerry Leonidas talks about ‘design’ having memory and being iterative, scale concepts that are not intuitive, tools as concepts and the fact that the Latin script is the odd one out.

Free Fonts: Free Is Not Always Free
They are everywhere – pre-installed on every computer, bundled with software, and offered by the thousands on free font websites. Let’s take a look at the different types of “free” fonts out there.

With Beautiful Type Comes Great Responsibility
Many free fonts can be extremely beautiful. The trick is knowing how/when to use them, their history, your message and how it’s being stated with the type of personality you select.

The Changing Typography of the Web
An article on how the typography of the web has changed, is changing and getting even better!

What is Typography Today?
Kilian Muster talks about how most people think that typography is only about designing and selecting fonts. This is true as far as architecture is about designing or selecting furniture. In reality, neither is a purpose but a means to an end.

Thirteen Ways of Looking at a Typeface
Here Michael Bierut talks about the reasons why one should choose a particular typeface. Helvetica (naturally), Futura, Garamond No. 3, Century Expanded and Bodoni were the only five fonts he had mostly used between 1980 and 1990.

Technical Articles

Using HTML Symbol Entities
Some characters are reserved for HTML markup. In order to display these characters as text, you must enter the HTML entities in the source code. Pass by to learn more.

Adding Subpixel-Hinting to Your Photoshop Text Layers
The usual way to smooth text in Photoshop is to choose one of the different anti-aliasing techniques in the drop down menu. The downside as you know is, that the smoothing of the text is done by grayscale and not by blending different channels.

Using @Font-face for Icons
Conceptually, if we deconstruct a font down to its basic elements, we can make use of @font-face for things other than type, icons. Fonts at their most basic molecular level are a series of vector glyphs packaged up into a single “glyph archive�. We can then reference each glyph by its corresponding character code. With this in mind, the glyphs we reference can really be any vector-based single color image.

@font-face Gotchas
A few worthwhile notes on @font-face that are worth reading over if you geek out about this stuff. Collected by Paul Irish.

How to Use CSS @font-face
This article by Tim Brown prepares typefaces for use on the web, goes through @font-face CSS line-by-line, and get the experts’ take on browser support. Updated with Paul Irish’s new syntax.

Typography Magazines and Inspirational Resources

Type Theory
Type Theory is a journal of contemporary typography featuring news, views, reviews and interviews.

Typecasting
This article provides a good overview of how period type has been used in different ways. The typeface of a film title, for example, usually reflects the era in which the film takes place. Beyond titles, every movie depicts a wide range of props and set pieces, such as newspapers, brochures and sign boards. How can one distinguish between a well-made film and junk?

Pressing Letters
Pressing Letters is an effort to catalog and promote creativity in the letterpress community. The goal is to collect and display references and progressive letterpress design as it is published or found. The creators of the site encourage designers and individual to submit their images, references or ideas, too.

We love typography
Oldie but goodie: a growing showcase colleting type, typography, lettering and signage. Visitors of the site are encouraged to submit their images, too.

Web Font Awards
The Web Font Awards showcases beautiful examples of how Web fonts are being put to use in the design community. Very inspirational.

Letterpool London
Letterpool London is a mass public art project, a celebration of the city’s urban art and architecture, looked at through its typography — the brands, graffiti, instructions and ideology.

Letterpress Daily
David Wolske is collecting printing equipment and wood type and documents his continually expanding collection online.

U&lc back issues to be made available
Fonts.com regularly releases volumse of the classic journal “The International Journal of Typograpics” which was first published in 1974. Herb Lubalin was the editorial and art director of the first issue and his sem­inal design set the stage for future issues of trend set­ting and award winning editorial creations. Volume 1 is currently available for free download.

Type Union
Another place for anyone to share their type work.

A Typographic Anatomy Lesson
Typographers refer to elements of a letterform using a variety of terms that align naturally to architecture or the human body—eye, ear, foot, arm, lobe, leg—and this poster captures many of them. Simply beautiful.

Typo/graphic posters
Typo/graphic posters is a directory of typographic and graphic posters, a passionate project focused on the design community. The goal is to be a timeless source for studies, inspiration and promotion of good design through poster culture and cultivation of typography and pure forms of graphic design.

Trend roundup: Typographic home decor
The best thing about type in print is that it is incredibly versatile — be it small or large scale, blocks of text, single words or single letters, it all looks great in the right context. The same goes for type design in home decor, which explains why there are almost as many great font-related design objects as there are typefaces. This page is a round-up of some pieces of furniture and home accessories that incorporate type in some way.

Typography Served
Typography Served is a collection of sites that showcase category-specific content from the Behance Network.

Typographic Maps
These unique maps accurately depict the streets and highways, parks, neighborhoods, coastlines, and physical features of the city using nothing but type. Only by manually weaving together thousands upon thousands of carefully placed words does the full picture of the city emerge. Every single piece of type was manually placed, a process that took hundreds of hours to complete for each map.

Last Click

TypeWar
A fun site to learn more on web fonts. Note that you will get more points for correctly answering one that other people had trouble with than one that most people got right.

Type Memory
The fun but quite difficult game of Type Memory.

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Inspiration, references, techniques, typography

Feel free to make yourself a cup of tea or coffee right now because you’ll be investing an hour or so in today’s post. We’ve published our last icons round-up six months ago and since then we’ve collected over 50 new free high quality icon sets that you can use for your projects. While most of the listed freebies may be used for commercial projects as well, some of them may not. However, you could use all of them in your private projects. If the set is available for private use only, it’s clearly indicated in the brackets next to the title of the set.

Please always read the disclaimers carefully before using the icons — they do change from time to time. We truly respect and appreciate the efforts and the hard work of designers of the icons featured below. Thank you for your contributions to the community, guys! Also, if you are planning to release a high quality freebie, please let us know via Twitter or by contacting us using our contact form — we would love to feature you on Smashing Magazine!

Free High Quality Icon Sets

Free Cupcake Icon
Available in a variety of sizes (16×16px — 512×512px), this cupcake icon from ArtDesigner is a sweet addition to your icon sets. For both commercial and non-commercial use.

Moleskine Icon
Moleskine Icon is a beautifully crafted design by Michael Stezycki that comes in 7 different sizes ranging from 16×16 px all the way up to 512×512 px. The download also includes a wide variety of file formats: PSD, PNG, ICO, ICNS.

Paradise Cherry Icon (free for private use only)
This refreshing Paradise Cherry icon is available in sizes between 64×64 px and 512×512 px.

Pentax K-7 Icon
A high detail icon inspired by the Pentax K-7 camera. Ideal for identifying the folder where you store your digital photographs, especially if you’re a Pentax fan. Icon sizes: 512×512 256×256 128×128 48×48 32×32 16×16. Available for iContainer, Mac (.icns) and Windows (.png). Freeware: available for private and commercial projects.

Starflash Brownie
An icon based on Kodak’s instant camera Starflash Brownie. Available as 512×512px .png, .icns and .ico. Free for private and commercial projects.

Fjernsyn
For when you feel like updating the icon for your preferred video player or using a TV icon for a website, Fjernsyn, from young Danish designer Rasmus Nielsen, is a nice option. .iContainer, .icns.

USB Prober
A replacement icon for the USB Prober application for Mac. Easily usable in other contexts. 512×512px.

Leica M7
A set with 6 Leica icons in the resolutions 512×512px. Available as .PNG, .ICNS and .iContainter.

Apple Icons (free for personal use only)
Some of these icons are modeled after the Mac logo, but in a naturalistic style. The file contains 8 icons of different colored apples all in the rsrc format for use with Mac OS.

Iconlicious (free for personal use only)
A cute milk carton icon from Iconlicious that you can use to replace some of your less inspiring computer icons.

Latte: 48px Icon Set
An icon set for developers. This ‘Latte’ contains 25 different icons in the resolutions 48×48px.

Notes and Evernote (for private use only)
An icon pack of Notes & Evernote. Available resolutions: 512×512px.

IsoIcons Workspace
10 new isometric icons available in 128px×128px resolution. Might remind you of your workspace as well!

Mira Works
Some beautiful and calm office environment inspired icons from Mira Works. Available in three different sizes: 64×64px, 128×128px and 256×256px.

Mira Works
Another set of icons from Mira Works, this time bottle ships. Also available in three sizes from 64×64 px to 256×256 px.

iCandies Icon Set: 60 Free Icons
The set is designed by the talented folks from IconEden on a sole purpose of giving your projects a sleek and geeky style or provide crisp, attractive icons for your modern and fashionable-looking interfaces. All the icons in this pack — 60 icons in total — are designed in Round Rectangle shape.

Designer Icons – Professionally Hand-Crafted Free Icon Set
12 Professionally Hand-Crafted icons for designers and creatives. Each Icon is 32×32 px with a transparent background. Free for private and commercial projects.

Blue Vinyl Fonts
Colorful vinyl records and vintage style record cases. 16 icons in all, available for Mac and Windows.

This is ART 2
A collection of 12 icons all with maximal dimensions 512×512px. Creative renditions of various application related subjects as icons. Released under Creative Commons Attribution-NoDerivs 3.0 Unported.

The Graphs 2 – One graph collection to rule them all
The second release of “The Graphs”, made exclusively for Smashing Magazine. With 169 vector icons, “The Graphs 2″ is one of the largest and the most flexible graph icon sets. Free for private and commercial use, available as .AI and .SVG. Licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.

High-res Browser Logos
High-resolution browser logos for your presentation or a blog post; these icons are available in the resolutions up to 256×256px, .PNG, each with their own official shadow treatment, and no background matte color. Presented by Paul Irish.

Various Smartphones Icons
This icon pack contains 14 icons for assorted smartphones, ranging from the Blackberry Storm to Motorola Droid. Maximum size available is 256×256 px.

Free PNG Credit Card, Debit Card and Payment Icons Set (18 Icons)
These icons are inteded to be used on e-commerce websites where you can show what types of payment the shop accepts. This set is free to use in private and commercial projects — no credit is required.

Icon Pack: 256×256 Business Icons
This free icon pack contains 26 business themed icons. It is meant for your personal and commercial projects and can be used without attribution. However, it may not be redistributed. Each icon is available in 256×256 .png format. Included in this set are User icons, Warning & Alert icons, Chat & Email icons, Maps & World Icons, and several other icons that are appropriate in business settings.

Upojenie
This collection includes 40 icons for iPhone and iPod Touch.

One Two Eight
Five different desktop icons. Just click on your choice to download. More from the artist on Flickr found on top of the site.

Construction
This is a free icon set with a total of 25 icons that is aimed for use in your projects related to construction or infrastructure. All the icons in ‘Construction’ are available in 128, 64, 48 pixels and provided in various formats as vector EPS 10 and ICO, ICNS, PNG, TIF.

Iconfactory by David Lanham
This collection of icons includes 42 square icons of Flurry app additions and misc designs.

Iconfactory Freeware by Dave Brasgalla
This free collection contains 4 icons inspired by the original Star Trek TV show.

Plush Icons Set
This icon set was inspired by plush toys. This set includes 6 different cute plush icons in the resolutions 128×128px and 256×256px. Format: ICO and PNG.

E-Commerce Icon Set
10 high quality E-commerce icons in PNG format. This icon set includes Products on Sale, New Porducts, Checkout, Secure Payment, Credit Cards, Delivery, Shopping Bag, Empty Shopping Bag, Shopping Cart, Empty Shopping Cart. For free personal and commercial projects (Size: 128, 64, 48, 32px). Redistribution, release for download or selling of these icons on an another site without permission is not allowed.

MobileMe Icons by Prathyush
Six MobileMe icons with the resource PSD. Please ask artist concerning personal and commercial use.

Flip Clock by Maxdicapua
This is a fully editable and scalable (except for the noise layers) and well-organized flip clock icon.

Boolean
A set of mini icons for private and commercial use. Released under Creative Commons.

32px Mantra v2
36 free icons in PNG, available in the resolution 32×32px.

Solar System Icons
Thirteen solar system icons inspired by objects in the Milky Way. Contains the Sun, Moon, 8 planets, and 3 dwarf planets.

Littlear Icon Package
A humourous set of icons giving live to different kinds of application, folder and file icons.

Compass
A detailed iPhone icon for the Compass application. Available in resolutions fit for iPhone, iPad, iPhone 4 and iTunes, from 57×57 px to 512×512 px.

20 Free Marker-Style Icons
This icon set is originally inspired by the iPhone’s Notes.app and designed for Notepad (WordPress theme). Icons are designed in a simple marker stroke and can be applied on any color. You can use them in sketchy or modern design as seen on the iPhone and iPad apps.

Social Media Icons
An updated set of Vector Social Media Icons with the Google Buzz, Microsoft Bing, Picasa, Meetup, Feedburner, Ebay, Drupal, Gowalla, ICQ, Metacafe, Yelp, Xing, Paypal, Podcast, and various color buttons.

Project Icons
A pack of 182 32×32px icons the designer used in or created for his projects. Available in .PNG, .ICO, .ICNS, .iContainer. This pack also has 26 bonus 48×48px icons and 6 badges. The badges are available in .PNG only. The 48×48px icons are not included in the iContainer.

PixeloPhilia2
This icon set contains 44 icons for web sites and web apps. Released under Creative Commons.

iPad Icon
This is a very simple, yet good looking icon set of Apple’s iPad. Made from scratch using Adobe Photoshop.

Symbol Signs and Icons

Free Font Symbol Signs
This free collection includes common used symbol signs for public services such as Toilets, Telephone, First Aid, Smoking, Baby, Recycle Icon, Arrows collection and much, much more. The signs can be used for restaurant signage, hotel signage, office way-finding, airport signage and more.

Free Font Dingbests
The original dingbat font was designed in the sixties. This is a collection of dingbat fonts for the nineties, commissioned by FontShop. Over 700 pictograms including fax, laser printer, diskette, computer and mouse, as well as all the classic images. A special selection of them has been put together in the single font FF Dingbests.

48 Free 16×16 pictograms by Miro Keller
A set of 48 tiny 16×16px pictograms to use in your projects. They are shared under a Creative Commons Attribution 3.0 Unported Licence, but you don’t have to link back in your web sites if you don’t want to.

Weather Icons by Gavion Elliott
This is a set of 16px weather icons in PNG, JPG and PSD format.

120 Free New Icons
A set of 120 simple icons, in 68×68px and 48×48px resolutions. In the .zip file you’ll find the .AI and .EPS files, so you can either grab and freely use various elements or crop them for your resolution.

gCons: Free All-Purpose Icons for Designers and Developers (100 icons PSD)
The icons come in 12 different colors and are available in PSD, PNG, JPG and GIF formats. This set was designed by Sarfraz Shoukat especially for Smashing Magazine and its readers.

Free Country Flag Icons (free for private use only)
37 country flag icons rendered at 256×256, 128×128, 64×64, 48×48, 32×32, 16×16 pixels. Formats available are png, ico and icns. All the icons contained in this set are free for non-commercial use.

Flag Favicons
These world flag favicons were created from the standard 16 color palette in IconEdit32. The favicons are original work and free to download, use and modify in any way you like. Available in .ico format.

Artistic Icons

Icons at Artcore Skizzenblog (free for private use only)
A set of unique, creative icons available for non-commercial use. Released under Creative Commons license.

Somatic Rebirth Extras 2 by David Lanham
This collection contains 16 illustrated icons with large resources for Win and Mac.

Desktop Icons by Greg Barnes
This desktop icon set includes Evil Dead 2, Vintage Kitchen icon set, Terrariums icon set as well as Vampire Hunter Kit. Coming up soon: Christmas Ornaments and Army of Darkness icon set. Available for Mac, PC and iContainer.

PaperPlanet Icon Pack
The pack consists of the icons for various applications, music and video players, standard Mac icons as well as a couple extras.

Stickfiguredancer (for personal use only)
Four custom icons based on the super hero team ‘the Avengers’, available for Mac OS X and Windows. This set includes Captain America, the Incredible Hulk, Nick Fury and Hawkeye.

Further Resources

Still haven’t found that icon? In case you’re still looking for that particular one, you may want to look at the following useful resources:

• Design Kindle
• We Love Icons
• IconFinder
• IconToucan
• DesignMoo
• Free Icons Download
• 365psd
• Icon Finder

(ik)(vf)(ke)

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: icon set, Icons

Web designers know that their industry tends to change very quickly. Continuous adaptation and development of skills are necessary in order to always stay up to date. Over the past few years, mobile web usage has increased to a point where web designers can no longer afford to ignore it. As a result, web designers have a growing need to be educated in this area and to be ready to design websites that accommodate their audience. Consequently, our brand new Smashing eBook is dedicated to “Mobile Design for iPhone and iPad”.

This e-book presents articles on professional mobile design for the iPhone as well as the iPad, including studies of trends in mobile design and guidelines for the development of mobile web pages. These articles are mostly a selection of the best from Smashing Magazine in 2009 and 2010, dealing with mobile design for the iPhone and iPad, plus an exclusive 90-page study about mobile web design trends. They have been carefully edited and are available as a PDF, ePub and Mobipocket.

• download a free PDF sample (6 Mb)
• download a free ePUB sample (.zip, 2.2 Mb)
• download a free Mobipocket sample (2.6 Mb)
• read one of the articles of the eBook, How To Build A Mobile Website for free (HTML)
• buy the eBook (PDF, ePUB, Mobipocket) for only $9.90

Table of Contents

More than 300 pages, the eBook consists of articles about:

• Mobile Web Design Trends
• Mobile Web Design: Tips and Best Practices
• How to Build a Mobile Website
• Web Development for the iPhone and iPad: Getting Started
• How to Create Your First iPhone Application
• iPhone Apps Design Trends
• iPhone Apps Designs Reviewed
• iPhone Apps Design Mistakes: Over-Blown Visuals
• iPhone Apps Design Mistakes: Disregard of Context
• Useful Design Tips for Your iPad App
• Make it a Mobile Web App
• How to Use CSS3 Media Queries to Create a Mobile Website
• Forms on Mobile Devices
• Setting up Photoshop for Web and iPhone Development
• How to Market Your Mobile Application
• A Study of Trends in Mobile Design

The authors are: Alexander Dawson, Alexander Komarov, Cameron Chapman, Jen Gordon, Jon Raasch, Kim Pimmel, Luke Wroblewski, Marc Edwards, Michael Flarupp, Nick Francis, Rachel Andrew and Steven Snell.

Advantages With Smashing eBooks

Now, why should readers buy a Smashing eBook? Good question. Although so much content is available online for free, an eBook feels a bit more permanent, secure and reliable and is often much better optimized for reading than webpages are. In fact, eBooks present many more benefits and advantages compared to the web, including:

• Portability
  You can carry all your books with you, in notebooks, smartphones or e-book readers, without worrying about their weight. Also, being compact, they are much more convenient for reading offline or on mobile smart phones. All Smashing eBooks are available as a PDF, ePub and Mobipocket.
• Search Functionality
  With built-in search functionality you can easily search for keywords or even text passages in your books.
• Bookmarks, Highlights and Notes
  Advanced e-book readers will automatically remember where you stopped reading each time you close your digital book. They also allow you to bookmark specific pages, highlight your favorite text passages and make notes.
• Built-in Dictionaries
  Advanced e-book readers provide built-in dictionaries. For example, if you read an English book but you are not a native-speaker, built-in dictionaries can help you to understand the content in your e-book quicker.
• Text to Speech
  Latest e-book readers provide built-in text-to-speech functionality that can be useful, especially for mobile devices with small screens. Also, you can allow your eyes to rest after a long day in front of your computer.
• No Advertising
  Compared to articles published on Smashing Magazine, our Smashing eBooks do not contain any advertising.
• No DRM Protection
  The Smashing eBooks are not protected by DRM. That makes it easy for you to read the e-books on any e-book reader. Please respect our work and the hard efforts of our writers. If you received a Smashing eBook from a source other than the Smashing Shop, please support us by purchasing your copy in our online shop. Thank you.

Smashing eBook Series

You can read all Smashing eBooks in PDF format, ePub or Mobipocket:

• Smashing eBook #1: Professional Web Design
• Smashing eBook #2: Successful Freelancing for Web Designers
• Smashing eBook #3: Mastering Photoshop for Web Design
• Smashing eBook #4: Mobile Design for iPhone and iPad

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

There are tools that make our lives much easier. However, finding those obscure time-savers which would save time in every single project isn’t easy and requires a lot of time. At Smashing Magazine, we are regularly looking for such useful tools, gather them, review them and eventually prepare for a truly smashing round-up. Such posts are quite lengthy and extensive, but they are always worth checking out.

In this post, you’ll find an overview of useful and handy tools that can help you increase your productivity and improve your workflow. Some tools are more general, the others are more technical, yet we hope that this round-up has something to offer to every one of our readers. Please feel free to leave your comments and share with us which one of the tools you’ve found most useful and interesting.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Useful Time-Savers For Web Designers

House of Buttons
A growing collection of various buttons spotted in the wild by Jason Long. Very nice and useful collection, and submissions are welcome.

Historious
Historious makes bookmarking work the way you want it. Bookmark sites with a single click, then come back to Historious and find sites by entering a few keywords!

Browser UI
The Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. The Browser UI is easily installed and helps you get around with your Photoshop documents. A quick screencast is available on the site for a quick understanding of how Browser UI works.

A/B Split Testing Calculator
A/B Test Calculator shows you a comparison of several versions of a particular web page. In order to discover which one is most effective for your audience, you have to enter ‘statistically significant’ numbers.

What deux yeux have teux deux teuxday?
TeuxDeux is a simple, design to-do app that can be used for your iPhone. If you like making to-do lists, you will love TeuxDeux. This free browser-based app can be used everywhere; this way you have your to-dos ready to hand all the time. Check out the various TeuxDeux features included in this iPhone App shown in the left column.

Fillerati – Faux Latin is a Dead Language
‘Fillerati’ instead of ‘Lorem ipsum’… something different for a change. Modern browsers such as Chrome, Firefox, Safari or Opera are recommended.

Inline Code Finder
Inline Code Finder is a tool to traverse through all elements in a web page, and when it finds a HTML element with any of these, it will highlight them. It finds inline JavaScript events, inline CSS coding and javascript:-links.

Share your ideas – Mark (them) Up!
MarkUp works in any browser without the need of being downloaded nor installed. Simply add the MarkUp icon to your bookmarks bar and share your ideas and thoughts swiftly!

Placehold.it
Format, Text, Color and Size – Quick and simple image placeholders. You may want to check Dynamic Dummy Image Generator, too.

ResizeMyBrowser
This site helps you adjust your browser automatically, starting with a simple iPhone-sized browser (320×480) to a MacBook Pro (1440×900).
Note: This web application requires JavaScript. Please check your browser’s settings and make sure JavaScript is enabled.

XRefresh for web developers
A browser plug-in which refreshes the current web page due to file change in selected folders and communicates with browser extension using TCP/IP. This makes it possible to do live page editing with your favorite HTML/CSS editor, especially when working with two monitors at the same time.

Kodingen
The so-called ‘Cloud Development Environment’ which lets you connect to your own FTPs. Web-based access to file-system & svn integration. Also includes an Online Code Editor and Cloud Hosting.

LiberKey
LiberKey is a large collection of portable applications that can be run without installation on your local PC nor from any portable media. You may want to check Portable Apps as well.

Notes for Later
This bookmarklet is a web service for remembering websites. It creates a unique bookmarklet for your personal browser in which you can simply receive the content you need via email. If you select nothing, you still get the current page’s URL and a time stamp. Registration is quick and painless. No login is required – just an email address.

Timy
An easy-to-use desktop application to fill out your Basecamp timesheet and save a lot of time completeing your own personal timesheet.

Slammer – Designer’s Geometry Box
Overlays any grid you want, anywhere you want. A variety of themes and overlays are presented: Typographic Grids, Golden Sections, Fibonacci series, Rule of Thirds and more! Slammer also includes Rulers, Crosshair, Magnifier, Measurements and Screenshots; watching the movie on the Slammer main page will help you learn more. However, Snow Leopard is required.

URList
By dragging the bookmarklet to your browser’s bookmark bar, you will instantly save time in browsing the web and have a preview of the collected links that have been grouped previously. By clicking on the bookmarklet, you can always add a link. URlist not only enables you to create and save link lists easily, but also lets you access those links from anywhere. And creating lists is dead easy. Try it!

Licorizer
A new bookmarking service which allows you to mark relevant content without losing focus. Using a bookmarklet such as this one, enables you to add web pages and clippings to Licorize without leaving nor interrupting the web page you are currently focusing on.

Readability – An Arc90 Lab Experiment
Readabilityâ„¢ is developed to make reading on the Web more enjoyable and remove any clutter around what you’re reading at the moment. A preview of a given text is available to give you an idea of how the style, size and margin can be adjusted. Installing Readabilityâ„¢ into your Web browser is quite easy…and makes it easier on your eyes!

Joli: Print to PDF in Google Reader
Joliprint bookmark provides you an easy and quick way to print a Google Reader post as a PDF. First, you have to create a bookmarklet onto your browser’s bookmark bar, then select a post in Google reader and finally, click on the Joliprint bookmarklet to convert the activated post into a PDF document. Ta-dah! You can check Clipr Bookmarklet as well.

Spoon
Spoon lets you run desktop applications with no installs, conflicts or dependencies such as .NET, Java nor AIR. By virtualizing your existing apps, you can turn them in standalone EXEs, MSIs or flash drives. This tool is also very useful for cross-browser testing right within your browser and is provided in two versions: Spoon for Business or for Developers.

Web Development Project Estimator
A simple tool for web designers and site developers to quickly and thoroughly estimate the time and materials required for a proposed web project. A personal task list can be created, leaving you to decide which ones to include or even exclude. Most importantly, hours and rates of the particular project allow you to calculate the estimated final fee.

Golden Ratio Calculator
This online tool helps you calculate the width of your containers to achieve the golden ratio. You can have a column with a certain width (perhaps to achieve a nice word:line ratio) and you wish to find a matching column. Type in the width and use the left side, which gives you both a smaller and larger column. Or if you have a container and wish to divide it in two, type in the container width and use the right side measurements.

My DebugBar
Companion.JS is a Javascript debugger for IE. The current version is 0.5.5 and contains features such as JavaScript error reporting as well as a console feature which helps inspect JavaScript objects at runtime. Please note that CJS requires a Microsoft script debugger.

Entitifier
Cleaning up text for the Web can be very time-consuming and prone to error. In case your client ever ends up delivering content in Microsoft Word or a similar format, cleaning it up is definitely a necessary task to do — if you don’t want to end up with characters that don’t display properly online. By entering a HTML or simple text into the given text box and clicking on the ‘entitify’ button, you instantly have discovered a new tool which helps you escape any nasty characters that should be entities!

Every Time Zone
This tool shows an interactive chart of time in various cities across the globe. It also includes a slider to see the time in a particular city at any time of the day.

Instapaper
This is a simple tool that helps you save web pages for reading later, when you have time — for instance on mobile devices, iPad or Kindle.

Redmark: the easiest way to mark up a design and track revisions
Communication is very important and helps designers and their clients come to clear terms with each other. This site offers visual communication in just three simple steps between designers and clients. It is also possible for a client to find a particular designer they need to match their business. A Demo Project is portrayed for a quick view about how the site actually works.

Awesome Fontstacks
Fonts have always carried an important meaning to web typography. As we all know, a lot of work is required to match and adjust a satisfactory web font for a website. This site helps you create a font stack bundle and also gives you a preview into CSS coding inclusive.

Framebox: a wireframing tool
With Framebox, you can sketch your wirframes or just visualize your ideas using UI units such as boxes, headers, buttons, inputs, links, text, text links etc. You can then save it and get a link to created frame, and then send a link to your colleagues.

Droplr
Drag, drop, share! Droplr is the best way to share files from your Mac OS X on the internet, aiming for simplicity, ease of use and flexibility. This application is also completely free to use with ad supported content. Once the selected file is uploaded, Droplr returns a URL in which a user can share with anyone.

Mockingbird: Website wireframes
Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.

CodeBurner: Reference Tool for Web Developers
CodeBurner is a suite of tools for web developers that provides reference material for HTML and CSS, integrated with a range of popular development environments.

HTML Soft Hyphenation Generator
Configurable generator for automatic soft hyphenation in static HTML text without a script.

SelfControl
Is email a distraction? SelfControl is an OS X application which blocks access to incoming and/or outgoing mail servers and websites for a predetermined period of time. For example, you could block access to your e-mail, Facebook, and Twitter for 90 minutes, but still have access to the rest of the Web. Once started, it can not be undone by the application, by deleting the application, or by restarting the computer — you must wait for the timer to run out.

MinutesPlease.com – Manage your web time
This is an extraordinary website that you can have to help you control the time you spend on a particular site. Just type in the URL and the time you are willing to spend on this site – you will notice how fast time flies by!

Clue
A fun and easy way to create memory tests and see how much and what exactly people remember on your website.

Neuskool.com
Neuskool is a personal start page for all your browsing needs with a collection of useful search services, all on one page.

Check My Colours: analyze the color contrast of your web pages
This tool checks foreground and background color combinations of all DOM elements and determine if they provide sufficient contrast when viewed by someone having color deficits. All the tests are based on the algorithms suggested by the W3C.

COPASO: Color Palette tool
COPASO is an advanced color palette tool that helps you create the perfect color palette.

Useful Firefox Extensions

Pixel Perfect Firefox Extension
This extension allows you to overlay a web composition on top of the developed HTML. Letting the developer visually see how many pixels they are off in development.

SenSEO Firefox Extension – Official Website
SenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine Optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension.

Firefinder
Firefinder is an extension to Firebug (in Firefox) and offers the functionality to, in a quick way, find HTML elements matching chosen CSS selector(s) or XPath expression. It allows you to instantly test your CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.

Firediff
Firediff is a Firebug extension that tracks changes to a page’s DOM and CSS and implements a change monitor that records all of the changes made by Firebug and the application itself to CSS and the DOM.

Useful References

SEO Checklist
When it comes to SEO, there are certain elements that need to be in place for any newly-designed or updated website. Have 301 redirects been put into place? Is the robots.txt file authored to allow adequate crawling? This infographic depicts a handy checklist that will help get you through any new site launch or transition.

Typographic Sins
Typographic Sins (also available as PDF) by James Godfrey and Patrick Wilkey covers 35 mistakes commonly made by novice designers. The website puts them in a neat orderly list, but the PDF showcases them visually. It’s a great reference guide and learning tool if you want to learn better typography design.

Entity Code: a Clear and Quick Reference to HTML Entities Codes
A website that eliminates the frustration and the wasted time caused by constant need to add those hard to remember HTML entity codes, such as the copyright symbol © or em-dash —, every time you’re developing a new website or writing a new article.

Thirty Conversations on Design
The site creators asked 30 of the world’s most creative professionals two questions: “What single example of design inspires you most?� and “What problem should design solve next?� Their answers might surprise you. And, hopefully they’ll inspire you.

Essential Interaction Design Essays and Articles
A list of essays and articles that could be important touchstones and reference points for interaction designers.

Further Useful Tools

Min.us
You can drag your data which you wish to share online onto the min.us page. Very convenient.

Mr. Data Converter
Mr. Data Converter will convert your Excel data into one of several web-friendly formats, including HTML, JSON and XML.

PDF Split and Merge
PDFsam is a free open source tool (GPL License) designed to split and merge PDF documents. Whether it be only extracting sections into a single document or changing the order of the pages. The basic version can be downloaded and simply used on every platform with a Java support.

Last Click

Unsuck It
What terrible business jargon do you need unsucked? Unsuck It translates management speak to normal language, making your day to day on- and offline slogs through corporate jargon a little easier to bear. You can even tweet your results as they often turn out to be quite funny.

Temperature Conversion, Weight Conversion and Length Conversion
This simple online tool doesn’t do much, but it’s truly beautiful and it’s a pleasure to use. The tools lets you convert length values, temperature values and weight values.

Coffee Drinks Illustrated
With the vast number of ordering options and new words with accented characters to pronounce the coffee shop ordering experience can be intimidating. Lokesh Dhakar created a few small illustrations to help himself and others wrap their head around some of the small differences.

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: PDF, time-savers, tools, useful

Lately, Apple Keynote has been gaining popularity among designers as a wireframing and prototyping tool. Features like multiple slide masters, styles, grouping, animation and hyperlinks make it ideal for crafting interactive prototypes and UI narratives. Today’s freebie, Keynotopia, is a free set of interface elements for Keynote that makes it possible for anyone to create these prototypes in minutes. All elements are hand-crafted in Apple Keynote, and organized in nested groups for easier manipulation and customization. The templates can be used in Keynote 09 and 08 and are designed by Amir Khella.

Start with a blank presentation, and create a new slide for each application screen. Then copy/paste elements from the wireframe templates into your slides, and edit their labels, sizes and colors. To save time, group elements together, and use master slides to share common interface and navigation components across multiple screens. Finally, add hyperlinks to enable user interaction, and use slide transitions to create cool interface animations.

Voila! You now have an interactive prototype that you can test with users, share with team members, and present to stakeholders.

Download the set for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.

• download the set (.zip, 6 Mb)
• step-by-step tutorial and guide
• release on developer’s page

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Screenshots

Containers and Dialogs. Large view.

Controls. Large view.

Navigation. Large view.

Galleries. Large view.

Social Web. Large view.

Browser window. Large view.

Application window. Large view.

Lightbox. Large view.

Badges and icons. Large view.

Motivation behind the design

Here are some insights from the designer of the set:

“The first time I’ve used Apple Keynote for prototyping, I was helping a friend create a product pitch for his startup idea. He didn’t have design or development skills, and I wanted to show him how he can quickly put together a click-thru demo in less than an hour, using his favorite presentation tool. He was impressed by the outcome, and I was equally impressed by Keynote’s simplicity and efficiency. I never went back to my prototyping tool since.

Keynotopia was created so that anyone with an idea can quickly test its potential, without having to spend time and money on design and development resources. It’s a simple proof that having the right mindset for prototyping is more important than buying expensive tools.

I also wanted to find a way to avoid writing UI specs. Using Keynotopia templates, I created prototypes that I annotated and shared with development teams, and the response was phenomenal! Time was no longer spent reading, staring at screenshots and imagining interactions; developers and testers were actually having fun playing with the prototypes and providing feedback. Design was finally catching up with the lean and agile development process.

I am constantly updating the website with guides, tips, and new prototyping templates.

— Amir

Thank you very much, Amir! We appreciate your efforts.

Related Posts

You may be interested in the following related releases:

• The Ultimate Free Web Designer’s Icon Set (750 icons, incl. PSD sources)
• Free Medical Icons Set (60 Icons)
• Yummy! Free Food and Cakes Icon Set (20 Icons)
• Quartz Icon Set (90 clean sharp icons)
• gCons: Free All-Purpose Icons for Designers and Developers (100 icons + PSD)

© Smashing Editorial for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: downloads, Freebies, templates, wireframing