Transparent 404 page
To give the feeling of transparent ice or transparent glass to the page, SolidWorks software is used to render the images. The 404 page consists of a ’404 error,’ a matrix just like the blumblum homepage and a message of ‘File Not Found.’

Alphabets made of Glass or Ice
In 3D softwares like 3dsMax, text can be directly entered and rendered using any texture. It is mystery that this option is not available in SolidWorks. So I had to realize the ‘404 error’ text using the ‘curves’ command in SolidWorks. An ‘extrusion’ and ‘fillet’ commands are also used to get the solid feel.

The material for the rendering is selected as ‘Clear Glass.’

The 3D drawing is shown on the left and the corresponding transparent TIFF rendered output is shown on the right. Shadows are disabled to get a ‘suspended’ feeling in infinite space.
The same procedure is repeated to make the transparent matrix.

Integration

The actual checkerboard pattern (3) is superimposed to the TIFF rendered image to give a transparency feeling to the output (4) using Photoshop.
The ‘file not found’ text is placed and a ‘perspective’ transformation is given using Photoshop. Do you remember the ‘Star Wars’ titles?

The background image of the 404 html page is set to the checkerboard pattern in repeat mode. The integration of all these files resulted in this transparent 404 page of blumblum.com.

More information on 404 pages
This blog entry – ‘Design – 404 Page of antzFx.com’ – has a lot of information on the 404 error, how to set the 404 page in a website and some brilliant 404 designs.

Software: SolidWorks, Photoshop
Design Date: 29-July-2009

404 Research Lab featured blumblum.com’s 404 page as “404 of the Week.” It is filed under the title ‘transparent 404.’ We received a rating of 3.6 out of 5.0. Thank you for voting!

Fab404.com is a collection of fabulous, funny, creative, and weird 404 error pages. On 23-Sep-2009, they featured BlumBlum.com’s 404 page under the category ‘Geeky.’ Thank you guys!

So today morning, I spent some hours digging through my back-up data in CDs and got some old stuff. For those who are interested, here is my story.

“What is a computer?”
I am one of those very few ‘youngsters’ out there who have actually used Windows 3.1 OS in 1996. Windows 95 had appeared by that time, but my village in India was far, far away from the latest technology (Now it is better!). For a long time, computer for me was the CRT Monitor. I never really observed the box with a power-ON switch near that monitor. Yes, yes, now I know how a Mac looks like.

Going digital
I bought a ‘Dummies’ book and started learning Adobe Photoshop 5.5 in August, 2000. Since it was a limited day trial version without the ‘save’ command, I couldn’t save the early designs I did. I vaguely remember making a composition of a straw in a glass of yellow fruit juice. At that time, I was not a technologically advanced guy to think about ‘Print screen’ and ‘MS Paint.’ Alas!

This is the oldest Photoshop work I could get from the archives. The time stamp of the file says 28-Nov-2000. I created this on my friend’s PC while I was staying with him in Bangalore, in search of a job. You can see the influence of Hollywood in my earlier works.
I followed it up the next day with the ‘Perfect storm’ scene, a space shuttle and a satellite and some logo renderings of DOLBY Digital and DTS.

Animation
I started to learn Macromedia Flash 4.0 in August, 2000. I made a DTS trailer and fortunately I have the original file with me. It is fun to see it now. It even had a typo – ‘Aiso featuring…’ instead of ‘Also featuring…’ — just after the appearance of DOLBY logo! And, there is no audio in this file.

Then I made a ‘Jurassic Park-Lost World-Godzilla’ inspired short animation. After a couple of years, I lost interest in animations completely.

Website
As per records, on 03-Sep-2001, I made an htm file to use in a server for my colleague’s project. I don’t have that file with me, but I remember placing the LINUX logo in it. The project was called ‘Peripheral Sharing Device (PSD),’ I cannot remember what it was. I may have used Microsoft FrontPage to design the page.
The first website I made is for my own use and it was hosted in a FreeServers domain. The date of upload is Saturday, 22-Sep-2001. This domain is still active and what you see there now is an updated version I did in 2005. Click here to see the original version. If possible, view in Internet Explorer to see the gliding effect of the background. I designed it in Macromedia DreamWeaver.

