FlairBuilder - Wireframes. Mockups. Prototypes

Are static mock ups still enough? | FluidUI - iPhone, Android and Windows8 Mobile Mockups What exactly does the impending HTML5-powered web mean for UI & UX designers specifically and wireframing / prototyping more generally? Does this work any more? How much does the tool influence the output and Vice Versa? Traditionally, designers have relied on a wide range of methods and techniques to communicate their thoughts and ideas, first to themselves and then to an internal team (if applicable) and ultimately to their clients. The changing web So the web is changing and changing fast indeed. The living web Dynamic panes with live and continuously updating information, animations, transition effects, scaling, sliding, growing, rotating, scrolling, embedded media such as video and audio in various forms - all of this, propagating with increasing frequency and speed. Google Chrome Store is BIG Can't touch this? A Day Made of Glass Consider how well the UIs in this video could be communicated via static means... Static mockups are common, static interfaces increasingly less so

Resources & Tools for Paper Prototyping Paper Prototyping Paper prototyping is a commonly used method for testing and evaluating ideas in a very early stage of development. Mostly known for prototyping user interfaces, paper prototyping can also be used to make customer journeys, visualize ideas or just to have some fun. “The longer it takes to develop, the less likely it is to launch.” “The only way to win is to learn faster than anyone else.” Templates to print Smartphone wireframe pages If you want to start developing app ideas, paper is a great way to start. User Interface Elements Having an offline library of sample buttons, icons, screens, … to glue on your templates, makes screen design even possible with children! Customer Journeys Sometimes you just want to tell the story. Tools to use DIY Wirephone-holder “If you can’t make it, fake it!” POP-app POP (Prototyping On Paper), by Woomoo, is a (currently free) app to make on-screen links between several paper prototype images. UI Stencils Oh yes they exist, iPhone stencils!

Designing with Paper Prototyping Read our review Paper Prototyping. Prototyping is key to any successful design. Paper prototyping is usually the first step, but does it fit into a world where mobile devices are king? Paper prototyping is a key component of the user-centered design (UCD) process and is a popular method among designers. The basic premise of this method is that a paper prototype of a feature’s UI is crafted and then given to a user who will attempt to complete a task or a scenario. Designed for a simpler time The method is great for designing UIs for desktop computers as the user’s fingers mimic the input of a mouse. When interacting with desktop computers, users will usually be in a “controlled” environment, in the comfort of their own homes or offices. How to paper prototype In the July/August 2009 edition of Interactions magazine, three academics from the School of Informatics at Indiana University suggested a technique that incorporated paper prototyping and the physical device—in their case, an iPhone.

POP - Prototyping on Paper | iPhone App Prototyping Made Easy Mockups Take a second. Let it sink in. The first impression might be disorienting. Getting your ideas out should be effortless. Our sweet spot: the ideation phase Mockups really shines during the early stages of designing a new interface. Mockups is zenware, meaning that it will help you get "in the zone", and stay there. Mockups offers the same speed and rough feel as sketching with pencil, with the advantage of the digital medium: drag & drop to resize and rearrange elements, make changes without starting over, and your work is clear enough that you'll make sense of them later. See what you can build with Mockups Download the samples above, or find more on Mockups To Go, our community-contributed stencils site. Designed for collaboration Your whole team can come together around the right design using Mockups. Mockups intentionally makes your wireframes scream both This is not final! Learning UX Design Smooth and short learning curve, from beginner to power-user Limited interactivity, on purpose!

Home - Pencil Project How to Create Interaction Diagram/Mockups in PowerPoint | Shengdong Zhao (赵盛东)'s HCI World When communicating new research ideas with others, it is extremely important to visualize what you want to achieve. Often, ideas are vague. They may seem exciting, but when you try to visualize them, all sort of issues will come out. So a quick and dirty prototyping tool will greatly help the ideation process, both for yourself and for communicating with others. PowerPoint is such a tool. I have search the web and gathered a collection of resources for how to make PowerPoint interaction diagrams. Below are some useful information about creating PPT interaction diagrams. Interactive Prototypes with PowerPoint by Maureen Kelly on 2007/08/06 Have you ever wished your early design mockups could come to life, so you could try out the navigation, test an interaction, or see if a button label just feels right when you click on it? Overview Though there are other prototyping tools out there, here are the main reasons I lean toward PowerPoint: It’s fast.

Reify | Isomorphic Software Transform your mockups into working screens backed by clean, clear code. Design in a wireframe mockup tool such as Balsamiq, then instantly transform exported mockups into interactive applications backed by simple code that follows our best practices. Use the tools you already know. Many teams use simple wire-framing tools such as Balsamiq to create, edit, and share mockups of new user interfaces as part of the design process. Don't re-create. Once a mockup is complete and is handed off for implementation, developers must laboriously duplicate the mockup in actual code, one screen at a time. The Reify mockup import tool provides the missing link, bridging design and code, by enabling you to directly re-use your carefully designed layouts. Go from design to code. Reify accelerates development by converting mockups to clean, extensible code in one easy step. No Limits. Reify fits neatly into the full enterprise development process, without hidden limitations. Use Reify with any mockup.