DreamLight Interactive

Web Site Design Guide


Search/Index Help
Click to view DreamLight's 3D Animation Demo Reel
20+ Years of Award-winning Multimedia, 1987-2007

Web Site Design and Development Tutorial:
Spinning the DreamLight WebSite

Previous Contents Next

DreamLight WebSite Background


We began building the DreamLight WebSite way back in 1987. Yes, that’s 1987, not 1997. To explain what I mean, we must first turn back the calendar, a couple of decades.

BlastOff! The Award-winning 3D Animated Short film by Michael Scaramozzino - Special Edition DVD

Please Support Our Continuing Independent Film Making Efforts!
Order your Award-winning BlastOff! Special Edition DVD today!

BlastOff!™ Merchandise Available @ Telebites.com BlastOff! T-Shirts BlastOff! Hats BlastOff! Mugs BlastOff! Calendar, Prints & Posters BlastOff! Mousepads

DreamLight NightLight BBS

*   WELCOME TO DreamLight(R)'s...                         *
*                                                         *
*   %    %                     %                          *
*   %%   %  *       %          %      *       %        TM *
*   % %  %          %      %   %              %      %    *
*   %  % %  %  %%%  %%%%  %%%% %      %  %%%  %%%%  %%%%  *
*   %   %%  % %   % %   %  %   %      % %   % %   %  %    *
*   %    %  %  %%%% %   %  %   %%%%%% %  %%%% %   %  %    *
*                 %         %               %         %   *
*               %%                        %%              *
*                                                         *
*   the NightLight(TM) ELECTRONIC BULLETIN BOARD.         *

Since 1987, we had been operating our own in-house electronic BBS (Bulletin Board System) called the DreamLight NightLight. This was the DreamLight WebSite’s precursor. This BBS served two main functions. First, it was our 24 hour gateway for our clients. Through the DreamLight NightLight BBS we could supply electronic proofs to our clients and our clients could send comments and files back to us at their leisure. Secondly the DreamLight NightLight BBS had a small library of samples available for review by potential clients.

DreamLight Verttice On-line Promotion

We had recognized early on that the world wide electronic BBS’s such as CompuServe, Delphi, GEnie and America On-line could become a powerful marketing medium. With this in mind, we created a shareware game called DreamLight Verttice which we published on all the major on-line networks. DreamLight Verttice was intended to spread throughout the networks carrying our name, logo and BBS number to computer users world wide. Upon its public release, the traffic on our DreamLight NightLight BBS picked up dramatically.

Play DreamLight Verttice: On-line with Shockwave.

Traditional BBS Limitations

DreamLight NightLight (TM) Main Menu


[F] FILE Transfers
[E] Private E-MAIL

[C] CHANGE Password
[T] TERMINAL Preferences
[U] USER Statistics

[P] PAGE Sysop

Please select a choice from the menu.

This type of traditional text based BBS however had serious limitations.

  • As a private BBS, the user had to know the phone number in advance.
  • The user had to call the BBS directly which in some cases was a toll call.
  • The user needed to use a terminal program to access the BBS.
  • Files needed to first be downloaded before being viewed in a separate program.
  • It was not very easy to browse a portfolio since images had to first be downloaded.
  • The fastest modems at the time were 1200bps.

Tides of Change

<TITLE>The Simple HTML Page</TITLE>


<IMG SRC="world.gif"> <BR>
<H1>Hello World!</H1>


All that changed in 1994 when HTML (Hyper Text Markup Language), Mosaic and Netscape Navigator burst onto the scene. In one fell swoop, everything that was wrong with traditional BBS’s was wiped out.
  • Now a user could log onto a local network which then linked to the global Internet. There was no need to know the phone number of each individual location you wished to visit since they were all connected to the Internet.
  • Since the user was connecting to a local service to gain access to the Internet there were no more toll calls.
  • The browser software now eliminated the need for terminal emulation software since it communicated directly with the network using the TCP/IP protocol.
  • The browser software used HTML to take a text file and link it with other text files as well as pictures. Now the browser software could display pictures right along with the text. The pictures were still being downloaded, however it all happened in the background transparently to the user.
  • This enabled the users to browse Internet pages much as they would browse a newspaper or magazine.
  • Modem speeds had increased to 28,800bps which made picture transmission much more tolerable.

