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 ? I talk mainly about the small animations like these one:
I havn't yet found a way that I really like. I'm curious about how you guys do it.
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.
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:
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.
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.
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 ;)
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:
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:
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.
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.
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.
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 ...
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.
