The Frankenstein Effect

And on and on….

Furthermore, there is no documentation on the site. Then, the original designer of the site leaves his position, and a new designer picks up. He creates his own set of styles and is unaware of the type styles established on the rest of the site. Plus, the original designer has not been consistent with himself, creating duplicate styles, inconsistent layouts, etc.

So now the site has bloated CSS, is loading additional images, and looks sloppy because of the different styles (oh vey!).

On the development side, the company supporting the site has not given any documentation, and has since gone out of business. Or a new person was hired to manage the site, and has no clue who to go to for support. So, the team jury-riggs an addition or modification to the site, with no more documentation of what happened, and the spiral continued. What you end up with is a website, which is composed of several parts stitched together to create a whole that isn’t exactly a “real” website.

Which leads you to today.

This is what I call the “Frankenstein” effect, and this happens more frequently than not. I would say more often than not if we are called in to do a redesign for this reason. What often happens is that organic growth to a website is compounded with short deadlines. People are only focused on the task at hand, not worrying about the effect on legacy and consistency. In essence, there was no captain leading the ship. Better yet, there was no map as to where the ship was headed in the first place!

The “Frankenstein effect” occurs when:

1. Designers or Developers are inconsistent with themselves, and forgot what they did in original build.
2. Designers are inconsistent with previous designers.
3. Copy has been added on to for years and years and not edited or culled.
4. There is no style guide or documentation on the site.
5. There is no support or contact information on who designed it in the first place.
6. There was little thought in the initial build about legacy.

So, how do you prevent this from happening again?

1. Proper documentation on design
   Documenting design styles first off lets designers know exactly what styles exist, and what they need to expand the site. This documentation should include: Color and font palette as well as all text styles (colors, size etc), widget styles, navigation elements (nav bars, tabbed interfaces, accordion, etc), banner styles, grid layout, header and footer styles, box styles, button styles, over states, and hyperlink styles to start. There are several resources online that have great web style guides. Just look them up in Google.
2. Design for future expansion
   When you are designing a site, plan for at least 2 or 3 styles in each of the above areas, but no more than 4 as a rule. This should provide ample information to keep a site consistent, while still keeping enough variety so the site stays fresh.To that effect, changing workflow from Photoshop to InDesign might help consistency. Photoshop was designed for single page documents, not websites. It has no type style support, no paging, and no master pages. It is the wrong tool for the job, and will lead to inconsistencies. Illustrator is better because at least you can slice and you can keep type styles. InDesign is really the best tool for the job though. It keeps all typestyles, object styles, headers and footers consistent, and easy for expansion. Furthermore, all placed assets are instantly ready for optimization, leaving very little to be “sliced.”
3. Agree upon a style source for copy
   If you are using the Chicago Manual of Style, indicate that in the document. That way if there is a question on any content usage, a precedent has been established.
4. Document classes and code
   All templates should have the css documented, explaining which classes are where. Furthermore, make sure the code is organized so you can see where the reference is to every section
5. Contact information
   Include a list of people who worked on the project. If it is an agency, list the name of the agency, the phone number, and all people who worked on the project. .
6. List of all files used to create the site
   If there is a master list of all files for master items and templates, it will be less time trying to figure out which file was the last to be worked on. Also, it makes it easier to stay consistent with the site.
7. Keep an updated sitemap
   Often this is hard to do in a fast paced environment, but this will let everybody know what is on the site at a glance, and minimize the time it takes for new people to get up to speed if they are drawn into the project, or replace other team members. If this is dynamic from your platform, even better!

Wow! It’s a lot of work to prevent the “Frankenstein” effect.
Why should we do it?

There are a lot of benefits to doing the above steps in running a website. Here are a few of the top ones:

1. Improved delivery speed
   Having clear style definitions makes it much easier for you to deliver something fast. Additions to the site can be made faster, and designers don’t have to work as hard to create consistency.
2. Improved website performance:
   If you have less styles and repetition, you can lighten your load. Lighter CSS files, less graphics, shorter load times.
3. Longer life span of your website:
   A typical website lasts 2 to 3 years. A messy one can last 1 to 2. If your site is in order it can last 3 to 5. More upfront investment, but saves you money in the long run.
4. More hair on your head:
   Without a list of files, styles, and classes, your design and dev team will be pulling out their hair trying to figure out where stuff is, and what people were thinking. This means less time and focus to work on the task at hand. That can mean more resources eaten up, as well as more room for error because the designer/developer lost focus along the way.

So, the motto is spend a little more time up front on delivery for less headaches on the backend. It will make maintenance much more pleasurable, improve consistency, and make delivery cycles shorter, all the while delivering a cleaner user experience which increases conversion. If you have any questions on documentation, please post them here.