Websites designed for children have been largely overlooked in web design articles and design roundups, but there are many beautiful and interesting design elements and layouts presented on children’s websites that are worthy of discussion and analysis. There are also a number of best practices that are exclusive to web design for children’s sites — practices that should usually not be attempted on a typical website.

This article will showcase a number of popular commercial websites targeted towards children, with an analysis of trends, elements, and techniques used to help keep children interested and stimulated.

Design That Stimulates the Senses

Humans are mentally stimulated by a number of factors, and this is especially true with children. Successful children’s websites implement a number of elements and design principles that create an environment suited for a child’s personality and interests.

Bright, Vivid Colors

Bright colors will easily capture and hold a child’s attention for long periods of time. Although color choice is a primary factor in designing any type of website, this is especially true when designing a website for children since colors make a big impression on children’s young minds. Color choices and combinations that would likely be rejected or laughed at when designing a typical website may be welcomed on a website for children.

How many of the color combinations used in the screenshots below would succeed on a website aimed at an adult audience? Not many. So, when designing a site aimed at kids, use bright, vivid colors that will visually stimulate in an unforgettable way.

PBS KIDS

Herman’s Homepage

Funbrain Playground

A Happy Mood

Kids will remember and return to a website if their experience is a happy one. Elements can be incorporated into the design to ensure that a cheerful, positive mood is presented.

Mickey Mouse Clubhouse creates a happy mood by making Mickey himself a visual focal point on the page. His happy face and body language help enhance this happy feeling, creating a welcome atmosphere.

The Play-Doh website creates a happy mood using a beaming child as the focal point.

The Fifi and the Flowertots website has a large smiling Flowertot character in visual focus, creating a happy mood.

Elements From Nature

Children are stimulated by recognizable elements that they can relate to. Because children’s experiences in life are limited, some of the things they are most familiar with are found in nature. Natural elements such as trees, water, snow, and animals are used in the websites shown below. In many cases, these elements are overemphasized through size or simplicity of design.

The Disney website alters its theme depending on what product is being promoted. In this screenshot, they use a Grand Canyon-like landscape to create a memorable visual experience.

Discovery Kids uses an underwater theme.

Club Penguin presents an arctic theme.

CBC Kids uses a seasonal theme based on simplistic, eye-catching graphics.

PopCap Games uses a grassy landscape in front of large rays of sun.

Larger-Than-Life Design

Large design elements have proved to be effective in all types of web design, demonstrated by the fact that large typography, large buttons, and large call-to-action areas have become commonplace in modern design. Because children are naturally drawn to simple, obvious, and recognizable objects, websites designed for children will increase their effectiveness through the use of large design elements.

Animated Characters

Large, animated, speaking characters are a fascinating and captivating way to grab and hold a child’s attention. Many sites designed for children use this element effectively.

Barbie

Mr. Rogers’ Neighborhood

Disney Princess

Thomas the Tank Engine

Barney & Friends

Depth in Design

Children like to let their imaginations run wild in a world that looks and feels real. This kind of atmosphere can be created through depth in design elements. This might include extruded shapes, shadows, landscapes, beveled effects, shiny gradients, or floating objects. Often, many of these elements are present in cartoon-like displays, as shown below.

The Webkinz® “Adoption Center” uses shadows, a life-like character, and other 3-dimensional elements to create a design that has depth.

Poisson Rouge creates a deep, realistic atmosphere using a window that looks outside at the sun, along with a number of other 3-dimensional elements.

Rainbow Magic creates depth in their design through a Flash-animated landscape scene that moves as the user hovers over different elements.

Navigation and Call-to-Action Areas That Stand Out

In any website design, navigation and call-to-action areas should be focal points. Children’s website designers can oversimplify these areas so that children can navigate easily. Text-based navigation on children’s websites would not be as effective as large buttons and graphics, because they would lack visual focus on a page.

Peppa Pig has a horizontal navigation bar that includes large icons and easy-to-read descriptions for each item.

The Winnie The Pooh website incorporates their navigation bar into their “forest” theme, using large wooden graphical elements that won’t be overlooked by the user.

Sesame Street has an easy-to-locate horizontal navigation bar, along with large call-to-action areas.

My Little Pony uses text-based navigation, creating a less-graphical experience, which allows focus on the content elements. This might be ideal in some situations, but on a children’s website a graphic-based navigation bar is more likely to be effective.

User Interaction

Probably one of the most important ways for a children’s website to succeed is to include elements that allow a child to interact with the site in some way. Children don’t want to do intense reading or research; they want to play and be entertained.

