50 Free UI and Web Design Wireframing Kits, Resources and Source Files
Advertisement Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. This article focuses on actual wireframing tools and standalone applications, as well as resources that you’ll need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements, mobile elements, which you’ll use in any typical graphics editor such as Photoshop or Illustrator. Complete Wireframing Toolkits Mac OS X Interface Stencil Kit1Leopardy interface stencil kit. Facebook Applications Stencil Kit2A pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications. Eclipse Stencil Kit4This stencil enables you to easily prototype Eclipse (wizard) dialogs with OmniGraffle(TM). Yahoo! Grid Templates
WebZap - Photoshop panel plugin for web developers
Balsamiq. Rapid, effective and fun wireframing software.
Blueprint: A CSS Framework | Spend your time innovating, not replicating
How To create interactive prototypes with Apple Keynote
Step 1: Plan It Create a diagram with each interface screen as a state, and create links to specify how users will transition between them. The diagram above shows a social media application that tracks multiple accounts, and allows users to post updates to multiple networks. Step 2: Prototype It Open the .Key file that comes with the Keynotopia Prototyping Templates side by side with a new presentation. Start by creating a slide for each screen (each state in the diagram) by copying interface elements from the keynotopia template and pasting them onto your presentation. You can also modify element sizes, colors, and effects using the shape inspector in Keynote. After putting together the main screens, you can move them to master slides so that you can reuse them in other screens without doing much copy/paste, and update multiple screens with a single change. Step 3: Add Interactivity Make sure you test the interactivity every once in a while to make sure the app behaves as you’d expect it to.
12 Free Web Apps to Boost Your Drawing Skills
Drawing and sketching were once activities limited to pencil and paper, but for budding artists in the digital age, there's a wealth of online, browser-based tools to let your creativity run wild. It doesn't just have to be a hobby or pastime, though — drawing is useful for brainstorming and problem-solving, and these web apps can aid in any profession. We've picked 12 of the best drawing and sketching apps to suit any level of artist, ranging from professional-grade applications to simple tools for doodling. They're all free, and since they're all online, they can be accessed from anywhere. Show As Gallery Have something to add to this story? Image: Flickr, dboyfotopages
Briefs
Wireframes Magazine
35 Excellent Wireframing Resources
Advertisement Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design. Below are more than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available. 1. Here are more than twenty wireframing articles, guides, and tutorials to help you improve your wireframing process. Wireframes Magazine This site offers tons of resources and articles about wireframing. Wire Frame Your Site A great introduction to the benefits of wireframing from Sitepoint. Ajax Wireframing Approaches A post in a series from Particletree about prototyping Ajax, this covers wireframing techniques. The Importance of Wireframes in Web Design and 9 Tools to Create Wireframes A great overview of why wireframing is a good idea, along with tools for creating your own. 2. It's done.
The Ten Commandments Of Efficient Design In Axure
Advertisement Axure is a powerful tool for creating software prototypes quickly. Getting started with it is really easy; however, therein lies a danger. The tool is so intuitive that many users can be productive without undergoing any formal training. What they might not be aware of is that they probably aren’t using Axure optimally. In my experience as a UX designer, I seldom draw a page and get it right the first time. I generally work in teams to create wireframes and prototypes. This list of 10 commandments1 is what I’ve found to be crucial techniques to save time in the long run. I) Thou Shalt Never Use Two Widgets When One Will Do. The most common time-consuming behavior that I see with beginner and advanced Axure users is the use of unnecessary widgets. 2Larger view3 Both examples show a situation in which someone uses a separate widget for the text and the button. Both of these options will cost unnecessary time when changes need to be made. 4Larger view5 6Larger view7 8Larger view9
