webandmobileltd/awesome-ui

An "Awesome" curated list but for design (UI & UX) resources. Contains theory, tutorials, books, libraries, and other resources

Awesome-UI

A curated list of awesome UI/UX, and Design Resource for everything related to UI / UX. Contributions are welcome, just do a pull request!

License

MIT

Contribute

Contributions are welcome! Just do a pull request!

• Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

Medium

The medium blog post is here ##Other list of awesome free stuff Is Here

Table of Contents

1. Prototyping Tools
2. Wireframing Tools
3. Style
   • Colors
   • Icons
     • Stock Icons
   • Imagery
     • Stock Photo
   • Typography
   • Writing
4. Layout
5. Components
6. Patterns
7. Usability
8. Animation
9. Online Courses
10. Podcast
11. Communities
12. Inspiration
13. Checklist
14. Work Flow
15. Other Software & Tools
16. Jobs

#UI-UX Ultimate Guides

• UX StackExchange

• UX Myths

• Must Read UI Books

• 52 Weeks of UX

• Intuit Harmony Guide

• Facebook Design

• HackDesign

• GoodUI

• Brown University CS 1300: User Interfaces and User Experience

• Design of Everyday Things by Donald Norman

• Bill Buxton, Input Manuscript

• SideBar.IO

• AskTog

• AskTog: First Principles of Interaction Design (Revised & Expanded)

• AskTog: DesignMenu

• SoundCloud Podcast, Lean Startup: Combining User - Centered Design & Lean Startup To Build Better Products

• About Face, Essentials of Interaction Design PDF

• The Vignelli Canon

• Magic Ink

• Bill Buxton - Sketching User Experiences

• Day 2 Workshop of Sketching User Experiences the Workshop Nicolai Marquardt

• Google Material Design

• Design Code

• Hack Design

• Discover Design

• Google Web Fundamentals

• ux pin

• the hipper element

• smashing magazine

• Hack design

• zurb

• ux-mag

• ux booth

• nn group

• ui-patterns

• uie

• usability geek

• a list apart

• boxes and arrows

• eight shapes

#Prototyping Tools

• Pixate

• Design CC / Adobe Comet

• Invision Sketch

• Proto

• Marvelapp

• Form

• Framer

• Macaw

• Hype 3.5

• Origami

• Flinto

• Webflow

• froont

• webflow

• Krista make text and vector awesome w/ animation

#Wireframing Tools

• Mockplus

• Moqups

• Balsamiq

• AdobeCC

• Adobe Spark

• Mockflow

• Justinmind

• OmniGraffle

• Wireframe.cc

• Mockingbird

• Axure

• Flair Builder

• UX Pin

#Style

Style categories

Colors

• Tobias Van Schneider unique color combinations

• Color Contrast

• TNW: Emotions with Colour

• Kissmetrics: Color for Conversion

• SMW: Color Psychology

• GMD: Color

• DFF: Color theory

###Icons

• GMD: Icons

• Tubik Studio: Icons vs Copy in UI

• Tuts+

###Stock Icons

• Fontello: Icon fonts generator.

• Flat Icon: A search engine for 16000+ glyph vector icons.

• Font Awesome: The iconic font and CSS toolkit.

• Glyphsearch: Search for icons from other icon databases.

• Material Design Icons: 750 Free open-source glyphs by Google.

• Icon Finder: Free icon section of the website.

• Doodle Set: 50 Free Hand Doodle Icons

• Flat Set: Free flat round icons set — 60 icons

• Vector Line Set: Free Vector Line Icons Set — 50 icons

• MakeAppIcon: Generate App Icons of all sizes with a click.

• Endless Icons: Free flat icons and creative stuff.

• Perfect Icons: A social icon creation tool.

• Material Design Icons: 750 Free open-source glyphs by Google.

• Icon Sweets: 60 free vector Photoshop icons.

• Ico Moon: 4000+ free vector icons, icon generator.

• The Noun Project: Thousands of glyph icons from different artists.

###Imagery

• GMD: imagery

####Stock Photos

• Thestocks

• Stock Up

• Pexels

• All The Free Stock: Free stock images, icons, and videos.

