Sketching with PowerPoint? Was: How is MS doing Prototyping?

22 Feb 2006 - 3:08am
8 years ago
5 replies
2689 reads
Fredrik Ampler
2006

As many others on the list we use ppt for demos/prototypes, often building
the screens by combining photoshop images with ppt's own text elements &
boxes.
But we would like to use ppt for concept sketches too: can anybody recommend
a way to get that sketchty appearance without having to use Illustrator etc?
Is there any "plugin" that would enable the regular boxes in ppt to look
hand drawn? Is the inking feature of tabletPC's a way to go?

Cheers,
.f

*fredrik ampler*
Tel: +46 8 55 33 14 23

Mob: +46 703 33 75 70

user *experience *design
www.eniro.se

Comments

23 Feb 2006 - 1:43am
Gabriel White
2005

I did exactly this kind of thing with PowerPoint.

It's time consuming to create the tools, but you can get some damn
excellent results.

The trick is to create properly scaled hand drawn vector objects using
the drawing tool (so most of them can be scaled).

The process is basically this:

- Get yourself a Wacom
- Get screen grabs of screens with the widgets you want (at the screen
resolution you want to design for)
- Copy them into a PPT slide master, and scale them to fit the slide
- Use your Wacom to draw the widgets to the correct scale using the
pen drawing tool (using the screenshots as templates)
- Create a library of widgets (windows, elements, etc) using the
things you've drawn
- Spend days getting them all looking nice and pretty
- Spend many more days creating "smart" binding of objects to make it
even spiffier (for example, grouping text boxes with the "outline" of
a text box, creating scalable button widgets with magical text labels)
- Spend some more days creating useful "super-widgets" (e.g. web
browser, wizards, etc)
- Spend the weekend creating hand drawn scalable textures and binding
those with objects to make crayon-like coloured blob effects. Create
them in all different shapes and sizes for extra enjoyment.
- Find a free hand drawn font (Gragsie is a goodie) and embed it into
the template

Once you're all done you should one PPT file that contains widgets
galore like this:

www.gabrielwhite.com/ixdapptmockup/pptmockup_widgetlibrary.gif

Which then allows you to create screens that look something like this:

www.gabrielwhite.com/ixdapptmockup/pptmockup_example.gif

The benefits are:

- Fantastically easy to update reams of screens quickly (even between
user tests), especially if you're smart about using the Slide Master
feature.
- Can create the hand-drawn effect on the computer easily
- Multiple designers can work on it and it doesn't get all mixed up
with each of their own hand-drawing styles
- It still looks hand drawn
- Easy to print out for user testing
- What you create WILL be able to be built (i.e. you don't get graphic
designers yelling at you for writing too small)

I've played with Denim, and it's just too crude in many ways at the moment.

Of course, this kind of tool does not replace hand drawn design work.

Gabe

www.smallsurfaces.com - mobile user interface and interaction design resources

On 2/22/06, Fredrik Ampler <fredrik.ampler at gmail.com> wrote:
> [Please voluntarily trim replies to include only relevant quoted material.]
>
> As many others on the list we use ppt for demos/prototypes, often building
> the screens by combining photoshop images with ppt's own text elements &
> boxes.
> But we would like to use ppt for concept sketches too: can anybody recommend
> a way to get that sketchty appearance without having to use Illustrator etc?
> Is there any "plugin" that would enable the regular boxes in ppt to look
> hand drawn? Is the inking feature of tabletPC's a way to go?
>
> Cheers,
> .f
>
> *fredrik ampler*
> Tel: +46 8 55 33 14 23
>
> Mob: +46 703 33 75 70
>
>
> user *experience *design
> www.eniro.se
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

23 Feb 2006 - 5:52am
debroise xavier
2006

About sketchy aspect : just try Photofiltre (from Antonio Da Cruz, free
tool), a fantastic tool with lot of filters. Easy & quick.
Im sure there are some plugins for that with photoshop;

I also use the kind of technics every one talk about, except iilustrator or
flash (dont have to learn).

* whiteboard is very easy to use during a group session to capture first
ideas & explore some concepts : easy to modify, and with a camera I can keep
& transfer ideas.
* PowerPoint and Word to explore ideas and communicate (combined with
Photoshop or GIMP). One problem is that people often think they have the
final version, and I have to explain I am not a designer, just a usability
consultant !
(I recently tried Excel to follow people here, but impossible for me)
* I dont neglect pen & paper when time is short. People don't really care
about the aspect assuming that it is early steps of project.

next step for me : wacom or tablet PC which seems very interresting.

xavier

24 Feb 2006 - 10:58am
Fredrik Ampler
2006

Gabe,

that was perfectly, exactly, most precisely to the very point what I was
looking for! Excellent job, right there, very impressive. What you are using
for hand drawing is the inking feature of Office, which is unavailable
unless you have a tablet installed, right?
I'll order that wacom tablet right away!
(I too found Denim too crude for what I needed, but that was in back in '98
or so. Is the new version "better"?).
Thank you, Gabe!

Comments on the comments (thank you all!):
I'm looking for that crude hand drawn conceptual design that holds well for
exec presentations while enabling us to get the ease and speed of ppt for
testing and setting the layout.
Of course, I still hold whiteboards and pen&paper equally high for what
they're best for: getting ideas down and sharing with fellow designers.

Thanks,
.f

