Three Fresh CSS Frameworks

Oct 28
2010

CSS Frameworks are those marvelous and innovative tools that will speed up your web development process by taking care of the multitude of repetitive processes you would have to cover for every project, and on top of that, they (mostly) take care of any cross-browser compatibility issues. They have also never been as popular, with new frameworks cropping out from week-to-week. As such, in this design news round-up we have selected our favorites from recent months.

The Square Grid

The Square Grid is a simple CSS framework for designers and developers, based on 35 equal-width columns. The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm with each block (DIV) defined with a margin of 1 square (28px) from the next block.
The Square Grid

FEM CSS Framework

The FEM CSS Framework is a 960px width 12 column grid system. It is based on the 960 Grid System, but with a twist in its philosophy, making it more flexible and faster to play with boxes.
FEM CSS Framework

Formalize CSS

Formalize CSS is a useful framework for giving your forms a cross-browser uniformity.
Formalize CSS

By Paul Andrew (Speckyboyand speckyboy@twitter).

Round-Up of Fresh jQuery Tutorials

Aug 12
2010

There really is no limit to what can be achieved with jQuery. And when it is in the right hands those limits are challenged all the time, constantly pushing back its seemingly endless boundaries by developing fresh and creative techniques. In this design news round-up we have collected our favorite recent jQuery tutorials.

Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL

Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL

Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL →

jQuery Quickie: Slot Machine Style Navigation

jQuery Quickie: Slot Machine Style Navigation

jQuery Quickie: Slot Machine Style Navigation →

How To Create A Great Contact Form

How To Create A Great Contact Form

How To Create A Great Contact Form →

Music Portfolio Template with HTML5 and jQuery

Music Portfolio Template with HTML5 and jQuery

Music Portfolio Template with HTML5 and jQuery →

A Simple Movie Search App w/ jQuery UI

A Simple Movie Search App w/ jQuery UI

A Simple Movie Search App w/ jQuery UI →

By Paul Andrew (Speckyboyand speckyboy@twitter).

Achieving Higher Conversion Rates with Your Web Forms

Aug 11
2010

Web forms are used for all different types of data submission, video submitting, contacting, blogging, registering, or for ordering items online. All the forms come in different flavors, large or small, black or white, short or long. Therefore, forms are very important to you and your users, thus, making them just right is the key to increase usage.

Below we cover six tips to improve your forms for better exposure and usability.

Not Too Large, Not Too Small

A major issue with many forms out there is their sizes, many developers or designers try to fit long forms into small spaces, reducing the size of the input boxes greatly making it difficult for users to proofread what they enter. A good ideal size for each input box, which includes large text boxes and the likes, really depends on the amount of data you expect a user to input.

For example, let us say you run a blogging service, you know that blogs can be short or long, thus, giving the textbox a good width and height is really the key. Users want to be able to easily proofread their blog post before it makes it live via the textbox, so fairly large text is also a plus, so they can easily catch typing mistakes or missing punctuation.

JavaScript Effects

A great addition to form textbox fields would be some simple JavaScript effects such as auto expanding features or character counting features, depending on the type of data being imported. Despite these effects sometimes being of no relation to your service or form, users do find them handy, especially if a lot of text is being submitted or edited.

To give a good example of a situation where an effect like this can help, let us look at a forum script. Suppose you are creating a forum script where users will be able to discuss certain topics, as you know, posts can be short or long. If a user’s post happens to be long, scrolling through the textbox is an undesired thing to do, as the user cannot quite view the entire posting. Therefore, providing an auto-expanding effect is quite helpful. As the user’s text gets near the bottom of the textbox, it will automatically expand a few lines, keeping your users satisfied.

Easy to Understand

Many users are turned away from forms that are difficult to work with. Hence, it is a definite must to be clear and precise about the information being collected as if they cannot understand what you need, chances are you will not receive what you needed. Another aspect to look at is just because it may be understandable to you, does not mean it will be understandable to your audience. Therefore, it is in your best interest to ask for feedback on understandability of your forms.