I also had a mirror of this website in the now defunct Geocities account.

Back to 2009
That was a nostalgic journey. I am surprised to see how much design I was doing back then. I took a mental note to design more diverse stuff from now onwards.
So, what is your story? What was your first design? The below space for comments is all yours…

Error 404: File not found

This is what we get when we type in an incorrect website address or when we click an out-dated bookmark. But it seems that somebody has figured out how to lighten the situation by customizing the classic 404 page. Some of them are delightfully hilarious. A huge collection of them is published by SmashingMagazine. See this, this and this.

Our attempt on 404
In our website antzFx.com, we have implemented a customized 404 page. You can have a look at it by clicking here or by typing ‘i_like_mixed_fruit_jam’ or any other message after the ‘antzfx.com/’ in the address bar.

This is our node to the age old ‘help Chotu rabbit to find his way to the carrots’ puzzle. You are in a dead end of the maze with a ‘You are here!’ signage. We are offering a way out by instructing the visitors to click on any other links provided on this page.
What do you think of our design? Post your comments below.

Why 404? Why not 007?
404 is an HTTP status code. For a normal web page, the status is 200 OK. HTTP status codes were established by the World Wide Web Consortium (W3C) in 1992, as a part of the HTTP 0.9 spec. The first 4 indicates a client error. The server is saying that you’ve done something wrong, such as misspell the URL or request a page which is no longer there. The middle 0 refers to a general syntax error. This could indicate a spelling mistake. The last 4 just indicates the specific error in the group of 40x, which also includes 400: Bad Request, 401: Unauthorized, etc.
Read more interesting facts here at 404lab.

How did we do it?
Simple. Added a line in ‘.htaccess’ file in our webserver instructing a redirection to the customized page when an error 404 occurs.
ErrorDocument 404 http://www.antzfx.com/custom_page.htm
More information is available at PageResource.

Softwares: Adobe Illustrator, Adobe Photoshop, Adobe DreamWeaver
Design date: 21-Mar-2009

404 Research Lab featured our website’s 404 page as “404 of the Week.” It is filed under the title ‘instructive 404,’ obviously referring to this blog on how we did it. We received a rating of 3.2 out of 5.0. Thank you for voting!

Fab404.com is a collection of fabulous, funny, creative, and weird 404 error pages. On 24-Jul-2009, they featured our website’s 404 page along with a description of “This 404 error page is a-maze-ing.” It is filed under the category ‘Funny.’ Thank you guys!

Bluefaqs is a design blog maintained by Shawn Ramsey. antzFx 404 is listed in the blog entry ’60 Unique 404 Error Pages.’

This is a Disclaimer

A commonly mouthed phrase in advertising field is that “Yes, we know the ad is just an average one. It is because the client does not share our vision and the budget was not enough. It is a pity. When are we going to have a perfect client?”

Go out and see (that means, do a ‘Google’) a self-promotional ad done by an agency. I am 90% sure that you will find it equally bad and non-creative. Tell me, what is the reason for this ‘no-show’?

Just now I designed and uploaded a website promoting myself. I am 100% sure that you will find it as boring, lacks content, lacks animated stuff and not a ‘new-age’ thing. And the website claims that I am the only designer in this whole universe who is capable of doing wonderful and creative designs. Blah!

The beginning

