Colors
COLOURlovers: User created & shared color palette inspiration
ColorPicker: Online Color Picker Tool
Color Hex: A free color tool providing information about any color
Flat UI Colors: Web app helps you to copy the colors from Flat UI
Contrast Ratio: Easily calculate color contrast ratios
Color Safe: Color palettes based on WCAG Guidelines
Color Contrast Checker: Check color contrast by analyzing difference between foreground and a background color.
Colllor: Color palette generator
Paletton: Tool for creating color combinations
Colorpeek: Quickly preview, share and convert one or more CSS colors, including hex, RGB, HSL, RGBA and color keywords.
Colourcode: Online designer tool, which allows you to easily and intuitively combine colours.
Chrome Daltonize!: Daltonization is a technique of exposing details to color-blind users, allowing them to see what they otherwise would have missed.
Flat UI Color Picker: Flat Color Picker which gives you the perfect colors for flat designs.
SassMe: A Tool for Visualizing SASS Color Functions
HEX To RGB: Convert Hex color to RGB.
HSL to RGB: HSL to RGB / RGB to HSL converter.
Colour Scheme Calculator: Choose a starter color to calculate its color wheel including triad, complementary, analogous, and split complementary colours, plus saturation and lightness variations.
CSS Generators
Ultimate CSS Gradient Generator: CSS gradient generator
Colorful CSS Gradient Background Generator: Generate CSS background
EnjoyCSS: All in one CSS generator
CSS MenuMaker: Create responsive website navigation
On/Off Flip switch: Generate CSS3 On/Off flip switches
CSSmatic: Gradient, border radius, box shadow & noise texture generator
Ajaxload: Ajax loading GIF generator
Ui Parade Live Tool: Button, Form, Icon, Ribbon builder
CSS Table: CSS table generator
CSS Triangle: CSS triangle generator
CSS Arrow Please: CSS arrow generator
Patternify: A CSS Pattern Generator
CSS3 Patterns Gallery: CSS3 patterns gallery
Critical Path CSS Generator: Speed up your page render time
Button Generator: CSS button generator
Layout Generator: Create CSS layout
Tridiv: Web-based editor for creating 3D shapes in CSS
Trianglify: Generate colorful triangle meshes that can be used as SVG images and CSS backgrounds
Delaunay Triangle: Triangle pattern maker that can be used as background
Bear CSS: Generates a CSS template containing all the HTML elements, classes & IDs defined in your markup
Stylie: A fun CSS animation tool
Calculator & Converter
CSS2Less: Convert old CSS files to LESS files
PXtoEM: Convert pixels to EM
RWD Calculator: Turn your pixel based designs to responsive
DPI Love: Find DPI/PPI of any screen
CSS Inliner: Automatically inline your email’s CSS
Code Beautify: Beautify, Validate, Minify, Analyze and Convert your JSON, XML, JavaScript, CSS, HTML, Excel
Density Buckets: Screen density converter for Android and iOS
Pixel Density Converter: Tells you how to scale graphics between four density groups.
Is This Retina?: DPI/PPI Display calculator
Specificity Calculator: A visual way to understand CSS specificity
NTH-Test: nth-child and nth-of-type Tester
Lessify: A configurable CSS to LESS converter and LESS learning tool.
Typography & Font
Google Fonts: Open source web fonts
Font Squirrel: Hand picked free web fonts
Dafont: Archive of freely downloadable fonts
Font Space: Download free fonts
Type Genius: Find the perfect font combo
Golden Ratio Typography Calculator: Discover the perfect typography for your website
What Font Is: Identify font from a image
Typetester: Compare Web fonts from Adobe Edge, Google and Typekit
Tiff: Find out difference between Google fonts
Wordmark.it: Preview the output of fonts for a selected word
TypeWonder: Test web fonts on any live website
Fit Text: A jQuery plugin for inflating web type
Icons
Font Awesome: Scalable vector icons that can instantly be customized
Material Design Icons: 750 glyphs Material Design system icons pack by Google Design
Iconogen: Generate favicons, Windows 8 Tiles, Apple Touch icons, Android and iOS icons
Marka: Beautiful transformable icons
Maki: Icon set for web cartography
Batch: 300+ icons for web and user interface design
Fontello: Icon font generator
Fontastic: Create your own icon font
Icon Melon: SVG icons library for web
Entypo: A suite of 411 carefully crafted premium pictograms by Daniel Bruce
Gemicon: 600+ Free icon set, comes in 3 different sizes (16px, 32px, 64px)
Typicons: Free-to-use vector icons embedded in a webfont for easy use in your user interfaces
Iconmonstr: A large collection of glyph icons from a German artist
Octicons: Icon font launched by GitHub
GlyphSearch: Search for icons from Font Awesome, Glyphicons, IcoMoon, Ionicons, and Octicons
Analyze Website Style
Stylify Me: Overview of the style guide of a site, including colors, fonts, sizing and spacing
StyleStats: Simple tool to collect CSS statistics of a website
Colours: Find out the most common colour or hue of a website
Type-o-matic: A browser extension that finds all the fonts on a page
SnappySnippet: Easily extract CSS and HTML from selected element
Editor
CodePen: Show case of advanced techniques with editable source code
JSFiddle: Test and share JavaScript, CSS, HTML or CoffeeScript online
JS Bin: A live pastebin for HTML, CSS & JavaScript and a range of processors
CSSDeck: Collection of Awesome CSS and JS Creations to help out frontend developers and designers
Dabblet: An interactive CSS playground and code sharing tool
Liveweave: Liveweave is a HTML5, CSS3 & JavaScript playground for web designers and developers
Adobe Edge Reflow: Design tool that supplements your design workflow to help you create beautiful responsive designs for all screen sizes
webflow: Drag-and-drop website builder for creating professional responsive websites
Macaw: Provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS
Developer Tools
Chrome DevTools: Set of web authoring and debugging tools built into Google Chrome
Grunt: The JavaScript Task Runner for automating tasks
LiveReload: CSS edits and image changes apply live without needing to hit refresh button
Bower: Solution to the problem of front-end package management
Yeoman: A generator ecosystem, basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts
Can I Use: Up-to-date browser support tables for support of front-end web technologies
HTML5 Please: Look up HTML5, CSS3 & find out if they are ready for use
CSS Values: CSS Reference, Properties and Values
CSS Triggers: An invaluable reference on how CSS affects performance
Testing
W3C Markup Validation: Checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML
HTML_CodeSniffer: Checks HTML source code and detects violations of a defined coding standard
W3C CSS Validation: Check (CSS) and (X)HTML documents with style sheets
CSS Lint: Points out problems with your CSS code
JS Lint: JavaScript program that looks for problems in JavaScript programs
Pesticide: CSS layout debugging
PhantomCSS: Visual/CSS regression testing with PhantomJS
CSS Critic: Regression testing of CSS
DiagnostiCSS: Visually detect any potentially invalid or inaccessible HTML markup
QUnit: A JavaScript Unit Testing framework
Dromaeo: JavaScript Performance Testing
Browsershots: Cross platform browser test
Responsinator: Check how your site will look on the most popular devices
Opera Mobile Classic Emulator: Use the profile selector to spawn multiple Opera Mobile Classic instances with a defined resolution, pixel density, user interface
Performance
Pingdom Website Speed Test: Test & analyze the load time of a live page
WebPagetest: Website speed test from multiple locations around the globe
PageSpeed Insights: Analyzes website and suggest ways to make it load faster
GTmetrix: Grade site’s performance and provides recommendations to fix these issues
YSlow: Analyzes & offers suggestions for improving the page’s performance
Perfmap: A performance heatmap of resources loaded in the browser
Optimization
CSSCSS: Let you know which rulesets have duplicated declarations
Helium: javascript tool to scan your site and show unused CSS
CSS Tidy: Opensource CSS parser and optimiser
CSS Compressor: Compress your CSS to increase loading speed
CSS Dig: Take a look at all your CSS properties, their frequency and variations
JavaScript Minifier: Minify your JavaScript
FF Subsetter: Reduce the font file size to optimize bandwidth usage
Compressor.io: Reduce the size of your images while maintaining a high quality
Prefix free: add the current browser’s prefix to any CSS code only when it’s needed
Sprite Cow: Generate CSS for sprite sheets
TinyPNG: Advanced lossy compression for PNG images
Adaptive Images: Detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of images
Feedback
Bounce: Add feedback on a design and share it with other people
Marqueed: Capture, annotate, Share and discuss images
Design Drop: A tool for collecting design feedback
Peek: See and hear a 5-minute video of a real person using your site
Inspiration
Call To Idea: Examples designs, components, ideas, logins, patterns, tabs, toggles, registers, lists, galleries, comings
Land Book: Cool landing page gallery
UX Archive: Most interesting user flows from iPhone 4S and iPhone 5
UI Parade: Online catalog of inspiration for UI designers
ZURB U: Find UI design inspiration
UX Porn: User Interface Design Patterns and Wireframe Templates
UI Patterns: User Interface Design patterns
Pttrns: A collection of mobile user interface patterns
TabPattern: Tablet UI Patterns
UICloud: User Interface Design Search Engine
Use Your Interface: Library of transitional interface and interaction design patterns
Niice: A search engine for finding design inspiration
MOOC
Intro to the Design of Everyday Things: Informative for anyone curious about design: everyday people, technical people, designers, and non-designers alike
Delft Design Approach: Introduction to fundamentals and methods of the Delft approach to designing meaningful products and services
Prototyping Interaction: Learn the different methods of prototyping by sketching, building and testing
Introduction to Graphic Design: Learn foundational graphic design principles (fonts, colors, images, backgrounds, and layouts) and how to apply them.
Intro to HTML and CSS: Learn how to convert digital design mockups into static web pages
Web Development: Learn core web development concepts from Reddit & Hipmunk co-founder Steve Huffman.
Responsive Web Design Fundamentals: Learn the fundamentals of responsive web design with Google’s Pete LePage
Responsive Images: Learn how to work with images on the modern web, so that your images look great and load quickly on any device
HTML5 Canvas: Learn how to use the canvas; how to make compositions using shapes, images, and text; how to create effects and filters on images and how to create animations.
Developing Android Apps: Learn how to build an Android app
JavaScript Basics: Learn the JavaScript programming fundamentals
Object-Oriented JavaScript: Learn how to utilize the various object-oriented programming features within JavaScript, and more importantly, how to write reusable and maintainable libraries.
JavaScript Design Patterns: Learn the importance of separating concerns when writing JavaScript, gaining hands-on experience along the way
JavaScript Testing: Learn how to write JavaScript applications with confidence, using the red-green-refactor workflow
Building Mobile Web Experiences: Learn how to create great cross-device mobile web experiences.
UX Design for Mobile Developers: Dive into the techniques that great designers use to plan and prototype amazing apps before any code is written
UIKit Fundamentals: Build a series of simple apps to become more comfortable with the UIKit framework and master its most widely used components
Intro to jQuery: Learn how to read and make sense of jQuery’s documentation.
Intro to AJAX: Learn how to make asynchronous requests with JavaScript (using jQuery’s AJAX functionality), and gain a better understanding of what’s actually happening when you do so
Website Performance Optimization: Learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.
Gamification Design: Learn the basics of Gamification with a highly practical approach
Wireframes, Mockups & Prototypes
Origami: Free tool for designing modern user interfaces created by Facebook
Cacoo: Create a diagrams, site map, flowchart, mind map, wire frame, UML diagram and network diagram
Marvel: Turn your Dropbox or desktop images into web and mobile app prototypes for any device and get feedback
Placeit: Create iPhone mockups and iPad mockups
MockFlow: Online services to Plan, Build and Share work for designers
Justinmind: Interactive wireframes for web and mobile
Wireframe.cc: Free minimal wireframing tool
Design News & Community
/r/web_design: Web design subreddit
/r/design: Design subreddit
/r/usability: User experience, Interface design, or Human Factors subreddit
/r/userexperience: User experience design subreddit
Stack Exchange: Graphic Design: Q&A for Graphic Design professionals, students, and enthusiasts
Stack Exchange: User Experience: Q&A for user experience researchers and experts
Front-end Front: A place where front-end developers can ask questions, share interesting links, and show their work to the rest of the community
Pineapple: Hub of Tutorials, Tools and Assets for developers and designers
Lockerdome: An interest-based social network
Designer News: A community of people in design and technology
DesignFloat: Web design news & tips
The Web Blend: A community for designers, developers and tech junkies
Design News: A site that features news articles, resources and tutorials written by designers and developers
Portfolio
Behance: The leading online platform to showcase & discover creative work
Dribbble: A place to show and tell, promote, discover, and explore design
Cargo: Personal publishing platform aimed at creating accessible tools and a networked context to enhance the exposure of talented individuals on the Internet
DeviantArt: An online community, showcasing various forms of user-made artwork
WordPress Themes
Optimizer: An easy to customize multipurpose theme for people who don’t like to mess with code.
Customizr: Customizable responsive theme with flat design. Well documented and easily extendable with hooks.
Asteria: A clean responsive theme with a beautiful slider, Narrow and Wide Layout Option.
Storefront: Designed and developed by WooThemes for WooCommerce projects.
Bellini: A blazing fast WordPress theme built for creating eCommerce website.
Resources
Microjs: Discover Micro-Frameworks and Micro-Libraries
Vector Open Stock: Free vector graphics
Buttons: A CSS button library built with Sass & Compass
Bootflat: Open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework
Animate.css: A cross-browser library of CSS animations
CSS Shake: CSS shake graphics and icons for your page or app
Subtle Patterns: Free tilable textured patterns
Placehold.it: image placeholders
Holder.js: Client side image placeholders
Hammer.js: Add multi-touch gestures to your webpage
Textillate: A simple plugin for CSS3 text animations
Timeline JS: Beautifully crafted timelines that are easy and intuitive to use
Modernizr: JavaScript library that detects HTML5 and CSS3 features in the user’s browser
Isotope: Create a filterable portfolio for your website
Polymer: Makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond
CodyHouse: A free library of HTML, CSS, JS nuggets
Cheetyr: Collection of cheat sheets and shortcuts for designers and developers
Leaflet: An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
Modest Maps: Free library for interactive maps
Templated: A collection of 846 free CSS and HTML5 site templates, designed & built by Cherry + AJ
GraphicBurger: Design resources offered for free to the community
Please share this post if you liked it!
