A hand picked list of awesome resources & tutorials for ux engineers, designers & front-end developers.
Check out my website & follow me on Twitter.
- Inspiration
- Colors
- Gradients
- Typography
- Icons
- Vectors
- Images
- Videos
- Concept
- Design
- User Interface
- Development
- Productivity
- Awwwards: Awarded web design trends.
- Behance: Showcase for creative work.
- Dribbble: Discover and connect with the world’s top designers.
- One Page Love: Design Showcase for the best One Page sites.
- Adobe Color CC: Create color schemes or browse thousands of combinations.
- Brandcolors: Collection of official brand color codes around.
- Coolors: Color schemes generator.
- CSS Gradient Generator: A powerful Photoshop-like CSS gradient editor from ColorZilla.
- UI Gradients: Beautiful color gradients.
- 100daysoffonts: 100 days of fonts.
- designmodo: Great font combinations.
- Font Squirrel: Big resource for free, hand-picked, high-quality & commercial-use fonts.
- Google Web Fonts: Open source designer web fonts.
- archetype: Improved Version of the Fontpairing tool from "our own thing" with Sketch export option.
- Fontpair: Helps designers pair Google Fonts together.
- Type Anything: Create your own font combinations.
- ourownthing: Fontpairing with Google Fonts.
- Flat Icon: Thousands of free flat icons.
- Icon Finder: 1 million free and premium icons.
- The Noun Project: Icons for Everything.
- Font Awesome: The iconic font and CSS toolkit.
- Google Material Icons: Free to use material design icons from Google.
- Ionicons: The premium icon font for Ionic Framework.
- Material Design Icons: Missing Social Media icons for Google Material Design and more.
- Favicon Generator: Favicon & app icon generator.
- Freepik: Free vectors in different formats.
- Vecteezy: A collection of free vector art, vector graphics, illustrator backgrounds, etc.
- Pexels: Best free stock photos in one place (Creative Commons CC0 license).
- Pixabay: High quality photos, vectors and illustrations (Creative Commons CC0 license).
- StockSnap: Beautiful free stock photos (Creative Commons CC0 license).
- Unsplash: All photos published on Unsplash can be used for free. You can use them for commercial and noncommercial purposes.
- Flickr: Find your inspiration - Flickr community.
- Placehold.it: A quick and simple image placeholder service.
- Unsplash.it: Beautiful placeholders using images from unsplash.
- Pexels Videos: Popular free Videos.
- Adobe XD: Prototyping & wireframing Tool.
- Axure: Prototypes, specifications & diagrams in one tool.
- Balsamiq: Rapid, effective and fun wireframing software.
- InVision: Prototyping, collaboration & workflow platform.
- Sketch: A lightweight & easy-to-use program for digital design (for Mac).
- Learn Sketch: Official user manual for Sketch.
- Sketch Casts: Video tutorials for beginners & experts.
- Sketch Tutorials: Collection of Sketch app tutorials for casual user & professional designer.
- LevelUpTuts: Beginner tutorials into Sketch.
- Sketch Plugins: Plugins created by third-party developers.
- Sketch Land: An index of the most useful resources for Sketch.
- Sketch App Sources: Plugins for Sketch.
- Sketch App Source: Keyboard Shortcuts for Sketch.
- design+code: Sketch Keyboard Shortcuts and Tricks.
- Avocode: Inspect designs, export assets and get specs without Sketch or Photoshop.
- Frontify: Create brand guidelines & smart UI libraries.
- GoodUI: 5 Ways You Can Get A Better UI.
- Bootstrap 4: Build responsive, mobile-first projects on the web (Flexbox, SASS & jQuery).
- Boostrap native: Using Native JavaScript for Bootstrap 4.
- BootstrapVue: Quickly integrate Bootstrap 4 components with VueJS.
- Bulma: A modern CSS framework based on Flexbox (Flexbox & SASS).
- Keen UI: A lightweight collection of essential UI components written with Vue.js and inspired by Material Design.
- Material Design Lite: Material Design Lite lets you add a Material Design look and feel to your websites.
- MaterializeCSS: Materialize, a CSS Framework based on material design.
- Material UI: A Set of React Components that Implement Google's Material Design.
- Muse-UI: A VueJS and Material Design based UI Component library.
- Vue Material: Vue Material is lightweight framework built exactly according to the Material Design specs.
- Vuetify: Material Component Framework (VueJS).
- Apples Human Interface Guidelines: Apples Human Interface Guidelines for macOS, iOS, watchOS, tvOS & CarPlay.
- Google Material Design: Design, components & resources for Google's brand.
- htmlreference.io: HTML Reference.
- CSS-Tricks: CSS Reference. Awesome resource around css & web-development.
- cssreference.io: CSS Reference.
- Codrops: CSS Reference. Useful resources & inspiration about the latest web trends.
- cssmatic: CSS Tools: Gradient Generator, Border Radius, Noise Texture, Box Shadow
- BEM: Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.
- Sparkbox: BEM by example.
- A Complete Guide to Flexbox: CSS Tricks - Flexbox Tutorial.
- Flexbox Froggy: Flexbox Froggy is a game for learning CSS flexbox.
- Flexbox Defense: Tower Defense with a twist: all towers must be positioned with CSS Flexbox.
- A Complete Guide to Grid: CSS Tricks - Grid Tutorial.
- Grid Garden: Grid Garden is a game for learning CSS grid layout.
- The Net Ninja: VueJS 2 Tutorial (youtube).
- Toggl: Time tracker to improve workplace productivity.
- Trello: Organize and prioritize your projects in a fun, flexible and rewarding way.
