webRulon » Design Examples

5 Small Business Web Design Trends to Watch

admin — Tue, 10 Aug 2010 22:11:21 +0000

Small businesses have it tough. Their web budgets are usually much smaller than that of large companies. At the same time their need for web exposure is much greater. However, instead of just curling up and giving up, many small businesses have begun to wow competition by offering up some innovative and cool ideas. “Where there’s a will, there’s a way” springs to mind.

There is quite the tool-set available to small businesses nowadays. First of all, there are many companies out there that will design and implement the site for you. Sure, this may not be the most budget-conscious solution out there, but once it’s done it’s done. Additionally, many hosting companies offer do-it-yourself software suites that are intuitive and graceful.

For stone-age companies, let’s go over why you want a website in the first place;

Discovery - Once your online, customers can find you just by plugging your name into a search engine. Consumers nowadays don’t rely on the Yellow Pages or other antiquated notions of business location. They are going to Google and whatever they find they are going to use.

Engagement – In addition to finding you, customers can also find information on who it is you are what it is you offer. This can be make or break in the race to set yourself apart from the competition.

Sales – Engagement, often, leads to sales. Once a customer is assured you are on the up-and-and and you offer a service they are interested in, sales will often follow.

Service – This entices return customers by offering a suite of services that make it easier on consumers. This could be as simple as being readily available via email. The sky is really the limit here.

So. You want to make or update your website. What now? Well let’s go over five web design trends that are capturing the imaginations of small businesses everywhere.

1. Minimalism

This tip is about as old as the web itself. You don’t want a cluttered and awful workspace do you? The same should go for your web space. In short, keep things simple. This helps users get a bead on your company and what it is you do quickly and succinctly. That is the point, isn’t it?

Also, page weight now affects your Google ranking, so you are going to want to make sure your site is as streamlined as possible. Here are some steps to help you get that site up to snuff.

* Snip off anything unnecessary. This includes widgets and other accessories that serve no real purpose.

* Make good use of whitespace. This is the space between the various design elements. This helps the human eye figure out what is going on easier. Notice it in the photo above.

* Color choice is key. You are going to have less going on so what colors are used is important. Make sure to choose colors that work well together.

* Browse the site often as if you were a consumer. Keep an eye out for anything “off” and also feel free to have friends and family do the same.

2. Unique Photography

Stay away from cliched images. You’ve seen them all before. Two men shaking hands. A smiling doctor who looks like a model. These images are the equivalent of using Printshop to make greeting cards. People will gloss right over them and mentally think “Next.” It’s important whatever images you use are unique(To the best of your ability) and offer up a new point of view for the consumer.

Use custom photography or artwork whenever possible. Of course, you are a small business and this can be expensive. So follow this at your own budgetary discretion. You may, after all, have to rely on stock images. Here are some tips to make the most of it.

* Research competition and note what images they use. Stay away from these images or images that are eerily similar.

* Avoid being too literal in your image choices. Sometimes abstract can allow consumers to link things on their own, which gives them a sense of satisfaction.

* If you can afford it, opt-out of cheap lo-res images. These can make your site look unprofessional.

* Stay away from the bland and predictable. Try to spice things up a bit.

3. Bold Typography

Typography is more important than people often realize. Consider the website a conduit of information. With that said, isn’t every facet of how that information is presented important? Of course it is. Typography is the literal clothes upon your information’s back.

Big and bold typography has become a happening web-trend lately. This has happened for a few reasons. First of all, well, big and bold stuff is easy to read. It also tends to make the other design aspects “pop.” Finally, over-sized text establishes a hierarchy of information whereupon you can decide what is most important via text-size. Here are some tips for successful typography.

* Figure out the single most important idea you are trying to convey and find a type-set that fits. A singular idea is important because too many can lead to choice paralysis.

* Find a typeface that matches what kind of work you do. For instance, if your company embodies the feel of an Old Style font, you should consider Bembo, Garamond and Sabon. Decidedly, if you make astronaut supplies, avoid these fonts.

