Web Design Ledger

13 Useful JavaScript Solutions for Charts and Graphs

Henry — Tue, 09 Feb 2010 06:29:19 +0000

Graphs and charts are used to simplify complex data and make it easy to read and understand. So it really wouldn’t make sense if it was difficult to integrate a graph into a website. Thanks to Javascript and a bunch of talented developers, we have at our disposal solutions for easily adding graphs and charts to our web projects. Here are 13 of these, including some written for jQuery and MooTools, that you will find very useful.

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.

50 Inspiring iPhone Application Websites

gmuller — Mon, 08 Feb 2010 08:20:38 +0000

One thing that many of the iPhone application websites have ‘in common’ is their beautiful and inspiring design. They simply look amazing. The colors are great, the typography is classy, the photos, spaces and reflections are astonishing. The websites are so visual appealing that it is very good to browse around to get inspired and also to find a cool app for you (in case you have an iPhone). And as I’m always looking around for inspiring sites, I found that making a selection of iPhone app sites would give us a great list! So here we are… with 50 samples of beautiful, classy, stylish and many times minimalist websites designs. Here you will find inspiration in many different subjects of web design – such as typography, colors scheme, textures, layouts, images disposal and so on. So sit back and enjoy these pretty inspiring websites!

Bills

Shake it Photo

Tripmix

Nota

Billings Touch

NotifyMe

melatonin

yoritsuki

Syncopy

iSaidWhat

Hipstamatic

Whisper

Momento

edovia

Outside

Tap.plox. – Foobi

taptaptap

Wordpress for iPhone

classics

Mint for iPhone

appcubby – Gas Cubby

tweetie

parablox

dbelement – reader

colorexpert

Things

tweetdeck

cookmate

syphone

dropbox

sparks

Birdbrain

money

kodu

twiba

wallet

barista

cellar

TeaRound

ReadWriteWeb

pastebot

fever

spiffing

Lo-Mob

squarespace

zendesk

The Typography Manual

digdeepfitness

thermometer

gobible

About the Author

Gisele Muller is someone that recently discovered a new career online. A person that really likes technology, design, photography and creativity. An eternal geek wannabe, tech fan and a communication lover! Current location: Porto Alegre, RS – Brazil. Twitter: @gismullr

A Showcase of Website Navigations with Serious Click Appeal

Henry — Fri, 05 Feb 2010 05:37:50 +0000

A couple of months ago we posted an article showcasing great website navigations. Consider this the sequel.

The navigation of a website is meant to be clicked. It doesn’t need to blend in or be hard to find. It’s important that it stands out from the rest of the elements on the page, but yet still matches the overall style of the design. Here is a showcase of websites that achieve this in a very stylish way. These navs look amazing, have serious click appeal, and are guaranteed to inspire you.

Clicking on the images will take you to each site.

Vegas Uncork’s

SYNTHVIEW

Help Your Habitat

Electric Pulp

The House Media

Breezy Baby

Curious Generation Group

Pastebot

Chirp

Delibar

Comfort Brothers

Narwhal Co.

Michael Dick

Yellow Bird Project

Ugmonk

Image Spark

Intuitive Designs

Iconlicious

Oval Cube

Neutron Creations

TheOldState

Digital Podge 2009

Arbutus

8Interactive

Cannonball

Sower of Seeds

Ready Made Designs

WDL Premium: Stains Vector Pack from Go Media

Henry — Thu, 04 Feb 2010 16:00:11 +0000

Today we’re releasing another amazing vector pack for our WDL Premium Members from the talented people at Go Media.

Stains is a grimy set of vector coffee stains, brush strokes, and ink splatters. These vector shapes are incredibly detailed, scanned at a very high resolution and vectorized. Warning, slow machines might have trouble with this because the splatters in this pack include all the tiny specs that spray out. It’s insane, there is a huge level of detail here. Also, there are some vector brush strokes applied to rough paper for a really dirty and gritty feel.

Be sure to check out Go Media’s Arsenal for more awesome vectors, brushes, and more.

There are 31 vectors in all. Here is a preview of some of them.

Download Stains Vector Pack

Premium Member

You must be a WDL Premium member to download this file.

About the Artist

Go Media is a well known design studio with a lot of passion for what they do. This passion definitely comes through in their Arsenal, which is a collection of high quality, hand crafted design elements that they’ve made available through an online store.

The Principle of Contrast in Web Design

Henry — Wed, 03 Feb 2010 08:00:34 +0000

A web design is made of many different elements, each having varying levels of importance and some demanding prominence over others. Some elements share a relationship, while others are not related at all. The tricky part is being able to communicate this visually and effectively. This is where the principle of contrast comes into play.

Contrast is the difference between two or more elements. With contrast, a designer can create visual interest and direct the attention of the user. But imagine if all of the elements on a web page were the same in style and appearance. There would be no organization, no flow, and definitely no hierarchy. Content would be nearly impossible to digest. This makes contrast an essential part of effective web design.

