XD-Toolbox
A list of tools for Experience Designers. WIP Site ->
XD Toolbox
A curated list of awesome tools and files for making your work look… well, awesome!
The organization for this toolbox is based on the idea of the Lean UX model where XD practitioners can jump in on any stage of the process and work the problem.
Contributing
Please take a quick look at the contribution guidelines for instructions, and check to make sure what you’re posting isn’t already in the list. And of course, thanks to all contributors you’re awesome!
Contents
Research
Strategy
Design
Evaluate
Extras
Research
Dive deep and learn more about your problem
Inspiration
- Experiments with Google - Google’s collection of physical and digital experiments, a great place for inspiration.
- Disney research - Carnegie Mellon’s entertainment research division, funded by Disney. Great stuff here in the world of physical user experience.
- Future Interfaces Group - Research lab at Carnegie Mellon working on new sensing and interface technologies.
- Hackaday - Age old standby that showcases the best DIY projects.
- Designer News - Feed of the latest news in UX Design, with upvoting!
- Creative Applications - A great resource to see the latest in digital art.
- Behance - When you need some inspiration, never hurts to check out other peoples work. Lots of spec work here when you search by brand.
- Spotify Musical Cities - Immerse yourself deeper into your target audience by listening to the music of their city. More from the Spotify Insights (UK/US) team.
Resources
- Julian Cole - Planning Dirty - List of amazing decks, inspiration, and templates from Julian Cole.
- Facebook IQ - Insights from Facebook’s research department about consumers trends.
- Think With Google - An amazing collection of case studies and tools to help you with digital thinking and marketing.
- Google Data Gallery - Add Google research to your next deck with fun infographics.
- Facebook Audience Insights - Learn more about your target audience through data from the world largest social network.
- Google’s Customer Journey Tool - Learn more about your average customers purchase journey. Make’s Customer Experience (CX) mapping more informed.
- Nielsen Top 10s - Nielsen’s compiled weekly lists of what Americans are watching, reading, buying and more.
Interviewing
- Typeform - The best surveying and forms tool ever!
Strategy
Time to take all that research and start crafting your solution
Ideation Exercises
- IDEO’s Design Kit - These methods are a step-by-step guide to unleashing your creativity, putting the people you serve at the center of your design process to come up with new answers to difficult problems.
- Hyper Island Toolbox - A resource kit you can use to apply creative collaboration and unleash potential in your team.
- Google Design Sprint Kit - Awesome 3 Day tool kit, plus individual assignments to help create an awesome product. Archive Here
- Project of How - Hyper Island Alumni create new methods for brainstorming.
- The Strategy Deck (of cards!) - Tons of communication strategy tools in one deck of tip cards. Download the PNGs Here.
- Brainstorm Better - Have to better organize your group brainstorms. tl;dr You should always have everyone independently prepare.
- LEGO Kits and Your Creative Soul - You should always start ideation by doing a creative exercise to break away from your normal left-brain thinking.
Documentation
- UX Methods and Deliverables - Great assortment of UX Methods and Deliverables you can use in presentations to sell your ideas.
Design
Let’s build out our MVP
Prototyping Resources
- Learn UX Courses - A really awesome resource for learning the apps of UX design. Invision Studio/Figma/Sketch/Adobe XD/Framer, it’s all there.
- Sound Kit for Prototypes - A collection of interaction sounds for prototypes.
- Design Systems Repo - Large collection of well known web design systems of brands you know.
- Archetype - Find a font for your next project using a headline and paragraph interface.
OS UI
Photoshop and Sketch Files for different OS’s
- Apple UI Design Resources Official Design Resources from Apple’s Design Page. Includes iOS 12.
- Android UI Kits
Figma UX Tools
Great Resources for the Google Docs of UX Design
- Official Figma Resources - Official List of Resources from Figma.
- Figma Crush - Large amount of Figma templates, sorted by type.
- Figma Resources - Another resource for Figma templates.
Sketch UI Design Kits
Get a leg up on your designs with these kits
- Sketch Repo - Large resource all Sketch tools and UI kits
- UI Space - Great collection of UI kits, Sketch Files, and Fonts
- Mail - PSD and Sketch UI Kit from Invision, a productivity app centric design.
- Now - A beautiful cross-platform UI kit
- tethr - A fully loaded mobile UI Kit
- Do - A UI kit mostly focused on a To-Do app
- Chat - Very minimal and modern UI kit
- Relate - Super modern module UI kit.
- CollectUI - Great collection of UI examples for inspiration.
- Lapa - Big collection of landing site inspiration.
Code Frameworks
Here’s some code snippets or all out code frameworks to help you build your next project
- Bootstrap - The defacto web framework to get you started fast with a responsive website.
- Code My UI - Handpicked code snippets of UI’s and animations you can use in your web projects.
- Hackathon Starter - A boilerplate for Node.js web applications. Get started on webapps quickly with examples for some of the top APIs.
Social
List sites for social media comps
Stock Photos
- Death To Stock Photo - A great site for photographs that look real and not like stock photography. Archive Here.
- Unsplash - Amazing photographs that you can use commercially for free. Even has a Sketch plug-in.
- Pexels - Free stock photos, even for commercial purposes.
- Noun Project - Not photos, but a series of stock icons, constantly updated by a huge illustration community.
Social PSDs
Photoshop files for different social experiences
- Facebook - Layered files for Facebook UI for desktop and mobile.
- Messenger Chatbot - Sketch file for Facebook Messenger Chatbots.
- Twitter - Layered files for Twitter UI for desktop, tablet and mobile.
- YouTube - Layered file for YouTube UI for desktop.
- Instagram - Layered file for Instagram mobile app.
Social Web
Websites for making social media comps
- Adparlor Ad Mockup Generator - Quickly create fake ads for social platforms.
- Landscape - Image resizer for social media. Export for multiple platforms in one click.
- Headliner - Great free site for automatically adding animated captions to audio clips and video.
In-situ
Put your wonderful app comps into hardware and real world environments
In-situ PSDs
These are in-situ files for local editing
- Facebook Design’s Devices Catalog - Just the hardware, but easily dropped into situations.
- Graphic Burger - Great site for logo mockups, OOH, other real world and digital assets to make your work look great.
In-situ Web Generators
These web generators allow you to put your comps in-situ
- Dunnnk - Supports screens for iPhone, Android, iPad, Desktop and Apple Watch.
- Smartockups - More in-situ screens for showing off your designs.
- Mockerie - Like Dunnnk, but lets you interact with your live site.
Evaluate
Let’s measure what we built!
UX standards
- UXCheck - Chrome extension for checking the UX of a site. Exports your report as a word doc with screenshots.
Advertising
List of tools to help you create display ads
Ad Specs
Dimensions and abilities of different ad platforms
- Ad Jelly Size guide - Social & digital ad image specs, sizes & dimensions in one place. PSD’s included!
- IAB Display Advertising Guidelines - Has the HTML5 dimensions and guidelines for display advertising, also includes info about up and coming ad units.
Ad Research
Sites to help you discover and concept digital ads
- Moat - Search any brand and find it’s banner ads.
- Beetle - Site that aggregates email marketing from some of the top companies. Has campaigns going back to 2013 and you can download the code.
- Rich Media Gallery - Great resource of best in class display ads as well as Google/DoubleClick specific capabilities.
- Facebook Inspiration - Showcases the best marketing campaigns ran on Facebook.
Ad Mockups
Tools to help you design and build digital ads
- Google Web Designer - An app developed to help you design and present your paid media advertising (banners).
Analytics
Tools to help you track and report on your campaigns
- Google Campaign URL Builder - Easy tool for building UTM tags for tracking campaign clicks in Google analytics.
- Ubersuggest Keyword Generator - Awesome tool for generating a large list of keywords for metatags for web or YouTube.
- Social Blade - Easy way to pull social analytics.
Extras
Things that didn’t fit in our XD process
Industry Info
- General Assembly Product Design Bootcamp - A great 2 Day class on Product Design, which includes many aspects of XD. My notes here.
- Sorry Whaaat - A dictionary of online marketing terms to help keep you in the know.
Job Search
- Job Hero - Site that will help you track you interview progress and has a great bookmarklet for auto-importing info from Glassdoor, LinkedIn, etc.