Welcome to a lush collection of high quality resources curated for UX professionals
just like you
Start Here

code

Designers who understand code, produce more realistic mockups. Below you will find learning materials, demos & other tools for IxD / Motion & Interaction Designers / Front-End Developers.


learn
Code
basics

edx

W3C's edX

HTML

How To Code In HTML

How To Code

HTML
CSS

General Assembly

General Assembly

HTML
CSS

shay howe

HTML
CSS

Khan Academy

Khan Academy

HTML
CSS
JAVASCRIPT

Code Academy

Code Academy

HTML
CSS
JAVASCRIPT

Lynda

Lynda

HTML
CSS
JAVASCRIPT

BAVC

BAVC

HTML
CSS
JAVASCRIPT

w3schools home page

W3 School

HTML
CSS
JAVASCRIPT

javascript roadtrip

JavaScript Roadtrip

JAVASCRIPT

web page fx

Cheat Sheets


CSS
demos

tizag

tizag

demos

tutorials & demos

Fresh Design Web

demos

demosthenes

Demos Thenes

demos

Find, Create, & Publish Open Source software for free

Source Forge

demos

beauty of css design

Zen Garden

demos


CSS
generators

css3

CSS3

style sheets

css3 patterns

Pattern Gallery

patterns

cubic bezier

Cubic Bezier

ease previewer

animatable

Animatable

animations

corner shape

Corner Shape

box shapes

border-radius builder

Border Radius

box shapes

generator

Generator

box generator

The ultimate CSS tools for web designers

CSS Matic

gradient, texture…

CSS Shake

CSS classes

enjoycss

Enjoy CSS

fun generator


CSS
tools

css portal

CSS Portal

many tools

css flow

CSS Flow

Snippets
UI Kits

css design awards

CSS Design Awards

holistic designs

best css

beautiful designs

html 5 rocks

Understanding Filters


JAVASCRIPT
demos

blog

Adobe

demos

web design & development blog

Codrops

demos

css tricks

CSS Tricks

demos

queness

Queness

demos

css menu maker

CSS Menu Maker

demos

Mozilla Developer Network

Mozilla Developer

demos


JAVASCRIPT
tools

fast, small, & feature-rich JavaScript library

JQuery

library

modernizr

Modernizr

library

javascripting

Js'ing

library & frameworks

JavaScript Performance Stack

John Resig

performance components

jsbin

JS Bin

debugging

2ality

2ality

mobile computing


jQuery
demos

tool tipster

demos

mega lo code

tutorials


jQuery
tools

owl carousel

responsive carousel

matthew lein

motion Easing

easings

motion Easing

fitvids js

fluid, videos

isotope meta fizzy

Filter layouts


haml
vs jade

haml

clear markup

jade

server‐side templating

vs chart

Compare them


influential
dev
pages

mozilla

twitter

Google

Apple


coded
features

hello bar

original alert

tiny url

good URLs

new media campaigns

responsive navigation

imdanishiqbal

sticky header

dimsemenov

Magnific Popups

random

true random numbers

zen desk

live chat support


tools to
validate

check link

W3C tools

bad links, mobile, validate

LINT

syntax check


problem
solving

HTML5 Doctor

HTML5 Doctor

HTML elements & resources

tech terms

geek out on definitions

tech stacks

common stacks

Can I Use

Can I Use

see what browsers support it

HTTP Status Messages

W3 School

explains error messages

POI

Specific POI (points of interest) in technology trends, understanding users and more.


front‐end
work
spaces
Code Pen

CodePen

social dev environment

jsfiddle

JS Fiddle

front end environment

Cloud9

AWS Cloud9

IDE


dev
work
spaces

git hub

version control

git scm

mac interface


front‐end
Frame
works
Sleek, intuitive, & powerful front-end framework for faster & easier web development.

Bootstrap

responsive

creative tim

bootstrap components

start bootstrap

Start Bootstrap

Themes & Templates

