So You Need A Typeface

Mixing Typefaces

Web Safe Font Cheat Sheet

Common fonts to all versions of Windows & Mac equivalents

CSS Typography Reference Sheet

CSS Font Shorthand Property Cheat Sheet

Photo Zoom Out Effect

Here you’ll learn how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries.

jCrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

Zoomer Gallery

Zoomer Gallery allows you to easily transform your image lists into beautiful galleries with Flash-like zoom effects in them. It’s a simple but elegant way of giving your interfaces a nice little shine and at only 2KB in size, it’s both compact and surprisingly easy to use.

jQuery Captify Plugin

Captify is a plugin for jQuery written by Brian Reavis (@brianreavis) to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer.

Animate Panning Slideshow with jQuery

In this tutorial you’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides.

Sponsor Flip Wall With jQuery & CSS

In this tutorial you’ll learn to create an interactive sponsor wall that fits a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover.

ZURB JavaScript Annotation Plugin

A plugin to easily add and save annotations on an image.

Zoomooz

Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.

iViewer

iViewer is a plugin used to load and view image in container with ability to zoom image and to drag it with mouse in container.

1. Store

The Store template is a great ecommerce WordPress theme, with a really good-looking and functional interface; it’s easy-to install and maintain with accessible backend administration. The theme’s creators are available for pre-sales questions and customer support.

2. Ecommerce Theme

This is a very popular theme enabling users to set up and manage effective ecommerce stores. The theme is search engine optimised and customisable so can be adapted to suit any home-based business niche.

3. AppCloud

AppCloud is a beautifully clean and professional looking theme, with a two-column layout, integrated slideshow and the choice of horizontal or vertical orientation for images and apps. The theme’s ecommerce features include featured, top-selling and categorised product lists.

4. eShop

This theme offers extreme ease of use for both sellers and customers, simple to configure with an intuitive and crisply designed interface. The template has powerful features and can be tweaked to suit any product.

5. WP Store

Sellers can establish an online store from scratch with this theme, showcasing products and with easy payments, shipping and stock management.

6. Auction Theme

This premium WordPress theme offers users the chance to create an online auction or reverse auction website. Whether its cars or bikes, books or antiques, once the easy-to-use theme is setup traders can auction any kind of property online.

7. Market Theme

Market Theme transforms any WordPress into a fully operational online store. In its default setup the theme has the look and feel of a regular blog, but there are many options to customise the design including the choice of a grid-view shop front to showcase products.

8. Kidz Store

This bright and friendly theme is a great way to present products aimed at children and, more importantly, their parents. The colourful and functional shop front is supported with backend administration and all the necessary ecommerce features.

9. StorePress

This premium theme allows sellers to transform WordPress blogs into accessible online stores with a sleek and professional aesthetic. The design has widget-ready pages, PayPal integration and a solid range of ecommerce tools.

10. eGoods

eGoods is aimed at traders who sell downloadable products and receive payment via PayPal. The theme options include a choice of light or dark colour scheme, both very visually appealing, and customisable layout for images and text. The design includes featured products, bestsellers, recent releases, reduced items and gift vouchers.

11. Vanilla Cart

Vanilla Cart is an attractively minimal and crisply designed shopping theme with thoroughly customisable template. The simple yet beautiful design, with a light colour scheme and the emphasis on product shots, allows the stock to speak for itself.

12. Color Cart

This theme is based on Vanilla Cart, with the added twist of a colour wheel in the options. A choice of eight hues allows users to bring a splash of colour to ecommerce stores, carefully selecting just the right combination to suit their niche market.

13. Cherry Cart

This theme is absolutely minimalist, pared down to a single column with no side bar or blog category. Built around the concept of ‘embracing simplicity and constraint’, Cherry Cart is a remarkably inviting platform in which to showcase products.

14. Classified Ads Theme

This brilliant theme allows users to turn their blogs into classified ads websites. Users manage the site and in return charge to display ads on the site. The design is PayPal integrated, features an admin panel and is fully customisable to suit any classified ads market.

15. folioShop

The folioShop is aimed at sellers who want an attractive and intuitive interface in which to showcase products to be shipped out or downloaded by customers. The theme features an installation wizard, visual help guide and all layered PSD files.

16. ClassiPress

ClassiPress is a professional theme for turning WordPress blogs into classified ads sites. The latest version of the theme features unlimited custom fields and forms, ad packages, blog option, directory-style homepage, email alerts, featured ads carousel, transaction logging and Twitter feed.

17. wpShop

This premium theme presents a great looking ecommerce store in a choice of light or dark colour schemes. The package includes all layered PSD files, installation wizard, help guide and is available in English and German languages.

18. Simple Cart

Simple Cart is a simple and great looking theme for sellers to present products in a gridded shop front, with a friendly wood effect background. The colour scheme can be switched and users may install their own images into the fully customisable design.

19. Tobashop

Tobashop is integrated with another WordPress ecommerce theme, eShop, to make use of the powerful plugins in order to create an online store with a highly professional feel.

20. enVirashop

