Quickly Make Interactive Prototypes in the Browser

When making a website, knowing code is everyone's business. Ryann shares how useful and not scary making her first interactive prototype was.

Every bit of development knowledge a UX Designer obtains greatly assists planning and design decisions. I'm always looking to increase my dev knowledge and to find tools that allow me and our clients to better understand user interactions. That's why the idea of browser mockups that remove confusion during planning made attending Nate Schutta's jQuery Mobile Prototyping workshop at UX Immersion a no-brainer.

My First Interactive Prototype

Nate explained that jQuery Mobile isn't scary to jump into for beginners, and he gave me some things to re-think about my way of prototyping.

During the lab portions of the workshop I realized what I thought would be impossible, working within a text editor, actually allowed me to prototype more quickly than I could in Keynote! I didn't have the luxury of tweaking the spacing of each element, which pushed me further from design and closer to planning the experience.

Check Out the Prototype

Ok, now let me point out that after one workshop and a few hours on my own, I created an interative protoype with 88 lines of code.

Why UX Designers Should Try jQuery Mobile

jQuery Mobile not only starts you off in the right spot for RWD prototyping (it's called mobile for a reason), it offers a nifty little tool to tweak the CSS! ThemeRoller is highly customizable. You can change the fonts and theme colors as well as shadows and corner radii. Believe me when I say this will be useful when prototyping multiple applications within one project and all the pages start blurring together.

After Nate showed us how little code it takes to add models and page transitions, I was confident my clients would better understand my new prototypes. You can easily show where a link will lead or how a success screen will appear. Explaining this with notes in a static prototype leaves a lot of room for misunderstandings and confusion.

Beginners, I urge you to swallow your fears and give it a try. With such an extensive library of demos, the possibilities are endless.