On a typical website, certain design elements are viewed as distracting, unusable, and cumbersome. On a child’s website, those same elements are viewed as an effective means of attracting users.

Interaction Through Animation and Sound

Effects and experiences created with Adobe Flash are discouraged in typical modern web design, but on children’s sites there is almost no other option. It’s true that JavaScript animation and effects have come a long way because of the many JavaScript libraries available, but the ease with which complex animations can be created with Flash makes this method the first choice for many commercial websites designed for kids.

The Pauly’s Playhouse site, like most of the websites featured in this article, is built entirely in Flash.

The Hot Wheels website includes an animated “car of the day” that zooms onto the screen when the page loads, creating visual interaction.

Roary the Racing Car has a brief “flash intro” with a “skip” button. This is an old-school trend in typical web design, but is an effective means of catering to a child-based audience. The intro animates through a road until the characters appear on the horizon. This helps the user feel as though they’re personally entering Roary’s animated world.

The Yahoo! Kids navigation bar is created with Flash and makes sound effects and animates when its items are hovered over. This trend is very common on many of the sites featured in this article.

Interaction Through Video

Television is known to captivate child audiences for hours, which is why “Saturday morning cartoons” have for decades been a lucrative part of the broadcast schedules for many TV Networks. Similarly, video on a child’s website adds a fun, interactive, and educational aspect to a site’s content.

Kids’ CBC – Video

Yahoo! Kids Movie Guides

National Geographic Kids – Videos

Interaction Through Games

What child does not enjoy playing games? One of the most effective ways to entertain, educate or otherwise occupy a child on a website is to include a “games” section. Almost all the websites researched for this article include games that educate, stimulate, and allow direct interaction, while also incorporating many of the design elements already discussed. Below are some examples.

CBeebies – Gordon the Garden Gnome

Toy Story – Woody’s Big Escape

Disney Pixar’s World of Cars allows users to create, share, and race their own custom cars.

Printable Elements

Kids like to have something tangible to take with them, to help them remember their experience. Printable pictures and colouring pages allow kids to have a keepsake of their experience, while giving website owners an opportunity to enhance and promote their brand outside of the computer screen. Below are some examples of printable colouring pages on kids’ websites.

Pingu Coloring Pages

Crayola Digi-Color

Peppa Pig Colouring Pages

Thomas and Friends Online Colouring

Teletubbies – Print To Color

Unconventional Methods

We’ve already discussed a number of elements that, in modern typical web design, are now considered unconventional. Sound, animation, and large obtrusive graphics are often frowned upon in typical web design. On children’s websites, these elements help the user experience. Other unconventional elements and design choices are discussed below.

Changing the Cursor

This is absolutely viewed as a bad practice in standard web design, but can be a fun, effective way of adding a playful element to a kids’ website theme. This can be done using dynamic HTML, but is more often done via Flash.

The cursor on the Discovery Kids website turns into a snapping bear trap graphic.

The cursor on the Sesame Street website is followed by a yellow star when it hovers over standard HTML elements, and turns into a yellow star surrounded by smaller animated stars when the cursor is moved over clickable Flash elements.

Talking Navigation

Sometimes a navigation bar will produce sound effects, but in other cases, the navigation links will sound out what they represent in a cheerful voice.

The PBS KIDS navigation bar speaks using children’s voices, when the user hovers over it.

The CBeebies navigation bar uses a voice to sound out the destination of each navigation item.

The Bob the Builder navigation bar speaks to the user on mouseover.

The Fifi and the Flowertots features a speaking navigation bar.

Breaking the Grid

While traditional modern web design techniques have embraced the benefits and aesthetics of grid-based design, kids’ websites can break free from an overly structured layout to create a unique world that a child will enjoy experiencing.

This is not to suggest that using a grid as the basis of the design is wrong. It may be beneficial to start with a grid, then design elements outside the grid in a controlled manner. This flexibility in design and layout is demonstrated on a number of the sites already discussed, but is also evident in the navigation bars of the examples below.

The navigation bar on the Spongebob Squarepants website is slanted, going against convention in typical grid-based web design.

The Hannah Montana website features navigation bar graphics that break the grid.

The In the Night Garden website features a very unusual navigation bar design that bears little resemblance to that found in a conventionally-structured design.

Below are some examples of websites that utilize a more rigid, grid-based format, and as a result are not as unique, memorable, or captivating as some of those already considered in this article.

Kids WB is rigid, and not as memorable.

