10 Free High Quality Fonts and Icons

I came across a selection of icons and fonts that are not extremely popular yet. These icons and fonts are of super-b quality. Picto Foundry for example is optimized for the retina display on iPhone 4 and for use on the iPad. There is also a commercial selection available.

Discons and Minicons are excellent minimalist icons, a total of 953 icons together.

With the Holidays coming up the Matilde font is ideal to create some greetings cards, and if you rather have a more sturdy design the other fonts are perfect for it!

Make sure to bookmark of download these fonts and icons, because they are to good to pass up.


500 Free Icons: WPZOOM Social Networking Icon Set

Free icons

WPZOOM Developer Icon Set (154 free icons)

Free icons

Picto Foundry Free

Free icons


Free icons

This icons package currently costs $3, which is nothing compared to the prices of other commercial icons.


Free icons


Matilde Free Font

Free fonts

HERO Free Font

Free fonts

Code Free Font

Free fonts

Aller Font

Free fonts


Free fonts


Design Focus

Friday Focus 11/26/10: My Illustrated Self

This week on Friday Focus: designs that reveal the face behind the portfolio, in an illustrated way.

Designs of the Week

Joseph Cohen

I like the treatment on the icons and bullets, but the left alignment not so much.

Guilherme Bento

Wonderfully bold, not just with the colors but with the content layout.

Kevin John Gomez

A better left-alignment implementation. Nice subtle textures and bright accent icons.

Marc Thomas

Favorite part’s the footer. Not sure what that repeating icon is but it looks nicely retro-modern.

Daniel Büttner

There’s a nice little animation with the traffic light but too bad it’s not CSS3. The hover effects make up for it though.

Visua Design

Illustrated figures usually influence how the rest of the design looks, but here it clearly doesn’t. I like the clean, professional look and the icons are impeccable, but I feel like there should be more people in it!

Colin Grist

The spinning bowtie is cheeky but not the only clever thing on this page: check out the fly-out colophon that switches the logo coloring.


Love the consistent use of the scale guide graphics you find in Adobe’s suite, especially in the contact form. Everything’s just well-organized.


I like the contrast of the hand-drawn effect with the thick lines and grid background.

Harry Ford

Totally makes sense to put all the social icons around the head like that! Maybe the names should be in scribble form too.

Social Media Weekly

“One of the most difficult things I’ve had to deal with since I started working in this industry is my age. I experience age discrimination much more than I experience any form of sex discrimination.”

WebLong Live the Web: A Call for Continued Open Standards and Neutrality

UsabilityMega-Menus Gone Wrong


Design Focus

Friday Focus 11/19/10: Shelf Love

Last week I mentioned a site that uses a shelf as a nice metaphor for holding content, so let’s look at several more in this week’s Friday Focus.

Designs of the Week


Big, bright, and shiny. This is a flawless design basically. My favorite part is the Twitter icon also getting the same tag treatment.

Sweet Design

Love the contrast between the old style glass jars and the new media stickers and trinkets inside them. I think the only missing part here is better typography.


The book titles and shelf height could be bigger. I like the addition of the electrical outlet to the side even if it doesn’t really add much to the design. The browsing and sorting animations look great.

All My Mac Apps

I would really love it if sites using the shelf metaphor take it all the way and support drag-and-drop, and other AJAX interactions.


The colors and details here are great, but I have to wonder if a kids-oriented site should use a lighter color palette. What’s stopping shelf designs from being pastel-colored instead of literally brown because of the wood? Is it the lighting?


It’s nice to see shelves on a more popular site such as Shelfari (the name begs that I guess). It’s probably the most well-done too: no skimping on features and the look blends well with the rest of the interface elements (tabs, buttons).

Social Media Weekly

HTMLExploring Markup for Breadcrumbs
“So where are we at on this? I’d say that there is no super-ultimate best-possible-way to handle breadcrumb markup yet.”

DesignThe Three Threats to Creativity
“Creativity depends on the right people working in the right environment. Too often these days, the people come ill-equipped, and their work environments stink.”

AccessibilityAccessibility myths in 2010
” Early this year, Ian Pouncey posted a few other Web accessibility myths. Here is a quick roundup of the myths from these two articles.”

HTML5HTML5 Outliner



15 Fantastic Photoshop Tutorials

One of the best ways to learn how to use Photoshop and to keep up to date with new techniques, is to work on tutorials. It is amazing how far Photoshop tutorials has come along the last nine years. With a lot of practice most people can create wonderful things with Photoshop from a small simple text effect to a full blown artistic piece.

