Five Indispensable Skills for UX Mastery By Jared M. Spool Originally published: Aug 03, 2010 For practicing User Experience Designers, one of the most important laws isn't Fitts's Law, which helps us understand how to design interactive elements. It's Sturgeon's Law, which tells us that 99% of everything is crap. Yet if we want to be really excellent at what we do, what are those essential skills? This is exactly the question we set out to answer as we studied the work of the master UX professional. Indispensable Skill #1: Sketching Someone once said that talking about design is like performing interpretive dance about architecture. A quick sketch about a design—what it will look like, how information flows from one place to another, how the users move between activities—often is the best way to get our ideas across. The masters we talked to gravitate to sketching easily. We're talking back-of-the-napkin quality stuff. We asked each master how they obtained their sketching skills. Sketching isn't hard, but it's a learned skill.
10 Free Wireframing Tools for Designers This series is supported by Ben & Jerry's Joe, Ben & Jerry's new line-up of Fair Trade and frozen iced coffee drinks. Learn more about it here. Wireframing is a crucial step in web design and development as it allows for rapid prototyping and helps to pinpoint potential problems early in the process. It can be invaluable to have a visual representation of content, hierarchy and layout. Wireframes make it easier to communicate ideas, reduce scope creep, cut down on project costs (due to fewer design revisions later), and enable greater upfront usability and functionality testing. This post highlights 10 of the best free wireframing tools available, including standalone applications, web-based tools and browser add-ons. If you're partial to a particular wireframing tool available for free download, let us know in the comments. 1. Mockingbird is a web-based beta software based on the Cappuccino framework to create, link together, preview and share wireframes of your website or application. 2.
GUI Stencils, Wireframing Kits and Sketching Templates for iPad App Designers It is fundamental that every app designer have a selection of pre-designed and editable UI elements that will allow them to optimize, organize and speed-up work-flow. To help streamline your iPad design work, we have put accumulated a comprehensive selection of iPad specific GUI Kits & Stencils, Wireframing kits, Sketching Templates and fully editable PSD templates that will allow you to rapidly prototype beautiful designed apps. We have also previously published a post that focuses on iPhone GUIs and Stencils, you can view that post here: iPhone Development GUI Kits, Wireframe Stencils and Icons → iPad GUI Design Stencils iOS Design Stencils (OmniGraffle) All of the stencils have been originally created by hand from native or custom created OmniGraffle shapes and grouped for ease of use. the stencils can be easily scaled to new point resolutions and exported to any vector formats supported in OmniGraffle. iOS Design Stencils → iPad Stencil (Omnigraffle) iPad Vector GUI Elements (AI)
50 Sketching Resources for User Experience Designers | inspireUX - User Experience quotes and articles to inspire and connect the UX community Sketching is a critical part of the User Experience Design process. Sketching allows us to explore ideas and iterate on concepts quickly and easily before creating detailed mockups. Below is a roundup of many different sketching articles, tools, templates, presentations, videos, books, and examples to help User Experience Designers learn more about sketching and how it benefits UX design. Articles about Sketching Sketching Tools Sketching Templates Presentations about Sketching Sketchboards: Good Design Faster: (PDF) Brandon Schauer shares his sketchboarding presentation from the CanUX 2008 conferenceSee -> Sort -> Sketch: Pen & Paper Tools to get from Research to Design: Kate Rutter’s workshop slides from the 2010 IA Summit.Talking About Sketching About Interacting: Christopher Fahey discusses the sketch “resolution spectrum” and how sketches can communicate your thinking. Videos about Sketching Books about Sketching Sketching Examples Catriona Cornett View My Portfolio Follow Me:
IxEdit iOS Mobile Patterns Library Important: If you like what we do, please consider supporting our site with a donation. pttrns Vine - Make a scene Capture Ultravisual Capture Foodspotting Capture Facebook Poke Capture Instagram Capture Facebook Camera Capture Wood Camera Capture Grid Lens Capture Hipster Capture Vimeo Capture Camera Plus Capture Jelly Capture Lootsy Capture Camera Awesome Capture Batch Capture Everyday Capture Prev 1 2 Next User Experience Books for Beginners A request for help. Through @uxbooks, my twitter feed for all things UX book related, I regularly get asked to recommend books to people and more often than not, it’s to suggest entry-level publications. Normally, when I’m feeling particularly lazy, my default response is to point them in the direction of Steve Krug’s seminal book Don’t Make Me Think. Although deserving of the praise it’s received, I thought it might be a touch unfair to only ever line Mr. Krug’s pockets, so I’ve put together this list of books by other authors just as deserving as Steve to give me a place to point people in the future. If you’re a seasoned UX professional, chances are you’ve heard of most of these books; in fact you’ve probably read, re-read, lost/sold/given-away, re-bought, and read them again just for old times’ sake, but hopefully there are a couple included that you may not have seen or considered reading before. A Project Guide to UX Design (by Russ Unger and Carolyn Chandler) Bill Gates About Face 3.
14 Javascript Resources And Plugins For Creating A Stylish Chart We had shared a lot of useful resources about CSS/jQuery recently. Today, I am going to share useful resources and plugins to create a stylish chart. Graph and Chart are very effective ways of showing data. There are a lot of different methods to generate graphs/charts. This article show you how to use fgCharting, a jQuery plugin to convert HTML table into a stylish chart/graph. This JavaScript Charts supports a lot of features and has a very good documentations. Flot is a pure Javascript plotting library for jQuery. This Mootools pie chart class is based on Stoyan Stefanov’s Canvas Pie.The code now requires less html markup than the original. This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. JS Charts is a free JavaScript based chart generator that requires little or no coding.
30 Examples of Stunning iPad App Interface Design The iPhone ushered in an era of beautiful interface design unlike anything we’d ever seen on a mobile device. This trend is now being revived and pushed further than ever on the iPad’s larger screen and the results are amazing. We’ve combed through the App Store to bring you 30 iPad apps with gorgeous interfaces. Keep in mind that the screenshots rarely do the apps justice and that you really should try a few out for yourself. Flipboard “Flipboard is a fast, beautiful way to flip through the news, photos and updates your friends are sharing on Facebook and Twitter. Price: Free Flipboard AmpliTube “With AmpliTube for iPad, you’ll have an entire guitar/bass rig at your fingertips, comprised of 4 simultaneous stompbox effects, an amp-head plus cabinet and a microphone. Price: $19.99 AmpliTube Weather HD “Weather HD, the most beautiful way to check for weather information on the iPad and the iPhone. Price: $0.99 Weather HD iStudiez Pro Price: $2.99 iStudiez Pro Nota Price: $7.99 Nota Price: $1.99 iOrgel HD
Ivana Jurčić – Lilit » Blog Archive » A Collection of Printable Sketch Templates and Sketch Books for Wireframing At the beginning of a web (or application) development project I always create the sketches first. While sketching can be done on a blank paper, it’s much better to use a sketch template. For me that is the best and most productive way to work on and improve my ideas before application development begins (and things get more complicated :-)). This way I won’t pay too much attention to some details that should be taken care of later, but stay focused on general layout and functionality. Below you will find more than 20 resources that you can use in sketching phase of application development. If you have some additional resources to share, please leave a comment so I can add them to the list. And, of course, don’t forget to share your wireframes on I ♥ wireframes :-) Printable sketch templates for websites These are some pretty good, printable sketch templates for website design. Browser Sketch Pad (PDF) Browser Sketch Pad by Design Commission — see original source 960 grid template Graph paper