On 2/23/06, Gabriel White <gabrielwhite at gmail.com> wrote:
>
> I did exactly this kind of thing with PowerPoint.
>
> It's time consuming to create the tools, but you can get some damn
> excellent results.
>
> The trick is to create properly scaled hand drawn vector objects using
> the drawing tool (so most of them can be scaled).
>
> The process is basically this:
>
> - Get yourself a Wacom
> - Get screen grabs of screens with the widgets you want (at the screen
> resolution you want to design for)
> - Copy them into a PPT slide master, and scale them to fit the slide
> - Use your Wacom to draw the widgets to the correct scale using the
> pen drawing tool (using the screenshots as templates)
> - Create a library of widgets (windows, elements, etc) using the
> things you've drawn
> - Spend days getting them all looking nice and pretty
> - Spend many more days creating "smart" binding of objects to make it
> even spiffier (for example, grouping text boxes with the "outline" of
> a text box, creating scalable button widgets with magical text labels)
> - Spend some more days creating useful "super-widgets" (e.g. web
> browser, wizards, etc)
> - Spend the weekend creating hand drawn scalable textures and binding
> those with objects to make crayon-like coloured blob effects. Create
> them in all different shapes and sizes for extra enjoyment.
> - Find a free hand drawn font (Gragsie is a goodie) and embed it into
> the template
>
> Once you're all done you should one PPT file that contains widgets
> galore like this:
>
> www.gabrielwhite.com/ixdapptmockup/pptmockup_widgetlibrary.gif
>
> Which then allows you to create screens that look something like this:
>
> www.gabrielwhite.com/ixdapptmockup/pptmockup_example.gif
>
> The benefits are:
>
> - Fantastically easy to update reams of screens quickly (even between
> user tests), especially if you're smart about using the Slide Master
> feature.
> - Can create the hand-drawn effect on the computer easily
> - Multiple designers can work on it and it doesn't get all mixed up
> with each of their own hand-drawing styles
> - It still looks hand drawn
> - Easy to print out for user testing
> - What you create WILL be able to be built (i.e. you don't get graphic
> designers yelling at you for writing too small)
>
> I've played with Denim, and it's just too crude in many ways at the
> moment.
>
> Of course, this kind of tool does not replace hand drawn design work.
>
> Gabe
>
> www.smallsurfaces.com - mobile user interface and interaction design
> resources
>
> On 2/22/06, Fredrik Ampler <fredrik.ampler at gmail.com> wrote:
> > [Please voluntarily trim replies to include only relevant quoted
> material.]
> >
> > As many others on the list we use ppt for demos/prototypes, often
> building
> > the screens by combining photoshop images with ppt's own text elements &
> > boxes.
> > But we would like to use ppt for concept sketches too: can anybody
> recommend
> > a way to get that sketchty appearance without having to use Illustrator
> etc?
> > Is there any "plugin" that would enable the regular boxes in ppt to look
> > hand drawn? Is the inking feature of tabletPC's a way to go?
> >
> > Cheers,
> > .f
> >
> > *fredrik ampler*
> > Tel: +46 8 55 33 14 23
> >
> > Mob: +46 703 33 75 70
> >
> >
> > user *experience *design
> > www.eniro.se
> > ________________________________________________________________
> > Welcome to the Interaction Design Association (IxDA)!
> > To post to this list ....... discuss at ixda.org
> > List Guidelines ............ http://listguide.ixda.org/
> > List Help .................. http://listhelp.ixda.org/
> > (Un)Subscription Options ... http://subscription-options.ixda.org/
> > Announcements List ......... http://subscribe-announce.ixda.org/
> > Questions .................. lists at ixda.org
> > Home ....................... http://ixda.org/
> > Resource Library ........... http://resources.ixda.org
> >
>

24 Feb 2006 - 11:16am
Lyle Kantrovich
2005

On 2/23/06, Gabriel White <gabrielwhite at gmail.com> wrote:
> The process is basically this:
> - Get yourself a Wacom

... details of weeks of pretty amazing technical work deleted

> Once you're all done you should one PPT file that contains widgets
> galore like this:

Gabe,

A few additional process steps you didn't include, but might consider
(you've already done the first one):

- Share description of the work with others online so they can do this
stuff themselves.

- Share the end resulting tools you've built with others (for free or
for a price) so they can avoid all this work themselves, and so you
can help practitioners move the field forward. This is a great way to
get credit for your work and build your reputation. (e.g. I think
that sharing his IA "visual vocabulary" Visio stencils did a lot to
further Jesse James Garrett's reputation and career.) Note that Boxes
and Arrows is one online magazine that has a history of helping folks
get this stuff published out to the masses.

--
Lyle

--------------------------
Lyle Kantrovich
Blog: Croc O' Lyle
http://crocolyle.blogspot.com

Usability Professionals' Association
http://www.usabilityprofessionals.org

24 Feb 2006 - 9:34pm
Gabriel White
2005

Lyle & Fredrik,

Thanks!

I would love to share the tools with the broader community, but the IP
on the work I did rests with the employer I left almost 2 years ago
(The Hiser Group - www.hiser.com.au).

I toyed with the recreating the system after I left that employer to
share with the broader community, but I just haven't had the time (it
represents at least 1 month's work).

Given the some of the enthusiasm I've seen here, I'll think again
about investing my time on this project.

Gabe

www.smallsurfaces.com - mobile user interface and interaction design resources

> - Share the end resulting tools you've built with others (for free or
> for a price) so they can avoid all this work themselves, and so you
> can help practitioners move the field forward. This is a great way to
> get credit for your work and build your reputation. (e.g. I think
> that sharing his IA "visual vocabulary" Visio stencils did a lot to
> further Jesse James Garrett's reputation and career.) Note that Boxes
> and Arrows is one online magazine that has a history of helping folks
> get this stuff published out to the masses.

Syndicate content Get the feed