background preloader

Wireframes

Facebook Twitter

Wireframe Showcase. Learning to Wireframe: 10 Best Practices. At the wireframing phase of the design process, our ideas are young and unpolished.

Learning to Wireframe: 10 Best Practices

Wireframes, whether created on scraps of paper, a whiteboard, or in a software program, serve to establish relationships between elements in a project such as: navigation, imagery, and calls to action. But if we think of wireframing as a tool, it’s ultimate purpose is to create an ideal space for collaborative conversations about design solutions, while supporting iterations and driving rapid ideation. So how do you know if your wireframes are effectively driving the design conversation? Sans Francisco. User Research Typeform Typeform is an elegant, feature-rich survey tool.

Sans Francisco

Cassette Cassette is a digital logbook to help you "record, transcribe, and bookmark key moments in user interviews. " Doopoll Doopoll is a poll tool to help you gather quick feedback from users. TestingTime TestingTime makes user tests easier to run by helping with recruitment, scheduling, payment, and more. UserTesting UserTesting allows you to recruit users and run remove, video-recorded usability tests. Optimal Workshop Optimal Workshop offers a suite of tools to help you study the UX of a website. Lookback Lookback allows you to run user tests while remotely recording the screen, the user's face and voice, and their in-app interactions.

Sprint Sprint is a lightweight tool to help you get quick feedback on a new prototype, app, or website. FullStory FullStory lets you easily record, replay, search, and analyze each user's actual experience with your website. User Interviews UX Check Typography Google Fonts Font Squirrel TypeKit Typ.io. How to get value from wireframes. The Process of a Junior Designer: The above illustration is from Julie Zhou’s article, Junior Designers vs.

How to get value from wireframes

Senior Designers. 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.

10 Free Wireframing Tools for Designers

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. Create Sitemaps Online. OmniGraffle - diagramming and graphic design for Mac, iPhone, and iPad. Spend your time innovating, not replicating. Free toolbar icons for interface or gui designer. Download free black & white toolbar icon set. About the icons.

Free toolbar icons for interface or gui designer. Download free black & white toolbar icon set

This is a latest version (additional 60 icons added on 25th Jan 2011) of the Gentleface Toolbar Icon Set made for interface (gui) desginer. These icons can be used for wireframes and software mockups creation, websites and software applications toolbars and menus including Android, Windows Mobile, Palm, iPhone and iPad apps. You'll find a set of 8 cursors and 296 icons in black and white color versions. The icons include pagination arrows, ratings and voting controls, social interaction symbols file system and text editor actions.

The entire set totals 304 original icons in 32-bit PNG format optimized for 16x16 pixel size and available in 16x16, 32x32 and 48x48 pixel sizes. Licensing Options. The Creative Commons Attribution-NonCommercial -- FREE Allows for use in wireframes, on personal and community web sites, in free and open source software applications and other types of non-commercial usage. The Royalty Free license -- $29.99 curently not available. I ♥ wireframes - The ultimate source of inspiration and collection of resources for wireframes.