Sketching. Today we are happy to release two printable UX sketching and wireframing templates, designed by Pixle for Smashing Magazine’s readers. This article presents Outline, a set of sketching and wireframing papers for mobile platforms and Tapsize, a set of templates for checking optimal tap areas without a mobile device.
Tools. Full disclosure: Foraker Labs, the creators of UX Recorder, contacted me requesting a review of UX Recorder in return for a promo code to test the application. This has not influenced my overall positive or negative impressions of the application.
Tools. Interaction designers create wireframes in tools such as Adobe Illustrator, OmniGraffle and Microsoft Visio. Originally, these wireframes were primitive shapes drawn to represent various UI elements. Many of us cannot imagine life without them. There are, however, reasons to consider moving to the cloud to do interaction design.
Prototyping. The other month, Justinmind Prototyper went ahead and split their pricing plans into two, with a paid pro and a free version. As a refresher, this is an advanced prototyping tool allowing for such things as rich interactions, data simulation, variable based and conditional rules (for both Mac OSX & Windows). They have also shared a few of their prototype examples online.
Featured
Prototyping. http://www. powermockup. com/ We have developed PowerMockup, an add-in for PowerPoint that makes it easy to create wireframes for desktop and web applications. Feel free to check it out at www.
Tools. My good friend Nick Bowmast has created Mr Tappy, a rather well engineered kit for mounting cameras onto mobile devices and tablets, for the purpose of filming the screens for usability testing. The rig costs $289. 00, which isn’t expensive when you consider it’s made from aircraft grade aluminium with stainless steel nuts. This thing is a labour of love.
Tools. If you're looking for gifts for your team, Nick Finck has once again rounded up a massive list of gear for UX geeks. Thanks, Nick. .
Tools. Reframer is a collaborative web app for collecting and analyzing qualitative data. You start by capturing data into the app—things like customer feedback, free text responses in surveys, emails, interviews, and usability test data. The system then uses the aggregated information and provides a view reframed with quantitative values based on a significance rating that team members apply.
Prototyping. Here comes InVision, a simple click-through prototype building app. The tool itself is pretty light (in a good way) in that you do not design the actual pages in InVision. Instead, the idea is to design your screens in your other weapons of choice (Fireworks, Illustrator, Balsamiq, Photoshop etc. ) and then upload them into InVision.
Tools. There are many great methods for gathering insights from users. And there are definitely many software programs and services to help. Instead of making a long list of them I've presented the few I use the most when conducting user research. Lab Based Usability TestThe classic method of usability testing involves bringing users into a lab (usually with a one way mirror) and observing them as they attempt tasks.
Tools. Usability and user experience testing is vital to creating a successful website, and only more so if it’s an e-commerce website, a complex app or another website for which there’s a definite ROI.
Tools. The Doodlekit Icons set contains 700+ hand-drawn icons for use in sketch-style wireframes. You can buy them in vector format to use in the design tool of your choice, or download the free set of 32 x 32 px PNGs. Here's a screenshot of the icons in the new custom icon feature that's available in the pre-release version of Mockups. More info here.
Tools. It took a while, but here are some results from what people submitted for the Feedback Note call for samples: Dedicated Note Spaces Craig’s preferred method of capturing feedback is on the wireframes themselves within a dedicated notes section. After printing out the full set of wires on a large piece of paper he then takes notes and sketches on top of what is already there.
Tools. @nickf called me out for not having iPad templates in the Konigi OmniGraffle Wireframe Template, so I got off my lazy ass and added some since this thing hasn't been updated in over 2 years! Added iPad Portrait 1 up, iPad Portrait 2 up, iPad Landscape 1 up. They have guides for 2x2 or 3x3 grid. Note, this is for OmniGraffle Pro ONLY. You will not be able to edit shared layers to modify the headers and other templates.
Prototyping. One of the things that slightly bugs me about Omnigraffle is that it doesn't have built-in objects for basic HTML form elements that behave like real ones. I would love to have these to add a little more realism to my wireframes and possibly extend them to work inside of a more full-on prototype with "real" forms.
Tools. I've been asked several times in the past to add iOS stencils to the wireframe stencil set I make. These are some that I know of, and have been recommended to me by @OmniGraffle and @jmk. iA's OmniGraffle port of the Teehan+Lax iPad Stencils David Morford's iOS Design Stencils iPad and iPhone Design I prefer to link to these than to throw together something myself until I actually work on an iOS project.
Prototyping. By Peter Hornsby Published: June 24, 2011 “I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving. ”—Jeffery Veen “I really get a feel for what I’m designing only when I can start to pull my ideas together and see how they work. Prototyping lets me visualize how something will work and identify problems and opportunities early in the design process.
Tools. Adobe Fireworks comes with a number of nice looking, visually polished user interface elements that can be used for prototyping and wireframing. In the lack of something more rough and sketchy, Dragnet has made a visually bare bones web library that you are free to download.
Featured
Tools. Our guest author this week is Daniel Ritzenthaler. Dan is a web design consultant based in Boston. He makes videos about common questions he hears from clients on Design Thoughts, and can always be reached on Twitter @danritz. Learn more about him at http://wurkit.
Tools. Lately, Apple Keynote has been gaining popularity among designers as a wireframing and prototyping tool. Features like multiple slide masters, styles, grouping, animation and hyperlinks make it ideal for crafting interactive prototypes and UI narratives. Today’s freebie, Keynotopia, is a free set of interface elements for Keynote that makes it possible for anyone to create these prototypes in minutes.
Tools. To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements. And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details.
Tools. In the light of Keynote as a recently popular tool for creating wireframes, here comes another emerging stencil for all to use. As the project name suggests, the template is free, comes with various form elements, modal boxes, and a number of useful header styles. One thing that stands out is the way the stencil is being positioned within github, and the author openly invites others to fork it, tweak it and improve it.
Prototyping. Recently, an increasing number of designers (myself included) are turning to Apple's presentation making software, Keynote, to design and prototype software applications. Here's a few reasons why and some tips learned along the way. Why Keynote?Product strategy and design consultant, Stephen P. Anderson provides an overview of what makes Keynote a compelling design tool.
Tools. An awesome Adobe Illustrator library has just been released for designing user interfaces. The set contains hundreds of vector shapes for GUI form elements, 260 vector based interface icons, and 200 graphic styles. Best of all, it’s available to use for commercial projects. Nice work Vincent! Credits: Vincent Le Moign .
Tools. Amir Khella just described his experience of building an interactive prototyping for an iPad application using Apple’s Keynote. Along with a thorough post, he release a template available for download (requires blog subscription). The post also comes with a video screen cast showing the final result and interactions. Here is an interesting quote around what he has to say on prototyping: Remember that a prototype doesn’t need to be perfect.
Ideation. A copy of Mental Notes just arrived on my desk and it looks like a great little design tool. The mental notes are a stack of 52 cards which can be used in conceptualization phases to help with idea generation. Each card conveys an inspirational thought related to psychology that touches upon such themes as: persuasion, comprehension, memory, attention and comprehension.
Tools. Dragon Stop Motion as the name indicates, is software for shooting stop motion animations. The program allows you to hook up a video / photo / webcam input source and take stills which can then be reorganized into scenes. There are a couple of powerful features in this highly specialized tool which make this process a lot easier.
Tools. AddUse is a commercial user research service that allow you to run and analyze web surveys and allows usability test facilitators to manually capture and analyze the results of test sessions. .
Tools. Duration: 16m | 9 MB Recorded: April, 2010 Brian Christiansen, UIE Podcast Producer [ Subscribe to our podcast via ←This link will launch the iTunes application. ] [ Subscribe with other podcast applications. ] [ Transcript Pending ] It’s becoming common to see behavioral cues in everyday web applications. Designers are looking to encourage certain actions, and are turning to the principles of behavioral psychology to achieve their goals.
Sketching. Pen and paper are still superior, but iPad sketching is good enough to leave those behind. The topic of UI sketching on the iPad is coming up pretty regularly for UI designers. People want to know how it feels and if it's going to replace pen/pencil and paper. After a few months using as many drawing apps as I can get my hands on, I find that it's more than adequate for UI sketching needs.