This theme requires no plugins and offers users all the tools needed to establish an ecommerce niche. The theme is fully customizable so sellers can tailor the perfect online storefront to cater to their target market.

Tom Walker writes for a UK based ecommerce store offering a range of ink next day. He is the lead editor of their blog about design, art and advertising.

If you’re searching for an easy, accessible way to upgrade the look of your website and put yourself on the map, FlashComponents.net might just be solution. With thousands of Flash files, Templates, Galleries and 3D Menus, you can definitely say this marketplace is the eBay of Flash applications. The over 1000 authors can help you save hours and days of development time, and pay a small price for getting noticed in the crowd.

The website is well organized in categories, which makes it easier to navigate through the huge variety of Flash files. You can find right about everything here, and at decent prices. Simply create an account and browse through the files that catch your eye. To have an even more hassle free experience, just search through the files using a keyword of the kind of file you are looking for. Type in “Template” and here’s what you’ll get:

Do the same with video galleries, 3D carousels, menus, and you’ll find some inspiring files that are worth checking out. But FlashComponents.net doesn’t just sell Flash files. You can also find there a strong community of passionate flashers and a team that is available to offer support if you need it.

Highcharts

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

JS Charts

JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts or simple line graphs. Moreover, JS Charts is free for non-commercial use.

PlotKit

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit is fully documented and there is a quick tutorial to get you started.

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7 & 8.

jQuery Visualize Plugin

This plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

jqPlot

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features.

milkchart

Milkchart is a simple to use, yet robust library for transforming table data into a chart. This library uses the HTML5 canvas tag and is only supported on browsers other than IE until ExCanvas gets proper text support.

Canvas 3D Graph

Canvas 3D Graph is a special type of bar graph that plot numbers in 3D.

Moochart

Moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. Future versions might include pie, bar & line graphs.

TufteGraph

TufteGraph allows configuration by dynamic functions, allowing for a really compact API, and uses a non-core layout is done via CSS rather than code.

ProtoChart

ProtoChart is an opensource library using Prototype and Canvas to create good looking charts. This library is highly motivated by Flot, Flotr and PlotKit libraries.

flot

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking. The plugin works with Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (Internet Explorer where the excanvas Javascript emulation helper is used).

Protovis

Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction.

HTML

HTML 5 Cheat Sheet

HTML 5 Visual Cheat Sheet

(X)HTML Elements and Attributes

HTML Cheat Sheet

HTML5 Canvas Cheat Sheet

CSS

CSS Level 2 Visual Cheat Sheet

CSS 3 Cheat Sheet

CSS Cheat Sheet (V2)

CSS Cheat Sheet

JavaScript

jQuery 1.4 API Cheat Sheet

jQuery 1.4 Cheat Sheet

jQuery 1.4 Cheat Sheet

mootools 1.2 cheat sheet

JavaScript Cheat Sheet

UX Magazine

UX Magazine was created to deliver a central place to discuss the critical disciplines that all enhance user experience.

Signal vs. Noise

Signal vs. Noise is the blog of 37signals. Having built popular web apps like Basecamp, they know a thing or two about user experience.

UX Booth

The UX Booth is a blog by and for the User Experience Community. It’s full of useful articles and resources on usability, user experience, and interaction design.

Adaptive Path Blog

Adaptive Path creates user driven products that deliver great experiences. Their blog allows them to share what they’ve learned with others.

UsabilityPost

The Usability Post is a blog about design – not about what it looks like, but about how it works. The aim of The Usability Post is to provide relevant resources, tips and insights into good design in order to help you make great products.

inspireUX

inspireUX is a blog that posts quotes relating to user experience (UX). Every quote on inspireUX focuses on the impact that user experience has on people, business, or the world. You can even download and print them out on 4×6″ index cards.

456 Berea Street

456 Berea Street is the blog of Swedish web professional, Roger Johansson. He writes about web standards, accessibility, usability, and other UX related topics.

Functioning Form

Functioning Form is a blog about interface design. That is to say, it is where art and technology emerge as experience, where message and medium meld, and where interactions are useful, usable, and enjoyable.

A List Apart

A List Apart Magazine is loaded with insightful articles exploring the design, development, and meaning of web content, with a special focus on web standards and best practices.

Boxes and Arrows

Boxes and Arrows is devoted to the practice, innovation, and discussion of design; including graphic design, interaction design, information architecture and the design of business. Since 2001, it’s been a peer-written journal promoting contributors who want to provoke thinking, push limits, and teach a few things along the way.

EverydayUX

EverydayUX is a blog that focuses on the design that we encounter on a day-to-day basis, especially as it relates to interaction design.

Carousel Gallery (jQuery) for Wordpress

This plugin builds on the builtin Wordpress gallery, and replaces any gallery inserted using the tag with a neat jQuery powered carousel. By carousel it means you can browse through all the pictures in the gallery and they’ll slide from the right to the left and seamlessly start over at the end.

jQuery Lightbox For Native Galleries