bootstrap hero

Bootstrap Hero

319 RESOURCES

bootstrap hero

react bootstrap

rebuilt for React
github

GEL

BBC's framework

grommet

HPE's React‐based UI


cms
platforms
Type and Grids

Type & Grids

Mobile‐First Templates

get grav

Grav

flat‐file

ghost

Ghost

blogging

picocms

PICO

flat‐file

statamic

Statamic

flat‐file

wp beginner

wordpress comparison


Responsive
& Adaptive
Liquid layouts the easy way

Max Design

Liquid layouts

liquid apsive

Liquid Apsive

Adaptive, Resp, Static & Liquid

responsive

Responsive Web Design

article & book

brolik

Brolik

Responsive menu

mediaqueri

Media Queries

image method

CSS TRICKS

differences


Responsive
testing
See if your site is responsive

Responsive Design

Bookmarklet option

malte wassermann

Viewport Resizer

BOOKMARKLET option

Matt Kersley

Matt Kersley

side by side

responsinator

Respons‐
inator

Share results

Responsive Design Checker

RD Checker

plus services

browser stack

Browser Stack

test device not just the screen size

mobi

Mobi

test performance


screen
sizes
dpi

DPI Love

comprehensive list

browser shots

pick a browser

1st web designer

breakpoint overview


retina
files
kyle j larson

Kyle J Larson

old but true overview

ios design

iOS Design

iOS devices

dense

Dense

jQuery plugin

retina js

Retina JS

useful script
article

retina

Js'ing

using retina.js


svg
files

Codrops

how to SVG

viget

Viget

small screen logos
article

snap svg

snap svg

javascript svg library

peter colling ridge

peter colling ridge

various tools

css tricks

using svg


compress
files

image optim

mac app

tinypng

Tiny PNG

PNG

mac update

gui tar

graphics

W3C Standards

format definitions


apps

sketch

UI design
article
zeplin

x five

SKETCH TO HTML

css chopper

SKETCH To HTML

adobe

creative cloud
learning

html panda

PSD to HTML

Slicy

Slicy

PSD image export

photoshop made simple

Pixlr

PSD Simplified

GIMP

open source tool


accessible
technology
accessibility

W3C Standards

accessibility standards

WAI basics

Web AIM

accessibility in mind

bruce lawson

Bruce Lawson

Standards

usability

Usability

design guidelines

Total Validator

accessibility, broken links & spelling

Firefox plugin

compatible testing

chrome store

accessibility extensions

Color Blindness

Color Blindness

tests & resoutces
Essentials


iot

internet of useless things

truely funny


SEO

yoast

optimize it


Experience
Design

Nielsen Norman

Evidence‐based ux
captology

science of people

human behavior hacker

dark patterns

tricking users

smashing magazine

Smart Transitions

ux myths

UX misbelief


Interface
design
UX/UI comparison

UX is
not UI

by Erik Flowers

ui patterns

awesome product design


motion
design

rachel nabors

motion design
subscribe

Smashing Magazine

Smashing Magazine

After Effects


branding
design

logo design love

identity design

seek logo

find any logo


keeping
organized

optimal workshop

User Research Platform

trello

apturing, organising & tracking

Calendly

schedule meetings

x ai

artificial intelligence, assistant

canvanizer

brainstorm together

bm fiddle

outlinesn activities


web
diary

web archive

research old urls

evolution of the web

evolution Of The Web

web progression

wappalyzer

shows code type extension

deliverables

Tangible or intangible parts of the development process.


Analytics

google trends

live search trends
Insights

Ink 361

Instagram Insights

twitter analytics

twitter Insights

trends map

real time twitter trends

tweet ping

real time tweets

stat counter

Stat Counter

analysis for your website

modernizr

feature detection


team
alignment

game storming

toolkit for innovators


game

stickies

affinity maps, retrospective & brainstorming

concept board

ideas, brainstorm & moodboards

mural.co

