Insecurity Guard
Insecurity Guard is a short by FidesFortuna Films. It was my task to create a promotional site which would also help communicate ongoing progress with the production.
It was also important that the site be completed quickly, as the filmmakers were already well into pre-production and heading fast towards filming.
The brief was to keep the design simple and navigation easy.
The final result is at insecurityguard.com
The Design
My initial designs frequently don't quite work. Usually I'm heading along the right lines, but I don't quite hit the mark in those first few drafts. It seems I have to purge the bad ideas from my brain before I manage to produce something professional. The Insecurity Guard site was no exception.
I wanted to reveal something of the subject of the film in the site's design. My original idea was to draw the reception desk and place security monitors on it; the text on these monitors would then become the menu items for the site's navigation. The illustration didn't work, because it felt counter to the fact this was about a film. It was also too detailed, cluttered and distracting. I liked the idea but it just didn't quite work.
So, I toned the idea down and abstracted out the main concept. When I did so, this was the result:
The success of this approach lead me to an important realisation: that every element of a design should add something positive; otherwise it should go. It should be as simple as possible, without being too simple.
Unusually, I had the menu figured out before the rest of the site's theme. For a while I wasn't sure what to do, so I just played around with the design until something ticked. It was a single black line running down the side of the content that tingled my designer senses. It looked awful on its own, but somehow it felt right and I went with it.
I believe it was a bold move. Black and white provide the highest contrast possible and making those black lines thick could easily have been overpowering. But as I added even more lines it started to feel balanced and began to do its job of framing the content.
The result is bold, distinctive and fits the idea of the film.
Behind the scenes
One of my big goals is to make websites as easy to use as possible, and that extends to the parts only the client sees.
The Insecurity Guard site doesn't do anything complicated, but even simple things like making a post can be difficult if you are not a web developer. I believe it is my job to produce sites that clients don't have to learn how to use; they should just work. I don't always achieve it, but I take that goal as my guiding principle.
To help with this goal, I implemented a WYSIWYG (what you see is what you get) editor, for updating content. I then styled it so that it matches the site's design as much as possible (fig 3).
The state of wysiwyg editors is far from perfect. Some web browsers produce bugs which will annoy users and throw the design off kilter. But if you know which browser the client will use, it can be a great choice for the administration sections of the site.
This kind of specialisation is one of the benefits of having a customised website designed specifically for your needs. I've heard numerous people say creating the effect you can see in fig 3 is impossible.
Well... they are only half right!