* Surround the typography with a good amount of white-space. Please see the entry on minimal design for more information on this.

* Test some of the various font replacement options such as Typekit or Typotheque. These are great resources that allow you to “try on” fonts in your website without purchase or any real change.

4. Clear Calls to Action

What is it you want your visitors to do? Whatever it is, this is a call to action. Calls to action can be anything from downloading something to filling out a web form. These are some of the most important, and oft-overlooked, elements of a webpage.

Easing your visitors to jump through the hoops you have provided for them can be tricky. Here are some tips to turn calls to action into actual action.

* Language – Keep the prose short and to the point. Try to start every call to action with a verb. Be sure to amp up the urgency as well. Words like ‘now’, ‘hurry’ and ‘offer ends’ are great and, as always,’free’ is a fantastic word to use. Some things never change.

* Positioning – Calls to action need to be in the right spot. It does no good to place them in a sad little corner somewhere. Look at the photo above. Notice the “Try it for free” button and where it’s placed.

* Color – Make sure the call to action stands out from the rest of your design elements. Do this with proper use of color. Contrasting and generally pleasing color combos will result in your call to action button getting the attention it deserves.

* Size – Make sure the call to action button is the biggest button on the block. It doesn’t have to be the biggest design element, as seen in the photo above, it just has to be the biggest button. This helps let the user know how important it is.

5. A/B Testing

Competition is fierce online. You want to make sure your website does it’s best to convert visitors to actual customers. You can get a head start on this by continually measuring site performance, usability and conversions.

One of the best ways to measure and optimize your web design is via A/B testing, otherwise known as split testing. A/B tests examine the effectiveness of landing on one page over another. It works by randomly showing users the two versions of said page to see which one generates the best results. You can then evaluate the performance of each and use the very best version.

Just about everything can be tested. Here are some tips to make the best of it.

* Define the goal. Don’t start a test unless you know what it is you seek to find out. For example, if you want to increase sign-ups, you’ll want to test the type of fields in the form, the length of the form, and the display of privacy policy.

* Start with testing the things that can be changed easiest. No use to reinvent the whole house when just the kitchen will do. For example, you could tweak the copy on your checkout button to see if conversions can be improved.

* Don’t use A/B testing in a vacuum. Pair it up with other services to get a clear picture of what is going on with your site. Other tools include Feedback Army and User Testing. Taken together, these can give you a clear picture.

So that’s it. What changes would make the most sense for your business?

30 of the Best Free Icon Sets for Bloggers

Lawrence Bonk — Thu, 10 Jun 2010 13:51:04 +0000

Come on. Admit it. You blog. It’s ok. We all do. We are long past the days when blogging was a specialized activity aimed toward teenage girls with Livejournal accounts. The blog is a popularly accepted form of mass media. And where there are blogs, there are icons. Bloggers use all kinds of icons. Icons for social media. Icons for navigation. Icons for, even, smileys. However, there are so many icons out there in webville, it’s hard to know where to even start.

Enter Webrulon. We haves tirelessly scoured the web to come up with this list of 30 of the absolute best free icons sets available for the blogosphere. Enjoy and feel free to link to this on your, um, blog.

Function Free Blog Icon Set // Designer // Download

Vaga – Developer Icons Set // Designer // Download

Vector Blog Icons // Designer // Download

Email-icons for blog & web-design // Designer // Download

24 Free PSD Blog Iconx Set // Designer // Download

Free Vector Icon Set // Designer // Download

Free Button Icons // Designer // Download

Free Download WordPress Icons in 30 Colors // Designer // Download

WebDev Social Bookmark // Designer // Download

Free Vector RSS Icons for Download // Designer // Download

Free Glossy Blogging Icons Set for Bloggers // Designer // Download

free RSS and Feed icons // Designer // Download

