I ♥ wireframes - The ultimate source of inspiration and collection of resources for wireframes. A UI Design and Prototyping Treasure Chest. When designing a user interface there are always times that you will find yourself using the same graphical element over and over. So in order to be more productive, it’s a good idea to keep a library of common elements such as form elements, buttons, icons, browser templates, and windows.
Having these close by will save time and speed up your design and prototyping work flow. Here is a collection of these types of elements that should be a big help to you. Browser Templates For The Website / Web Application Designer WEB UI Treasure Chest v 1.0 Webdesigner kit Turquoise PSD Vector Pack: Browser Screens and Website Elements Browser Form Elements PSD iPhone GUI PSD 3.0 iPhone GUI PSD 3.0 OmniGraffle Wireframe Stencils Web Form Elements Vol.2 21 Best Icon Sets for Designing Web Apps Web Form Elements Windows 7 Taskbar .psd Windows 7 Window PSD Web Browser Elements Yahoo!
Quommunication Starter Kit About the Author Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. OmniGraffle Wireframe Stencils. 3.3 (6/14/13) Added Andrew Blair's Google Nexus device. 3.1-2 (2010) Ships natively with OmniGraffle 3.02 (4/2/2010) Fixed dimensions of iPad chrome viewport. 3.01 (2/24/2010) Added iPad chrome.
Replaced graphic icons with vector images. 3 (9/15/2009) Modified all form and controls elements for color consistency. 2.0.1 (1/6/2009) Minor bug fixes, clean up of element alignment. 2.0 (1/6/2009) Major updates to version 1. VECTORTUTS Freebie Vector Pack: Browser Screens and Website Elements. 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. But if done inefficiently, it can end up costing more time and can even create bigger headaches for both the client and the designer. Below are more than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available. 1.
Wireframing Articles 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. Content Wireframing: Ducks Meet Row. 2. Pwireframing: Paper Wireframing. The Bethel Strategy Background Every web redesign project we get comes with an essential strategy document. This strategy document is a tailored roadmap laying out specifics for a successful relaunch including wireframes to help visualize how new web templates will take shape, a review of competitor sites, key messages to be surfaced in the new creative stylings of a site, a streamlined information architecture, rollout schedules, and more.
Two clients of ours from Bethel University, Mark Erickson (Director of Web Communications) and Michael Vedders (Director of Web Technology), came to mStoner’s Chicago office for two days earlier in the month to work directly with us on the Bethel strategy document. The idea was that two days of intense collaboration and discussion would produce a more cohesive report, better suited to Bethel’s needs. The idea behind Pwireframing (again, wireframing with paper) was to make the regular wireframing process more modular and collaborative. Hey, It Worked!