Other Cool Stuff

How I Use Keynote for Web Interface Design

By November 4, 2009 December 3rd, 2012 2 Comments

You heard it right…I use Keynote to develop iterations on user interface design for our products and front end retail site.  This method saves us a ton of time and cost in design and development.  I used to use PowerPoint, but then converted to a MacBook Pro a few months ago, and now I’m hooked on Keynote.

Before I get into how this works, I need to mention how cool is it that you can control your Keynote slide presentation with your iPhone by downloading the Keynote Remote app for like two bucks.  Just had to get that off my chest…

Ok, here we go:

1. Start with a basic wireframe – you’ll need to spec something out for your designer to get started.  Give them the basic elements of where you want navigation, sub-navigation, and general text and image requirements.  You basically have your header, body section and footer area.  You also might want to have an interior page concept as well.  Below I am showing you how I went from a PowerPoint slide (at the time) to the almost final design:

keynote wireframing

 

Here is another example of how I started designing and concepting our SiteJuice™ tool in Keynote and how it transformed into Photoshop:

keynote wireframing

 

2.  Research web icon sets and photos you want to use – I like to use actual icons and images in my concepts to portray the website as real as possible.  This way you can see how it would actually look, and then play with size and location.  Go to istockphoto or similar and look for “web icons” and you’ll find thousands.  I ended up with the Universal icon set, and purchased about nine different sets.  You can do a screen capture to use in your screenshots while concepting – just make sure you go and buy them later 🙂

3.  Imitate AJAX as best you can – this will give you a really good sense of how the page is going to work when a user clicks on a menu item or for areas where you expand the section.  The best way to replicate this is to create the section on one slide, and then copy and paste the graphics to another slide (they will plaste in the exact same location), and then move a section down the page and add new content.  Wheen you toggle back and forth between pages it will look like the section is expanding as if you clicked on it.  This is a neat trick and gives you a realistic sense of how the page will work.  Here is an example below:

wireframing in keynote

 

4.  Now that you have the elements, you can concept almost anything – now that your designer has established the fonts, colors, icon sets and general layout, you can use these elements to do just about anything without having to bother your designer, or waste expensive development time.  You can easily iterate several ideas in a matter of hours, discuss them and choose the best option and then give THAT to your web designer/CSS/layout person.  Below is an example of our payment processing page that I built completely in Keynote in about 30 minutes simply using Jing or whatever screen capture tool you want, and making copies of the elements I needed.

keynote wireframe

 

5.  You can even create quick logos in Keynote – I took our existing logo in a PNG format and created our new Live Support logo completely in Keynote.  I didn’t need anything hi-res since this was for web, so 72 dpi will do.  I took our logo and used the stroke tool to create the effects of the “Live Support” on a piece of paper that was slightly off the page and taped along the top.  All of these features are in Keynote.

 

Give it a shot!  For $79 or less, you can get iWork with Keynote and start quickly iterating screenshot concepts for your product or retail site.  It is sure to save you time and money.

Ryan Kelly

Ryan Kelly

Ryan is the founder and CEO of Pear Analytics and has helped hundreds of customers with their Internet marketing since 2003. He has spoken on various topics of SEO, Analytics and other marketing at conferences in New York, Chicago and Vancouver. Clients he has consulted include Sears, KMart, CareerBuilder and PEER 1 Hosting. Ryan currently teaches two Internet marketing classes at Trinity University in San Antonio.

2 Comments

  • […] How I use Keynote for web interface design Il n’est pas nécessaire de rappeler l’importance des wireframes dans la conception d’une application. En revanche, vous seriez probablement étonné d’apprendre que certaines personnes utilisent Keynote (ou PowerPoint) pour les créer. […]

  • Sean says:

    the images on this page seem to be missing (could be a wordpress thing

    thanks for the article

Leave a Reply