• Unsplash: Free (do whatever you want) high-resolution photos.

• Splashbase: Search & discover free, hi res photos & videos.

• Startup Stock Photos: Go. Make something.

• Jay Mantri: Free pics. do anything (CC0). Make magic.

• Moveast: This is a journey of a portuguese guy moving east.

• Travel Coffee Book: Sharing beautiful travel moments.

• Designers Pics: Free photographs for your personal & commercial use.

• Death to the Stock Photo: Free photos sent to you every month.

• Foodie’s Feed: Free food pictures in hi-res.

• Mazwai: Free creative commons HD video clips & footages.

• Jéshoots: New modern free photos.

• Super Famous: Photos by Dutch interaction designer Folkert Gorter.

• Picography: Free hi-resolution photos.

• Pixabay: Free high quality images.

• Magdeleine: A free high-resolution photo every day.

• Snapographic: Free stock photos for personal & commercial use.

• Little Visuals: 7 hi-res images in your inbox every 7 days.

• Splitshire: Delicious free stock photos.

• New Old Stock: Vintage photos from the public archives.

• Picjumbo: Totally free photos.

• Life of Pix: Free high-resolution photos.

• Gratisography: Free high-resolution photos.

• Getrefe: Free photos.

• IM Free: A curated collection of free resources.

• Cupcake: A photographer’s treat by Jonas Nilsson Lee.

• The Pattern Library: Free patterns for your projects.

• Public Domain Archive: New 100% free stock photos.

• ISO Republic: High-quality, free photos for creatives.

• Stokpic: Totally free photos.

• Kaboompics: The best way to get free photos.

• Function: Free photo packs.

• MMT: Free stock photos by Jeffrey Betts.

• Paul Jarvis: Free high-resolution photos.

• Lock & Stock Photos: Free stock photos for you.

• Raumrot: Free high-resolution picture.

###Typography

• GMD: typography

• Font-Pairing

• Typography Intro

• Typography Commentary

• TypeGenius: Find the perfect font combo for your next project.

• FontFaceNinja: Browser extension to find the web fonts a site uses.

• Google Fonts: Free, open-source fonts optimized for the web.

• Font-to-width: Fit pieces of text snugly within their containers.

• Beautiful Web Type: Best typefaces from the Google web fonts directory.

• Font Squirrel: 100% free commercial fonts.

• DaFont: Archive of freely downloadable fonts.

• 1001 Free Fonts: A huge selection of free fonts.

• FontPark: The web’s largest archive of free fonts.

• Typography Resource: Google Fonts

• Inspiration: type wolf

• Inspiration: type inspire

• Inspiration: design inspiration

• Inspiration: dribble

• Inspiration: the inspiration grid

• Inspiration: type for you

• Inspiration: abduzeedo

Font Resource

