BATMAN. The Knight of the Night

This website is dedicated to Batman films — from first full-length of 1966 to present day. Sombre like Tim Burton’s, bright and gay like Joel Schumacher’s, minimalistic like Christopher Nolan’s films. Website has photos of directors, composers and main characters of each film.

Flash animations in headers, Danny Elfman’s main theme on the main page. Website’s menu is located at the very bottom and appears from Gotham’s darkness like Bat-Signal.

That’s interesting ↓

Basing on classic Tim Burton’s films, we desided that website will be mostly dark. Also the idea was not to use text-only menu but to have small images in it. We take a look at DVD covers trying to understand what we can use:

Batman movies DVD covers

Here appears an idea to use Batman logos: each cover has a logo, and all these logos are pretty different. It’s wonderful but three covers have no logos. More fundamental research shows us that “classic” films have a collection edition with covers made in one and the same style:

Batman movies Blu-Ray covers

That’s it. We place logos horizontally and type flims names with the font used in Burton’s films:


Puurfect. And when there will be to many films, we’ll add a beautiful scrolling to this menu.

OK, now we have to make a link for the main page, and it must be in the same style. We explore the history of Batman logos to create a new one:

Evolution of Batman

And finally we draw this lovely little bat — familiar from on side and brand new from another:

Website's logo

What about our website, at first we decide to create a template for inner pages. Except a lot of text, there must be photos of main characters, and also we decide to add pictures of film directors and music composers (music is a very important part of a film, and it can be heard almost all the time). So we try to put all this stuff together:

Inner page - variant 1

Looks awfully: photos are too large and cut off from the text; the space is used irrationally, and there is too much black emptiness. It would be better to place all the elements more compactly and reserve more space for the header. The menu will be situated at the foot of the page, and it will appear like Bat-Signal from the darkness. We make the template over:

Inner page - variant 2

Also we decide to unite main page with “About” page to remain only useful items in the menu:

Main page

3 years later this website generated a need to be new-made. Mainly there was a need to enlarge photos size and to make the website more pleasant to eyes. We draw a modified mockup tryin to imagine how it will look like:

New version of website

Other improvements are: we increased the size and changed the colour of the font for better visual perception; added photos of Batmobiles and winners of Oscar and Razzie awards; all headers are made using fonts appeared in films; and a lot of little bells and whistles.


Share this page