The Crayola website is somewhat old-school with its grid format and vertical navigation.

Neopets is also designed on a more structured grid.

Granted, in some cases a stronger grid-based design would be necessary if the audience was an older child audience, as is the case with SI Kids, shown below.

Taking Responsibility

If you are attempting to reach the minds and hearts of young, impressionable people through an online experience, you are entrusted with a weighty responsibility. Children are mentally fragile, and easily affected by what they see, hear, and touch. There are certain factors that need to be addressed on every children’s website, to ensure no harm is being brought to the children.

Promoting Education

Games and other interactive elements should be created not just to promote your company’s brand and identity, but to help educate and train young minds in a beneficial and positive way. Promoting education through games and activities will show that your company cares about the user and how their online experience might affect them in the future.

Online Learning Games from Fisher Price include games that vary according to age group.

Funbrain promotes itself as “The Internet’s #1 Education Site for K-8 Kids and Teachers.”

Information for Parents

Parents will be keeping a close eye on their children’s internet habits. Many children’s sites are aware of this, so they include information that is geared towards parents. Sometimes this is in the form of a tip, as is the case with the Sesame Street games website, or simply a navigation item that points to a parent’s section.

Sesame Street Games includes a “Parent Tip” box.

BEN 10 has a “Parent Stuff” link in their primary navigation bar.

Thomas the Tank Engine includes a “parents” link.

Usability Testing

Finally, one of the best ways to help build a successful online experience for children is through watching children navigate and interact with your site’s games and other unique features. Not all companies will have the budget for extensive testing, but almost all will have the ability to do at least a minimal amount of testing — even if it’s with just one child. This will allow you to see the site through a child’s eyes and make any necessary modifications, the same as would be done in any usability tests.

Companies like Disney, Sesame Street, and PBS, of course, have been studying the behaviour of children for years, so many of the examples showcased above could be utilized to form the basis for a successful children’s website, even if no usability testing is done.

Conclusion

Here is a summary of both conventional and unconventional best practices for designing a website for kids.

Conventional Best Practices

• Create elements that are large and visually memorable
• Use bright, vivid colors that stimulate the senses
• Incorporate elements from nature
• Create depth in the design
• Add navigational elements that are large and easy to find
• Use video
• Include printable elements
• Break the grid
• Make modifications based on usability testing

Unconventional Best Practices

• Create a happy, playful mood
• Use animated characters
• Use graphic-heavy navigation bars
• Use Flash animation abundantly
• Embed motions and sounds that trigger on page load
• Include a “games” section
• Change the cursor to contribute to the theme
• Add voices to navigation rollovers
• Be accountable to both children and parents

A web designer who has worked on a children’s website would likely say that it was one of the most fun and interesting projects they’ve had the privilege of working on. If you ever have the opportunity to create a user experience that is geared towards children, be sure to follow some of the proven methods demonstrated on many of the sites discussed here, and your website will have a good chance to be a big hit with children.

However, regardless of your experience level, there are ways to speed up the common design tasks. You should find some of these not-so-well-known tips and strategies listed below very helpful for your workflow. And please feel free to suggest more ideas in the comments to this post!

General Workflow and Customization

1. Customize your workspace in design applications

When working, it is important to have all necessary tools and panels readily available to speed up your workflow. However, the tools and panels needed, fluctuate based on the project at hand. Adobe design programs provide several standard default workspace settings, such as Type, Web, Video, etc.

These are beneficial for a start, but customizing workspaces to fit personal and project needs can further speed your workflow. Experiment with different set-ups to find the best settings. It is best to save a workspace after working within a document for a while rather than at the beginning.

1. While working in a document: Open, close, and reorganize panels, window layout and interface to optimal conditions
2. Go to: Window > Workspace > Save Workspace (In Dreamweaver, the menu option is listed as Workspace layout)
3. Give the workspace a name (ex. Mike’s Logo Project); In some cases, you will be asked to select which settings to save, if so select the appropriate items
4. To use the layout in the future, Go to: Window > Workspace > title of your workspace

2. Customize your preferences in design applications

Numerous program settings are stored in the Adobe applications, including general display options, file-saving options, performance options, cursor options, transparency options, type options, and options for plug-ins and scratch disks. These preferences are just that, preferences. It is no surprise that not everyone agrees with the same preferences, so for an optimal design experience, you should customize these preferences in each of your design programs to best suit your needs.

Edit Preferences

