JQuery for UX Designers
What if you could make your wireframes interactive? Interactive wireframes are a very powerful tool in the UX designer’s work-flow, and JQuery is the fast and concise tool to get them up and working for you. JQuery facilitates the vital steps of designing and testing complex interactions of today’s modern websites and web applications.
In this seminar, Rich Rutter gets you started with JQuery—assuming no prior knowledge—and shows you lots of examples, hints, and tricks. Just 5 minutes into this seminar, you’ll see JQuery in action and have something you can use in your own wireframes.
Employ Simple Show and Hide Techniques
The essence of JQuery is to find something and do something to it. This technique easily shows different page states so your team and test participants can “do things” to your design.
- See, step-by-step, how to put this simple, yet useful example of JQuery in action
- Use modules and plug-ins to make your design to do simple things, without worrying about the performance of production code
Toggle Wireframe Annotations
Add notes to your interactive design.
- Turn your comments on or off depending on who’s viewing your design
- Add lists, comments, or direction for developers and others who need to work with your design
Fake Simple Ajax Interactions
Without creating production level code, get your design to quickly and easily do its thing—click something and change occurs—for your developer or client.
- Replicate what happens when you click something like a “favorite button”
- Fill in all the steps of an Ajax interaction such as a slight delay or adding different page states on a single page
Get Started with JQuery UI Widgets
Rich will introduce a library with options and widgets that you can easily put in place. In many cases you’ll see how to simulate what the full interaction could be.
- Explore modal dialogues, an intrusive piece of interaction and a good example of something you want to test: Do I really need a modal, or is a link better?
- Get more examples: Prototyping calendars, lightboxes, and more.
Rich will show you the power of combining discreet interactions together with a complex interaction.
Regardless of your Javascript experience, this seminar will be a great way to start using JQuery and take your interactive skills to the next level. JQuery gives us a clean, interactive feel, and can be the difference between a slick design and something annoying or disruptive. It brings rich interactivity to your HTML and CSS3.
Rich will incorporate complex interaction examples along with providing excellent sources of documentation and tutorials for your toolbox. The seminar will keep theory to the bare minimum and focus on getting you started with practical take-aways you can use straight away.
The real power in what you’ll learn is getting very close to a final look and feel of your intended design with just a bit of effort and without having to build the whole application. Get over the initial hurdle of the JQuery learning curve and gain momentum in your design process.