Design

Web Fundamentals from Google

Web Design

• Useful Docs and Guides for Front-End Developers
• Top 10 Front-End Frameworks of 2016
• Web Components, Polymer
• Material Design, Angular Material
• Twitter Bootstrap
• CSS
• Flexbox
• Cards
• Grid
• Fonts
• Icons
• SVG
• Pluralsight courses on UX and Web Design

---

Web Fundamentals from Google

---

Web Design

• Awesome Web Design
• Awesome Design
• Awesome HTML5
• Awesome Stock Resources
• Awesome Images
• 50 Shades of #FAFAFA
  • Coolors - The super fast color schemes generator! by Fabrizio Bianchi @_fbrz
• The Ultimate List of Best Free Tools & Resources for Front-End Web Developers
• 75 of the Smartest Resources for Web Designers
• The Complete List of User Experience (UX) Resources & Tools
• Designing Future-Proof UI
• HTML 5.2
• Welcome to HTML 5.2
• Contrast Rebellion
  • How the Web Became Unreadable
• Ant Design - One Design Language for UI
  • on GitHub
  • Awesome Ant Design
  • Ant Design of React (Official Implementation)
• Figma
  • Figma challenges Adobe by trying to be the Google Docs of design
• Facebook Origami
  • Origami Community
• 7 New Browser Based Tools for Designers
• The Pursuit of Great Design
  • Design Principles
  • Designing
• A Nerd’s Guide to Color on the Web
• Conversational Interfaces
  • What Would Alexa Do? by Tim O'Reilly
• Open Images dataset
• Essential design trends, October 2016
• 4 UX mistakes almost every designer makes
• Progressive enhancement isn’t dead, but it smells funny
• Jared Spool on UX Design
• UX Power Tools - Sketch Style Guides

---

Useful Docs and Guides for Front-End Developers

• Superhero.js
• Open Web CSS Reference
• OverAPI.com
• The Ultimate Flexbox Cheat Sheet
• Adobe Web Platform
• HTML5 Cheat Sheet
• What’s New in HTML 5.1
• Sass Guidelines
• The Elements of HTML
• Codrops CSS Reference
• JavaScript Equality Table
• Screen Sizes
• Sass Functions Cheat Sheet
• ES6 Katas
• PostCSS.parts
• jQuery Quick API Reference
• Git Cheatsheet

---

Top 10 Front-End Frameworks of 2016

1. Bootstrap
2. Semantic-UI
3. Foundation
4. Materialize
5. Material UI
6. Pure
7. Skeleton
8. UIKit
9. Milligram
10. Susy

Top 20 Best Free CSS3 Frameworks for Web Development

• Material Framework
• Leaf
• Materialize
• Essence
• Bootstrap
  • Bootstrap 4
• Semantic UI
• Foundation
• Cascade
• Baseguide
• Siimple
• Responsive Cat
• Sculpt
• Concise CSS
• Blueprint
• UIkit
• Modest Grid
• Schema
• Metro UI
• Responsive Grid System
• YAML

---

Web Components

• Polymer
  • on GitHub
  • Awesome Polymer
  • Polymer 2.0 Preview
  • Polymer library
  • Polymer App Toolbox

---

Material Design, Angular Material

• Awesome Material Design
• Awesome Material
• Material Design
  • Design Is Never Done
  • Guidelines
    • Design Guidelines (Old URL)
    • Icons
  • Tools
    • Material Early Access Program
    • Gallery - Design collaboration, simplified
    • Stage - Define dynamic interfaces with interactive motion
      • Pixate
      • http://relativewave.com/form/ by RelativeWave - Instant Native Prototypes
    • Remixer (on GitHub)
    • Resizer
    • Device Metrics
• Materialize
• Eight don’ts for your Material Design app
• Google is making it easier for anyone to design beautiful apps

---

Twitter Bootstrap

• Awesome Bootstrap Themes

---

CSS

• Awesome CSS
• https://speckyboy.com/2016/07/13/css-libraries-frameworks-tools-2016/
• http://code.tutsplus.com/tutorials/purecss-offers-an-intriguing-alternative-to-bootstrap--cms-25176
• How to make HTML disappear completely
• Pure CSS Content Filter
• BEM - Block Element Modifier
• Simple Style Sheets
• HUE.CSS - A huge collection of CSS backdrops
• Stunning Examples of CSS Loaders
• 15kb of CSS is all you’ll ever need ⚡️
• Using CSS Variables in Site Development
• Pure CSS Horizontal Scrolling

---

Flexbox

• Awesome Flexbox
• Flexbox Grid
• CSS Flexible Box Layout Module Level 1 by W3C
• A Complete Guide to Flexbox
• Grd
• Bulma
• Flexbox Patterns
• Flexbox Editor
• Playground
• Flex-grow 9999 Hack
• Fukol

---

Cards

• http://thenextweb.com/dd/2015/07/15/the-future-of-cards-in-web-design/
• Designing Card-Based User Interfaces
• Why cards are the future of the web
• Twitter Cards
• Bootcards (@bootcards)
  • on GitHub
  • Introducing Bootcards: Bootstrap Cards Made Easy

---

Grid

• CSS Grid Layout Module Level 1 by W3C
• A Complete Guide to Grid
• Will we be flattening our HTML for CSS Grids?
• Things I’ve Learned About CSS Grid Layout

---

Fonts

• OpenType
  • Introducing OpenType Variable Fonts
  • Variable fonts, a new kind of font for flexible design
• Google Noto Fonts
  • Google and Monotype launch Noto, an open-source typeface family for all the world’s languages
• Beautiful Free Modern Fonts
• 10 great web type resources

---

Icons

• Tips for Using Icons in Your App
• Nucleo - a library of icons with super powers
• Nova
  • 4000 Material Design Icons - $127
  • 350 Icons free pack
  • Each icon line style and solid style
• Top 50 Free Icon Sets for Web Designers from 2016

---

SVG

• Awesome SVG
• The SVG path Syntax: An Illustrated Guide
• Paper.js - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas
  • on GitHub
  • Getting Started With Paper.js
    • Projects and Items
• Visual and Motion Design Work of Ben Mingo

---

Pluralsight courses on UX and Web Design

• UX
  • https://app.pluralsight.com/library/courses/ux-design-enterprise-making-sense
  • https://app.pluralsight.com/library/courses/hacking-user-experience
  • https://app.pluralsight.com/library/courses/ux-usability-testing-approaches-2437
  • https://app.pluralsight.com/library/courses/lean-front-end-engineering
• CSS
  • https://app.pluralsight.com/library/courses/html5css3-upgrade
  • https://app.pluralsight.com/library/courses/introduction-html5-css3
  • https://app.pluralsight.com/library/courses/css3-from-scratch
  • https://app.pluralsight.com/library/courses/css3
  • https://app.pluralsight.com/library/courses/css3-in-depth
  • https://app.pluralsight.com/library/courses/elegant-navigation-css3-transitions-1975
  • https://app.pluralsight.com/library/courses/css-animation-with-transition-and-transform
• FlexBox
  • https://app.pluralsight.com/library/courses/css-flexbox-fundamentals-2319
  • https://app.pluralsight.com/library/courses/modern-web-layout-flexbox-css-grid

---