jQuery Lightbox For Native Galleries makes the native WordPress galleries use a lightbox script called ColorBox to display the fullsize images.

jQuery Image Lazy Load WP

This plugin adds Lazy Load to WordPress. Lazy load delays loading of images in (long) pages. Images below the fold (far down in the page) wont be loaded before user scrolls down.

jQuery Comment Preview

This plugin gives commentors a live preview without taking up any extra screen real estate. It includes a simple HTML editor and you can customize comment preview block as you wish.

Google Analyticator

Google Analyticator adds the necessary JavaScript code to enable Google Analytics logging on any WordPress blog. This eliminates the need to edit your template code to begin logging. Google Analyticator also includes several widgets for displaying Analytics data in the admin and on your blog.

jQuery Post Preview WordPress Plugin

If you don’t like WordPress built-in Visual Editor (because it puts a lot of unnecessary tags or by any other reasons), but you want to have live post preview like in Visual Editor, this plugin may be useful for you.

jQuery-Pagebar

jQuery-Pagebar displays a jQuery slider instead of the normal previous/next links.

J Post Slider

This plugin will rotate latest posts from blog, presented with selected image, post headline, and optional post excerpt.

WP-Slimbox2

This plugin implements the excellent Javascript Slimbox2 written by Christophe Beyls which utilizes jQuery.

WordPress Post Information Plugin

This plugin aims to consolidate your post information into a collapsible panel (using jQuery) that can save space on your page.

Wordpress jQuery Lightbox

This is Wordpress’s version of the jQuery Lightbox Plugin written by balupton.

Content Sliders

This year we saw a growing popularity in using content sliders as a way to display several pieces of content within a limited area or to engage the user with the sliding animation. Normally this is done in a featured banner area near the top of the page. There were several jQuery plugins written in ‘09 to accomplish this type of effect, but here are our favorites.

AnythingSlider

AnythingSlider is created by Chris Coyier of CSS-Tricks and is a fully featured slider that is widely useful.

Easy Slider

Easy Slider is a content slider that gives you the the option to choose between classic previous/next navigation or to use a numeric “pagination” style navigation.

Coda-Slider 2.0

Coda-Slider 2.0 is aimed to mimic the slider effect on the promo page for Panic’s Coda software. The original version was hacked together in 2007, but this 2.0 version is built from the ground up.

Image Galleries

The days of having to use Flash to create image galleries with cross fading or sliding transitions are long gone. Thanks to jQuery these types of effects can be easily achieved with javascript. Here are our favorite image gallery plugins from this year.

Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

jQuery Panel Gallery

jQuery Panel Gallery is a compact image gallery that can easily be configured. Not one image needs to be sliced or edited to work with this plugin. The plugin handles everything itself. You can even configure fading transitions per image.

slideViewer

slideViewer checks for the number of images within your list, and dynamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide to the next picture.

Supersized

Supersized cycles images with transitions and preloading. It automatically resizes images to fill browser while maintaining image dimension ratio.

Navigation

I believe navigation is an aspect of a web site that should kept simple and easy to use. However, if there is a need to create a more engaging nav, jQuery is your best bet. Here are a few of the best from ‘09.

jquery mb.menu

Horizontal Scroll Menu with jQuery

This isn’t a plugin, but I had to include it since it is such a cool effect. It’s a horizontal scroll menu that scrolls automatically according to your mouse axis-Y movement.

AutoSprites

Forms and Tables

Working with forms and tables is probably not the most glamorous part of web design and development, but it has to be done. There were several plugins released this year to help you spice things up a bit. Here are our favorites.

Password Strength

Password Strength tries to calculate how many possibilities the hacker needs to try to guess your password.

Ajax Fancy Capcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. It introduces a new, intuitive way of completing “verify humanity” tasks.

Chromatable

Chromatable allows you to easily create scrolling tables with fixed headers.

jqTransform

jqTransform is a styling plugin which allows you to skin form elements.

Uploadify

Uploadify allows the easy integration of a multiple (or single) file uploads on your website.

jExpand

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

jExpand

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

columnHover

columnHover lets you highlight whole columns in a table when hovering over them.

DataTables

DataTables is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Some key features include: variable length pagination, on-the-fly filtering, and multi-column sorting with data type detection.

Fixed Header Tables

Fixed Header Tables takes valid table HTML and builds a fixed header and scrolling body with optional footer.

Flexigrid

Flexigrid gives you a lightweight but rich data grid with resizable columns and scrolling data to match the headers. It also has the ability to connect to an xml based data source using Ajax to load the content.

Ingrid

Ingrid is an unobtrusive jQuery plugin that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

treeTable 2.0

treeTable allows you to turn a column in your table into a tree. One notable feature is the ability to move an entire branch in the tree by dragging and dropping.

Tablesorter

Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data including linked data in a cell.

columnManager

columnManager allows you to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit.

Table Drag and Drop

Table Drag and Drop allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

Chromatable

Chromatable allows you to easily create scrolling tables with fixed headers.

uiTableFilter

uiTableFilter is a plugin that makes filtering table rows very easy.