You’ll learn to…
- Employ Simple Show and Hide Techniques
- Toggle Wireframe Annotations
- Fake Simple Ajax Interactions
- Get Started with JQuery UI Widgets
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.
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.
Richard explains what you'll learn in this 90‑second preview…
Well, beside being really smart, he’s got that cool English accent. Ok. Ok… Richard is an information architect living in Brighton, England. He specializes in user-centered design with particular emphasis on accessibility and web standards. Richard is an accomplished technical editor and has contributed to numerous books including Beginning CSS Web Development and HTML Utopia.
Richard is also a specialist in web accessibility and co-wrote Web Accessibility: Web Standards and Regulatory Compliance. Richard also co-wrote Blog Design Solutions in which he explains how to design your own weblog application. Richard’s writings features regularly in magazines such as .Net.
Before setting up Clearleft, Richard worked as the project lead on Multimap’s hugely successful public site. He was responsible for rebuilding Multimap.com to web standards, a cost saving move which made the site more accessible and faster.