good template examples

19 May 2006 - 3:02pm
7 years ago
8 replies
947 reads
Andrea Kulkarni
2006

Currently in my work as an Instructional Designer we
are using Word docs from the content authors, which we
then edit to add in all the interaction and animation
details before handing it off for Flash production.
The templates we have are a bit clunky so I'm looking
for some more elegant examples if anyone is willing to
share or point me towards resources.

The content is educational and is presented as text
plus play-through animations, click-through
animations, interactive animations, and
interactive-click-throughs.

Thanks,
Andrea Kulkarni
Instructional Designer

Comments

20 May 2006 - 8:43am
jbellis
2005

Andrea,
Not that I expect I'll be able to cite specific templates, but I am always
interested to understand more about how people work, and I'm fascinated by
the
Kulkarni Clunky-Elegance Scale. Are you asking for examples that have better
typography/layout/whitespace/imagery? Boilerplate interface artifacts that
many UI folks hoard in Visio? Better use of Word's intermediate automation
features such as Styles? Or perhaps geeky automation such as macros,
auto-start features, custom toolbars, etc.?
Thanks,
www.jackBellis.com,
www.WorkAtHomeWednesday.com
----- Original Message -----
From: "Andrea Kulkarni" <andreack101 at yahoo.com>
> Currently in my work as an Instructional Designer we
> are using Word docs from the content authors, which we
> then edit to add in all the interaction and animation
> details before handing it off for Flash production.
> The templates we have are a bit clunky so I'm looking
> for some more elegant examples if anyone is willing to
> share or point me towards resources.

20 May 2006 - 11:03am
Graham White
2005

Jack,

What does this reference, Kulkarni Clunky-Elegance Scale?

Thanks,
Graham White

----- Original Message -----
From: "jackbellis.com" <jackbellis at hotmail.com>
To: <discuss at ixda.org>
Sent: Saturday, May 20, 2006 9:43 AM
Subject: Re: [IxDA Discuss] good template examples

> [Please voluntarily trim replies to include only relevant quoted
material.]
>
> Andrea,
> Not that I expect I'll be able to cite specific templates, but I am always
> interested to understand more about how people work, and I'm fascinated by
> the
> Kulkarni Clunky-Elegance Scale. Are you asking for examples that have
better
> typography/layout/whitespace/imagery? Boilerplate interface artifacts that
> many UI folks hoard in Visio? Better use of Word's intermediate automation
> features such as Styles? Or perhaps geeky automation such as macros,
> auto-start features, custom toolbars, etc.?
> Thanks,
> www.jackBellis.com,
> www.WorkAtHomeWednesday.com
> ----- Original Message -----
> From: "Andrea Kulkarni" <andreack101 at yahoo.com>
> > Currently in my work as an Instructional Designer we
> > are using Word docs from the content authors, which we
> > then edit to add in all the interaction and animation
> > details before handing it off for Flash production.
> > The templates we have are a bit clunky so I'm looking
> > for some more elegant examples if anyone is willing to
> > share or point me towards resources.
> ________________________________________________________________
> 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
>

20 May 2006 - 11:19am
Andrea Kulkarni
2006

I don't need to worry about navigation or toolbar
types of issues. I'm looking for a more elegant way
to spec animations, from how each screen looks, to
what each objects behaviour is, and what captions are
displayed depending on conditions.

Right now I'm thinking of using a drawing tablet to
add more sketched images of screen layouts, indexing
objects and then describing them and including a flow
chart of decision points and responses.

When I say our documents are cludgy it means there
isn't an easy way to see how the animations will flow
such as you might find if you mocked up in Powerpoint
for example (I considered using Powerpoint but there
isn't enough space to elegantly handle the associated
behaviour notes and art specs) We have 50+ pages to
go through to cover 5 or 6 animations and text.

Andrea Kulkarni
Instructional Designer
>Are you asking for examples that have better
>typography/layout/whitespace/imagery? Boilerplate
>interface artifacts that many UI folks hoard in
Visio?
>Better use of Word's intermediate automation
>features such as Styles? Or perhaps geeky automation
>such as macros, auto-start features, custom toolbars,
>etc.?
>Thanks,
>www.jackBellis.com,

21 May 2006 - 3:28am
Mike Baxter
2004

> The templates we have are a bit clunky so I'm looking
> for some more elegant examples if anyone is willing to
> share or point me towards resources.

Templates - bah!

Design patterns are the future :)
Yahoo design patterns - http://developer.yahoo.com/ypatterns/index.php
Blog on above - http://yuiblog.com/

