Creating wireframes doesn’t necessarily require the use of special wireframing software. It is entirely possible to plan and prototype user interfaces using established tools like Adobe Illustrator, OmniGraffle or even PowerPoint and Keynote. These tools are tried and tested and incorporate a rich set of features that allow users to quickly and easily create wireframes without the need for specialist software. What’s more, they are designed by reliable software providers and it’s highly likely that they will continue to be around in a few years’ time.
To help you get started with wireframing using your tool of choice, I have compiled a list of useful resources and templates that are available in different file formats.
Webpage Wireframe Stencil Kit (Adobe Illustrator, EPS)
A collection of high-fidelity wireframe controls and icons in .ai and .eps vector format; free for use in both personal and commercial projects.
Webpage Wireframe Stencil Kit →
Wireframe/Blueprint Kit (Adobe Illustrator)
A small kit of beautifully designed website wireframe elements in light-grey with flecks of blue.
Sketching & Wireframing Kit (Adobe Illustrator, SVG, EPS)
A free wireframing kit that contains typical websites elements such as form controls, banners, icons and indicators.
Sqetch Wireframe Toolkit (Adobe Illustrator)
This is a comprehensive collection of carefully hand-drawn templates and elements that can be used for web and mobile wireframes.
iPad Sketch Elements (Adobe Illustrator)
A collection of typical iPad controls offered in a sketch-like style for use in Adobe Illustrator.
iPhone Wireframe Elements (Adobe Illustrator)
A set of wireframe elements for iPhone apps in .ai and .pdf format; released under a Creative Commons Attribution license.
PowerMockup: Wireframe and Storyboard Tool (PowerPoint)
An add-on for PowerPoint that provides a searchable library of over 250 wireframe stencils and icons.
PowerMockup: Wireframe and Storyboard Tool →
Windows 8 Wireframe Templates (PowerPoint)
A free collection of PowerPoint slides for wireframing Windows 8 apps; includes 240 app icons.
Windows 8 Wireframe Templates →
Wireframe Stencils (PowerPoint)
A small set of UI shapes for creating wireframes of desktop and web applications in PowerPoint 2003 and newer releases.
Keynotopia: User Interface Design Libraries (Keynote, PowerPoint, OpenOffice Impress)
Keynotopia is a huge commercial collection of low and high fidelity UI components for use in Keynote, PowerPoint and OpenOffice.
Keynotopia: User Interface Design Libraries →
Keynote Kung-Fu: Wireframe Toolkit (Keynote, PowerPoint)
Similar to Keynotopia, Keynote Kung-Fu provides dozens of UI templates for use with Keynote and PowerPoint.
Keynote Kung-Fu: Wireframe Toolkit →
Sketchit for iPhone App Wireframes (Keynote)
Sketchit is a collection of Keynote slides that can be used for creating wireframes of iPhone apps.
Sketchit for iPhone App Wireframes →
WireKraft Wireframe Kit (Keynote)
Another collection of templates for wireframing iPhone, iPad, Android, and Windows Phone apps using Keynote.
Stencils for Information Architects (Visio)
Visio stencils that are designed to aid the work of an information architect. The resource includes stencils for wireframes, sitemaps, and process flows.
Stencils for Information Architects →
Spoon: Mobile Wireframe Kit (Photoshop)
A clear and elegant kit of wireframe controls for use with iPhone and iPad apps. The collection also includes hand gesture illustrations.
Photoshop Wireframe Kit (Photoshop)
A free, simple website wireframe kit that includes elements such as headings, bullet lists, form fields, image and video controls, etc.
Photoshop Wireframing Tool (Photoshop)
A wireframing kit that consists of 175 vector-based custom shapes for use in Photoshop. It is priced at $19.
Wireframe UI Kit (Photoshop)
A free kit containing 60+ editable wireframe templates for many of the typical elements used in web design.
Web Design Wireframe Kit (Photoshop)
Another kit for creating website wireframes in Photoshop and Adobe Illustrator. The kit consists of over 120 UI elements.
Mini Wireframing Kit (Photoshop)
A PSD template for cute little miniature wireframes, includes a pixel font for dummy text.
Web UI Wireframe Kit (Photoshop)
A free collection of scalable Photoshop shapes and smart objects that can be used to create website wireframes.
Konigi Wireframe Stencils (OmniGraffle)
A rather large set of shapes for making wireframes of websites and mobile apps in OmniGraffle.
Web Wireframe Stencils (OmniGraffle)
Another OmniGraffle stencil that is designed to allow users to quickly create simple wireframes of websites and web applications.
Wireframe Sketch (OmniGraffle)
An awesome template of hand-sketched wireframe controls for OmniGraffle.
elwebUI: Web Wireframe Kit (OmniGraffle)
A relatively complete collection of commonly used user interface elements for web projects.
ZURB iPad Stencils (OmniGraffle)
A great looking stencil and some sketch sheets for quickly creating low-fi wireframes for the iPad.
Adobe Fireworks Wireframing Kit (Fireworks)
A free and handy wireframing kit, handcrafted by Hannah Milan with Adobe Fireworks.
Adobe Fireworks Wireframing Kit →
Dragnet Website Wireframes Kit (Fireworks)
Another wireframing kit for Fireworks. The kit consists of over 25 common web design elements such as scrollbars, buttons, menus, etc.
Dragnet Website Wireframes Kit →
Wireframe Kit (Google Drawings)
A set of blue-colored wireframe templates for use in Google Drawings, a component of Google Docs.
iPhone Wireframe UI Kit (Sketch)
A kit for creating wireframes of iPhone applications in Sketch (a powerful vector-based design tool for Mac OS X).
Conclusion
I hope you have found our compilation of helpful resources useful and that there is something in the list that suits your needs. Please share your thoughts and experiences in the comment section below. I’d also be glad to hear of any further resources that I may have missed in the collection and you would like to recommend.
0 yorum:
Yorum Gönder