 |
Web Site Design Guide
|
 |
Web Site Design and Development Tutorial:
|
|
|
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.
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 LimitationsTides of Change
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.
Spinning the Web
Catching the Wave
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.
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 WebShopOne 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:
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
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.
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.
|
|||||||||||||||||||||||||||||||||||||||||||||||
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.
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.![[Verttice Icon]](../../media/graphics/webshop/entertainment/icns/verttice_icon.gif){kind=icon}
![[PixelPalette Icon]](../../media/graphics/webshop/utilities/icns/pixelpalettes_icon.gif){kind=tracking}
DreamLight Virtual Gallery
DreamLight WebShop
DreamLight Insights
DreamLight Company|
|
|
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 button brings you to the site’s help page.
Find button brings you to the site’s search
& index page.
Top button brings you to the top of the page you
are currently viewing.
Previous button brings you to the previous page
in the subsection you are currently viewing.
Contents button brings you to the contents page
of the subsection you are currently viewing.
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.
|
|
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:
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=576>
<TR><TD>
Content located here...
</TD></TR>
</TABLE>
|
|
 |
Please
Support Our Continuing Independent Film Making
Efforts! |
To view this site properly, please upgrade to a browser that supports current Web standards.
|
|
 |
|
|
|
 |