I start every design on a white paper. So, for the website, I fixed the background color as White (#FFFFFF). I decided that I will have a simple and clutter-free interface. All the text and graphics will be static (no roll-over images and no flash animations). The text and images will be laid out in tables of fixed row heights and column widths. There will be minimum text and most of the website content will be images. The colors used for text and background will be: Red, Black, Green, Yellow and White. No images will be used in the navigation bar and in the name/logo.

If you are still interested, read on…

Layout

The widescreen format fascinates me. Technically speaking, the aspect ratio is 16:9. That means, for a width of 16 units, the height of the screen will be 9 units. I wanted the website in such a way that it looks like a projected image on a widescreen. To represent the curvature of the screen as seen in cinema theatres, I decided to add upper and lower shadows leaving the right and left edges for the viewer’s imagination.

Many people are still using 800X600 pixels of screen resolution in their PCs. So I fixed the maximum width as 750 pixels. Applying the 16:9 rule, the height will be 400 pixels approximately. A three column X three row table with 750 X 400 pixels is used as the template. Other parameters are: CellPad = 0; CellSpace = 0 and Border = 0.

The first row is designated for the name/logo. The second row has a Green background color where images will appear and the third row is where the text content will appear. The three columns of the second row can feature three images.

Navigation Bar

Navigation bar is placed in the bottom of the widescreen table. No rollover images. So I added the following code to the pages.

A:link { color: #009900; text-decoration: none; }
A:active { color: #009900; text-decoration: none; }
A:visited { color: #0066FF; text-decoration: none; }
A:hover { color: #FF0000; text-decoration: underline; }

This piece of code simply tells the browser that all the links are in Green color. When the cursor hovers over it, the style should change to Red underlined text. A visited link should appear in a pale Blue color.

Internet Explorer obeys these commands faithfully, but it seems that Mozilla Firfox has its own way.

The first row shows the navigation bar in Internet Explorer (Ver.6). ‘Newsletter’ is an unvisited link in Green, ‘Blog’ is a visited link in Pale Blue, ‘Contact’ is Red underlined text because the cursor is stationed over it.

The second row shows the navigation bar in Mozilla Fiefox (Ver. 2). All links are blue and are underlined in default. There is no distinction between an unvisited link and an active link. Cursor hovering effect is OK.

Links denoting a page are disabled in the corresponding pages only. The white text appears in a red background which visually conveys the idea to the viewer. When he is in a submenu page showing one example of work, links are retrained in a Yellow background. See the third row in the above image.

Vertical Scroll Bar

One page has some text in a table cell that is too long to contain in the designated height of 200 pixels. The following code ensures that a vertical scroll bar appears for the rescue.

<td width=”500″ td height=”200″ colspan=”2″ class=”style4″> <div style=”width: 500; height:200; overflow: auto”> <p>

/* The long text appears here*/

</p> </div> </td>

An attempt was also done to alter the look of the scroll bars by placing the following code.

SCROLLBAR-FACE-COLOR: #FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: #D9D9D9;
SCROLLBAR-SHADOW-COLOR: #808080;
SCROLLBAR-3DLIGHT-COLOR: #D9D9D9;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR: #808080;
SCROLLBAR-BASE-COLOR: #FFFFFF;

Again Explorer and Firefox responded differently.

The scroll bar on the left appears in Internet Explorer and the other is in Mozilla Firefox.

It is voting time!

That’s all folks! Visit the website and I am ready for the brickbats. I am an average person in the art of dodging, though. Yes, you may find one or two Easter eggs…

Second thoughts

A flash based version of this website is under construction.

Useful links for the ‘really interested’ people

A Favicon is a small icon that appears in the address bar of your browser along with the website address. It is an icon with a dimension of 16 X 16 pixels and is also displayed in the saved website links in your ‘bookmarks’ or ‘favorites’. Steps on creating a favicon in Photoshop, the plugin needed to save the icon in *.ico format and the html coding needed to make the browser display the favicon are explained in detail at:

• ‘Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop.’

A feedback form is used widely in websites to establish an instant communication link between the website visitor and the website owner. To add this feature to your website, you need:-

1. An html page showing the feedback form
2. A feedback form script in PHP that collects, formats the data and e-mail to an ID specified by you
3. A web hosting service who allows to run the script in their server. This is usually a paid service.
4. An html ‘Thank you!’ page indicating a successful submission
5. An html ‘Error!’ page asking the visitor to re-enter the data

Since I am not at all good in explaining technical stuff to you, it is better to visit the pages:

• ‘Dreamweaver Tutorial: How to Add a Feedback Form to Your Website in Dreamweaver CS3 (Part 6)‘
• ‘Free Customized Feedback Form Wizard‘

Software: Macromedia Dreamweaver MX 2004, Adobe Photoshop CS2, GIMP 2.4.5
Design date: 29-June-2008