Grunge Style Rss Feed Icons // Designer // Download

Feedicons // Designer // Download

iConPack // Designer // Download

POPO emotions full version // Designer // Download

Mouse category // Designer // Download

Icons Set // Designer // Download

3D Cartoon Icons Pack // Designer // Download

Free Vector Icon Set // Designer // Download

Dellixmas Christmas Icon Set // Designer // Download

Application Icons // Designer // Download

Mini Pixel Icons // Designer // Download

Smashy The Alien Icon Set // Designer // Download

2space web 2.0 PNG smiley icons // Designer // Download

Cocktail Party rss feed icons // Designer // Download

Blog calendar icons // Designer // Download

Free icons set for bloggers // Designer // Download

Free Hand Drawn Doodle Icon Set for Bloggers // Designer // Download

Handycons – a free hand drawn social media icon set // Designer // Download

Where did you find the icons that you use? Got some interesting ones to share with the Internet? Send them our way!

30 jQuery Tooltip Plugins to make your web design sparkle

Lawrence Bonk — Mon, 31 May 2010 20:48:03 +0000

jQuery has been taking web design by storm these past few years. And it’s easy to see why. It’s a fast and concise Javascript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery has changed the way designers use Javascript the world over.

Aside from all of that, jQuery is known for it’s abundant plugin collection. Not a day goes by without some new useful plugins to turn your idea of web design upside down. Whether you want to create a nice image gallery, or to slide things right to left, jQuery can do it. It can also replace the tooltip of element. Tooltip is a great way to show extra information regarding the element you hover your trusty mouse over.

Here are 30 jQuery plugins you can use to make your tooltips more user friendly:

Simpletip

Easy Tooltip

Person Tooltip

Digg Style Sharing Tooltip

Tip Tip

wTooltip

Hernan’s Tooltip Plugin

HTML Tooltips

ThumbHover

bQuery

Simple Tooltip

HoverTips

BetterTip

Bassistance Tooltip

MB Tooltip

ClueTip

webDev Tooltip

Orbital

Horizontal Tooltip

Build a Better Tooltip with jQuery Awesomeness

BluFusion Tooltip

qTip

Flowplayer Tooltip

ProtoTip2

Jgrowl

Ezpz Tooltip

Coda Tooltip

Tipsy

Pop

vTip

And that’s it! As always, if you know of any more send us an email or drop it in the comment box. Happy designing!

10 jQuery Lightbox Clone Plugins

admin — Sat, 29 May 2010 20:09:45 +0000

Lightbox, and all of it’s various clones, can work magic on your jQuery web design. But where do you even start? There is so much out there and, frankly, most of it is crap. Well, don’t fret. Webrulon has done the searching for you. We’ve scoured, scrubbed and rinsed(?) the Internet to find ten of the most promising Lightbox plugins and Lightbox clone plugins available for jQuery. Without further adieu, here they are:

1. jQuery FancyZoom

Orderlist developed this powerful and versatile jQuery-powered Lightbox clone. More details can be read here.

The code below initializes the plugin:

$(‘a.zoom’).fancyZoom({scaleImg: true, closeOnClick: true});
});

$(document).ready(function() {
$('a.zoom').fancyZoom({scaleImg: true, closeOnClick: true});
});

Sample HTML code:

class=“zoom” href=“insicdesigns.com”>“path/to/image/sample.gif”>

DEMO DOWNLOAD

2. FaceBox

Facebox is a jQuery-based Lightbox that is in the style of everyone’s favorite social networking site, Facebook. It can display images, divs, or entire remote pages. Visit the site for more details.

Load the dependency files. Make sure the jQuery is loaded first before tackling the following codes:

“jquery.js” type=“text/javascript”>
“/facebox/facebox.css” media=“screen” rel=“stylesheet” type=“text/css”/>
“/facebox/facebox.js” type=“text/javascript”>

Initialize the code during onload.

