|
In today's post, we're going to take a look at how you can
effectively use JavaScript in Web Design. JavaScript has allowed web
designers to easily enrich their visual designs with new features and
elements that can make using a website a much more interactive,
intuitive and enjoyable experience. In recent years, the introduction
of JavaScript frameworks such as jQuery, MooTools, Scriptalicious and
ExtJS has simplified this process considerably, allowing designers to
be innovative with their user interfaces. To begin today's post, let's
take a look at a generic wireframe to your typical website.
Below you can see a wireframe that consists of a header, a login
area, central page elements, a search box, a sidebar, banner adverts, a
footer, floating elements and a website toolbar. This could easily be a
blog-site, a business's official website or any number of different
projects.
As designers, most of our pages share a few key elements and I
believe that the elements in this diagram represent the majority of
those we might encounter on a daily basis.
So, let's imagine for a moment that we've just created a basic
layout for a site using the above as a guideline. We know that we can
style any of the elements in this layout using either CSS or some PSD
graphics, but what if we want to add more interactivity to our elements
so that they allow our users to *do* more with the site?. This is
where JavaScript can come in useful.
JavaScript offers a whole wealth of benefits to web designers and
web developers. Let's go through some of them. If I have a standard
search box on my site, that allows my users to search through the
content that's available and if they're lucky enough, they'll find what
they're looking for. If however, I have a JavaScript powered Search-Box
that offers them auto-complete features, they'll be able to quickly and
easily refine their search queries to get the content they want,
without needing to reload the search page lots of times.
We've just introduced a time-saving feature and that's going to make
life easier for our users. These are the kinds of functional benefits
introducing JavaScript powered elements into your design can offer to
the people who are going to be using your pages the most.
JavaScript can also offer a lot of benefits to you as a web
designer. Let's say that your site depends on ad-revenue a lot and that
to maximize this, you might need to be conservative with your use of
space. This can have major impacts on your design if you're just using
a CSS/XHTML layout, but not if you're using JavaScript to help solve
the problem. As an example, if I wanted to include a login-form at the
top of my page, but couldn't because we need that space for adverts, I
could easily introduce a JavaScript powered button in it's place that
could slide-down the login area whenever someone needed it. The result?
I, the designer, get to include my login area at the top of the page
afterall but the site's advertising needs don't have to be scarified.
It can be safely said that JavaScript has had a huge impact on the
web design landscape. Looking at just one JavaScript framework alone,
jQuery itself now powers almost 20% of websites online. With this in
mind I would certainly recommend continuous learning about your
framework of choice so that you get ideas for what's possible with your
interfaces. Just remember to cover the basic JavaScript fundamentals
before hopping onto the framework bandwagon!.
Okay, so let's get to the really useful content in this post. I
wanted to show you guys how you can use JavaScript (in this case
jQuery) to enhance all aspects of conventional Web Design, from things
you can use JavaScript for to make your Header more interactive, to
tutorials you can use to create innovative new menus or search features
that your users and clients will be impressed with. We're going to
start from the top of the page (with Login Forms) and end it with
website toolbars.
I hope you find the post useful!
Login Button/Form
Twitter-like Sign-in Box for Your Header
Horizontal User Login Block Using jQuery & CSS
An easy-to-create Login Panel with jQuery and CSS
An Ajax & jQuery Simple Login Example
A Sliding jQuery Login Panel for Wordpress & Buddypress
How to create a slick jQuery Login Form for Wordpress
Wordpress Front-page login with jQuery Sliding Panel
jQuery OpenID Login Form
Search Box
How To Create A Twitter-like Search With jQuery and Ajax
How To Create An Apple-Style Search Suggestion Form
How to Improve your search boxes with jQuery
How to Easily add AutoComplete features to your searchbox
How To Create a Facebook-Like Search UI using jQuery
jQuery AutoComplete Tutorial (jQuery + JSON + PHP)
jQuery AutoComplete Tutorial (jQuery + XML)
jQuery AutoComplete Tutorial (jQuery + JSON + GRAILS)
jQuery AutoComplete Tutorial (jQuery + JAVA + JSP )
Mike More's Realtime Search Stream
Page Header
jQuery Caption Slider for your Header
A Persistant jQuery Header
A Sprite-Based jQuery Animated Header
An Impressive Animated Landscape with jQuery
How to build an animated Header in jQuery
Parallax based Header in jQuery
Slide-in Panel with jQuery
Page Adverts & Banners
jQuery Rotating Banner 1
jQuery Rotating Banner 2
jQuery Pop-out Ad
jQuery Page Peel
jQuery Corner-Ads
jQuery Vibrate
jQuery Text-Link Ad Rotation
Creating a Rotating Billboard System with jQuery & CSS
Navigation
How To Build A LavaLamp Style jQuery Menu
36 Eye Catching jQuery Navigation Menu
10 Incredible jQuery Navigation Menus
24 CSS/jQuery Navigation Menus
45 jQuery Navigation Plugins And Tutorials
jQuery Navigation For Web Design
30 jQuery Drop-Down Menus For Navigation
How to Build and Enhance a 3-Level Navigation Menu
A Different Top Navigation
Page Elements
jQuery Masonry
jQuery Colomnizer Plugin
jQuery UI Layout Plugin
jQuery Columns Plugin
YouTube-Like jQuery Adaptable Views
jQuery Layout Background Plugins
jPolite jQuery Layout Plugin
Layout Background Plugin
Style Author Comments Differently with jQuery
jQuery Sequential List
jQuery Feed Menu
Read More Button Options (1)
Read More Button Options (2)
Sidebars
jQuery Sidebar Sliding Tab Menu Tutorial
jQuery Dynamic Collapsible Sidebar
Creating A Sliding Sidebar That Follows The User
8 Amazing jQuery Accordians
Sliding SideBar Menu in JQuery
How To Create A 'Mootools Homepage' Inspired Navigation Effect Using jQuery
Apple Flashy jQuery Sidebar
Floating Elements
jQuery Floating Slide-In Menu with Anchor Link
jQuery Floating Comment-Form
Create a Floating Menu with jQuery
Create Floating Navigation using jQuery
jQuery Floating Message Plugin
jQuery Top-Floating Message Box
jQuery Sticky Floating Notes
Call-To-Action Buttons
Create an Animated Call To Action Button with jQuery
jQuery Animated Buttons with CSS
jQuery Fancy Radio Buttons
jQuery GlowButtons
jQuery UI Buttons tutorial
Sharing Elements
Create a Mashable-Style Drag To Share With jQuery
Social Sharing Icons With A Cool jQuery ToolTip
Create a Fancy Share Box with CSS And jQuery
How to Create a Social Menu with jQuery
A jQuery Version of ShareIt
Page Footer
How to create a Pinned Footer for your site
How to create a dynamic animated footer ad for your site
Cross-browser Sticky Footer with Fluid Height
How to create a Sticky-Footer
How to automatically use jQuery to size your footer Height
Fixed-Position Website Toolbars
How To Create a Website Toolbar And Add Widgets to it
Facebook Style Footer-Toolbar from Soh Tanaka
JixedBar - A Fixed-Position Toolbar plugin for jQuery
Floating Footer Toolbar
CSS3 Fixed-Position Toolbar for your site with Social Networking Icons
And that's it!. If you're interested in learning more about jQuery
and JavaScript and would like to stay up to date with the latest
articles, please feel free to subscribe to the RSS feed. Alternatively, you can access to my weekly and daily JavaScript recommendations by joining either my Fan page or my Facebook Group, jQuery Awesome. Thanks!
|