• Choose Edit > Preferences > General (Windows) OR choose Program Name (ex. Photoshop) > Preferences > General (MAC)
• Preference settings are saved each time you quit the application.

Suggested Preferences to Change

• Photoshop: number of history states, interface display, unit measure default
• Illustrator: keyboard increment, selection tolerance, baseline shift default, tracking default, unit measure default, grid layout, appearance of black
• Dreamweaver: code format, code hint, copy/paste, css, css shorthand, new document, browser preview defaults, validator
• Flash: on launch default, actionscript, drawing, text, warnings, PSD & AI file import
• InDesign: drag-and-drop text editing, dynamic spelling, auto-correct, leading, unit measure default, keyboard increment, dictionary, display performance, appearance of black

3. Combine common graphics from past projects into one document for easy use in the future

Design should never repeat itself, however there are certain elements that are often repeated out of necessity, such as icons, logos, symbols, etc. (particularly when you are creating a wireframe). Combine all of these common elements into one Photoshop or Illustrator document for future use. This will eliminate the search through past design documents for an icon or symbol you have already created.

4. Learn and practice using keyboard shortcuts, then create your own

Sure command-C and command-V are helpful for copying and pasting, but don’t stop there. A keyboard shortcut exists for most of the common commands and if there is not one, you can create your own. The time saving ability of keyboard shortcuts is priceless.

To create your own select Edit > Keyboard Shortcuts (Windows) or Program Name (ex. Photoshop) > Keyboard Shortcuts (Mac OS). You can create different sets of shortcuts for different tasks
if desired. Browse to the command that you would like to edit and enter a new shortcut combination. Note: To enter the key combination, press the keys on the keyboard. You do not need to spell out the key names, such as Control, Option, and so on.

Resources for finding and learning shortcuts:

• Adobe Photoshop CS4, Illustrator CS4, Dreamweaver CS4, InDesign CS4 – Noble Desktop
• Adobe Flash CS4 – Subdivision

Photoshop

5. Create reusable files or templates with commonly used settings

In general, when beginning a website mockup/design in Photoshop, there are several things you do (or should do) automatically before you begin, such as set the size and dimensions, create guides, and create common layer folders (see Always organize layers into several folders below). Instead of creating these generic settings each time, create a template file with these settings already created.

Next time you begin to design a website mockup, set up your basics, then stop and save a version labeled “webtemplate.psd,” or any other relevant filename. Then begin every future design with that template file. You will appreciate eliminating this repetitive task the next time you design!

6. Record and use actions for repeated tasks

One of Photoshop’s most effective time-savers is the actions panel. It allows you to record a task or series of tasks to be used later for similar projects. As with many Adobe tools, there are a number of helpful default actions already set-up, however, the actions panel is best used when recording custom actions, many of which are project specific.

For example, if you had a series of filters and adjustments applied to an image within a design and you needed to apply the same effects to several other images, then recording the steps would allow for an exact and quick replication of the effect.

The actions panel can be very dynamic or it can be very simple, depending on your needs and experience. Follow the steps below for the basic functions of the actions panel. Then check out the additional resources listed here for further learning.

1. Open the Actions Panel: Window > Actions OR use the keyboard shortcut, Option-F9 (MAC) Alt-F9 (WINDOWS).
2. Create a new action by clicking the New Action button, located at the bottom right of the actions panel.
3. Once a new action is created, it automatically begins recording. If not, click the round record button, located at the bottom of the actions panel.
4. Proceed with applying any adjustments, filters, size changes, etc. until the desired effect has been reached.
5. Once finished, click the Stop Playing/Recording button, located next to the record button at the bottom of the actions panel
6. If a specific task was recorded during the action that is undesired, that specific task can be deleted without re-recording the action by selecting the task, then clicking the delete button.
7. To play an action, select the appropriate layer to apply the action to, then click Play. Photoshop will perform the actions live on the screen, but should only take a few seconds.

Helpful Resources for Photoshop Actions

• Creating a Photoshop Action – Veerle’s blog
• How to use Photoshop Actions (Video Tutorial) – Bukisa
• The Ultimate Collection of Useful Photoshop Actions – Smashing Magazine
• 400+ Time Saving Photoshop Actions – Design Reviver

7. Use batch actions for repeating a task on a group of files

When using basic Photoshop actions, you must click play each time to apply the action. This isn’t convenient when the same action needs to be applied to a large group of files. This is where batch actions becomes very helpful. The batch automation panel allows for the application of an action to a folder of images or files. For example, if you had a folder of 50 images that need to be resized to 500×500px and rotated 90 degrees, it would be time consuming to apply the action individually to each file.