Spinning the Web

The seemingly simple ability of HTML to link one Internet page to any other Internet page, tied the entire world together in a way never before imagined. This created the greatest burst of published communication since the advent of the Guttenburg printing press. Now anyone with a computer could publish anything they wished, to the entire world. All these interconnected pages became known collectively as the World Wide Web. The world will never be the same again.

Catching the Wave

So in 1994 when we first saw Mosaic on the Macintosh, we realized that all the technical pieces were finally in place to enable us to achieve what we had dreamed of a long time ago with the DreamLight NightLight. We could now build a conduit to the entire world for DreamLight. It would be a showcase of our finest work. It would be a place of learning for others. It would be a place to sell our products and services. It would contain the latest information about DreamLight. It would be called, simply enough, the DreamLight WebSite.

Web Site Content


The most important element of any Web site is compelling content. Content is what draws people to a quality site and keeps them coming back for more. DreamLight already had three types of content that could generate interest in our Web site. Each type shared the following qualities.

  • Interest from a relatively wide audience
  • Easily adaptable to an HTML Web format
  • Perfect for constantly expanding collections
  • Long useful life span
  • Ultimately capable of generating income

DreamLight Virtual Gallery

In our decade of creating all types of digital media we were very careful about retaining the rights to use all our work for promotional purposes. This resulted in a huge library of award-winning digital samples. We could quite easily convert many of these samples into a format that would be appropriate for the Web. We collected some of our more interesting projects and created the DreamLight Virtual Gallery. This would be a constantly expanding collection of samples on display. The first page of the site is the DreamLight Spotlight where we showcase new projects before relocating them into the appropriate sections within the general gallery.

DreamLight WebShop

One of the most popular uses of traditional BBS’s was for the distribution of shareware. We had already developed a few shareware items in the past. These were previously available on our DreamLight NightLight BBS as well as posted on the major commercial BBS’s.

These items included the following:

[Verttice Icon]
DreamLight Verttice

Award-winning Game of Skill & Strategy
[PixelPalette Icon]
DreamLight PixelPalettes

The Designer’s Color Tool kit

We gathered these items and created a Web section called the DreamLight WebShop. Initially the DreamLight WebShop would be stocked with these shareware items we had already developed. We would periodically update the existing items and add additional commercial items for sale. Using Shockwave, we were able to create items that could run on-line right in the WebShop. This would enable us to build product demos and even an on-line penny arcade where we could charge admission. Eventually the WebShop could be expanded to include other items such as CD-ROMs, posters, prints and general merchandise.

DreamLight Insights

DreamLight Insight Sample

In our decade of digital media leadership we have developed many tricks and techniques on a wide variety of digital media subjects. We are often asked to speak at conferences and write how-to articles for various publications and books. We had taken some of this resulting material and created a series of electronic newsletters called DreamLight Insights. These behind the scenes case studies were originally distributed as Macintosh DocMaker self-displaying documents through traditional BBS’s. We could easily reformat this material into HTML pages. We could periodically publish new editions in the series in a DreamLight Insights section on the site.

Web Site Purpose


The primary objective of the DreamLight WebSite is to strengthen the DreamLight brand name and position us in the vanguard of new digital media. This objective is supported through a multifaceted on-line approach. The major types of content on the site each support this objective from a different angle.

DreamLight Virtual Gallery

The DreamLight Virtual Gallery exhibits our leadership in digital media by showcasing over a decade’s worth of award-winning samples. This area serves as an expanding portfolio of our wide ranging digital capabilities. The DreamLight Virtual Gallery is the main focal point of the entire site and a major draw to Web surfers.

DreamLight WebShop

The DreamLight WebShop builds name recognition initially through distributing shareware, utilities and games. This is the first step in establishing our own commerce center on the Internet. We will expand this area into an on-line arcade and amusement park as well as a growing storefront as we bring our own commercial products to market. The DreamLight WebShop will ultimately generate its own revenue.

