1stwebdesigner |
| 40 Useful jQuery Techniques and Tutorials for Great User Interface Posted: 03 Dec 2010 01:00 PM PST jQuery has really captivated our development through web. It is a powerful tool that improves the user’s interactivity in Web applications. With jQuery, development in your website is much easier and more flexible for the element in your website. In this post, I’ll be giving you 40 jQuery techniques and tutorials that will help you improve your skills. 1. Custom Animation Banner with jQueryIn this tutorial you will learn how to create a custom animation banner with jQuery by using the jQuery Easing Plugin and the jQuery 2D Transform Plugin. The idea is to have different elements in a banner that will animate step-wise in a custom way. 2. Moving Boxes Carousel with jQueryIn this you will learn how to create a slider, that have buttons to change panels and the panels zoom in and out. 3. Quick Feedback Form – jQuery & PHPA simple solution to this problem. Powered by jQuery, PHP and the PHPMailer class, this form sends the users' suggestions directly to your mailbox. 4. Wijmo – jQuery UI WidgetsWijmo is a complete kit of over 30 jQuery UI Widgets. It is an extremely dangerous mixture of jQuery, CSS3, SVG, and HTML5 that when combined becomes an unstoppable force on the web. 5. One Page Navigation – jQuery PluginThis is a practical navigation plugin by Trevor Davis that lets you scroll smoothly when the navigation is clicked – this plugin is built upon the jQuery ScrollTo plugin by Ariel Flesler. 6. RSS Reader With jQuery MobileBuild a simple Tuts+ RSS reader, using PHP and jQuery Mobile. When we're finished, you'll have the ability to add this simple project to your iPhone or Android phone with the click of a button, as well as the skills to build your web apps! 7. Easy Accordion – jQuery PluginThe Easy Accordion plugin by Andrea Cima Serniotti will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. 8. Lettering – jQuery Typography PluginIn this article you will learn how to create, for example typographical CSS3 posters, or for really custom type headings, while keeping the text selectable. 9. Annotation Overlay Effect with jQueryCreate a simple overlay effect to display annotations. 10. Snippet – jQuery Syntax HighlighterSnippet is a cool jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet jQuery plugin provides a quick and easy way of highlighting source code passages in HTML documents. 11. Google Powered Site Search With jQueryIn this logical tutorial you will learn how to create a branded custom search engine simply by using Google's AJAX Search API, with which you can search for images and video and news items on your site – and you can also get general web results. 12. Build a Better Tooltip with jQuery AwesomenessIn this tutorial ,It shows how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier. 13. Simple Tooltip – jQuery & CSSIn this tutorial by Soh Tanaka you will learn how to create simple tooltip with jQuery and an incredibly simple styling with CSS. View Demo14. Coda Popup BubblesjQuery tutorial shows you how to create slick popup bubbles that appear when hovering over the target object. 15. Exposure jQuery PluginExposure is an image viewing plugin for the jQuery JavaScript library. It’s designed for creating rich, fully customizable viewing experiences, and can handle very large amounts of images without pushing your bandwidth through the roof. 16. Giveaway Randomizer App – jQueryIn this tutorial you will learn how to create a dedicated randomizer jQuery application. 17. jQuery Smooth Tabs PluginjQuery Smooth Tabs is easy to use plugin, which allows you to display your content with some effects, for better user experience. All you need is a single container for your desired tabs and content, some nice CSS and images. 18. TN34 Timetabs – jQuery PluginThis jQuery plugin by Mario Alves creates tab container that switches automatically every cycle to next tab. It is compatible with most modern browsers. 19. Full Page Image Gallery with jQueryIn this tutorial you are going to create a stunning full-page gallery with scrollable thumbnails and a scrollable full screen preview. 20. bgStretcher – jQuery PluginbgStretcher (Background Stretcher) is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area. The plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is configurable). 21. SlideNote – jQuery Plugin For Sliding NotificationsSlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application. 22. Easy List Splitter – jQuery PluginEasy List Splitter keeps the HTML to the minimum. No unnecessary elements or inline styles are added to the code. You'll get a clean plain HTML with some classes that you can use as hooks to easily style your lists. Choose whether to order your list items vertically or horizontally. You can then decide whether to modify the default CSS or apply a new one. 23. Create a Slide Tabbed Box using jQueryShow you how to create a set a module tab interface that slides content left and right as you click on the tabs. 24. Create a Tabbed Interface Using jQueryThis very detailed step-by-step tutorial will show you how to create a tabbed interface using jQuery. 25. jQuery Tabbed InterfaceTabbed Interface or Tabbed Structure Menu show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect. 26. Create Sliding Image Caption with jQueryThis image gallery tutorial shows you an interesting interaction technique for having captions that slide up to reveal more information about a particular image when the user hovers over it. 27. Image Cross Fade TransitionThis tutorial will show you how to fade another image in, superimposing onto the current image when the user hovers it. It can be a great way to display more information about a particular image. 28. Image Reveal using jQuery |
| How To Actually Use Negative Space As Design Element Posted: 03 Dec 2010 02:00 AM PST Negative space is an important element in making website layouts and logos although it is very tricky to combine negative space in designing but once you are able to do it, it is not something to be overlooked or avoided. I usually call it white space, and to be honest many new designers usually make a mistake of creating chunky websites with too much information in it and without any spacing. But believe me spacing does wonders, for even young designers – you can look professional quickly with minimal website..just put less content use negative space and you’ll be more successful than others starting just out. But note - great design takes all the space available into consideration, both used and unused elements. What is Negative Space?Negative Space is also called white space. These are spaces without content although they are called white space, "Negative Space" doesn’t have to be white. It can be any color, it just doesn't have any content. Negative space is also a design factor although it is not easily recognizable, basically the use of negative space is to add symmetry to your layout and make it look clean, natural for visitors. Even if your website has great content but will have a poorly designed layout, it just won’t work – you will fail to create effective website, I think good layout design and native navigation through it is even more important than content! Negative Spaces Revealed! – ExamplesHere's an example of an optical illusion that uses negative space. It’s a chalice but with the white space you see the faces of two people facing each other. This is how you spot negative space, with only 1 object but can be interpreted as two or more different things. Negative Space in Web DesigningDesigning a webpage layout includes objects, text and images in an attractive manner. This also includes negative space – the spacing of objects from one another. You don't make a webpage layout with images that overlaps with another image right? That is how negative space is used. It keeps the viewer's eyes focused on the objects. Negative space should be used to balance or align objects in a design to make it more appealing to the viewers. Filling your navigation with big fat buttons might be a good idea but just because there is a space that could be filled doesn’t mean you should place something in it. For navigation I would suggest just to use small icons with little but noticeable text just to make it sleek, simple..and don’t forget to use nice spacing. Here are two images that I made to demonstrate how negative space can affect web page layouts. It’s a typical webpage template that has a navigation bar/buttons, logo, content area, and Latest News part. I simplified it to black and white so that we can easily spot negative space. Let’s identify the parts:
Here is a negative-spaced layout. See the consistency of the spacing? You can see the objects neatly and can focus on them with ease. The spacing between the objects is consistent, producing a good design. Now here is the not-so-negative-spaced design, although a bit exaggerated. The navigation boxes aren’t aligned on anything below, the part where you put your page title or logo is a little large and occupies the upper left of the page, the main content occupies the left to the center portion of the page and the latest news part might be distracting for the scrollbar. This is just an example of how negative space can destroy a web layout. You can easily spot the inconsistencies in the spacing of objects, it might create distractions to viewers. Negative Space in images.Here are two images that I also made, one with much negative space and the other not so much. You can focus on "the box" easily on this image because the object is not occupying the whole page. You find it difficult to focus on "the box" since you can’t look at the square and the text at the same time because the object is too large and it occupies the page completely. That is how negative space works, it should help viewers focus on the objects that they should see instead of making their eyes look all over the place. If that happens they might not see what they are looking for in the website making them close their browser tab or go to another website. Considering Negative space in Making logosNothing can beat a logo with a clever mix of design and negative space, you include 2 or more objects in only 1 logo. See the negative space between the E and x that looks like an arrow ? Here are some logos that uses negative space effectively. 1. Martini HouseTwo wine glass combined forms a shape of a house. Image by EBrown
2. Wooden HouseA tree with a negative space shaped like a chimney and a roof. Image by iskender
3. ATACKAn upside down tack and a triangular white space forming a letter A. Image by Logomotive
4. BabelfishLetter B with a white space in the middle that is cleverly shaped to look like a fish. Image by Rokac
5. Paint the CityWhite space that is shaped like skyscrapers while the red color forms the shape of a bucket. Image by HitByReindeer
6. Yoga AustraliaThe shape of Australia’s territory/map is formed inside the leg and the arched back. Image by RoySmith
7. Helping Hands for PetsHere shows the shape of pony and a cat in green portion, a dog and a bird formed by the white space. Image by PixelJuice
8. Wiesinger MusicPiano keys that forms the letters W and M. Image by NEXQUNYX
9. Spartan GolfAn arc that looks like what’s on the top of a Spartan helmet and a golfer that forms a Spartan face. Image by Lexlogo40513
10. QuotekidSingle opening quote and a single closing quote combined to form a face. Image by tabithakristen
Negative Is Actually Positive!Negative space can be really tricky to incorporate in designs and especially in logos but once you are able to pull it off it can really make your website easier to view or help you in advertising your product. What’s your experience designing layouts using white space, some valuable tricks you learned you would like to share here? Open to discussion!     |
| You are subscribed to email updates from 1stwebdesigner - Graphic and Web Design Blog To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
Comments (0)
Post a Comment