Seeing your ideas come to life quickly is a really rewarding experience. Which is why prototyping can be so much fun.
But finding the right resources for your project can be a huge pain. Below is a list of some of our favorite Icons, design kits, apps, and resources to put to use as you’re bringing your ideas to life.
FREE Photoshop Design Kits
—
TETHR by InVision
8 PSD Files, 100 Templates, and over 500 Components—All FREE. We partnered with the talented folks over at UI8 to create the most beautiful iOS design kit ever.
Designer-naut UI Kit
A neat UI Kit ready for the best astronaut designers and developers. This kit contains over 40 widgets built with vector shapes only. It’s retina ready and based on 960gs grid with 16 columns. Free for limited time.
Wire Kit
840 x 8600 pixels of retina-friendly-made-to-measure-scalable goodness presented in two unique styles, each with over 60 of the most common UI elements.
iPhone Wireframe Kit
A handy and colorful low fidelity UI kit, perfect for that project that needs a little more of a designed look, while keeping things simple.
FREE Sketch Design Kits
—
Yosemite UI Kit
A comprehensive UI kit for Apple’s upcoming OS—Completely Free!
Sketch Android UI Kit
If you’re designing for Android, this kit will give you all the Android components you need to support your designs.
Bootstrap 3 UI for Sketch
A very helpful and robust UI Kit featuring all the standard components for Twitter Bootstrap 3.
Premium Sketch Design Kits
—
Bolt Kit
A super slick and modern-looking kit—Bolt let’s you grab the components you need to put together your ideas quickly and beautifully.
Flat UI Kit for Sketch
Designed to help you kick start your UI design projects, these elements are simple enough for wireframing, and pretty enough for production! This kit contains over 50 unique individual elements for web, mobile, and responsive design.
Wireframe Kit V2
175 templates and over 500 UI elements for web, tablet and mobile devices to help speed up your UX workflow. Delivered in .AI vector format. Now for Sketch!
Illustrator Design Kits
—
Wireframe & UI Kit by C. Rowe
After becoming frustrated with the lack of vision traditional wireframes provided, Christopher Rowe designed a better looking wireframe kit—get it free!
Awesome Kit
Awesome Kit is a free set of 26 Adobe Illustrator wireframe templates and two custom brushes, designed by George Vasyagin. “Awesome UX kit” is totally FREE and comes for iOS7 (iPhone) version only.
iPad Apps
—
You’re probably not going to create final designs with any of these apps, but they’re great for getting your initial ideas and sketches out quickly, in a digital format.
Adobe Sketch
Sketch, Adobe’s new mobile drawing app, gives you the tools you need to express yourself, plus a connected community of other creatives to inspire you.
Paper by FiftyThree
Paper was designed from the ground up for touch and creating on the go. It keeps you in the flow with no fussy buttons, settings or other distractions.
Adobe Ideas
Capture and explore your design ideas on the go using vectors, layers, and color themes in the perfect tablet companion to Illustrator.
FREE Icons
—
The Noun Project
A must have in your toolkit. Chock full of thousands of glyph icons from different artists. Some icons are free and some for a fee.
80 mini icons
A simple, crisp, minimal icon set, perfect for your next project.
144 Social Icons
Social Brands, 4 shape types, color and monochrome. Each icon is built with Photoshop vector shapes so you can easily edit color and resize it as you need.
Premium Icons
—
Streamline
Definitely one of the largest, and most robust icon packs available—Streamline won’t leave you hunting for that one icon they forgot to include.
Symbolicons- Icon Font
With SS Symbolicons, it’s easy to update size, styling and colors on the fly, and since they’re a font, you don’t have to go hunting through other documents to grab the icon you’re looking for.
Free Photo Resources
—
Unsplash
Free (do whatever you want) hi-resolution photos. 10 new photos every 10 days.
New Old Stock
A great collection of vintage photos from the public archives.
Death to the stock photo: Free & Premium Options
Great photos for commercial use, blog posts, social accounts, and mockups delivered right to your inbox. Free and Pro options available.
Public Domain Archive
New 100% Free Stock Photos Every Week. Everything you need for your creative projects, all public domain images.
Even more great photo resources over at @Dustin’s Medium post: Stock Photos that Don’t Suck.
Free Device Mockups
—
3 Free Flat Device Mockups from InVision!
We took the device skins you’ll find used here inside InVision when viewing your mobile prototypes, and offered them up as a free download.
iPhone 5s Template from Mockuuups
Download for free a beautiful custom templates package of iPhone 5s with adjustable screen & background.
iPhone 5s & 5c Mockups
Talk about a great free resource! 8 Different iPhone mockups, ready for your designs.
3 Free Presentation Mock Ups
With these Adobe Photoshop mockup templates you can create realistic presentations in seconds.
Photorealistic Macbook Mockups
A diverse set of four macbook mockups built from professional photographs.
Free iPhone & iPad Mock Ups
This is a set of four high resolution mockups on real photographs. Each mockup contains smart objects that you can use to add your own screenshots. PSD also includes 5 photo filters for the backgrounds.
Placeit.net
Placeit is a free mockup & design comp producer. Give them an image and they'll process your screenshot or URL and place it within their stages for a beautifully rendered final photo.
PSD Grids
—
iPhone 5 Grid
A 10 column grid designed by Eddie Lobanovskiy to keep your iOS designs clean, cohesive, and aligned just right.
Bootstrap 3 Grid System
A Free PSD Grid directly from the Bootstrap 3 Grid System, available as Free Download. Create your own layout using Photoshop.
A better Photoshop grid for responsive web design
Elliot Jay Stocks from Typekit took a stab at simplifying responsive grids, by rounding up to 1,000 pixels. Click through for his blog post, or grab the PSD template here.
Free Ideas
—
Last but not least—It can be tempting to jump right into the design phase when you’ve got a fresh concept in mind, but thinking your project through using the right mental framework can save you tons of time. Here are a few techniques and processes to help facilitate your design planning process.
A shorthand for designing UI flows
An oldie but a goodie, Ryan Singer from Basecamp quickly outlines an easy way of fleshing out UI flows that you can start implementing 5 minutes from right now.
Storyboards
Here at InVision, we use low-to-medium fidelity storyboards to walk through flows with the rest of the design team. We’ve found it bridges the gap between the conceptual and the visual, and even let’s you discuss potential UI decisions without spending a lot of time polishing pixels.
Jobs to be done
Check out the above video for a great example of the Jobs to be Done framework. After that, add these articles to your reading list.
Jobs to be done overview
Replacing the user story with the job story
Asking Why is Not Always the Best Strategy
Have something good to add to the list?
—
Let us know on Twitter at @InVisionApp