easy collaboration


story
boards

storyboard that

Digital Storytelling


User
Testing

sauce labs

automated testing

woopra

Analyze touchpoint

user testing

eliminate bad ux

try my ui

what users are thinking

Loop 11

unmoderated testing

usability hub

suite of tests
5‐sec

userlytics

video user & screen

silver back

video user & screen, mac only

what users do

video user & screen

app see

mobile heat maps & more

mouse stats

heat maps & more

OptimalSort

Card sorting

proven by users

online card sorting


screen
captures

screencast‐o‐matic

stills & video

snag it

stills & video

Cam Studio

record what’s on onscreen


surveys

Survey Monkey

online surveys

poll daddy

provides polling widgets

survey any place

mobile surveys


mood
boards

creative bloq

20 tips


Sitemaps

xmind

mind mapping

cacoo

diagram collaboration

gliffy

diagramming

creately

diagramming
definitions

concept draw

symbol definitions


wireframes

Wireframe

simple

style tiles

Style Tiles

communicate the essence

balsamiq

Balsamiq

another tool

mock flow

Mock Flow

create & share

ux pin

interactive wireframes & prototypes

turn any web page into wireframe

Wirify

wireframe a site

wireframes

I Love Wire Frames

inspiration


prototypes

ixda

IxDA

where to start

Marvel App

Marvel

synced in real‐time from DB

mockup.io

mobile collaboration

Smashing Magazine

Smashing Magazine

PSD timeline

robots thoughtbot

Keynote self playing presentation

axure

Axure

build it

Invision App

Invision

build it

Proto.io

build it

concept.ly

build it

lucid chart

diagrams, design & prototyping

mock flow

design & prototyping

just in mind

design & prototyping

fluid ui

build it, mobile app

flinto

Flinto

build it, mac only

principle

build it, mac only

app cooker

Apple Cooker

mac only

moq ups

Moqups

design, prototypes & share

conceptin box

design, prototypes & share

origami

Facebook’s tool

code condo

for Bootstrap


Present
With Ease

prezi

not PowerPoint

slides

slide decks

prevue it

design presentations

red pen

Point & click for feedback

artbox

Look here for tools of the trade. (crayons included)


place
holders
lipsum text

Iipsum

lorem ipsum
greek copy

motherfucking placeholder for text

Samuel L Ipsum

motherf*ing copy

Meet The Ipsums

Meet The Ipsums

clever copy

Hipster Ipsum

Hipster Ipsum

Hipster copy

Bacon Mock Up

Bacon Mock Up

bacon copy
images

Place Hold

Place Hold

gray‐box images

Place Kitten

Place Kitten

kitten images

list of place holders

Hanselman

placeholder list


measure
tools

page ruler

ruler extension


font fun
Should I Use Comic Sans

Should I Use
Comic Sans

yup, that is a legitimate question

Comic Sans Criminal

Comic Sans Criminal

how to use it…

Interrobang

Interrobang

quexclamation


fonts
& icons
Google Fonts

Google Fonts

test your text in a font

icon & font toolkit

Font Awesome

icon⁄font toolkit
6 Tips

sky fonts

Sky Fonts

available on apps

fonts

desktop, Web fonts

Type Cast

Type Cast

semantic, readability

meteocons

icons, vectors, fonts

icons

Icons8

icons in any format, size & color

flat icon

Flat Icon

database of vector icons

generic icons

Genericons

webfont designed to be clean

icomoon

Icomoon

custom built & crist icon fonts

bud icon

Premium Collection

fontastic

Vector Icons for web

the noun project

large selection

Web Fonts Current Status

W3C Standards

font standards
pixel/em

CharacterReference

Character Reference Chart

quick list

What Font

font search Extension

Extensis

Extensis

font Management


color
fun
beyonce palettes

Beyonce Palettes

fun color Palettes

ioxapp a game

IOX App

color game

colorrrs

Colorrrs

