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.
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.
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