BTW for anyone interested - discussion on e-commerce design patterns:
http://www.e-consultancy.com/forum/103808-e-commerce-design-patterns.html

Mike Baxter
www.saleslogiq.com

21 May 2006 - 7:07am
Baron Lane
2005

Mike Baxter <mike at saleslogiq.com> wrote: [Please voluntarily trim replies to include only relevant quoted material.]

> The templates we have are a bit clunky so I'm looking
> for some more elegant examples if anyone is willing to
> share or point me towards resources.

Templates - bah!
I thought it was plastics.

---------------------------------
Yahoo! Messenger with Voice. PC-to-Phone calls for ridiculously low rates.

21 May 2006 - 1:32pm
jbellis
2005

Mike,
If I understand the discussion correctly, you're talking about reusable
design solutions, whereas Andrea was inquiring about what I would call
"spec" techniques (one step before the solutions themselves), and since she
inherits MS Word docs is asking about DOTs or boilerplate DOCs. I'm guessing
the answer might come from the Axure/Denim/Irise court???
-Jack
----- Original Message -----
From: "Mike Baxter" <mike at saleslogiq.com>
To: "jackbellis.com" <jackbellis at hotmail.com>; <discuss at ixda.org>

> Templates - bah!
>
> Design patterns are the future :)

22 May 2006 - 3:24am
Mike Baxter
2004

Jack

>If I understand the discussion correctly, you're talking about reusable
>design solutions, whereas Andrea was inquiring about what I would call
>"spec" techniques (one step before the solutions themselves)

Interesting point!

One of the issues we've been discussing about e-commerce design patterns is
the extent to which they are design solutions (in an almost copy-and-paste
sense). The original concept of design patterns (Christopher Alexander's
achitectural and planning patterns) was that they were a set of principles
to be interpreted and embodied in a multitude of different ways to create
novel and potentially innovative solutions to a common problem in a
particular context. Now, I agree that a lot of the design patterns we see
relating to interaction design (including to some degree those published by
Yahoo!) focus on the details of the solution rather than its underlying
principles.

The challenge, therefore, is to develop design patterns that ARE about
principles and thus are 'one step before the solutions themselves'.

Cheers

Mike

22 May 2006 - 12:36pm
Christopher Fahey
2005

Andrea Kulkarni wrote:
> I don't need to worry about navigation or toolbar
> types of issues. I'm looking for a more elegant way
> to spec animations, from how each screen looks, to
> what each objects behaviour is, and what captions are
> displayed depending on conditions.

When designing for rich interactions and animated UIs, I've found that it's
often valuable to NOT use pre-existing templates at all and to instead
innovate a new presentation technique specifically for the UI being
designed. Interaction design is, to me, in large part a process of visual
communication. A UI designer must sometimes "reinvent the wheel" in the
artifacts and documentation. I value IAs with strong visual communication
and graphic design skill. If you think about it, an IA/ID/UX designer is in
some respects a graphic designer whose audience is a little more
specialized.

Think of it this way: when an illustrator is asked to make a diagram for USA
Today, the New York Times, or National Geographic about how, say, the human
genome is being mapped or about how the NSA cross references America's
private phone calls, they can't just grab a template. They need to draw on a
long history of visual communications: graphic design, instructional design,
visual metaphors, information design, cartoons, whatever it takes.

Sometimes UI design is the same. Sometimes you must invent a new template to
suit the application you're designing.

My specific advice is this:
1) Think about using some cartoon conventions: storyboards, word balloons,
etc.
2) Look at the sketches and whiteboard drawings you and your team
undoubtedly made along the way. Or just start drawing a diagram (with pencil
and paper, or whiteboard) with the intention of using it to help explain the
application to a colleague. Draw all the little boxes, arrows, and
thumbnails you need to communicate the concept, without too much excess
detail. You'll have some rough diagrams, some small some large, some notes,
some erasures and dotted likes, etc. Stop and take a look at the diagram you
just drew. Hey look, maybe that's a good sketch for your design template?

(This is exactly what happened to my team a few years ago when designing a
mobile app: We were making flowcharts on the whiteboard, and in each box in
the flowchart we were practically designing the whole UI for each screen.
Then we realized: our formal wireframe and flowchart documents can be one
and the same document, unifying them on a single diagram. One artifact
instead of two. Worked out great.)

-Cf

Christopher Fahey
____________________________
Behavior
http://www.behaviordesign.com
me: http://www.graphpaper.com

Syndicate content Get the feed