DESIGNER PITFALLS

Promising more than you can deliver
Designers want the web site that they create in this class to be beautiful, easy to use, and a "portfolio jewel". In their eagerness to please the client and create a masterpiece they may promise more than they can deliver. If you are asked to create something you have never done before such as flyaway navigation or a flash animation here is how I recommend you handle it.

1. Tell the client you will research the concept and get back to them within 2 weeks regarding whether or not it can be included in the project.

2. During the 2 week period experiment with the software to create the product in question. Make simple images and place them in flyaway menus. It is OK if the images are not the ones you will use at the site, the purpose of the exercise is to see if you can master the concept.

3. If you cannot create a working model in 2 weeks explain to the client that you cannot produce the item and offer an alternative which you have successfully completed before. It is much better to be able to deliver a smaller simpler site which is working than a big fancy one with "bells and whistles" which are broken.

Not designing until you have all elements
Every designer has their own unique system for gathering inspiration. For some it is the color scheme, others need photos, while some students draw inspiration from other sites on the Web.

I have seen students wait too long to begin a design because the client had not supplied any photos. If photos are what make you tick on a design level, then go find some photos on a CD or the web and use them as inspiration for the design. If the client gets it together and eventually supplies you with photos, you can them insert them into your design. If the client never supplies the photos, inform them that they will need to use yours or purchase some stock art that you select.

The important concept here is to move forward regardless of whether the client identifies a color scheme or provides lovely photos. If the layout of the navigation, logo, photo and content is approved color and specific photos can easily be swapped in or out.

Not testing your template on all browsers and platforms
Certain nested table layouts, flyaway menus, CSS code and layer code is extremely delicate and will need to be tested on all browsers and platforms before the template is handed off. It is much easier to fix the broken code when there is only one copy of the page instead of 2 weeks before the end of the semester when 25 pages need to be changed.

Building the site of your dreams not the site of the client's dreams
Listening to your client is one of the most crucial factors in creating good design. Often designers go into client meetings with their vision of how the site should look and are reluctant to accept an alternate idea. Another problem is when the client has no idea what they want, then you as the designer present your ideas, and they don't like it, or they change it into something the designer does not like as well. Remember that ultimately, your job is to translate the client's vision into a working web site. If they love it and it works for the folks using it, then you have done your job.

Mismanaging your time
Creating the design for a Web site can be an endless process. You can spend hours worrying about the exact color, font face, or tweaking the photo so it is "just right". It is essential that you learn to manage your time so you can create the best product in the least amount of time. When you are a student you have the luxury and the curse of taking all the time you need.

In a work situation you will have a finite amount of time to design the logo, create the layout or produce the color scheme. In the world of work if the client is paying for 3 hours of design time for the logo, and you spend 6 hours the choices are all unpleasant. Either the client pays double, you don't get paid for the extra 3 hours, or your company absorbs the overtime. To avoid all these problems spend no more than 1.5 hours playing with logo ideas, then use the remaining time to fine tune your best ideas and clean up the image.

Learning to manage your time takes experience and confidence and will become easier after you have worked for a while. Try and reach a point when the design is "good enough", then walk away and leave it alone. Set a limit on how much time you will spend editing a photo or playing with different fonts and stick to it. Finally realize that the 2 hours you spent moving pixels around in a photo may not have been worth the effort in this particular work situation.

Allowing one element to stops the entire design process
Sometimes the group and client become fixated on a single element of the project and it seems impossible to move forward unless this issue is resolved. An example is a designer who had been asked to create a new logo. They develop several ideas and there was no clear decision. The designer was not able to start on a mock up layout because she was so busy with the logo.

My advice was for the designer to present 5 logos to the client. The client needs to choose one and then the layout of the entire page can move forward. Later after the entire layout has been approved the client can ask for the logo to be modified. If the designer has time they can make the logo modifications and simply replace the image named "logo.gif" with a new image that has modifications. Meanwhile, the CDs have been making the pages with the old logo and the code does not change when the modified logo is created. The good news is that the layout of the entire page has moved forward.

Biting off more than you can chew
It is easy to get caught up in the client's enthusiasm and promise more than you can deliver. This is a class and we only have a limited amount of time to get the Web site done. Here are my recommendations for graphic deliverables. Photos which will be included in the content of the pages not to exceed 25. If the client wants a slide show those photos count as part of the photos. If your client wants 100 photos included, state that you can include 25 and provide instructions and/or a template which the client can follow to insert the remaining photos.

Navigation goes from easy to complex in the following continuum. All navigation is text >>navigation is graphic links > > rollover navigation >> remote rollover navigation >> remote persistent navigation >> flyaway menus.

Since this is a free site which is a class project, feel free to offer simple navigation because you do not have the time or expertise to deliver complex navigation.