Not Too Much, Not Too Little

Another key aspect that causes users to turn away from completing your forms is that your forms ask for too much information. Users want to be completing the form to continue rather than spend the time filling them out. Thus, it is key for you to keep your forms as short as possible. For example, if your form is a registration form to an online service, leaving account settings whether optional or not out of the registration forms makes the form look shorter and easier to fill out increasing the chances of user registrations.

Moreover, leave the information you do not need immediately out of the form, and have them choose to enter the information later at their own leisure or when it becomes necessary. If the information that you may taken out is absolutely necessary within a few days of signing up, have them fill the information out a day later, such as when they sign back in, you can easily prompt them to fill the information out before continuing. This splits the lengthy form into two easy to fill and understand forms, keeping them happy.

A Simple Uncluttered Design

The design of a form additionally impacts the users experience. Your users do not want to bounce back and forth to get to each form field in order; they want to be able to easily fill the fields sequentially without trouble. Therefore, the design for the form should be as simple as possible leaving the fields easily accessible in the order intended.

Understandable Security Measures

While users understand security measures applied to forms help prevent spam, they also do not want to struggle to complete a form. With that said, complex spam prevention tools such as CAPTCHA images cause less completed form submissions from frustrated users. I myself have left many forms that I had intended to fill out due to their hard to work with security measures. Thus, as a developer or creator, creativity is what is needed to avoid the spammers but not the users.

Many new ideas and techniques have become apparent such as mathematical questions, slider prevention systems, as well as others. My personal favorite that I found very intuitive and easy to use is a drag and drop security measure. The user simply drags a shape requested from a palette of shapes right into the shape box, if you selected the requested shape, the form will submit. As it is simple and easy to use, your users will enjoy playing with the tool, as well as keep spammers out of the way.

To Conclude

Overall, getting your users to complete your form is a process that requires thought and ingenuity. With that said, creating a form is easy, but getting it properly designed, formed, and well laid out is tricky however an attainable aspect, but if it is done correctly, it can rewarding. To conclude, keep your forms as simple as possible and as down to the point as it can possibly get.

Ask around for feedback about the design and layout for whether the form can be easily filled out, whether it is easy to understand, and if it is easy to follow. Improve your form accordingly, and it would be ready to hit mainstream.

Awesome Resource: User Interface Design Framework

Jul 27
2010

Today’s news focuses on only one single design resource… and what a FREE resource it is! It is The User Interface Design Framework from webalys.com, which is basically a huge design framework that consists of a complete GUI library, a set of of 260 minimal vector icons and a massive Illustrator style library. This is a must have resource for any professional designer.

License: The framework has been released as a complete web designer kit for free, even for commercial use.

You can download the UI Design Interface here: User Interface Design Framework
You can view the details of the framework below:

GUI Library

User Interface Design Framework

The GUI elements are based on common interface patterns (accordion, expandable panel, progress bar, tags, slide show…), that integrate usability good practices and are perfect for wireframes and interface design.

Vector Icons Library – 260 Minimal Icons for Free

User Interface Design Framework

This pixel precise icon collection have been created specifically for interface and web designers. They are based on a precise 16 pixels grid, which means that they stay clear and have a crisp look even at small sizes.

Graphic Styles Library

User Interface Design Framework

The Graphic Styles Library consists of 200 graphic styles for buttons, navigation menus or panels and 330 swatches harmonized with graphic styles for backgrounds, typography and other GUI interface elements.

You can download the UI Design Interface here: User Interface Design Framework

By Paul Andrew (Speckyboyand speckyboy@twitter).

Fresh jQuery and CSS3 Tutorials

Jul 06
2010

Today’s news is a refreshing look at some of the most recent jQuery tutorials and techniques. Accompanied with the recent popularity of CSS3, some of these new techniques are groundbreaking and others simply take a fresh look at older design techniques.

CSS3 Rounded Image With jQuery

jQuery Tutorials