In this article, we’re going to see how contrast can be achieved by creating differences in three aspects of design: color, size, and alignment.

Contrast in Color

When most people hear the word contrast, they think of color. Even though the principle of contrast is not limited to color, it can go a long way in helping the user differentiate page elements from one another.

It’s a given that almost all web designs have a header, a content area, and a footer. These are three completely different areas that should have a clear visual separation. Using contrast in background color is an excellent way to achieve this.

Here you will see that the Church Media Group’s website is an excellent example. The header and footer have dark background colors, while the content area is white. This clearly establishes the content as being different and even more important than the other areas. If we look a little further there is another level of background contrast within the content area. The “Featured Project” area has a light blue background. Since the amount of contrast between this area and the rest of the content is minimal, it tells us that the two are related.

Phil Renaud’s portfolio has a unique layout and an incredible color scheme. He uses a gold-yellow color to create contrast between the vertical navigation and the rest of the predominantly brown design.

Color can also be used within text to create contrast. Billy Tamplin does an excellent job of creating separation and hierarchy by giving the headings, subheadings, and paragraph text all different colors. For a blog style layout, establishing contrast between post headings and body text is critical. It helps the user easily see where articles begin and end as they scroll down the page.

Contrast in Size

Another way to create contrast in web design is to use size differences between elements. In other words, make some things bigger than others.

Creating contrast through size becomes very important when you can’t rely on color. Taxi has a lot going on within it’s layout and has a minimal color scheme. So in order to establish a hierarchy among the three columns, the designer used a much larger width on the middle column – over two times that of the left and right columns. This makes it apparent to the user that the middle column is the most important area of the page.

Just as color can be applied to typographic headings to create contrast, so can size. Big headings are a great way to establish hierarchy within the content of a website. The website of Imaginaria Creative, uses big headings to catch the visitor’s attention and draw them in so that they read more of the smaller paragraphs below.

Contrast in Alignment

Good alignment plays a big part in creating a quality web design. Things just look better when they line up. This is why I think using different alignments to create contrast is tricky and should be used sparingly. However, when done well it can be very effective in creating separation.

LegiStyles uses a large left margin on the content blocks below each heading. Along with the the large size of the headings, this creates a good amount of contrast. If you are going to use this kind of difference in alignment, be sure to make it a big difference. Otherwise it will end looking like a mistake of poor design.

Centering large paragraphs is a big typography no-no. It makes text very hard to read. However, don’t be afraid to mix left aligned paragraphs with centered headings. It’s another good way to use difference in alignment to create contrast. Combined with a nice serif font, it can also give your typography a classic look.

Simon Collison uses centered headings paired with left aligned paragraphs in each of the content boxes. Since the font size of the headings isn’t much larger than that of the paragraphs, this helps set the headings apart.

A List Apart is another great example of using centered heading with left aligned paragraphs.

Now Go and Be Different

Learning to create the right amount of contrast in your designs is just like mastering any other principle of design – it takes practice. Take time to study the work of talented designers and see how they are using contrast in their designs. Remember that contrast is all about differences. If two elements are very different in nature, be sure to make their visual differences very obvious.

20 Different and Beautiful Icon Sets

Henry — Tue, 02 Feb 2010 06:33:43 +0000

We are accustomed to seeing icons as bright and glossy bundles of pixel perfection, but this typical style of icon doesn’t always work for all styles of web design. For instance, grungey designs need icons to be a little dirty. While icons on a hand drawn style site should have line marks or brush strokes. In this article, we’ve rounded up 20 icon sets that break the mould of the typical icon. Here you will see icons that make use of painted brush strokes, sketchy line work, and grungy textures.

Old Bottle Crowns

Sketchy Web Icons

Grunge Peeling Stickers Social Media Icons

Watercolor

Natsu Icon Set

Nurture

Woven Fabric Social Media Icon Set

Sketchy Icons

ICon Pack

Hand Drawn Doodle Icons

Red Little Shoes Icon set

Social Icons Hand Drawn

Page Peel 1

Page Peel 2

Handy

Handycons

Handycons 2

RM Kute Toolbar Icons

Wooden Badges

50 Inspiring Portfolio Designs

gmuller — Mon, 01 Feb 2010 05:28:26 +0000

We are always looking for inspiration, specially when it comes to web design. We just can’t get tired of browsing around websites to check out layouts, colors, typography, styles and everything else that a cool site can offer. With this selection, I will show you 50 inspiring portfolio designs. Some of them you probably already know, others are new – some are minimalist, others are colorful and full of elements. The idea here is to show different ways to show your work online. As we can find lots of interesting portfolios out there, making a selection is a bit tough, so let me know if you want to see more of them…I’m pretty sure that we have enough material for 4 or 5 collections! And don’t forget to leave a comment with your portfolio.

Portfolio – Clarideaz

Notorious Design

wedesignwise

lairdesign

Sarah Longnecker

Creative State

colagene

Matt Hamm