In a real world work situation you would process all 100 of the clients photos, but you would charge for this service. If the client has a limited budget and can't afford to pay for all 100, you can again do some of the photos and then train the client, or wait until the client has more $$.

Setting a limit on how much time you will put into any area of the project is good for the designer and the client. Let's say the client has no photos, but wants the designer to find some. Stating that you can only search photos galleries for 3 hours to find photos, and if the client is not happy with the photos , they can spend their own time finding photos is a good way to set a limit on how much time you will spend looking for photos.

Educating the Confused Client
Using the Web and designing your own Web site are 2 very different tasks. I often compare this process to buying a house or building your own house with the help of an architect and contractor. When buying an existing house you can easily see how the rooms flow and where you will put your furniture. When building your own home, you may not realize what you have really asked for until the walls are up.

This principle also applies to the Web. Folks who have used the Web may not really understand what they need for their corporate Web site. There are several sources of confusion.

First the terms you use may be foreign to clients; "rollovers", "splash pages", "slideshows", and "flyaway menus", are not common terms in most client's vocabulary. I find it works best to provide an example of what you are offering the client.

The designer needs to visit the examples section of the class Web site and find 2-3 examples of splash pages, rollovers, flyaways, etc. You will then make a web page with the term, a definition, and links to examples of these items. Show this to the client at the first meeting and then leave it with them. Clients can review the page later, play with the various technologies, and discuss their options with others.

Another source of confusion is "timing". Many clients don't "get it" until the end of the design process when there is finally something to see. At this point they may not realize how much work it is to implement their suggestions. After the client has their 'Web epiphany" the team needs to decide how much they are willing to allow the client to change.

While you may be willing to change the font size (because you used CSS) or swap out a few header photos, you may not be willing to change the navigation system or totally redo the colors. Inform the client that the changes they are requesting would require a major remodel that needs to be done after the class is over, either by the client or a paid professional.

Another aspect of the "confused client" is how to organize the content into logical categories. This deals with the subject of "information architecture" and can often be forgotten by a group. In some groups the PM does this, while in others the task falls to the designer or the CD. In rare groups the issue is never dealt with because the client already has the skills to analyze their content and produce a effective storyboard on their own.

After the first meeting give your client a "web savvy" score and decide if they need further assistance in getting it. Then decide who will do the tutoring and how this will be done (email, phone, in-person). Since this part of the process takes time and patience it is easy to skip or avoid. I urge you to do all you can to help your client get it. The more they know, the easier they are to work with and satisfy.

Creating a template that is too complex
Designers who are new to slicing, and nested tables can make "rookie" mistakes. They may not have sliced correctly, so the tables are more complex than they need to be. In addition they may have trouble building the template and try and fix it by throwing tables everywhere. Simple is always best. I recommend you draw out on a piece of paper, the plan for where things will go. You may have to slice more than once to get the images right.

Finally feel free to ask the instructor for help.

Letting a member of your team take over the template and then losing control of the project
In some groups the designers come to the team a bit uncertain about their role as a leader. They may be intimidated by a team member who seems to be an "expert" and thus knows more than the designer. I have had designers hand over the PSD document to a CD and have them create the template. This is not a good idea.

Since part of your grade in this class is creating the template, then your grade will suffer. More importantly you will loose the opportunity to learn about templates. Designers design and slice differently after creating a template. Although classmates may have good intentions when they offer to help, designers need to be able to translate a mock up to a template. If the teammate helps in a way that makes you feel inadequate or like you are loosing control, contact your instructor and they can help.

Not trusting your CDs- leave them alone to do their job
The opposite of trusting your CDs too much (as in the example above) is trusting them to little. It is natural for CDs to struggle with your template code. Rather than standing over their shoulder and telling them exactly what to do, let them work in a manner that works best for them.

If you are concerned that they are following the template correctly, have them make one page and then they can send it to you to check. In a positive way mention any errors, while also stressing what they have done correctly. It is also important to place errors in perspective. A minor error like a few typos, or formatting mistakes should not be blown out of proportion. I have seen designers fume about these types of problems. I recommend you try and detach from the project, and if you are feeling very tense about errors, send the list of mistakes to the PM and ask them to discuss them with the CD.

Blaming ImageReady or Dreamweaver for a messy template
When I meet with designers to discuss the template their are certain phrases which are "red flags". If I ask the designer why they have created the template in a particular way, and their answers are "ImageReady did that" or "Dreamweaver just made it like that " I know we are in trouble. Software is rarely the cause of the problem, operator error is my concern.

ImageReady does an excellent job of slicing images if you know how to use it. Dreamweaver is a real time saver and a pleasure to use, when you have mastered the program. Do not assume that software will allow you to do something you don't really understand. You need to be able to describe your table structure and consequently create images which fit into this structure. Dreamweaver will create HTML code which may surprise you. Be ready to look at the code and trouble shoot manually. Time saving tools don't save time when you don't know what they are doing.