If you like designing websites in Photoshop, tutorials can help you discover and learn new things that you can apply to your design. It doesn’t have to be a tutorial specific to webdesign, as long as it’s a well documented tutorial, chances are great you’ll discover a new technique.

Take a look at the 15 tutorials listed below, ranging from practical things to a couple you do just for fun.

Making a Print-Ready Business Card Using Only Photoshop

Photoshop Tutorial

Create a Realistic Emboss/Deboss Effect in Photoshop (Tutorial)



Photo Strip (Photoshop Tutorial)

Photoshop Tutorial

Modern 3D Text Effect

Photoshop Tutorial

How to Create a Realistic IES Lighting Effect in Photoshop

Photoshop Tutorial

Abstract Dust And Spray Effect

Photoshop Tutorial

Recreating Magnifying Glass in Photoshop

Photoshop Tutorial

Create a Realistic Pencil Illustration in Adobe Photoshop

Photoshop Tutorial

Design a Multimedia Website Layout in Photoshop

Photoshop Tutorial

Angelina Jolie as a Na’vi from Avatar Movie

Photoshop Tutorial

Create a Dark and Rainy Crime Scene in Photoshop

Photoshop Tutorial

Create an iPhone 4 in Photoshop

Photoshop Tutorial

Hexagon Bokeh Effect in Photoshop

Photoshop Tutorial

How to Create a Retro Sci-Fi Computer Game Poster

Photoshop Tutorial

Design a vintage film poster

Photoshop Tutorial

Create a Trendy Typographic Poster Design

Photoshop Tutorial


Design Focus

Friday Focus 11/12/10: Aquamarine

This week on Friday Focus: cool down with these lovely aquamarine designs.

Designs of the Week

Iron to Iron

You know how a website doesn’t feel like a website because the text and images feel so well-blended? It feels like that here, although one might question if that “blended” feeling is actually lack of contrast; you decide. Still, you must check out the hover effects.

design & conception

Another quiet, refined feel here, although I think using white text on that shade of blue in the footer is not too kind on the eyes.

Women's Foundation of Oklahoma

The split slideshow is an interesting take on homepage slideshow pattern.

89Bytes Web Studio

I’m liking the diversity of colors on this website.


I think that on one page sites where you make people scroll from one section to another, you need to give each section proper headings, like the testimonials on this page.

Foothold Design Studio

The illustration and and pop of blue keep this dark design cheerful. The typeface also helps but it’s a bit small.

Shelly Cooper Design

The ribbons that appear on hover on the thumbnails look lovely, and so does the pointing hand in the logo area.

Color Me Creative

I love the combination of the background, the bar behind the logo attached stretching all the way to the left, and the whitespace in the header.


Extremely simple looking site, but the content does the talking.

Ben Sekulowicz-Barclay

Great infographic and pictographic approach on this site, but I wish more data were clickable!

I Want an App

The buttons and animations literally give this site an “oomph” but the tiny black body text is just a no-no!

Thomas Fals

The shelf metaphor is everywhere these days, but this is the first time I’ve seen used in a portfolio.

Social Media Weekly

Design8 Ways to Stay Creative

UsabilityThe myth of the perfect website: Are you awesome?



The Best WordPress Slideshow and Gallery Plug-ins

Even though WordPress has its own build in gallery function it isn’t very fancy. Unless you have good coding skills to modify the gallery your best option is a gallery or slideshow plug-in. The nicest plug-ins are build with jQuery making them very slick and dynamic.

A couple of the galleries even support more formats than just photos, like flash files, video’s and audio. I listed ten of the best galleries in my opinion. Most of the plug-ins are full of features and some with basic features that still provide more then WordPress own build in gallery.


WordPress Gallery Slideshow

Lightview was built to change the way you overlay content on a website.

  • Clean: Designed to compliment your content.
  • Fast: Smart image preloading.
  • Easy: Customizable without having to know CSS.
  • Rounded: Adjustable rounded corners, no PNG images required.
  • Smart: Content resizes to always fit on your screen.
  • Slideshow: One button slideshow.
  • Works on all modern browsers.


WordPress Gallery Slideshow

Shadowbox is an online media viewing application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating users away from the linking page.


WordPress Gallery Slideshow

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

Featured Content Gallery

WordPress Gallery Slideshow

