Creating a digital presentation

The Kicker

A mock up, a flash movie and a powerpoint file walk to into a meeting - the mock up says to the viewers, "here is a site map of your proposed site", the flash movie says,"Now check out a movie of this mock up", then the powerpoint file says,"here are the numbers for everything". Once all have made their claim to success the folks in the meeting immediately wake up from their power nap and say thank you for this avalanche of raw digital confusion, we'll keep in contact.
Now there is only one hope because the digital side of your presentation did squat, all success lies in the hands of Steve the witty charismatic speaker who can single handily dazzle interest in your product, well no so much! The client feels like they really don't understand your product but they absolutely want to go for drinks with Steve and his coordinator. Well they might consider a drunk buy, but that doesn't help the fact that not every prospect like drinks on Thursdays and your digital presentation needs help and unity.

The Ingredients

So lets now move on how to make a digital presentation work correctly for you and yours. For the sake of this blog I will keep this to the extent of presenting a web site development.
I won't get crazy with a tutorial or anything like that, my focus here is just to spark conversation and creativity.

Here are couple of applications and criteria that will be needed and produced upon.

• Photoshop and fireworks (all others are OK, but I would definitely use fireworks as well)
• Your favorite coding platform I use coda and dreamweaver
• Keynote because it is hands the best presentation tool out there
• After effects or flash or some program to animate in

This will be our mediums of presentation and communication

• A landing page or website for mock review or video presentation
• An iPad -- so important for your presentation
• and of course some sort of projection device

Designs

My first approach is to flesh out and design the website according to not just what the clients wants but also what the presentation calls for. In photoshop and or illustrator I begin to lay down the bar bones basics of the build such as masthead logo, navigation and all other static elements that will not change much on a real site ( basically elements that will always be visible ). Once I feel that the main skeletal design looks good enough I move on to Fireworks, why Fireworks you ask, well the reason for fireworks is pretty simple both in explanation and in execution. Fireworks is a great web layout and presentation tool, while it is also operates as a design tool I find it better as a layout production application. Fireworks gives the designer the ability to easily add text, images and other dynamic assets to a design mock and replicate those elements across many pages using a master page and instanced designs you created (for instance ad positions, or the headers and footers or links). Fireworks is a necessity for my business and it helps in streamlining multiple elements of a development very quickly -- so may it be a web design, or an app design or maybe a flash or presentation design, Fireworks is your partner when it comes to creating multiple instances of your designs and functions.

Online mocks

Once my pages are mocked up I proceed with creating static html pages to place all images associated with the design mocks. I do not go into heavy development here for the idea is just to present the mocks as an initial design phase -- so I will in essence create empty clickable navigation elements that will navigate to different mock designed pages. Picture a fully design mocked image just placed on a html page with an empty nav that will navigate to other mock designs with empty navigation. This method works well for the client to get an idea of how the design works in a browser space and how navigating the site will work from a user perspective. Having mocks availble online also allows clients to always access your design and critique them at a drop of a dime. Having this structure builds confidence in your product for the clients feels they now have an immediate platform to start review and not just a pdf or loosely emailed images.

The snap crackle and pop presentation

Now that we have a viable resource of presenting the product interactively we need to get into the meat and potatoes of the presentation, here we turn to our presentation prince -- Keynote. Here we start to get into the why's, who's, where's, and when's of our web development and we're not going to bore the client with a run of the mill powerpoint presentation. We are going help the presenter by adding great animation and video elements. The idea here is that Keynote is a great tool for telling your story in motion with your speaker while presenting powerful graphics, video and animation without boredom. This is where we outline how the site will function and also add key data, jump and break points without leaving our product environment, so basically we keep the presentation within the confines of what we are selling and use all of our data and key points in a fun interactive environment. Key note has great preset animations and transitions and using these with some other more advanced animation we can build a piece that feels more like an interactive movie and less like a presentation. An example would be lets say we get to a part in your presentation where we would like to show the client how commenting will work for users, we could have the speaker click to the next keynote animation and give the illusion of a user scrolling down a page and actually display in motion what the user will see and interact with. Take on this method for this entire presentation and you will create a purely fun interesting presentation.

Side thoughts for keynote

The great thing about keynote is while it works great on a projector it can also work on the iPad as a clickable interface, so if your presentation is a bit more personal and your presenting to a smaller crowd you could put a Keynote presentation on your iPad and also make it an available resource for download on your client's iPad. You can also create clickable elements in keynote of your mock designs while also incorporating key presentation elements while you or the client animates through them.

Get it all on the web

Once you have done all the work to prep and present your product, you should look to make your presentation have an internal viral effect. In the previous paragraphs we spoke about getting mocks online and creating an excellent animated interactive presentation, we should have all this available for view online as well. On the same pages that we have our mock web pages on we should also have a link to a flash and html 5 video that is basically your entire presentation from Keynote in a video format and also have options to share with a friend and email. Keynote has an option to export as a movie file, we should convert this movie file into a .flv or .f4v as well as a format for html 5 ipad users if you so choose. Once you have your video formats in place create another webpage with graphics that will house our keynote video and well as any other downloadable information you want the client to access to. The client will be able to run through a video presentation of what the speaker gave and you can even export the video from Keynote with audio from the speaker themselves.

In closing

I basically just touched the surface in developing and fleshing out deliverables for such a product like this, but in thought I think I gave a argument as to what creativity could be added to your presentations to give your clients a longer lasting impression of the product you plan to deliver for them. This approach not only makes for a fun presentation, but it also adds a lasting impression by adding interactivity and visual power. When clients see such a granular approach to display and product presentation, they will forever remember the effort above your competitors. Get together with your and flesh some of these presentation ideas a bit more and you will see that just in creation it is fun, so just imagine how it will be received, GOOD LUCK!