* [google fonts file](https://github.com/google/fonts)
* [install google font files](https://github.com/qrpike/Web-Font-Load)

###Writing

• GMD: writing

#Layout Layout categories

###Principles

• GMD: layout principles

###Units & Measurement

• GMD: Units & Measurement

###Metrics & Keylines

• GMD: Metrics & keylines

###Structure

• GMD: structure

###Responsive UI

• GMD: responsive ui

###Split Screen

• GMD: split screen

#Components

• GMD

#Patterns

• GMD

#Usability Usability categories

• Design principles
• Usability Book
• Reddit Usability

Accessibility

gmd

Bidirectionality

gmd

#Animation Animation Categories

Drawing

[Draw Space: Drawing] (https://www.drawspace.com/lessons)

###UX Design

• Smashing Magazine

• Google Developers

• Animation Principles

• Animation Principles

• Dashboards

• ux psychology

#Resources

• growth supply

• student web design

• Design for Founder

• Boxes and arrows

• designcode

• ontiwik

• complex

• Tuts+

• Tools

• Person: Paul Boag

• uie

• uxmag

• Sketch app resources

• Sketch toolbox

• Sketch Plugins

• Krista make text and vector awesome

#Online Courses

• Law of Interface Design

• Steer

• WebPlatform

• Learn to Design a Better Interface

• Noexcuselist

• Harvard Open Courseware

• MIT Open Courseware

• Yale Open Courseware — actual video lectures for the class so you can get the in-class experience. Lots of classes over lots of subjects.

• Stanford Open Courseware

• Codecademy — Learn to code interactively, for free.

• Codeplace.com — Learn how to code from scratch. previously Stuk.io

• Udacity — Earn a Nanodegree recognized by industry leaders.

• Learnable — The best way to learn web development.

• Code School — Learn to code by doing.

• Thinkful — Advance your career with 1-on-1 mentorship.

• Code.org — Start learning today with easy tutorials.

• Code School

• Treehouse

• Freecodecamp

• Lynda

• Code.org

• Codeacademy

• Udacity

#Podcasts

• Design Matters

• Deep end design

• Happy Monday

• The Industry

• Adventures in Design

• Boagworld

• Shop Talk Show

• Iterate

• The Back to Front Show

• On the grid

• The Big Web Show

• Upfront Podcast

• Unfinished Business

• The Freelance Web

#Communities

• eventbrite

• meetup

• Designer News

• UXstackexchange

• UX graphic design

• Reddit Design

• Reddix UX

• Designers Talk

• Layervault

#Inspiration

• MatrialUp: Daily material design inspiration.

• FLTDSGN: Daily showcase of the best flat UI design websites and apps.

• Site Inspire: Web design inspiration.

• UI Cloud: The largest user interface design database in the world.

• Moodboard: Build a beautiful moodboard and share the result.

• Crayon: The most comprehensive collection of marketing designs.

• Land-Book: Product landing pages gallery.

• Ocean: A community of designers sharing feedback.

• Dribbble: Show and tell for designers.

• Behance: Showcase & discover creative work.

• Pttrns: Mobile user interface patterns.

• Flat UI Design: Useful board I discovered thanks to Erik.

• Awwwards: The awards for design, creativity and innovation.

• The Starter Kit: Curated resources for developers and designers.

• One Page Love: Resource for one page website inspiration.

• UI Parade: User interface design tools and design inspiration.

• The Best Designs: The best of web design.

• Agile Designers: Best resources for designers & developers.

• Niice: A search engine with taste.

• r/web_design

• r/userexperience

• r/internetisbeautiful

• r/webdesign

• r/smt

• r/androidisbeautiful

• you can almost do anything: logo

• freebiesbug

• tympanus

• ux design from the 90's

Checklist

• UX checklist
• UX checklist repo
• uxchecklist

#Planning

• Planning
  1. Research
  • Competitive Analysis
  • Data Analysis
  • User Feedback
  2. Plan
  • User Stories
  • User Flows
  • Red Routes
  3. Explore
  • Brainstorm & Sketch
  • Wireframe
  • Prototype
  4. Communicate
  • IA
  • Language
  • Accessibility
  5. Create
  • UI Elements
  • Gestures
  • Responsiveness
  6. Give Feedback
  • Waiting Times
  • Erros
  • Completed Actions
  7. Finalise
  • Finalise Layout
  • Use of image and icons
  • Font Colours & Hierarchy
  8. Delight
  • Micro copy
  • Micro interactions
  • Transitions
  9. Analyse
  • KPI Setup
  • AB Test Plan
  • Test

Ethics

• Time well spent
• Dark patterns.org

#Other Software / Tools / Resources

• Pixlr

• Uxdesign

• Now

• Do

• Sketch

• Ninja mock

• App landing examples 2015

• Iphone Vectors

• Place it: Iphone Vectors, Mockups, and Video

• Magic Mockups

• PicApp

• MockDrop

• Smart mockups

• Isweet it mockups

• design collection and insiprations

• best ux designer tools and resources collection

• the only ux reading list ever

• Top 10 UI Design Resources

Hidden Gems

• Greensock

Books

• Dont Make me Think

• Micro Interactions

• Building Better Products

• Reading List by Kevin Hale

Boiler Plate

• App Landing Page

Tutorials

• 7 Rules for Creating Gorgeous UI (Part 2)
• 7 Rules for Creating Gorgeous UI (Part 1)
• Ensure High Contrast for Text Over Images

#Jobs

• Dribbble Jobs