Featured Content Gallery is a WordPress plugin by iePlexus that creates an automated rotating image gallery of your posts or pages for use anywhere within your theme.

Sponsors Slideshow Widget

WordPress Gallery Slideshow

This plug-in is designed to be used as sponsors slide show widget. It can display a certain link category as slide show in the sidebar.

Flickr + Highslide

WordPress Gallery Slideshow


  • 13 unique ways of displaying your photos
  • 8 different gallery styles
  • Displays photos from a photo-set
  • Displays all of a user’s photos
  • Displays photos in latest or random order
  • Ability to change the size of images and thumbnails
  • Ability to separate photos into pages
  • Displays photo titles

Flash Photo Gallery

WordPress Gallery Slideshow

A WordPress plug-in which creates a Flash Photo Gallery like one provided in Adobe Photoshop CS2 Flash Web Photo Gallery templates.


WordPress Gallery Slideshow

Fotobook is a WordPress plugin that will link to your Facebook account and import all of your photo albums into a page on your WordPress installation. It makes use of Facebook’s API so importing your photos is a breeze.

Photo Galleria

WordPress Gallery Slideshow

Photo Galleria is a simple, yet elegant, plug-in for photographers and designers who want to beautify and simplify their WordPress photo galleries. The Photo Galleria plug-in filters the default WordPress gallery shortcode and replaces it with an elegant jQuery-powered gallery.

Dynamic Content Gallery

WordPress Gallery Slideshow

This plug-in creates a dynamic gallery of images for latest and/or featured content using either the JonDesign SmoothGallery script for mootools, or a custom jQuery script.


Design Focus

Friday Focus 11/05/10: The Great Outdoors

Imagery that will kindle your spirit of adventure is this week’s Friday Focus. After this, go outside and play!

Designs of the Week

Raids Afrique en 2cv

The text section feels a little underdesigned against all the images, but the impression they make is great.

Help Scout

Nifty metaphor to use the water bottle as a completion status indicator.

Dawn Designs

It’s a really simple idea to integrate your logo into the design this way, but it makes quite the impact.

FreeAgent Depot

I like the vertical approach to this design and all the slanted edges.


Whimsical and light at the top, then futuristic and dark in the bottom? There’s a disconnect that isn’t too appealing.

Paul Lee Design

I love how the illustration flies out of the content area, but I wish the navigation items had more contrast to them.


Not really the “fun” type of outdoors but look at all the nice little icons and patterns used here. The menu looks great!

Old Pulteney Row to the Pole

Love the vertical parallax, and using paddles as borders is neat.

El Dorado World's Fair

Just one of three exhibitions in typographic prowess; be sure to inspect every element.

Social Media Weekly

DesignImproving the Web for Digital Publishing by Adobe
“Check out a few of the prototypes we’ve been working on to improve webkit for Digital Publishing.”

“I couldn’t find a simple css stylesheet that adhered to best typographic practices that anyone could just grab and run with. Type-a-file was inspired by—and is to be used in addition to—the famous meyerweb reset css file.”

CSS!important CSS Declarations: How and When to Use Them
“Let’s take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them.”

CSSBreadcrumb Navigation with CSS Triangles
“Did you know you can make triangles with pure CSS? It’s pretty easy. They are fun for all kinds of things, like little arrow sticking out from speech bubbles, navigation pointers, and more. One neat use that came to mind in this vein: breadcrumb navigation.”

CSSThings Worth Noting About CSS Attribute Selectors
“This article will go a little further and focus on some interesting facts and bugs surrounding attribute selectors that you may not have known.”

CSSCSS3 :target based interfaces
“The new properties in CSS3 give us more scope for creating more powerful design features with very little effort, many of which were previously only available through JavaScript or Flash. This example uses the :target selector, a healthy dose of CSS3 transitions and the general sibling combinator to create a modern user interface.”

JavaScriptClose Pixelate
“Inspired by American portrait painter Chuck Close, this script converts an image into a pixelated version using an HTML5 canvas element. It’s basically a simple demo for canvas’ imageData functionality.”


Code, Design

Must Have Books About Web Design And WordPress

Last week I posted about 7 handy cheat sheets to help you code your own WordPress theme. This week I’m focusing on books that go into all details.

The web is full of ready made tutorials, even though they explain how something is done you can just copy paste it to use it on your website. A lot of people get stuck trying to modify something because they don’t know how things really work. Honestly if you want to have a clear and easy tutorial it’s difficult to go write about everything from basics to advanced.

More →