Designing Web Sites in Photoshop: Know What jQuery Can Do
Perhaps the biggest difference between designing for print and for the web is the opportunity to use interactivity. Sure, you can build your web pages just like printed pages that appear on screen, but if you do so you’re leaving on the table some of the benefits the web has to offer.
Interactivity in web pages is provided by JavaScript, the programming language that runs in the browser. In the early days of the web, JavaScript got a bad name because it was often used for gratuitous animation and other useless effects. More complex interactions were complicated to program, especially when taking differences between browsers into account.
JavaScript Comes of Age with jQuery
Today, however, JavaScript has come into its own. Designers have realized that no one except the creator likes useless animations, but that the ability to have the web page change without having to load a new page from the server is an effective technique for creating better user experiences. And an overwhelmingly popular JavaScript library, jQuery, has eliminated much of the programming complexity.
If you’re coding your own pages, it would serve you well to learn to use jQuery effects. It takes a little study, but it is entire accessible to anyone with the desire to learn it.
In this article, though, I’m assuming you’re doing designs in Photoshop and then handing them off to someone else to code. In this case, you don’t need to know a thing about how JavaScript works, but you do need to know what can be easily done by a good web coder, so you can use these techniques in your design.
There’s an incredible range of things you can do with jQuery (and JavaScript in general). The simpler ones for designers to use are those that work entirely with content that has been loaded as part of the page, with all the interactivity occuring in the browser. Implementing so-called AJAX interactions, in which the JavaScript code in the browser gets additional information from the server without loading a new page, is somewhat more complex.
The Many Ways to Show and Hide
The most widely useful technique is the ability to show and hide content. There are many variations, including:
- Basic show/hide, in which a "details" link is clicked and new region of content appears.
- Accordion, which is a stack of headings with hidden content associated with each one; content is shown when the heading is clicked. Can be vertical or horizontal.
- Tabs, in which multiple content regions are grouped with a set of tabs above or to the side, each acting like the heading in an accordion.
- Tooltips, which are small text areas that appear, typically when hovering over an icon.
- Carousels, which typically show a series of items in a horizonal stripe, with arrows to scroll to additional items.
- Sliders, which show a series of items one at a time, often with a timed automatic advance. These have become very popular for "featured content" at the top of news sites.
- Slideshows, which show a series of images one at a time, typically fading from one to the next.
- Lightboxes, which show content in a pop-up region.
All of these techniques enable you to pack more information into a smaller area by displaying only some of it at a time. Viewers have less scrolling to do, can more easily focus on the most important content, and are more engaged. Adding these tools to your design repertoire is essential for creating modern web designs.
In your Photoshop designs, you can only approximate these effects, of course. Show each interactive element in each of its possible states, using layers that can be turned on and off to simulate the interaction.
Styling jQuery UI Elements
Some of the most common interactions are part of the jQuery UI library, which has an interactive theme designer. If you want to keep your coding costs down, use the theme designer to style the jQuery UI elements you want to use. You can then download the theme to provide whoever is coding the site with ready-made styling, and use screen captures from the theme designer page in your Photoshop mock-ups.
Learning More About jQuery
There’s many more things you can do with jQuery, from creating interactive calendars and slideshows to all kinds of navigation and animation. Here’s some pointers for learning more:
Topics: Web Design