Rather, configure the batch actions dialog box to apply the action to all files in the folder, then Photoshop will do the grunt work and spit out all 50 images, rotated and resized.

To access the batch actions panel, select File > Automate > Batch.

8. Use the image processor for resizing a group of images

Similar to the batch actions panel, the image processor selects a folder of images or all open images and resizes and saves them to a desired location. The image processor is better for resizing images than the batch actions panel, though the same action can be performed in both.

To access the image processor, select File > Scripts > Image Processor.

9. Make history snapshots to create comparable versions of a file

Photoshop’s history panel is a life-saver sometimes, however it is even more convenient to create multiple instances of the same file to be compared later. The Snapshot command lets you make a temporary copy (or snapshot) of any state of the file. The new snapshot is added to the list of snapshots at the top of the History palette. Selecting a snapshot lets you work from that version of the image.

Create a Snapshot

1. Select a state and do one of the following:
   • To automatically create a snapshot, click the Create New Snapshot button on the History panel, or if Automatically Create New Snapshot When Saving is selected in the history options, choose New Snapshot from the History panel menu.
   • To set options when creating a snapshot, choose New Snapshot from the History panel menu, or Alt-click (Windows) or Option-click (Mac OS) the Create New Snapshot button.
2. Enter the name of the Snapshot in the Name text box.
3. Choose the snapshot contents from the From menu:
   • Full Document – Makes a snapshot of all layers in the image at that state
   • Merged Layers – Makes a snapshot that merges all layers in the image at that state
   • Current Layer – Makes a snapshot of only the currently selected layer at that state

10. Always organize layers into several folders or groups

It is best practice to always label layers and organize them into manageable folders/groups. It allows for quick navigation of layers and the movement of groups of layers. For example, when designing for the web, it is helpful to have several folders, such as header, sidebar, footer, etc. If the sidebar needed to be relocated within the file, select the folder and drag the entire group to the desired location.

To create a layer folder, click the create a new group icon, located to the left of the create new layer button inside the layers panel.

11. Create adjustment layers instead of directly editing a layer

When editing images, using Photoshop’s adjustment features is a life-saver because of the expansive amount of control you have over the appearance. However, it isn’t always an exact science and you may not like the final outcome. This is where adjustment layers come in handy.

Without harming the original layer, Photoshop will apply the adjustment as a clipping mask to the previous layer or the entire document. You may apply as many adjustment layers to one layer as would like and the beauty of them is the ability to hide them with the click of a button, just like any other layer.

To create a new adjustment layer, select Layer > New Adjustment Layer > the desired adjustment

12. Right-click to select a layer

Simple as it sounds, a right-click or control-click (Mac), can save a lot of headache when trying to locate layers. Within a document, to select a layer without scrolling through the layers panel, hover over the object to be selected and right click. Several layers will be displayed, click on the desired layer to move to that layer.

Illustrator

13. Record and use actions for repeated tasks

Recording and using actions is common to Photoshop users, however little-known is that Illustrator possesses the same capability of recording and playing actions.

1. Open the Actions Panel: Window > Actions
2. Create a new action by click the New Action button, located at the bottom right of the actions panel
3. Once a new action is created, it automatically begins recording. If not, click the round record button, located at the bottom of the actions panel
4. Proceed with applying any transformations, adjustments, effects, etc. until the desired outcome has been reached
5. Once finished, click the Stop Playing/Recording button, located next to the record button at the bottom of the actions panel
6. If a specific task was recorded during the action that is undesired, that specific task can be deleted without re-recording the action by selecting the task, then clicking the delete button
7. To play an action, select the appropriate object to apply the action to, then click Play. Illustrator will perform the actions live on the screen

14. Create custom swatch libraries

Color is important to the success or failure of a design. Therefore, choosing colors can be a difficult task. So why not simplify the process by only browsing through colors that are worthy of being selected? Adobe provides a number of excellent swatch books that are a good start, but even those can be overwhelming. Creating custom swatch libraries, organized by project or client, allows for better color management.