full‐screen way to pick colors

color method

color matching game


color
tools

color hex

info about colors

color mixer

W3 School

Mix two colors

0 to 255

0 To 255

color hunter

pantone

Pantone

need i say anything

visibone sheets

Visi Bone

PSD color pallet

share colors

Colour Lovers

palettes & trends
pltts

UX Matters

UX Matters

Color Theory
part 2

color wheel

Adobe Color CC

easy color picker

sip

Sip

simple color picker

bjango

Skyla


Photo
stock
Free images

sharla photos

$1 RF photos

Free images

Unsplash

public domain

Free images

Stock Snap

Creative Commons CC0

pictures for your inspiration

Magdeleine

for inspiration

Free images

Super Famous

Cc Attribution 3.0

Free images

Pickup Image

public domain photos

Creative Commons

Creative Commons

official site

Mockups & Demo Videos

Place It

Mockups & Videos

sf mta

rights unknown

colonial williamsburg

american history


free
photos

cepolina

travel, nature

Free User Interface Kit

Design Modo

UI Kit

download free photos fonts patterns style…

Free Downloads

Fonts, brushes…

graphic resources

Free Pik

graphic resources…

pic jumbo

Pic Jumbo

for personal & commercial

gallery

Gallery 4 it

photo sharing

Free images

Pixa Bay

for commercial

Free images

Foter

for blogs, forums…

Free images

Split Shire

for commercial & personal

Free images

RGB Stock

graphics…

Free images

Gratis‐
ography

for personal & commercial

Free images

Life of Pix

for personal & commercial

Free images

Im Creator

for personal & commercial

pexels

stock


photo
tools
reverse image search

Tin Eye

reverse image search


free
Downloads

design m

resources

apple

downloads

toptal

patterns

in obscuro

original styles

ghostly pixels

Vector, EPS, PNG

pattern head

Seamless Patterns

mygrafico

graphics

mujka

COMMERCIAL USE

market

UI kits

market me

design resource

market envato

community of creatives

app design vault

kits

App Icon Template

apply pixels

Icon, UI Templates

resources for design & illustration

Creative Market

handcrafted

open source templates

theme hunt

Themes, Templates

build with purpose

Tech & All

Font, photo, PSD & code

Designers Tool Box

Designers Tool Box

print, web tools

Media Loot

Media Loot

font, icon, templates…

DeviantArt

DeviantArt

network for artists & art-centric

subtle patterns

Subtle Patterns

PSD plugins

365 psd

free psd

best psd freebies

free psd


print
marketing
All About Papercutting

Paper cutting

Umm Yum!
other site

Vintage Ad Browser

Vintage Ad Browser

vintage ads

The Die Line

The Die Line

packaging production inspiration

lovely package

Lovely Package

packaging design

bay leys boxes

Gift Boxes

smock paper

paper


letterpress
mr boddington

Mr. Boddington

one of a kind

dependable letterpress

Dependable Letterpress

printing

eggpress

Egg Press

handcrafted cards

beast pieces

small letterpress

honizukle

small letterpress

studio on fire

large letterpress

dolce press

small letterpress


creative
people

fornasetti

mad visionarie
game

inspiration de

search for it

design spiration

search for it

tommyrgb

Tommy Noshitsky

mix media artist

stina persson

Stina Persson

killer Watercolour

Kyle Schaeffer

Kyle Schaeffer

makes websites

Claire Lordon

Claire Lordon

illustrator
shop

Veerle blog

Veerle

graphic, web & home

freelance graphic designer & blogger

Just Creative

blogger

Young House Love

Young House Love

DIY & all things home

Oh Happy Day

Oh Happy Day

Put The “Art” In Parties

backgrounds & accessories you need to make your blog a work of art

Shabby Blogs

bkgrs & accessories

design mom

Design Mom

a very happy site

well medicated

Well Medicated

inspirational findings

designspiration

Designsp Iration

resource, discover & share


creative
website