jQuery(document).ready(function($) {
$(‘a[rel*=facebox]‘).facebox()
})

Sample HTML code:

//for images
“stairs.jpg” rel=“facebox”>text
//for DIV
“#info” rel=“facebox”>text
//for Ajaxes
“remote.html” rel=“facebox”>text

DEMO DOWNLOAD

3. FancyBox

This is an absolutely fantastic Lightbox clone. It has a bevy of features, including a host of nice effects, smooth animation and easy integration to you HTML code. Here are some more features:

Automatically scales large images to fit in window
Adds a nice drop shadow under the zoomed item
Groups related items and adds navigation through them (uses preloading)
Can display images, inline and iframed content
Customizable through settings and CSS

For more details about FB. Visit here.

Sample Code:

$(document).ready(function() {
$(“p#test1 a”).fancybox();
$(“p#test2 a”).fancybox({ ‘hideOnContentClick’: true });
$(“p#test3 a”).fancybox({
‘zoomSpeedIn’: 0,
‘zoomSpeedOut’: 0,
‘overlayShow’: true
});
});

$(document).ready(function() {
$("p#test1 a").fancybox();
$("p#test2 a").fancybox({ 'hideOnContentClick': true });
$("p#test3 a").fancybox({
              'zoomSpeedIn': 0,
              'zoomSpeedOut': 0,
              'overlayShow': true
});
});

DEMO DOWNLOAD

4. Pirobox

Here is a simple and fully-featured Lightbox clone. Just download and use the dependencies.

“css_pirobox/pirobox.css” media=“screen” rel=“stylesheet” type=“text/css” />
“text/javascript” src=“js/jquery1.2.6.js”>
“text/javascript” src=“js/pirobox_packed.js”>

Then initialize the plugin function:

“text/javascript”>
$(document).ready(function(){
$(‘.thumbs’).piroBox({
border: ‘10′,
borderColor: ‘#fff’,
mySpeed: 700,
bg_alpha: 0.5,
cap_op_start : 0.5,
cap_op_end: 0.8,
pathLoader: ‘#000 url(css/ajax-loader.gif) center center no-repeat;’,
gallery : ‘.gallery li a’,
gallery_li: ‘.gallery li’,
single : ‘.single a’,
next_class: ‘.next_in ’,
previous_class: ‘.previous_in ’
});
});

DEMO DOWNLOAD

5. ThickBox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. It shows a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. The widget’s function include:

ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it’s 58k.
The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
ThickBox will resize images that are bigger than the browser window.
ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
ThickBox will hide form elements in Windows IE 6.
ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
Due to the ThickBox creator’s view that transitions should be tailored by individual authors, ThickBox windows do not implement fancy transitions. Feel free to add them as you see fit. Is this a feature? Well, some might say it is.
ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

DEMO DOWNLOAD

6. prettyPhoto

prettyPhoto - A jQuery lightbox clone develop by Stéphane Caron. It’s easy and simple to use, which is always a plus. Just download and include file dependency.

“js/jquery.js” type=“text/javascript” charset=“utf-8″>
“stylesheet” href=“css/prettyPhoto.css” type=“text/css” media=“screen” title=“prettyPhoto main stylesheet” charset=“utf-8″ />
“js/jquery.prettyPhoto.js” type=“text/javascript” charset=“utf-8″>

Then initialize the the prettyPhoto function.

“text/javascript” charset=“utf-8″>
$(document).ready(function(){
$(“a[rel^='prettyPhoto']“).prettyPhoto();
});

Add rel=”prettyPhoto” to any picture you want to activate the prettyPhoto feature.

“images/fullscreen/1.jpg” rel=“prettyPhoto” title=“Description”>
“/images1.jpg” alt=“Picture 1 title” />

DEMO DOWNLOAD

7. NyroModal

NyroModal is another full-featured Lightbox clone that is conveniently easy to use. Here are some of the features:

Ajax Call
Ajax Call with targeting content
Ajax call can change the modal size
Single Image
Images Gallery with arrow navigating
Form
Form with targeting content
Form with file upload
Form with file upload with targeting content
Dom Element
Manual Call
Iframe
Error handling
Modal will never goes outside the view port
Esc key to close the window
Customizable animation
Customizable look
W3C valid HTML (Transitionnal)

DEMO DOWNLOAD

8. Interface Imagebox

Interface Imagebox is a cool little app. It’s an interface plugin for jQuery.

Initialize the Imagebox function and then:

$(document).ready(
function()
{
$.ImageBox.init(
{
loaderSRC: ‘images/imagebox/loading.gif’,
closeHTML: ‘’
}
);
}
);

Here is a sample HTML code:

“images/imagebox/large-image.jpg” title=“Sample” rel=“imagebox-bw”>“images/imagebox/thumnails.jpg” />

For more information, visit the site here.

DEMO DOWNLOAD

9. jQuery lightBox plugin

This jQuery lightBox plugin is elegantly construction. Simply put, it works like a charm. It’s used to overlay images on the current page through the power and flexibility of jQuery´s selector. It was inspired in Lightbox JS by Lokesh Dhakar.

Wanna use it? Download and Include all the JavaScript and CSS dependencies. Then:

//the JS
“text/javascript” src=“js/jquery.js”>
“text/javascript” src=“js/jquery.lightbox-0.4.js”>
//the CSS
“stylesheet” type=“text/css” href=“css/jquery.lightbox-0.4.css” media=“screen” />

Then select the links where you want to use the lightBox plugin. Here is some sample code:

“text/javascript”>
$(function() {
// Use this example, or…
$(‘a[@rel*=lightbox]‘).lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or…
$(‘#gallery a’).lightBox(); // Select all links in object with gallery ID
// This, or…
$(‘a.lightbox’).lightBox(); // Select all links with lightbox class
// This, or…
$(‘a’).lightBox(); // Select all links in the page
// … The possibility are many. Use your creative or choose one in the examples above
});

For more details visit the site here.

DEMO DOWNLOAD

10. Greybox Redux

This is an extremely light weight plugin, weighing in at only 1.2 kb. It doesn’t even necessitate enabling of Javascript into your site. Totally unobtrusive.

Here’s how to initialize the plugin:

“text/javascript”>
var GB_ANIMATION = true;
$(document).ready(function(){
$(“a.greybox”).click(function(){
var t = this.title || this.innerHTML || this.href;
GB_show(t,this.href,470,600);
return false;
});
});

And here is the sample HTML code:

See it in action:
- “http://google.com/” title=“Google” class=“greybox”>Launch Google
- “http://yahoo.com/” title=“Yahoo” class=“greybox”>Visit Yahoo
- “http://msn.com/” class=“greybox”>Microsoft would like a visit.
- “http://jquery.com/” class=“greybox”>jQuery Rocks!

DEMO DOWNLOAD

If you know of any more quality plugins, drop them in the comment box!

25 Powerful and Useful jQuery Tutorials for Developers and Designers

admin — Thu, 27 May 2010 19:04:25 +0000

25 Powerful and Useful jQuery Tutorials for Web Developers and Designers

jQuery is all over the place these days. It’s rapidly catching up to CSS as the web template of choice for up and coming designers. It’s easy to see why. It’s constantly changing. Evolving. The only problem with this is, however, you have to constantly change and evolve as well. One simple must keep track of all of the new plugins, tutorials and addons that come down the pike. It can be quite an undertaking. Don’t worry, though. Webrulon is here to help. Here is a list of 25 recent tutorials that will get you up to speed and have you jQuery-ing in no time.

Submit A Form Without Page Refresh using jQuery
Demo URL : View Demo.
Description : This teaches you exactly what it says it does. Get rid of annoying page refreshes and let your users submit a form with simplicity and ease. Not a bad feature to have on a website. This will prevent people from clicking away in annoyance.

Live Email Validation
Demo URL : View Demo.
Description : In this tutorial you will learn how you can validate the format of an email address “live” using that crafty jQuery. It will also let you use regular expressions without any additional plugins.

Fading Menu – Replacing Content
Demo URL : View Demo.
Description : This teaches you to replace content on the fly, live. The possibilities are pretty endless here. For instance, you could use it for animation or to react live to events as they happen on your site. Not a bad thing to know.

Create a Scrolling Menu with CSS and jQuery
Demo URL : View Demo.
Description : This is exactly what it sounds like. Create a scrolling menu using CSS and jQuery. Your website isn’t classy unless it has a scrolling menu, right? Scrolling menus are the Segways of the 2010 web.

Create a live-update list effect with jQuery
Demo URL : View Demo.
Description : A live-update list effect is, essentially, a list that is generated as new data is added. This tutorial will teach you how to do it. No more outside looking in on this one.

Advanced “Poll” jQuery Plugin

Description : This tutorial will teach you how to create a jQuery plugin from start to finish. What’s the plugin do? Allows you to easily add a simple poll widget to a web page or blog. Don’t worry. Future plugins will be much more dastardly.

How to Use jQuery to Preload an Image with a Fade-In Effect
Demo URL : View Demo.
Description : There are all kinds of way to speed up, or give the illusion therein, the way images load on your website. This plugin teaches you aboutl the preloading capabilities of JavaScript while using the jQuery Framework.

Flickr Menu Design
Demo URL : View Demo.
Description : This tutorial will explain how to create a simple step-by-step way to implement a Flickr Horizontal Menu in CSS and jQuery. Now get that camera snapping.

Awesome Popup jQuery Calculator
Demo URL : View Demo.
Description : Numbers! Who needs em? Well, mostly everyone actually. This tutorial will help you keep a handle on them pesky numbers by having you build a popup jQuery calculator for your site.

Semantic Blockquotes with jQuery
Demo URL : View Demo.
Description : Blockquotes are useful in making your text visually appealing. This tutorial shows you how to create said blockquotes using jQuery. This is a fairly easy tutorial so, beginners, have at it.

Selecting and Styling External Links, PDFs, PPTs …
Demo URL : View Demo.
Description : This handy tutorial teaches you how to use jQuery to select and style PDFs, PPT, images, and external links using jQuery and CSS.

Authenticating Twitter API calls with PHP & jQuery
Demo URL : View Demo.
Description : This tutorial teaches you how to create a simple call to the Twitter API to with your site’s Twitter credentials. This makes it easy to quickly and effortlessly post topics related to your blog from your Twitter. Great for multitaskers.

jQuery Slideshows With the Cycle Plugin
Demo URL : View Demo.
Description : Wanna implement the jQuery Cycle? This tutorial shows you how. What is the jQuery Cycle? A plugin that allows developers to quickly and easily create a slideshow out of anything contained within a given div element. Cool!

jQuery and Google Maps Tutorial
Demo URL : View Demo.
Description : Using with jQuery within Google Maps can be a hefty task indeed. This tutorial seeks to lessen the burden by giving you step by step instructions. You’ll be Lewis and/or Clark in no time.

jQuery Sequential List
Demo URL : View Demo.
Description : This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. Super useful.

Using jQuery Slider to Scroll a Div
Demo URL : View Demo.
Description : This tutorial shows you how to create a horizontally scrolling div using jQuery, html, and CSS. The trusty jQuery is the main focus of this tutorial, which is used to build the slider which controls the scrolling.

How to Mimic the iGoogle Interface
Demo URL : View Demo.
Description : This tutorial teaches you how to create a customizable interface with widgets. Sound familiar? You got it. iGoogle! The finished product will be simply and minimally coded, just like iGoogle. This of course opens the doors for tons of applications.

Reddit-style Voting With PHP, MySQL And jQuery
Demo URL : View Demo.
Description : Ever been on Reddit? The site is interesting for a number of reasons, but one way is how voting is handling. A simple up or down vote is the order of the day there. This tutorial teaches you how to emulate that for your site, using jQuery, PHP and MySQL.

Simple jQuery Spy Effect
Demo URL : View Demo.
Description : A great tutorial showing how to use the jQuery Spy Effect plugin and scroll through lists in an aesthetically pleasing manner.

Create a slide tabbed box using jQuery
Demo URL : View Demo.
Description : A simple and straight forward jQuery tutorial that creates a cool sliding tabbed box. For fans of simple and clean web design.

Horizontal Animated Menu
Demo URL : View Demo.
Description : In this tutorial you will build a basic horizontal animated menu using jQuery. Nothing like the old favorites.

Load In and Animate Content with jQuery
Demo URL : View Demo.
Description : This tutorial teaches you amp up average and humdrum websites. How? By adding ajax functionality so content loads into the relevant container instead of the user having to navigate to another page. It also teaches you to use great animation effects. Double shot.

Add icons to your links automatically using jQuery & CSS
Demo URL : View Demo.
Description : This tutorial is useful if you want to attach a particular icon to a particular type of link. For example: A PDF icon can attach to all of the PDF file links, a text document icon can attach to all text document links or a zip icon can attach to all links that are linked to zip files. There are many more permutations, of course.

Creating an OS Web Interface in jQuery
Demo URL : View Demo.
Description : In this truly amazing tutorial, you will recreate a complete OS Web Interface with jQuery. Take a look at the demo. This just may blow your mind.

How To Build Quick and Simple AJAX Forms with JSON Responses
Demo URL : View Demo.
Description : In this tutorial, you will go through the steps of setting up an AJAX form, which will return a JSON response. These are used to display success and error messages. Pretty useful.

Thirty Examples of Successful Login Form Designs

Lawrence Bonk — Tue, 25 May 2010 02:33:56 +0000

The trusty login form. A necessary evil, right? Wrong. They need not be evil at all. There are ways to make the extra step your user base goes through to get to your content an enjoyable and aesthetically pleasing experience. The following list showcases creative and functional login form design. Some might surprise you and get you rethinking what that little box is for all over again:

webRulon » Design Examples

5 Small Business Web Design Trends to Watch

1. Minimalism

2. Unique Photography

3. Bold Typography

4. Clear Calls to Action

5. A/B Testing

30 of the Best Free Icon Sets for Bloggers

30 jQuery Tooltip Plugins to make your web design sparkle

10 jQuery Lightbox Clone Plugins

1. jQuery FancyZoom

2. FaceBox

3. FancyBox

4. Pirobox

5. ThickBox

6. prettyPhoto

7. NyroModal

8. Interface Imagebox

9. jQuery lightBox plugin

10. Greybox Redux

See it in action:

25 Powerful and Useful jQuery Tutorials for Developers and Designers

25 Powerful and Useful jQuery Tutorials for Web Developers and Designers

Thirty Examples of Successful Login Form Designs

Treemolabs

Yellow Bird Project

Mouse To Minx

Green Globe Ideas

Blendue

Mail Chimp

97 Bottles

Nasibriyani Lounge

Battle

Straw Poll Now

Maple Story

Survs

Hello How R U

Threadless

Vimeo

Olioboard

Cosmicsoda

Robo

Wakoopa

Ready Photosite

Acrobat

Eat Drink or Die

Converse

My Virtual Paper

Scrap Blog

Original Juan

Nipon War

Accounts Mmosite

Launch Pad 37 Signals

Red Brick Health

Ugs Mag

Joy Max

20 Corporate Graphic Design Samples

20 Corporate Graphic Design Samples

50 Totally Free CSS/XHTML Templates For 2010

34 Free and Elegant TrueType Mini Pixel Fonts

A Showcase of 35 Beautiful Typographical Illustrations