1. Open the swatches panel: Window > Swatches
2. Locate and create the desired swatches. Create a new swatch by clicking New Swatch, located at the bottom of the swatches panel.
3. To add a swatch from another swatch book, click and drag the swatch into the swatches panel.
4. Optionally, organize swatches into color groups for easier browsing. For example, group all reds and browns together. To create a color group: Select swatches to be included by holding the Command key (Control key on Windows) and clicking. Then, click the New Color Group button, located at the bottom of swatches panel. Give it a name, and click OK. Add additional swatches to the color group by clicking and dragging them into the group.
5. Once the swatch panel has been organized and the desired swatches have been added (you can delete undesired swatches also), click the swatch panel options button, located in the upper right corner of the swatches panel. Select Save Swatch Library as ASE or Save Swatch Library as AI. ASE stands for Adobe Swatch Exchange and should be chosen if you would like to use the swatch library in other Adobe programs, like Photoshop or Indesign. If not, choose save swatch library as AI and the swatch library will only be available in Illustrator.
6. To open a swatch library: Click the swatch panel options button, located in the upper right corner of the swatches panel. Then select Open Swatch Library and find the category, User Defined. The swatch library you created will be listed under its given name.

15. Use the “same” command to select like elements

A small but mighty time-saving feature, the “same” command in Illustrator allows the selection of all like elements, such as all objects with a red fill color or all objects with a 5pt stroke.

1. To use the “same” command: Select the object with the desired characteristic. For example, if you want to select all objects with a red fill color, then select any object with a red fill color within the document.
2. Go to Select > Same > the desired command

Also, check out the “object” command for similar options. The “object” command will select all common elements, such as all brush strokes rather than all red brush strokes.

1. To use the “object” command: Go to Select > Object > the desired command

16. Organize elements into layers for easier management

Layers, another common photoshop feature, also exists in Illustrator, however it is not as widely used. The layers function similarly to those in Photoshop. Unlike Photoshop, Illustrator does not automatically place new objects into separate layers, but rather places them into sub-layers. Click the arrow next to the layer to access the sub-layers. It is important to keep in mind that Illustrator and Photoshop are different programs and each have their own purposes.

The biggest time-saving advantage of layers, is the ability to lock them, which allows for easier selection and editing. Also, layers add the ability to create clipping masks.

1. To access the layers panel: Window > Layers
2. To create a new layer, click Create New Layer, located at the bottom right of the layers panel. To create a sub-layer, which functions similarly to layers within layer groups in Photoshop, click Create New Sub-layer, located next to the new layers button.

17. Use common symbols from the Glyphs panel

Anybody need a copyright symbol, some arrows, or a email symbol? If so, utilize the Glyphs panel in Illustrator. Many common symbols and some uncommon ones too, are listed there. Each font has its own set of glyphs, however symbol fonts such as Wingdings, Webdings, and Zapf Dingbats are the best to browse through for symbols from anything such as mail and phone symbols to arrows and circles.

1. To access the glyphs panel, select Type > Glyphs
2. To change the font family, browse through the drop down menu, located at the bottom of the Glyphs panel

InDesign

18. Create stylesheets for quick formatting

Stylesheets in a web designer’s mind usually means only one thing, CSS stylesheets. However, if you are working on a print project in InDesign, stylesheets will also save you hours of time formatting, just as CSS stylesheets do. You can set them up as you work, saving individual styles to be applied to other similar areas.

Styles are handled in four separate panels: character styles, paragraph styles, table styles, and object styles. To add a new style, create the desired effect, then highlight/select the style and click the Create A New Style button. To apply the style, select the text/object to be formatted and click on the new style you created in the styles panel.

To access the styles panels, select Window > Type & Tables > Paragraph Styles OR Character Styles OR Table Styles. The object styles are located under Window > Object Styles.

19. Use Data-Merge for automatically personalizing stationery, invitations, etc.

500 personalized invitations to be completed by tomorrow? Not a problem, if you use the data merge feature in InDesign, also commonly referred to as mail merge. You merge a data source file with your current document and InDesign automatically produces each personalized version of the file. Use data merge for letters, envelopes, invitations, mailing labels, post cards, etc.

To access the data merge panel, select Window > Automation > Data Merge.

Additional Resources for Using Data Merge

• Adobe InDesign CS4 Data Merge – Adobe

20. Vow to learn and use one time-saving tip per day

You can’t commit all of these tips to memory in one day, so pick one to learn everyday, or at least one per week. Do something once, ok. Do something twice, great! Do something 10 times, now that’s dedication. You can also make a note or even a full-color PDF document, if you wish, that contains some of these time-saving tips for quick reference.

About the author

Michael Shelton is a web designer, developer and writer based in the United States with over 5 years of freelance and professional experience in the design field. He writes for a number of blogs across the internet and occasionally on his own website, www.michaeladesigns.com, where his entire design portfolio can be found. You can also follow him on Twitter.