Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Nowadays, it seems that designers are having more cross-skills with front-end developers as never before.

My question is: How a UX/UI designer would be able to precisely design/describe front-end components such as sliders/carousels?

For example: My wireframe (http://tinyurl.com/basic-wireframe) has Javascript components like a slider and multiple carousels. If my designer is going to build a html/css out of the layout .psd, How is he going to work with carousel/slider if it's more complex and related to the front-end development?

share|improve this question

2 Answers 2

Complex interactions need to be built. The best way to ensure that the interactions meet your expectations is to work with the person developing the presentation layer code. In some situations that is the UX designer, in which case they have the luxury of coding up the prototype direction.

In other cases, it's a matter of the UXer working with the FED "side by side" and working in a more agile manner.

Optionally, in situations where you may be working in an environment where a lot of design patterns are re-used (typical in corporate settings) once a component is created, it can be added to a pattern/component library. That way, subsequent implementations can just borrow work that has already been done.

share|improve this answer
    
Agreed. You can't have expert skill level on all disciplines combined in one person. The only solution is to cooperate and iterate. –  Koen Lageveen Sep 9 '13 at 19:30
    
If you can't work with the designer/developers, notes attached to elements would be the next best thing. Moqups.com is a nice HTML5 wireframing tool (rather than the flash one that you are using). There is a notes tool, so you can leave notes within the UI to explain what certain elements do. Also, you can create click-throughs and whatnot. I would expect your wireframing tool you have those as well, but I'm a big fan of Moqups. –  oatmealsnap Sep 10 '13 at 2:21

You always can use tools like Axure and create "real" prototypes or even create animated gif with photoshop (I did it sometimes and it helped to the devs to understand the animations).

With this last options you will have a complete visual understanding of the animation/slider/carrousel.

share|improve this answer
    
The catch is that Axure is never "real" compared to what can or has to be built in front end code. There's always gap or mis-translation between the two. Furthermore, IMHO, the more one tries to make Axure fully interactive, the more time it takes than to just code it initially in JS/CSS/HTML in the first place. –  DA01 Sep 9 '13 at 14:12
    
I said "real" in the way you can build the prototype with the real graphics of the web; and of course there is always a gap, that's why is prototype. The idea to build the axure is for the UX designer not for the dev. –  Rafa Q. Sep 9 '13 at 14:39
    
I agree completely with that. I think the OP is asking how to communicate the interactions to the developer, though. (That said, I'm not positive that's the case). @paulmartin can you clarify? –  DA01 Sep 9 '13 at 16:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.