In this tutorial you will use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot above.
CSS3 Rounded Image With jQuery

Image Highlighting and Preview with jQuery

jQuery Tutorials

In this tutorial you will be shown how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow your users to view a bigger version of an image that is relevant to some context.
Image Highlighting and Preview with jQuery

Simple AJAX Commenting System

jQuery Tutorials

In this tut,, you are going to build a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.
Simple AJAX Commenting System

Interactive Photo Desk with jQuery and CSS3

jQuery Tutorials

The idea of this tutorial is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.
Interactive Photo Desk with jQuery and CSS3

By Paul Andrew (Speckyboyand speckyboy@twitter).

4 Awesome Recently Released jQuery Plugins

Feb 17
2010

Where would web design be without the wonderful jQuery and its marvelous library of free plugins? Of course there are other Javascript libraries, but none of them have had such a dramatic impact on modern web design as jQuery. It really is indispensable.

For today’s news we take a look at four very different recently released jQuery plugins and, as we try to do, keep you up to date with its development.

jDigiClock – Digital Clock (HTC Hero inspired)

jQuery Plugin

jDigiClock is a jQuery plugin that has been inspired from the distinctive HTC Hero Clock Widget.

For such a complex looking plugin it is surprisingly easy to install and offers a multitude of options that control the appearance and behavior of the clock.

jDigiClock Downloads & Docs

Quicksand

jQuery Plugin

Quicksand is a very functional jQuery plugin for reordering and/or filtering items with a sleek and smooth shuffling animation.

This awesome plugin simply replaces a collection of items with another and also comes with a fair few options – like setting the duration or the easing type of the animation (optionally, Easing plugin can be used for more easing types).

Quicksand Downloads & Docs

Uniform – Sexy forms with jQuery

jQuery Plugin

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers?

If so, Uniform is your new best friend.

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Uniform Downloads & Docs

Ketchup Plugin – Form Validation

jQuery Plugin

Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.

The plugin has been designed to be styled and extended by you and it does already looks tasty and gives you the most common validations by default, but should you need to change things a little, its very easy to do.

Ketchup Downloads & Docs

By Paul Andrew (Speckyboy and speckyboy@twitter).

A Selection of Useful jQuery Plugins

Jan 27
2010

For the last few years jQuery has been the jewel in Javascripts crown. Its rapid rise in popularity not only reflects how powerful a tool it is but also how relatively easy it is to work with. It is because of these two factors that developers have been churning out plugins and new techniques at a phenomenal rate.

Thanks to all of those developers for making our life easier!

30 Stylish jQuery Tooltip Plugins For Catchy Designs

jQuery Plugins and Techniques

Tooltips can be an important factors on a web site,although little and not always visible, they do offer so much. Although important, they also happen to be a very badly misunderstood and a poorly implemented component.

30 Stylish jQuery Tooltip Plugins For Catchy Designs

45 jQuery Navigation Plugins and Tutorials

jQuery Plugins and Techniques

As many of us know, the initial 15-20 seconds of a new user’s visit to a web site will have a large impact on whether on not they are going to like or dislike the site, prompting them to decide whether they will stay or go. This means it’s vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can either learn easily or already understands.

The biggest part of this process is developing a menu that is both easy to use and intuitive, as well as styling it to fit into your site’s design. Having said all that, an easy-to-use menu should not put the shackles on creativity.

In this article they’ve listed 45 jQuery plugins and tutorials that demonstrate not only how powerful jQuery is, but also how your website’s navigation can be both creative and usable.

45 jQuery Navigation Plugins and Tutorials

25 jQuery Plugins for Working with Forms

jQuery Plugins and Techniques

Almost every website uses a form of some kind. Contact forms and other types of forms can be enhanced with the use of a number of jQuery plugins that are readily available. In this post they feature 25 useful plugins that you may be able to use in your own work with forms.

25 jQuery Plugins for Working with Forms

By Paul Andrew (Speckyboy and speckyboy@twitter).