Midnight Lagoon

ML History

An evolving web project

Why "Midnight Lagoon"?

June of 2001 saw the birth of this website on GeoCities, one of the places hosting a community of new webmasters at the time. Creating a fan site for one of your favorite things seemed to be a popular practice, and the idea of building something many others could see was exciting to me. The subject of this site would be the anime Tenchi Muyo!, and while Tenchi helped to inspire the theme, I was also inclined to go with something dark, with touches of natural scenery. Night and water would be embraced as much as the actual topic of the site, and the theme continues to inspire me.

Several Versions

The purpose of this page is to offer a glimpse at how this site's design has changed over time, with some observations on what seemed to work, or what didn't. Each "version" had something new in the design, though it wasn't always a practical addition. I knew nothing about code early in my hobby. Drag-and-drop website builders allowed me to focus on the visual aspects of a page, which usually meant trying to make the site stand out through the use of images and color.

The original layout, or 1.0, was not preserved in a screenshot though I can say it started a tradition of black backgrounds, and graphics that included blue. Starting as a fan site, the graphics also included images I did not create, so for the purpose of clarity, AIC, among other companies, holds the copyright to the various forms of Tenchi anime while Funimation licenses it.

Midnight Lagoon 2.0

Midnight Lagoon 2.0

This was up by late 2001, bearing elements in common with the first version. The boxes with text and rounded corners were new additions inspired by computer panels in 24th Century Star Trek shows. An interesting design, though the links and text could have used more breathing room. The rounded effects, along with anything in that Shanghai font, were image files. The whole thing was about 800 pixels wide and would not center or stretch for a wider window, and this worked well enough for the most common monitor resolutions. The font used for the page text appears to have been whatever was the default for the browser.

Midnight Lagoon 3.0

Midnight Lagoon 3.0

Midnight Lagoon 3.0

From mid 2002, expanding upon the Trek computer panel idea, while also simplifying. With improving image software on hand for ML's designs, I removed color from images and replaced it with bright light blue, to give an impression of moonlight. Links to site features were organized into six sections, each linked from the top of the page rather than the left side, which freed up some space for content. The homepage had a big moon with links below it, while every other page had a more compact, better configuration also shown here.

This site version seemed to be well received by visitors, though once again, much of the layout was composed of image files, so making a new rounded button link would mean opening image software. If there was a code-related alternative at the time, it was beyond the experience level of this webmaster. These early designs needed to have a black background color because none of the layout images, even rounded ones, had transparent portions, and thus would not look good against anything other than solid black. This fact seemed to influence the next design, as I went for something very different.

Midnight Lagoon 4.0

Midnight Lagoon 4.0

This one is from 2003, and as this picture implies, the sections of the site had different full color backgrounds. The background images were a relatively small resolution, and I made the decision to load the site in a pop-up window about the same size as the image, and thus require visitors to allow pop-ups. Content would load in an iframe within the pop-up window, and the links in the Bonsai font were all part of image maps. Each background looks like a continuous image file, but it's actually broken up into pieces, spread between the iframe and maps.

This design was a tremendous amount of work to put together given the different site sections, and adding just one new category under the gallery, for example, would mean editing an image and then the corresponding image map. With the iframes, iframe backgrounds and image maps, this design marked an early effort to incorporate page elements more advanced than basic text, images and links. This was also apparently the start of using the Arial font for page content in every project.

Midnight Lagoon 5.0

Midnight Lagoon 5.0

From 2005 and essentially a return to 3.0's style, just without the Trek-like solid color boxes. The site links at the top changed to full color images of the characters on a mouseover, an iframe was used to note small updates, and there was apparently a drop-down list as a secondary option for site links, which is redundant, given its proximity to the other links.

An applet in the top left would show a watery reflection, a neat effect that now seems unnecessary in this instance, as well as distracting. A message about possible Java errors visible in this screenshot demonstrates another reason to have not used the applet at all. The whole top left corner was overcrowded with elements, and the vertical list of mouseover links seems to be there to accomodate the tall logo in Japanese characters. Arranging the links in a row instead of a column would have been a more efficient use of space.

Midnight Lagoon 6.0

Midnight Lagoon 6.0

In 2006, ML's content expanded to include other anime. While there was plenty of blue and black, the layout featured color in the form of characters and some links. The site links at the top would light up with a mouseover. The futuristic font and round corners were set with images once again, and multiple iframes can be seen here. They proved to be useful for displaying long lists of updates without taking up an excessive amount of vertical space on a page.

Midnight Lagoon 7.0

Midnight Lagoon 7.0

This layout dates to 2009, following a return to focusing on Tenchi. It featured an iframe loading all content, centered in the browser window against a field of bluish stars. The blue-tinted photo of a waterfall, taken by me, and the stars represented an effort to create some original art for the site layout beyond just the curved box corners I had previously done. Drop-down menus were used in an effort to conserve space and minimize clutter.

The iframe had a set width and offered limited room for the content. If the design worked as intended, visitors would only ever see one URL in the address bar, as other pages loaded inside the targted iframe. A critical flaw in the design became evident as search engines started linking directly to the pages meant to load inside the iframe, leaving any visitors to those pages without full access to the site's navigation. With some urgency, I developed a new design, built around that same photo.

Midnight Lagoon 7.1

Midnight Lagoon 7.1

Midnight Lagoon 7.1

While the background went back to black in 2010, this layout utilized color, to say the least. Taking inspiration from neon signs, this design was covered in glowing lines of white, light blue and green, with additional colors used for things like seasonal variety. Blue bubbles were placed in different locations in the site "box", and at the bottom, fish and aquatic plants added to the lagoon theme.

It was visually unique, though the neon effect was achieved entirely with carefully placed images, and knowing exactly how those images were created might be required knowledge for anyone trying to make significant changes to the site. The specifics elude even me right now, looking at this years after creating the effects. Not everything in this layout could be done without image files, though if a glow around some text instead came from CSS, changing the intensity of the glow or the colors used would mean simply adjusting some values. Neon ML would center in a browser window wider than the width of the layout, but like earlier versions, it wasn't made to adapt to narrow widths, or small screens. At the time, the thing I liked best about the design was that the neon borders on the left and right would extend as far as the page content required them to.