nclud

filter fun

ads of the world

global work

css design awards

the best of…

Fresh UI Inspiration in the Era of Google Material & Design Patterns

Awwwards

UI Inspiration

manual creative

Manual Creative

visual comm studio

Guts & Glory

web design & dev

zurb

Zurb

product design

krochet kids

Krochet Kids

nice layout

food sense

Food Sense

nice layout

scopino

Mike Scopino

nice layout

starbucks

Starbucks

nice layout

every whereist

The Every‐
whereist

nice layout

tn vacation

Tennessee Vacation

nice layout

navdy

nice layout

ny times

NY Times

nice layout

1 bite 2 go

navigation

jviewz

super complex

chatter

Industry news, events & articles relatable.


industry
news

advancing design as a professional craft, strategic advantage & vital cultural force

AIGA

professional association for design
resources
blog

GAG

GAG

Pricing & Ethics

commarts

Comm Arts

vis comm

adage

Ad Age

news, analysis & data

adcglobal

ADC Global

celebrates & leaders

Free images

How Design

business, creativity & tech

Type Directors Club

Type Directors Club

excellent typography

ixda

IxDA

San Francisco
global

color marketing

Color Mktg Group

color professionals

UX Matters

UX Matters

UX insights

Smashing Magazine

Smashing Magazine

designer & developer

news, information & resources for the Connected Generation

Mashable

for the Connected Generation

A List Apart

A List Apart

Resp
RWD

Web Designer Depot

Web Designer Depot

neg‐space
lessons

design envy

Design Envy

the best in design

medium

Medium

designer & developer
Stocks

curated articles to designers & front-end developers every Sunday

Hey Designer

designers & front‐end dev

Design News Delivered Daily

Design Bump

Design News

online magazine & resource site for designers & web developers

One Extra Pixel

designer & developer

24 ways

24 Ways To Impress Friends

workflow
Colour

designobserver

Design Observer

design, social & criticism

for designers & web designers

Designer

for web designers

design shack

examples of design

ux booth

UX Booth

stories by & for ux

for designers & programers

Fearless Flyer

designer & programmer

UX Design

UX focused

DN

design community

website databases

php database scripts & applications

change sciences

tech with emotional intelligence

design bombs

web design, tutorial & resources

ecommerce ux design

the shop experience
shop

venture beat

gaming

promostyl

International

entrepre‐neur

stories

daily ifix

apple addictions

core 77

industrial designer

cmyk mag

for STUDENT DESIGNER

ad week

marketing

hacker news

share & read quick bits

the verge

multimedia effort

mobi forge

design, research & analytics
Android
screens

five thirty eight

products

web stock

speakers, talks & event


industry
views

Usability geek

by Justin Mifsud

UXM

by Neil Turner

Remy Sharp

Remy Sharp

very useful archives

Web Designer Wall

Web Designer Wall

by Nick La

career foundry

blog

lukew

Luke W

presentations & writings
Touch

Janko Jovanovic

Research & articles

we love lean

prod people love

service design tools

by Roberta Tassi

ELI SCHIFF

design critic


events

sxsw

SXSW

music, films & tech

uxweek

UX Week

inspiration & skill building

how conference

How Design Live

edu & tech
cont.

redesign conference

RE:Design

UX⁄UI leader discussions

Mobile Web Dev Conference

Mobile Web Dev Conf

mobile & web dev trends

international talks

Typo Talks

publicly accessible talks

adobe

Adobe

seminar & conference

pantone colors

Pantone

news & trends

an event apart

An Event Apart

web design conference

social conference directory

Lanyrd

social conference directory

sf design week

SF Design Week

75 events

meetup

Meet Up

neighbors getting together

eventbrite

Eventbrite

find your next experience

one club

producer of the prestigious

adaptive path

events & training

lesbians who tech

come together

vma

network & events

Hope you have enjoyed this massive collection!
If you have any messages ‐ drop them here…