: How do you present interactive webdesign? The interactivity becomes more and more presents in our design for the web, but has anyone found a good way to presents the interactivity to the client

@Kaufman565

That depends on what you're presenting.

If you're presenting the low level animation and experience, then you have to do it in the medium of the final product. Anything else is either a poor approximation or unimplementable. You would never present how a paper will fold or how its texture felt on hand or its subtle scent on a screen, why would you try to present how a button do hover effects on paper?

If you are presenting the high level interaction between users and the components, you can't feasibly build them without having spend a huge amount of time building it, so you need a stand in. Also, high level presentation done on the actual medium might give the false impression that you're nearly done or that you are already set on low level details that aren't actually the main topic for the current presentation, which is the high level interaction. A sketchy presentation would communicate the high level overview without overwhelming the client with the details.

Also important is that when you're presenting low level animation details is that you should put them in the context they're used in. So if you're presenting a menu bar, frame them in with the rest of the pages, when presenting a hover effect, present them as they'll be used in a form. Do take care to deemphasize those contextual elements so people can focus on the current point (e.g. mute their colors, use generic, neutral images, use lorem ipsum texts, etc).

Presenting these animation in the final medium will also allow you to do feasability study at the same time. Nothing is worse than promising a very awesome design your client just LOVE in After Effects, only to end up not actually being able to deliver them as they're just not possible in the medium.

Vote Up Vote Down

@Candy945

I often use html/css and javascript to display complex interactions but if the change is simple then I show the different states in layer comps (and use an over-sized cursor icon) to display the different states.



Original state
Show mouse icon and an annotation if necessary
Show state change ...

Vote Up Vote Down

@RJPawlick971

I prefer to build the interactions and present them in the browser. Prior to being able to show them that, we typically annotate interactions but don't try to replicate them outside of web code. When you try to replicate interactions outside of web code (After effects, Animated GIF, Axure, etc) you risk designing around that particular piece of software rather than the actual code that will be used in the real product.

Vote Up Vote Down

@Gail6891361

There are different applications out there for doing just this. There are some good ones that are free but they are limited in some cases to the functionality that you can demonstrate to your client. Invision is awesome and free but has more functionality for mobile devices than it does for desktop devices. It allows you to send a link to the client and allows them to make comments and send back. A word of warning with these guys. Make sure the application will do everything you need it to before you dive in.

There are other applications out there that allow the full gambit of functionality but you have to pay for them. Well worth the money in my opinion because you can work out the functionality before you start coding.

We use Axure at work before we start any design or code. This application is an amazing interactive wire framing tool You can build a full application with logic included. It allows you to get the full application/website built before ever designing or coding. It also had a button that will launch into a demo mode where you can present your design. This app is a favorite among UX designers.

And my final recommendation is Indesign. Indesign will allow you to build a full fledged working website demo with your design files. You can demo rollover states and click throughs to other pages in your document.

Hope these help. We use all of these methods at work depending on how much time and budget we have for the project we are working on.

Vote Up Vote Down

@Smith574

Your question is why I suggest coding in the browser (reference: What are the steps in designing a website?). The best way to display interactivity in a site, app, or anything is the medium it is to be used in. I'm not saying completely develop the site and deliver it. What I am saying is you can deliver stages in the design/development process:


Simple (handdrawn) sketch in paper or PDF form usually know as brainstorming. Some serious companies and individuals will have a 4' x 8' dry erase board covered with sketches on how an app is to be displayed.





black and white coded mockup of the site for device testing and a demo to the client if in the bid. I usually use Bacon Ipsum (dont like bacon reference "Alternative to Lorem Ipsum (dummy text) for websites")as my dummy content and if an image is going to be needed I will place a mockup image that says image.
If the device testing is complete I would move onto the interactions and effects if they are specifically requested in the project.
Add the color, gradients, and depth for the site.


I will suggest in interactive design do not make the mistake you find in many "themes" where everything is animated. To me, that becomes tacky and pulls away of the meaning of the site and it's content. I would suggest using animations on key areas that need to stand out or need to display more than one content deliverable.

If you're curious about how to host this, I would hope if you're doing web design you have your own site and I would do a sub-domain with a no follow applied.

Vote Up Vote Down

@Gail6891361

There seems to be recent trend towards creating animated GIFs of UI interactions (a quick search on Dribbble will reveal more). I imagine a lot of those are put together using After Effects. InVision recently posted an article outlining how they do this inhouse.

While I can understand the appeal of these kinds of deliverables (they're en-vougue, they look very impressive, and they are easily transportable) they strike me as inherently problematic on a number of fronts:


They set up inaccurate expectations from the client's perspective - AE let's you add all kinds of visual effects which might not actually be feasible when translated into CSS
They're not responsive - both in the media-query sense and the fact that the user has no interaction with them. The client can't actually try out the hover actions, they just passively observe them.
They require more work - at some point in the project these animations and interactions have to be translated into CSS. Why invest a lot of time animating these elements in one medium when you're simply going to push it all aside and do it in CSS


I'd recommend - and use - two different approaches:

Firstly, use paper prototyping for the high-level interactions and content relationships. This lets the client form a mental model fairly early on in the project. I favour the paper prototypes over any pre-existing prototyping frameworks or kits (a la Bootstrap). Although these are supposed to be minimal I find they still have too much visual impact and can distract the client into thinking that's what the end product will actually look like. This is less likely when you're using pen and paper sketches.

For the more detailed interactions (which sounds like what you're interested in) we use style tiles, a simplified single page that have a bunch of different components. The great things about these is that:


The client views them in the browser, so can test the interaction, see it's responsive
The same CSS is then used in the final product/site
The CSS can be documented thoroughly throughout the build, which can go towards developing a style guide.


It works well for us, we're able to iterate pretty quickly. Of course, this depends on having a fairly robust workflow, which we've spent quite a while developing, but we view that as an ongoing investment, as each subsequent project gets faster and faster.

Vote Up Vote Down

@Chiappetta793

This really depends on your workflow. Keep in mind that lots of web designers these days forego the use of any graphic software and design directly in their browser. That way, you present your designs in a browser, where they will end up. Clear an concise.

If you do use static mockups in any part of your workflow, you could always create a small dynamic mockup in a browser just to show the interactive parts you're planning.

The option I usually take is to present interactive elements in my webdesign at a later stage than the static visual design. Once static design is agreed upon, I start coding and use a preview site to present the interactive parts of the design. With the customer's input, that preview site quickly develops into the actual product.

Vote Up Vote Down

@Ann6370331

If your presentation is a printed material, personally I draw a wireframe or the end design proposal and annotate it with comments and explanations. and I do present all possible interaction like so - for example.


if you have a pulldown menu or a mega menu in the top navigation bar for example, I render a file having the nav bar with one opened menu item.
if there is a scenario opening a panel, I just render all the steps if it is necessary.
sometime I annotate my design/wireframe with an online sample URL reference.
any webpage element appears to the user as a leaf, I render it to my designs.


but if your presentation is a visual presentation, I do whatever I like using animation, transitions, sounds, video ...etc. to show the concept using one of the presentations software. and this methods is worth to do. as you shows the client all possible interactions in an attractive way and don't worry keeping a copy of your design in his hands - if you know what I mean ;)

Vote Up Vote Down