DreamLight Insights

The DreamLight Insights series demonstrates our mastery of various digital media. Through case studies of award-winning projects, we are able to quickly demonstrate how we push the envelope of digital media. This helps underscore our leadership position as well as draw interested Web surfers to the site.

DreamLight Company

The DreamLight Company content provides a solid foundation for our leadership position. This content details awards and milestones from DreamLight’s decade of digital leadership. It also provides contact, employment and background information on the studio for prospective clients, customers and employees.


Structural Organization


I gathered all the content previously discussed and organized the structure of the site around these major areas of content. This process is accomplished by creating a simple outline of the site’s overall structure. Notice the relative balance of the major sections in the outline below.

Web Site Navigation


Once I had determined the major structure of the DreamLight WebSite, I set about designing a method to navigate that structure. I wanted the navigational elements to satisfy a few key goals.

  • Immediate indication of the sites contents
  • Fingertip access to the entire site from every page
  • Visual feedback about the user’s current location at all times

DreamLight Main Menu

Since most computers sold today come with a 17" or larger monitor capable of displaying at least 1024x768 pixels and the smallest 15" monitors are at least capable of displaying 800x600 pixels, I decided I could use a rather wide layout with enough room for a main menu on the side. The main menu would always show the major topic headings and would expand to show the sub headings in whichever topic the user was currently viewing.

Directional Navigation

Throughout each page of the DreamLight WebSite you will find a number of directional buttons. These are all context sensitive so their actions may change depending where you are on the site. They are designed to help you zip around the page and subsections quickly. Each button’s purpose is outlined below.

Help Help button brings you to the site’s help page.

Find Find button brings you to the site’s search & index page.

Top Top button brings you to the top of the page you are currently viewing.

Previous Previous button brings you to the previous page in the subsection you are currently viewing.

Previous Contents button brings you to the contents page of the subsection you are currently viewing.

Next Next button brings you to the next page in the subsection you are currently viewing.

DreamLight QuickHeadings

On many sites, I often found it tiresome to scroll each section to the top of my browser for reading. I created DreamLight QuickHeadings to do this automatically. These are self-linked links. Many of the headings are linked to themselves. This allows you to bring each heading to the top of the screen quickly, allowing easy reading of the accompanying text. Simply click on a heading and it is pulled to the top of your screen. This is a quick way to pull the document through your browser without much scrolling. You can jump down a page like going down a ladder, step by step. Once you get the hang of it I think you’ll wish other sites were built this way as well.

Target Audience


When designing the DreamLight WebSite I had to make a fundamental choice about what was more important for our particular site, quality or commonness. To target low end viewers, I would have to design for the lowest common denominator of an inexpensive PC running Windows. That would mean that we would have to sacrifice much of our signature quality and limit functionality. Since we are a high end studio, and most of our clientele are high end corporations and the creative community, I chose quality.

To reach the desired level of quality, I designed the DreamLight WebSite for mid to high end users with a fast Internet connection. The site will look and perform best on the following setups or greater.

  • Power Macintosh G3, iMac or faster
  • 64 MB RAM
  • Mac OS 9
  • 17” Monitor 1024x768 or greater
  • 16Bit Color (Thousands) or greater
  • DSL, Cable or faster Internet connection
  • Explorer 5 or Netscape 6
  • 40MB RAM allocated to Netscape
  • 10MB network cache for Netscape
  • Macromedia Shockwave
  • Apple QuickTime
  • Pentium II PC or faster
  • 64 MB RAM
  • Windows 98 or later
  • 17” Monitor 1024x768 or greater
  • 16Bit Color (High Color) or greater
  • DSL, Cable or faster Internet connection
  • Explorer 6 or Netscape 6
  • 40MB RAM allocated to Netscape
  • 10MB network cache for Netscape
  • Macromedia Shockwave
  • Apple QuickTime (some videos are available for Windows media player)

