Code Monkey home page Code Monkey logo

xd-toolbox's Introduction

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. Lean UX Model

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

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

Figma UX Tools

Great Resources for the Google Docs of UX Design

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

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 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

Extras

Things that didn't fit in our XD process

Industry Info

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.

xd-toolbox's People

Contributors

welovejeff avatar individual11 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.