lecaid

Rikcat Industries

alexswanson.net

Second And Park

designme

Josh Puckett – 55eleven

spoongraphics

Creative State

ian devlin

Drumroll

Sean M Everett

Phureal

Justin M. Maller

enila.fr

chris woods

Marc Anton Dahmen

Rob Young

Les Illustrations de Lapin

madelikeme

David Hellmann

adaptd

eddidit

bcandullo

Vincent Mazza

xgraphica

Adhemas Batista

crisvector.com

digitalmash

ftdesigner

Work at Play

mediaflex

thetoke

Kay Times Two

STPo

cameronmoll

simply creative

HALO Creative Agency

moonbeam illustrations

Suki

art4web

Synch Media

Riot Industries

About the Author

Most Creative Ads Around the World

Henry — Fri, 29 Jan 2010 05:45:56 +0000

As the economy develops, our world has been thick with commercials and advertisements. However, not all the advertisements have worked as well as what the advertisers thought. After all, no one wants to read a boring paragraph or a long list about the promoted product. It’s the creativity in the ads that can capture the attention of an audience.

Here’s a collection of stunning and creative advertisements found at the Creative Ad Awards – a new ads collecting website that features the most creative ads from the world.

Awaken The Employee Of The Month That Lives Inside You

A Brown So Natural – Brown Hair

Game Boy Micro – Bug

Air Suction Range Hood

Designer Ice Cream

Electric Torch Bait

Harley Davidson – Eric Black

Think About What It Consumes Before Buying

If You Don’t Help Feed Them,Who Will?

The Softness of Surf

Feel When Playing Rugby

Careful What You Think

Fly Manta Arrived to More Places In Ecuador

Tetris Returns

4Motoin. Get to The Jobs Others Can’t

Help Yourself

Don’t Let Your Hero Down

Baron Davis

Blend In

We Put Anything On Paper

Tu Comida Se Va A Poner Mas Buena

To Put an End to Endless Pain. Make A Donation

Dog Training Lessons

Pour Into Cup

Lst Lhr Stromanbieter Auch Zu Gierig

The Best Selling Spices in The World. McCormick, Spread The Good Stuff

Read A Book On The Bus And Be Miles Away

Unfortunately The Beach Doesn’t Clean Itself

If There’s One Thing I’ve Learnt

Mr Muscle

It’s Time For A Touch of Spring Cleaning

Do You Know How Much You Really Spend On Cigarettes?

Makes Stains Look Harmless

If You Have Known A Place With VS You Have Known It Deeply

Most Wanted Brands

The Blackberry Pearl Is Now Faster Than Ever

Viking Lawn Mowers. Nothing Cuts Grass Better.

Milano Ashtanga Yoga

Yo Sushi

deCondo: A Premium WordPress Theme for Real Estate

Henry — Thu, 28 Jan 2010 08:22:56 +0000

Today we’re releasing another beautiful premium WordPress theme from ThemeShift to our premium members. deCondo is a light and elegant real estate theme. A lot of handy features like a search panel, multi-agent support and a professional property exposée let you easily setup your real estate website. Be sure to check out the other great themes by ThemeShift.

If you’re not yet a WDL Premium member, you’re missing out on a great deal. Sign up here.

Click the image for a live demo.

Featured Properties Slider

Display your most important real estate objects in deCondo’s featured properties slider. Simply select your slider category through the theme options page and give your users a quick auto-slide overview of your top objects.

Custom Search Panel

The most important feature of a real estate site is the search. deCondo comes with a custom search panel that lets your user easily browse your properties by keyword search or category select drop downs.

Full Feature List

Featured properties slider
Customizable search panel
Searchable custom fields
Home page layout options:
Latest entries, latest properties, featured properties, with sidebar, without sidebar
Property archive layout options: with sidebar, without sidebar
Muli-level dropdown menu
WordPress 2.9 post thumbnails
Nice property exposée
Property image gallery
Built-in Google Map to display porperty location
Built-in contact form on property pages (optional)
Custom search results
Custom page templates: agents list, contact page, full width
Custom author template: agents listings
Optional news / blog section
Threaded comments
Comment form validation
Search form validation
CSS styles for WP-PageNavi plugin – activate and you’re done
(also see plugin page)
Theme options page
Property settings custom meta box
Custom widgets (recent properties, recent news)

Download deCondo

Premium Member

You must be a WDL Premium member to download this file.

About ThemeShift

Themeshift is a WordPress theme shop operated by Simon Rimkus. His themes are beautifully designed and of the highest quality.

20 Fonts Ideal for Big and Powerful Headings

Henry — Wed, 27 Jan 2010 07:51:20 +0000

Headings play a major role in the way users digest content. Through size and style, they help establish a hierarchy and make text easy to scan. Headings also help establish the mood created by a design. So it’s important to choose the right font to compliment the website’s style.

For this article, we’ve rounded up 20 fonts that are ideal for creating big and powerful headings for your web designs.