Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/troyericg/awesome-design

An ever-growing/changing collection of tools, resources, tutorials, guidelines and examples.
https://github.com/troyericg/awesome-design

List: awesome-design

Last synced: about 2 months ago
JSON representation

An ever-growing/changing collection of tools, resources, tutorials, guidelines and examples.

Awesome Lists containing this project

README 

        
## Awesome Design



An ever-growing/changing collection of tools, resources, tutorials, guidelines and examples for digital designers. 



- [Resources](#resources)

    - [General Resources](#general-resources)

    - [Colors](#colors)

    - [CSS](#css)

    - [Grids/Structure](#grids-structure)

    - [Icons & Entities](#icons-entities)

    - [Images](#images)

    - [Typography](#typography)

- [Bookmarklets](#bookmarklets)

    - [General Extensions](#general-extensions)

    - [Chrome-Only Extensions](#chrome-only-extensions)

- [Videos](#videos)

- [Books](#books)

- [Demos](#demos)

- [Examples](#examples)

    - [General](#general)

    - [Typographic](#typographic)

- [Guidelines](#guidelines)

- [Other Lists](#other-lists)

- [Contribution](#contribution)



### Resources

-----------

#### General Resources

* [16:9 Aspect Ratio Calculator](http://size43.com/jqueryVideoTool.html)

* [Character Entities](http://brajeshwar.github.io/entities/)

* [Convert Case](http://convertcase.net/)

* [Cursors - All available cursors](http://chrisnager.github.io/cursors/)

* [Domainr (vanity url finder)](https://domai.nr/)

* [Entity Conversion Calculator](http://www.evotech.net/articles/testjsentities.html)

* [iPhone Resolution](http://www.iphoneresolution.com/)

* [PXtoEM](http://pxtoem.com/)

* [The Ultimate Guide To iPhone Resolutions](http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions)

* [Visual Designers Checklist for the Web](http://webdesignerschecklist.com/)

* [Word Counter](http://www.wordcounter.net/)



#### Colors

* [0 to 255](http://0to255.com/)

* [Adobe Kuler](https://kuler.adobe.com/create/color-wheel/)

* [Color Brewer (for maps)](http://colorbrewer2.org/)

* [Color Lovers](http://www.colourlovers.com/)

* [Color Scheme Designer](http://colorschemedesigner.com/)

* [Hex to RGBA](http://hex2rgba.devoth.com/)

* [Paletton - The Color Scheme Designer](http://paletton.com/)

* [Rainbow Text Maker](http://rainbow.arch.scriptmania.com/tools/rainbow_text/rainbow_text.html)

* [The Day’s Color](http://thedayscolor.com/)

* [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/)



#### CSS

* [CSS Beautifier](http://html.fwpolice.com/css/)

* [CSS Border Radius](http://border-radius.com/)

* [CSS clip-path maker](http://bennettfeely.com/clippy/)

* [CSS Color Names](http://www.w3schools.com/cssref/css_colornames.asp)

* [CSS FilterLab](http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/)

* [CSS Values](http://cssvalues.com/)



#### Grids/Structure

* [960 Grid Generator](http://960.gs/)

* [Grid Calculator](http://www.29digital.net/grid/)

* [Responsive Grid System](http://www.responsivegridsystem.com/)



#### Icons & Entities

* [App Icon Template](http://appicontemplate.com/)

* [CopyPasteCharacter (HTML Entities)](http://copypastecharacter.com/)

* [Favicon Generator](http://www.favicon.cc/)

* [iOS 7 App Icon Template for Obsessive Designers](http://savvyapps.com/blog/ios-7-app-icon-template-obsessive-designers/)

* [Loading GIF Generator](http://ajaxload.info/)

* [Ready to use SVG icons for the web](http://bbriel.me/svgicons/)

* [The Noun Project](http://thenounproject.com/)



#### Images

* [LICEcap: simple animated screen captures](http://www.cockos.com/licecap/)

* [PLACEHOLD.IT](http://placehold.it/)

* [PlaceKitten](http://placekitten.com/)

* [ZorroSVG - The transparency of PNGs for the file size of JPEGs](http://quasimondo.com/ZorroSVG/)



#### Typography

* [Font Stacks 1](http://css-tricks.com/snippets/css/font-stacks/)

* [Font Stacks 2](http://cssfontstack.com/)

* [Golden Ratio Typography Calculator](http://www.pearsonified.com/typography/)

* [Google Web Fonts](http://www.google.com/fonts/)

* [Gridlover (tool to establish a typographic system with modular scale and vertical rhythm)](http://www.gridlover.net/app/)

* [I Font You: Find Great Font Combinations](http://ifontyou.com/)

* [Jan Tschichold’s Penguin Composition Rules adapted for web writing](http://www.stephenhawkes.com/2013/08/23/jan-tschicholds-penguin-composition-rules-adapted-web-writing/)

* [Medium-style customizable, retina-pixel underlining](http://codepen.io/ghepting/pen/tLnHK/)

* [Modular Scale](http://modularscale.com/)

* [Normalize-OpenType.css](http://kennethormandy.com/journal/normalize-opentype-css)

* [Open Typography: Font List (fonts with OpenType features)](http://opentypography.org/fontlist.html)

* [Scale & Rhythm](http://lamb.cc/typograph/)

* [Spaces - from zero-width to em space](http://www.aresluna.org/spaces/)

* [The State of Web Type](http://stateofwebtype.com/beta/)

* [Type Connection: Matches](http://www.typeconnection.com/matches.php)

* [Type Genius](http://www.typegenius.com/)

* [Type Scale](http://type-scale.com/)

* [Typekit Lists](https://typekit.com/lists)

* [Web Font Combinator](http://font-combinator.com/)



### Bookmarklets

-----------

#### General Extensions

* [ColorZilla](http://www.colorzilla.com/)

* [Colorize Text Between 45-75 Characters](http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/)

* [RWD Bookmarklet](http://responsive.victorcoulon.fr/)

* [Type Sample](http://www.typesample.com/)

* [WhatFont](http://chengyinliu.com/whatfont.html)



#### Chrome-Only Extensions

* [Webpage Screenshot](http://www.webpagescreenshot.info/)



### Videos

* TK



### Books

* TK



### Demos

* TK



### Examples

-----------

#### General 

* TK



#### Typographic 

* [Beautiful Web Type (Google Fonts)](http://hellohappy.org/beautiful-web-type/)

* [Google Web Fonts Typographic Project](http://femmebot.github.io/google-type/)

* [Just My Type (font pairings)](http://justmytype.co/)

* [Typ.io - Fonts that go together](http://www.typ.io/)

* [Typewolf](http://www.typewolf.com/)



### Guidelines

* TK



### Other Lists

* [Frontend Development](https://github.com/dypsilon/frontend-dev-bookmarks)

* [Awesome Awesomeness](https://github.com/bayandin/awesome-awesomeness)

* [Awesome](https://github.com/sindresorhus/awesome)



### Contribution

Please contribute! We all get better when we do it together.