This mid-high end targeting enables us to experiment on the DreamLight WebSite to see just how far we can push Web site design, using advanced features like animated GIFs, streaming audio/video, Flash and Shockwave. We can then take what we learn and apply some of it to our client’s sites. When designing Web sites for clients that are targeting the mass market, we develop their sites using a lowest common denominator strategy to reach the broadest range of viewers.

Web Site Design


Only after each of the above topics have been thoroughly resolved should you think about the site’s visual look. An effective design can not be created if any of the above issues are left unresolved. A great design can not rescue a bad site. A bad design however, can ruin a site.

Don’t forget that the look of a site is secondary to its content and purpose. The design should flow directly from each of the previously discussed issues. The design is the final implementation of these resolved issues. The simpler the design the better. When a design calls attention to itself, it is distracting from the real purpose of a site, the content.

Extending the Corporate Identity

The design of the DreamLight WebSite is relatively straight forward. It is an extension of our award-winning corporate identity.

I used the following elements from the existing corporate ID and a few new elements for the Web.

  • DreamLight Background: A light gray pixelated background
  • DreamLight Logo: A glowing shadow emanating from a raster display
  • DreamLight Blue Rule: A separator used on our corporate identity
  • DreamLight Headings: Times Bold Italic headings and subheadings
  • DreamLight Main Menu: Main navigational controls mimic the service bars from the ID
  • DreamLight Directional Buttons: Page and section navigational controls

This helps strengthen our corporate identity across all of our corporate communications of which the DreamLight WebSite is the newest part. A Web site should not be designed in isolation. It should be designed as one portion of an organization’s overall communication and it should be an electronic, interactive extension of an organization’s corporate identity.

Web Site HTML Development


I designed the original DreamLight WebSite back in 1995 and wrote all the HTML by hand in HTMLEditor on the Macintosh. Today however we do all of our Web development work in Macromedia Dreamweaver with BBEdit. This powerful combination enables us to quickly layout a page visually while still maintaining the ability to hand edit the HTML in BBEdit when necessary. We test the pages in Internet Explorer and Netscape Navigator on both the Macintosh and Windows.

When developing a site as large as this, we make extensive use of templates, libraries and CSS (cascading style sheets) to facilitate rapid deployment and easy maintenance.

Logical HTML

HTML was created to logically structure documents, not to visually design them. I try to use HTML in as pure a fashion as I can. This means that I’ll use most tags for their logically intended purpose rather than for their visual aspects. I prefer to use the logical <STRONG> tag to the visual <BOLD> tag. In Netscape, both of these tags result in bold text, but in a Web browser for the blind the <STRONG> tag could possibly be used to read text louder. I make heavy use of cascading style sheets to define the visual look of a page and avoid putting any visual formatting in the page at all, I put all visual formatting in the style sheet where it belongs.

Layout With HTML

To help control the layout and design of the pages, I rely on invisible tables. By placing all content in tables of specific widths I can control the overall layout of a page. This way the page will not reflow if the user changes the size of their browser’s window. This is particularly a problem on PC’s since many people view the Web with their browser windows maximized. Without tables, this causes paragraphs to stretch out into a single long line across a large screen monitor becoming virtually unreadable.

Invisible Table Example:


Content located here...


BlastOff! The Award-winning 3D Animated Short film by Michael Scaramozzino - Special Edition DVD

Please Support Our Continuing Independent Film Making Efforts!
Order your Award-winning BlastOff! Special Edition DVD today!

BlastOff!™ Merchandise Available @ Telebites.com BlastOff! T-Shirts BlastOff! Hats BlastOff! Mugs BlastOff! Calendar, Prints & Posters BlastOff! Mousepads

Silver Sage Scrolls™ inspiration through the ages Available @ Telebites.com

To view this site properly, please upgrade to a browser that supports current Web standards.



BlastOff! Wins a Silver W3 Award in the Pioneering Category of Web Video - 3D Animation

BlastOff! Wins an Official Honoree Webby Award in the category of 3D Animation
























































DreamLight Incorporated, 323 Andover Street, Suite 6, Wilmington, MA 01887 USA, Telephone: 978-658-5110
Search/Index Top Help