Web Prototyping With PowerPoint

Prototyping with PowerpointWebsite re-designs are a common project on the hands of marketers at companies of all sizes. From quick home page makeovers to complete re-design and re-branding,there’s a lot of communication between the marketing team and web developers and designers, a process that involves lots of meetings, the developers spending hours on photoshop mockups that don’t look like what you asked, and a lot of scribbling on paper and on whiteboards.

How can we improve this process? The answer may lie in a tool most people already have… MS PowerPoint!

PowerPoint Prototypes

What I’ve successfully done in the past to help the communication between the marketing team and the designers is to use PowerPoint as a way to visually communicate with the how the new design and functionality will work. Instead of waiting for the designer to come up with a Photoshop or HTML mockup of something that doesn’t resemble what I asked for, the PowerPoint slide can serve as a guideline and visual discussion tool for everyone involved.

Marketers are good at visual communication, but not necessarily experts with the design tools. PowerPoint is something everyone knows how to use, though. So why not take advantage of this free (your company is likely using MS Office suite which comes with PowerPoint) tool and use it for some brainstorming? Mockups or prototypes created w/ PowerPoint are not supposed to replace professional wireframing tools such as Balsamiq, Justinmind, or Sketchflow, but should rather be used to help non-programmers and non-designers communicate their ideas. Plus, if you are discussing elements of the website design with other management team members or the CEO, the ability of quickly changing something on the slide will help you get approval faster.

Although you can make interactive prototypes using PowerPoint, my suggestion is to keep it simple and focus on key elements you’d like to communicate to the designers such as overall layout, placement of objects, and so on. You can get so deep into making sure your animations work if you’re going for a full interactive prototype that it will cost you many hours that will be just thrown away since it won’t be used again.

The key is to keep it nice and clean. A good starting point on how to do this is Travis Isaacs presentation “How to Wireframe Like a Ninja“. It talks about Keynote (a presentation tool for the Mac), but 99% is transferable to PowerPoint.

It also helps if you download something like this PowerPoint Prototyping Toolkit from Long Zheng, which gives you some nice tools you can start using right away.

So what are you waiting for? Start prototyping today! 🙂

Advertisements

2 Responses to Web Prototyping With PowerPoint

  1. Dan Moser says:

    Hi,

    Thanks for mentioning Justinmind, and congratulations for your article.

    One of our core objectives is to make our tool usable by people with different backgrounds, of course technical staff but designers or people more focused in the business side as well.

    That’s why we made our best to create a really plain way of getting things done. Complex interactions for your wireframe can be implemented without coding at all, just by drag&dropping elements and operators from our expression builder.

    Give it a try! http://bit.ly/bXJBmt

    Cheers,
    Dan
    @Justinmind

  2. […] and sending them back. How about using some technology to make things easier? I’ve already discussed the use of PowerPoint for website reviews and if you’re starting from scratch it not only provides you with a grate starting point but […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: