The previous post in the Working with the FBI series dealt with the FBI History Page. The History theater was one of the smaller sections we did for the FBI. However, its was one of the most fun to develop.  The guys at the FBI wanted to forgo the traditional media player and go with something a bit more engaging. They requested a traditional theater fell to carry on the Biograph Theater theme that is on the History of the FBI homepage.

Our first pass at the theater had some elements that worked well, however it did not have enough of a theater feel to it. They requested that we pull the vantage point back a bit so that the user could see more of the theater. Additionally we wanted to make the environment a bit darker to place a greater emphases on the video that was playing.

The final version of the history theater does a much better job of engaging the user and making the videos feel like they are part of the environment. Now it was time to take everything into flash and make the videos feel like they were projected onto the screen.

The videos needed to appear to be projected onto a movie screen instead of just living in a media player behind the curtains. This was easily accomplished by placing the videos within a movie clip and setting that movie clips Blending mode to Multiply. In addition to the video there was a flickering light that needed to be added throughout the theater to create the feeling of a movie reel spinning.

Above is an example of the light at full opacity and with no effects applied to it. The light gave the illusion of the film being projected onto the screen from behind the users vantage point and cast highlights on the surrounding elements and viewers.

Finally, the only remaining elements were the controls for the video and the information that goes along with each video.

So, head on over to the FBI History Theater and let us know what you think of the design and check out the awesome videos that the FBI has posted. I’ll highlight the Fun & Games and Kids Pages in the next Working with the FBI post.

In March 2010 we were contacted by the Federal Bureau of Investigation (FBI) and informed they were in the process of redesigning their website. After some discussion we were asked to assist with some of the design and flash work. Of course we thought this was the coolest opportunity ever.

I remember touring the FBI headquarters years ago (probably around 1994) on a family trip to Washington D.C. Ever since, I’ve been fascinated by the work and achievements of the FBI. Being asked to help with the web site was a great honor.

The project was divided into three main parts: (1) The History of the FBI; (2) Fun & Games; and (3) the Kids Pages. Each of these sections include sub-pages and content developed in conjunction with the main pages.

The History page was one of the most exciting and interesting components of the project. The goal was to create an environment that highlights an important event in the FBI’s history. The guys at the Bureau wanted to feature the Biograph Theater in the 1930’s where the FBI took out john Dillinger, one of the best know gangsters of all time, right outside the theater.

We started by collecting images, making sketches, and developing ideas that would represent this important time in history. After a couple rounds of failing to hit the mark, we came up with a layout that fits with the desired historical theme.

FBI - History Step 1 - Initial colors and shapes

FBI - History Step 2 - Adding textures and general layout elements

FBI - History Step 3 - Cropping and additional lighting and textures added

FBI - History Step 4 - Final textures and tones added. finilizing position of elements.

After the environment was fully developed, we produced a series of posters representing the different sections linked to the History page. Each poster was enlarged, enabling the visitor to roll over each element while the poster “pops out,” highlighting the linked section.

FBI History Poster - History of the 10 Most Wanted

FBI History Poster - A Short History of the FBI

FBI History Poster - Directors Then and Now

FBI History Poster - FBI Headquarters

FBI History Poster - Seal and Motto

FBI History Poster - Historic Records

FBI History Poster - Field Office Histories

FBI History Poster - Hall of Honor

Our goal for the historical time-line was to create an interactive element that would allow visitors to access selections without taking them away from the original page. The guys from the FBI recommended a virtual car or truck-type element that would move across the screen, with the back of the vehicle containing a time-line with clickable options.

The car drives across the screen when you click the timeline link on the side of it

So check out the site History of the FBI and give us your feedback. In the next post we’ll highlight the FBI history theater.

We’ve all been in personal relationships that are going along just fine when one party decides they need to ‘define’ the relationship. You know how that can go especially if you are the one seeking the definition. Either you arrive with a well rehearsed set of questions and reasoned responses (rare result) and your relationships advances and flourishes…or you drive home kicking yourself for sounding vague, never making your point or being just plain incoherent (likely result).

Well the same is true when you think about engaging a design firm to help present your product, service or company to a potential global audience. You may think deciding about a website will be less emotional than that of a personal relationship but don’t be too sure. Remember, in today’s competitive marketplace your website serves as your business card, billboard, chief marketing tool and branding image to the public. In other words, it says everything about you so you want to get it right.

After reading that chances are your temperature is now rising, your heart may be pounding and a headache is coming on as you search for just the right words to communicate to the world what you are all about. Instead, be cam, smile and realize that’s why a creative team is here to help you. But keep in mind it’s important to be clear about what you desire because that will make the web development process a whole lot easier for you and the firm you select.

Here’s a good tip: Try to summarize what you want to communicate in sets of 3’s. Marketers will tell you that’s the best way to communicate the value of a product or of an idea. Even three words alone can sometimes be the best. Can anyone argue with: COKE IS IT. I LIKE IKE or I LOVE YOU?

Once you begin thinking in these summarized terms about your website it helps the design and programming team immensely. Remember, everyone wants the greatest website in the history of mankind…even though this tenure of mankind has only been around since the 1990’s. And, it is our desire to build you the most creative website possible but this can best be done when you are clear about what you want to say.
Try this: What is my product? What makes me (or my company) unique? What do I want to communicate to every visitor to my website?

Once this is clear you are ready to contact a web design company and we sure hope it’s ours. Because not only do we create with tremendous ingenuity…we also work with clients with a healthy dose of good humor and wit. We find this helps keeps the creative juices flowing for all involved with development of your website…of which you are the most important part. We hope you will let us help you!

To sum up:

• What is my product?
• What Makes my product unique?
• Be clear, concise, and think in 3’s

(see what we did there?)

Developing concepts and ideas for a website design, icon or logo, or any type of graphic development can seem like an overwhelming task at times. No matter how many websites you have created or logos you’ve developed, the creative process is always something that can take a lot out of you. True, there are days when this process seems to come as easily and naturally as walking or breathing, but those days come about less often then I would care to admit. This is where sketching, for me, enters the picture (no pun intended). Sketching out ideas and concepts helps me quickly sift throughout the ideas trapped inside my head. I must admit, I do spend a bit too much time in this phase of the project because of my love for it.

Layout sketches for Zoowee Music. Developed layout for container that would hold Artist profile, album list, songs, etc.

Thanks to an extremely talented artistic mother, I have been sketching obsessively since I was young. Thankfully web and graphic design gives me an outlet to put this obsession to use. Sketching out layouts for websites is essential to my process, but I really enjoy icon and graphic development. This is where the pen and pencil really helps me plan out how an objects or graphics will end up being rendered on the computer.

Zoowee Icon Development

Sketch for Zoowee Dashboard Graphics. Depicting the monitoring and managment of your Zoowee Bubbles.

Launch Icon Development

Rocky Horton helped me discover the graph paper moleskin (I know, I know its typical designer to carry this around but it fits so well into my bag and they are so easy to keep organized) which has really helped with sketches for websites and logos. Its a wonder I didn’t make this connection sooner (living in a pixel based world).

Layout sketch for Addicted to the Outdoors

I’ll post a follow-up to this with more of my sketches once I get my sketch books together. This just happens to be the sketchbook sitting in front of me at the time, but I will sift through the boxes I have at home and post some more detailed images and more on my process in my next post.