0

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?

Improve this question

2 Answers 2

Reset to default
1

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.

Improve this answer
2
  • 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, 2013 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.
    – elliottregan
    Sep 10, 2013 at 2:21
0

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.

Improve this answer
3
  • 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, 2013 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, 2013 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, 2013 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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