Designer’s Survival Kit for a Hackathon

Ideation & design process

How should I go through the design process?

• Google Design Sprint Toolkit
• ServiceDesign Toolkit
• Tacticle's Design kit

Specific tools & canvas

• Mindmapping tools: XMind, Coggle, Mindmeister, Mural.ly
• Persona Templates: Xtensio, OrangeBus & a nice guide on how to make your own template
• Empathy map canvas on GameStorming

Icons

• NounProject* for monochrome icons as svg
• Material Design Icon Library for smaller UI icons
• IconFinder for mixed variety of icons
• Font Awesome
• UX Pin

Fonts

• Google Fonts (Jump to the section featuring new/paired typefaces, or check collections for UIs, pairs with examples, selected font families)
• The League of Moveable Type for more open source typefaces
• Mukta by Ek Type for open source Indic typefaces

Colors

Color palette for app design:

• Material Design Palette: Official guidelines and a quick tool to create your own palette
• Adobe Color CC (earlier known as Kuler)
• Colorlovers

Color palette for data visualization:

• Susie Lu’s Viz Palette tool that links to three useful tools:
  • ColorBrewer for basic sequential, categorical & diverging color scales (Quick list here)
  • Chroma.js when you want to create multi-stop color scales using specific colors
  • Colorgorical for generating categorical palettes with n colors

Illustrations

• Humaaans
• Undraw
• Freepic

Comics

• Comicgen
• Pixton

Photos

• Unsplash
• Flickr (Commercial use allowed)*
• SubtlePatterns
• Profile photos for your UIs like UI Faces, Random User API

UI Inspiration

• MaterialUp, iOSUp
• Pinterest (for Material Design, iOS design & more)
• UI designs on Designspiration
• UI designs on Dribbble

OS based guidelines

• Android: Material design guidelines and more resources
• iOS: Design principles & a detailed unoffical guide/cheatsheet

Front-end frameworks

• Bootstrap (tons of free themes available)
• Zurb Foundation
• HTML5 Boilerplate
• Grid systems like Skeleton, Lemonade

More resources

• Awesome design resources
• Awesome web design resources

License

When using any design assets (Photos, Fonts, Icons etc.) from these resources, please make sure they are either Royalty Free or provide attribution as per the Creative Commons license. Copyrighted content should not be used without prior permission.

This list is under Unlicense/Public Domain license — feel free to share/reuse for your own event/hackathon.

How to contribute

This collection of design resources was first built for the participants of the Heroes vs Hackers Hackathon to be held in BSE Mumbai on 28th & 29th November, 2015.

Updated sporadically by @rasagy, PRs welcome! Or feel free to tweet to @rasagy to suggest a resource.