└── README.md /README.md: -------------------------------------------------------------------------------- 1 | MegaListofResources 2 | =================== 3 | 4 | This is a TON of helpful links for designers and front-end developers. We encourage you to play around and explore all of these resources, as everything that's on this list comes highly recommended. If you ever find yourself at a loss for what to do, poke around in here. 5 | 6 | While not every person will necessarily need all of these resources, it's a great way to discover what you personally like and works for you. Use only what you find useful! 7 | 8 | __________ 9 | 10 | *About DESIGNATION:* 11 | *[DESIGNATION](http://designation.io/) ([designation.io/](http://designation.io/)) is a full-time, full-immersion, full-stack design bootcamp in Chicago and St. Louis.* 12 | 13 | *Over 16 weeks, students learn digital design, front-end development and user experience (UX), and build their portfolios by working with live clients on real world projects.* 14 | 15 | _________ 16 | 17 | **Search:** 18 | === 19 | - [Google](https://www.google.com/?gws_rd=ssl) 20 | - [StackOverflow - coding questions](http://stackoverflow.com/) 21 | - [UX Stack Exchange - UX questions](http://ux.stackexchange.com/) 22 | - [Graphic Design Stack Exchange - visual design questions](http://graphicdesign.stackexchange.com/) 23 | - [MDN - Mozilla Developer Network (for good documentation)](https://developer.mozilla.org/en-US/) 24 | - [Creative Commons - license-free image search](http://search.creativecommons.org/) 25 | 26 | _____________ 27 | 28 | 29 | **Online Communities:** 30 | === 31 | - [Hacker News - startup culture/news/trends](https://news.ycombinator.com/) 32 | - [Designer News - design culture/news/trends](https://news.layervault.com/) 33 | - [Product Hunt - startup culture/news/trends](http://www.producthunt.com/) 34 | - [Sidebar - design culture/news/trends](http://sidebar.io/) 35 | - [Dribbble - design culture/trends](http://dribbble.com/) 36 | - [Behance - design culture/trends](https://www.behance.net/) 37 | - [/r/web_design](http://reddit.com/r/web_design) 38 | 39 | _____________ 40 | 41 | 42 | **Interviews:** 43 | === 44 | - [Dorm Room Tycoon - Design Interviews](http://drt.fm/) 45 | - [DESIGNATION Blog](http://designation.io/blog/category/interviews/) 46 | - [Humble Pied](http://humblepied.com/) 47 | - [InvisionApp Blog](http://blog.invisionapp.com/) 48 | 49 | 50 | _____________ 51 | 52 | 53 | **Responsiveness:** 54 | === 55 | - [Responsive Patterns](http://bradfrost.github.io/this-is-responsive/patterns.html) 56 | - [Responsive PX](http://responsivepx.com/) 57 | - [Lettering.js - responsive typography](http://letteringjs.com/) 58 | - [Fluid images](http://unstoppablerobotninja.com/entry/fluid-images) 59 | - [Fluid 960 grid](http://designinfluences.com/fluid960gs/) 60 | - [Gridless](http://thatcoolguy.github.io/gridless-boilerplate/) 61 | - [PX to EM](http://pxtoem.com/) 62 | - [Media Queries Patterns Library](http://mediaqueri.es/) 63 | - [Responsive Web Design, Most Complete Guide](http://www.webdesignshock.com/responsive-web-design/) 64 | - [This Is Responsive - Patterns Library](http://bradfrost.github.io/this-is-responsive/) 65 | - [Ink - create responsive interfaces](http://ink.sapo.pt) 66 | - [Responsinator](http://www.responsinator.com/) 67 | 68 | 69 | _____________ 70 | 71 | 72 | **Front-End Development:** 73 | === 74 | - Important must-read of things to understand in front-end dev: [css resets, responsive media queries, viewport meta tag, box model, container/columns/rows best practices, clearfix](http://www.adamkaplan.me/grid/) 75 | - [Code Guide - standards for flexible, durable HTML/CSS](http://mdo.github.io/code-guide/) 76 | - [How to keep up to date on front-end technologies](http://uptodate.frontendrescue.org/) 77 | - Front-End Frameworks: 78 | - [HTML5 Boilerplate](http://html5boilerplate.com/) 79 | - [Blueprint](http://www.blueprintcss.org/) 80 | - [ZURB Foundation](http://foundation.zurb.com/) 81 | - [99Lime](http://www.99lime.com/) 82 | - [Skeleton](http://www.getskeleton.com/) 83 | - [Centurion](http://www.centurionframework.com/) 84 | - [Compare front-end frameworks](http://usablica.github.io/front-end-frameworks/compare.html) 85 | - Javascript Frameworks: 86 | - [AngularJS](https://angularjs.org/) 87 | - [EmberJS](http://emberjs.com/) 88 | - [BatmanJS](http://batmanjs.org/) 89 | - [Backbone](http://backbonejs.org/) 90 | - [SproutCore](http://sproutcore.com/) 91 | - [YUI](http://yuilibrary.com/) 92 | - [Semantic UI - semantics for sharing](http://semantic-ui.com/) 93 | 94 | 95 | _____________ 96 | 97 | 98 | **Sharing/Feedback/Publishing:** 99 | === 100 | - [Scratchpad](http://scratchpad.io/) 101 | - [Firepad](http://www.firepad.io/) 102 | - [Snaggy](http://snag.gy/) 103 | - [Bounce](http://www.bounceapp.com/) 104 | - [DropCanvas](http://dropcanvas.com/) 105 | - [WeTransfer](https://www.wetransfer.com/) 106 | - [SquadEdit](https://squadedit.com/) 107 | - [CodePen](http://codepen.io/) 108 | - [JSFiddle](http://jsfiddle.net/) 109 | - [Editr](http://lab.idered.pl/editr/) 110 | - [Snipt](https://snipt.net/) 111 | - [Chop](http://chopapp.com/) 112 | - [Screencast-o-matic](http://www.screencast-o-matic.com/) 113 | - [Beam It](http://www.justbeamit.com/) 114 | - [Copybar](http://copybar.io/login) 115 | - [JS Bin](http://jsbin.com/welcome/1/edit) 116 | - [Dablet](http://dabblet.com/) 117 | - [Floobits](https://floobits.com/) 118 | - [Stypi](https://code.stypi.com/aexzlzrl) 119 | - [Paste](https://paste.sh/) 120 | - [LiveWeave](http://liveweave.com/) 121 | - [VolaFile](https://volafile.io/) 122 | - [Talky](https://talky.io/) 123 | - [ShareFest](https://www.sharefest.me/) 124 | - [Appear](https://appear.in/) 125 | - [CoderPad](https://coderpad.io/) 126 | - [Criticue - peer review websites](http://www.criticue.com/) 127 | - [RedPen](https://redpen.io/) 128 | 129 | 130 | _____________ 131 | 132 | 133 | 134 | **Analytics:** 135 | === 136 | - [Google Analytics](http://analytics.google.com/) 137 | - [Piwik (open source)](http://piwik.org/) 138 | - [MixPanel](http://mixpanel.com/) 139 | - [GoSquared](https://www.gosquared.com/) 140 | - [Flurry](http://www.flurry.com/) 141 | - [Chartbeat](https://chartbeat.com) 142 | - [Parsely](http://www.parsely.com/) 143 | 144 | _____________ 145 | 146 | 147 | 148 | **Hosting Platforms:** 149 | === 150 | - [CloudCannon - free static hosting](http://cloudcannon.com/) 151 | - [Pancake - free static hosting](https://pancake.io/) 152 | - [Site44 - static hosting](http://www.site44.com/) 153 | - [Meteor - JavaScript app framework](https://www.meteor.com/) 154 | - [Firebase - JavaScript app framework](https://www.firebase.com/) 155 | - [Forge](https://getforge.com/) 156 | 157 | 158 | _____________ 159 | 160 | 161 | 162 | **Front-End Development Tools:** 163 | === 164 | - [Huge List of Front-End Dev Bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks) 165 | - [1434 Best Resources for Designers & Developers](www.agiledesigners.com) 166 | - [Introduction to CSS3 transitions (article)](http://www.css3.info/preview/css3-transitions/) 167 | - [Bounce.js - Tool to create CSS3 animations](http://bouncejs.com/) 168 | - [WOW - CSS3 animation library](http://mynameismatthieu.com/WOW/) 169 | - [CSS Palette](http://www.houghtona.com/cssPalette/index.php) 170 | - [CSS3 Generator](http://css3generator.com/) 171 | - [CSS3] (http://css3.mikeplate.com/) 172 | - [CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/) 173 | - [CSS Button Generator](http://www.dextronet.com/css-buttons-generator/) 174 | - [LoremPixel - placeholder images](http://lorempixel.com/) 175 | - [Lipsum - placeholder text](http://lipsum.com/) 176 | - [WordMark](http://wordmark.it/) 177 | - [LayerStyle](http://layerstyles.org/builder.html) 178 | - [Border Image Generator](http://border-image.com/) 179 | - [iCheck - super customized checkboxes and radio buttons for jQuery](http://fronteed.com/iCheck/) 180 | - [SVGeneration](http://www.svgeneration.com/) 181 | - [Grumpicon - create fallback PNGs for SVG files](http://grumpicon.com/) 182 | - [CSS3 Animation Cheat Sheet](http://www.justinaguilar.com/animations/index.html#) 183 | - [Animate CSS - CSS3 library](http://daneden.github.io/animate.css/) 184 | - [Pure - small, responsive CSS modules](http://purecss.io/) 185 | - [Tridiv - 3D CSS](http://tridiv.com/) 186 | - [ToDoMVC - JavaScript resource](http://todomvc.com/) 187 | - [SuperheroJS - JS library](http://superherojs.com/) 188 | - [Unheap - jQuery plugins](http://www.unheap.com/) 189 | - [Random User Generator](http://randomuser.me/) 190 | - [UI Faces](http://uifaces.com/) 191 | - [UI Names](http://uinames.com/) 192 | - [WhatTheme](http://whattheme.com/) 193 | - [IE Browser Testing](https://www.modern.ie/en-us) 194 | - [Article on Front-End and UI Style Guides](http://sideproject.io/front-end-and-ui-style-guides/) 195 | 196 | _____________ 197 | 198 | 199 | **Patterns & Pattern Libraries:** 200 | === 201 | - [Subtle Patterns - visual pattern](http://subtlepatterns.com/) 202 | - [First Time UX - showcase of new user experiences](http://firsttimeux.tumblr.com/) 203 | - [UI Interaction Library](http://useyourinterface.com/) 204 | - [Subjective-C - innovative iOS interfaces](http://subjc.com/) 205 | [UI Cloud - largest user interface design database in the world](http://ui-cloud.com/) 206 | - [Android Patterns](http://www.androidpatterns.com/) 207 | - [Android UI Patterns](http://www.androiduipatterns.com/2012/09/creating-custom-android-styles-easy-way.html) 208 | - [Android niceties](http://androidniceties.tumblr.com/) 209 | - [Android App Patterns](http://www.android-app-patterns.com//category/grid) 210 | - [Mobile Design Gallery](http://www.mobiledesignpatterngallery.com/mobile-patterns.php) 211 | - [UX Archive](http://uxarchive.com/) 212 | - [Pttrns](http://www.pttrns.com/) 213 | - [Mobile-Patterns](http://www.mobile-patterns.com/) 214 | - [Inspired-UI](http://inspired-ui.com/) 215 | - [Capptivate](http://capptivate.co/) 216 | 217 | 218 | _____________ 219 | 220 | 221 | 222 | **Native Mobile Design:** 223 | === 224 | - [Android Design guidelines](https://developer.android.com/design/index.html) 225 | - [Apple Design guidelines](https://developer.apple.com/resources/) 226 | - Android tools: 227 | - [Android in-browser emulator](https://www.manymo.com/) 228 | - [Android Halo Colors](http://android-holo-colors.com/) 229 | - [Android Google Play icon template](http://www.sparktechsoft.com/blogs/android-design-app-icon-template) 230 | - [Android Asset Studio](http://romannurik.github.io/AndroidAssetStudio/) 231 | - [Android printable kit](http://androiduiux.com/2012/06/30/printable-a4-gui-sketching-kit-nexus-s-galaxy-nexus-and-nexus-7/) 232 | - [Android icons](http://www.androidicons.com/) 233 | - [Device generator](http://developer.android.com/distribute/tools/promote/device-art.html) 234 | - [Android Design tips](http://www.androiddesign.tips/) 235 | - iOS tools: 236 | - [iPhone GUI PSD by Teehan Lax](http://www.teehanlax.com/tools/iphone/) 237 | - [iOS Do's and Don'ts](https://developer.apple.com/design/tips/) 238 | - [PlaceIt - real-life image templates to insert mobile screens](https://placeit.net/) 239 | 240 | 241 | _____________ 242 | 243 | 244 | 245 | **Prototyping:** 246 | === 247 | - Web dev (HTML, CSS, JS). JS frameworks: 248 | - [FramerJS](http://framerjs.com/) 249 | - [jQuery Mobile](http://jquerymobile.com/) 250 | - [Codiqa](https://codiqa.com/) 251 | - [Ratchet](http://goratchet.com/) 252 | - [Hammer JS](http://hammerjs.github.io/) 253 | - Xcode --> [Origami for XCode](http://facebook.github.io/origami/) --> [IDEO's Avocado for Origami](http://ideo.is/avocado_labs) 254 | - [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) 255 | - Drag-and-drop tools: 256 | - [Proto.io](http://proto.io/) 257 | - [Flinto](https://www.flinto.com/) 258 | - [Marvel](http://marvelapp.com/) 259 | - [InvisionApp](http://inivisionapp.com) 260 | - [Pop](https://popapp.in/) 261 | - [Fluid UI](https://www.fluidui.com/) 262 | 263 | 264 | _____________ 265 | 266 | 267 | **Typography:** 268 | === 269 | - [Choosing the Right Font: A Practical Guide to Typography on the Web](http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web--webdesign-15) 270 | - [Butterick's Practical Typography - best guide online (read 'Summary of key rules')](http://practicaltypography.com/) 271 | - [Instacalc - EM to PX calculator](http://instacalc.com/16738) 272 | - [TypeScale](http://type-scale.com/) 273 | - [The Elements of Typographic Style Applied to the Web](webtypography.net) 274 | - [Thinking with Type](http://www.thinkingwithtype.com/) 275 | - [WhatTheFont](http://www.myfonts.com/WhatTheFont/) 276 | - [MyFonts - bestsellers (trending fonts)](http://www.myfonts.com/bestsellers/) 277 | - [Typewolf - font recommendations](http://www.typewolf.com/) 278 | - [Type Finder - find reputable typefaces](http://www.type-finder.com/) 279 | - Online font services: 280 | - [Typekit](https://typekit.com/) 281 | - [Cloud Typography](http://www.typography.com/cloud/welcome/) 282 | - [Adobe Web Edge Fonts](https://edgewebfonts.adobe.com/fonts) 283 | - [Google Fonts (free)](https://www.google.com/fonts) 284 | 285 | 286 | _____________ 287 | 288 | 289 | 290 | **Colors:** 291 | === 292 | - [Color Template](http://www.rocket-design.fr/color-template/) 293 | - [Paletton](http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF) 294 | - [Kuler - color wheel](https://kuler.adobe.com/create/color-wheel/) 295 | - [Colour Lovers - color trends](http://www.colourlovers.com/) 296 | - [ColorHexa - color encyclopedia](http://www.colorhexa.com/) 297 | - [BrandColors](http://brandcolors.net/) 298 | 299 | _____________ 300 | 301 | 302 | **Branding:** 303 | === 304 | - [Style Tiles](http://styletil.es/) 305 | - [Webstiles - web style tiles](http://webstiles.namanyayg.com/) 306 | 307 | _____________ 308 | 309 | 310 | **Images:** 311 | === 312 | - [PNG Gauntlet - compress image sizes](http://pnggauntlet.com/) 313 | - [Pic Resize](http://www.picresize.com/) 314 | 315 | 316 | _____________ 317 | 318 | 319 | 320 | **Logos:** 321 | === 322 | - [Logo Lounge](http://logolounge.com/) 323 | - [Logopond](http://logopond.com/) 324 | - [Brands of the World](www.brandsoftheworld.com) 325 | 326 | _____________ 327 | 328 | 329 | 330 | **Wireframes:** 331 | === 332 | - [I <3 wireframes](http://wireframes.tumblr.com/) 333 | - [Wireframe Showcase](http://www.wireframeshowcase.com/) 334 | 335 | 336 | _____________ 337 | 338 | 339 | 340 | **References & Cheat Sheets:** 341 | === 342 | - [All API Cheat Sheets](http://overapi.com/) 343 | - [jQuery Quick API Reference](http://oscarotero.com/jquery/) 344 | - [Article of 100 Terrific Dev Tools](http://dailytekk.com/2012/09/24/100-terrific-tools-for-coders-developers/) 345 | - [Learn Layout - simple, visual way to learn HTML/CSS layout design](http://learnlayout.com/) 346 | 347 | 348 | _____________ 349 | 350 | 351 | 352 | **Validation/Code Cleaner:** 353 | === 354 | - [HTML Markup Validation (W3) ](http://validator.w3.org/) 355 | - [HTML Tidy](http://infohound.net/tidy/) 356 | - [CSS Validation (W3)](http://jigsaw.w3.org/css-validator/#validate_by_upload) 357 | - [Clean CSS](http://www.cleancss.com/) 358 | - [CSS Compressor](http://www.cssdrive.com/index.php/main/csscompressor/) 359 | - [Procssor - organize your CSS](http://tools.maxcdn.com/procssor/) 360 | - [JavaScript Compressor](http://javascriptcompressor.com/) 361 | 362 | 363 | _____________ 364 | 365 | 366 | 367 | **Other HTML/CSS components:** 368 | === 369 | - Email Design: 370 | - [Mailchimp Email Design Reference](http://templates.mailchimp.com/) 371 | - [Beautiful Email Newsletters](http://beautiful-email-newsletters.com/) 372 | - [Brace - Email script when you can't write PHP](http://forms.brace.io/) 373 | - [Campaign Monitor - Ultimate Guide to CSS](https://www.campaignmonitor.com/css/) 374 | - HTML forms: 375 | - [SitePoint article on HTML5 forms markup](http://www.sitepoint.com/html5-forms-markup/) 376 | 377 | _____________ 378 | 379 | 380 | 381 | **Learning (online courses)** 382 | === 383 | 384 | - [Treehouse](http://teamtreehouse.com/) 385 | - [Codeschool](https://www.codeschool.com/) 386 | - [Learnable](https://learnable.com/) 387 | - [Udacity](http://udacity.com/) 388 | - [Freecodecamp](http://www.freecodecamp.com/) 389 | - [Lynda](http://lynda.com/) 390 | - [Codecademy - free](http://www.codecademy.com/learn) 391 | - [Skillfeed](https://www.skillfeed.com/) 392 | - [SitePoint](http://www.sitepoint.com/) 393 | - [Gibbon](https://gibbon.co/) 394 | - [Free Programming Books - huge list](https://github.com/vhf/free-programming-books/blob/master/free-programming-books.md) 395 | 396 | 397 | _____________ 398 | 399 | 400 | 401 | 402 | **Tutorials/Articles:** 403 | === 404 | - [CSS Tricks](http://css-tricks.com/downloads/) 405 | - [CodePlayer](http://thecodeplayer.com/) 406 | - [Design Tutsplus](http://design.tutsplus.com/) + [Code Tutsplus](http://code.tutsplus.com/) 407 | - [Pineapple.io - central hub of tutorials](http://pineapple.io/?reset=true) 408 | - [Photoshop Secrets](http://photoshopsecrets.tumblr.com/) 409 | - [Scotch](http://scotch.io/) 410 | - [Little Big Details](http://littlebigdetails.com/) 411 | - [Design Principles FTW](http://designprinciplesftw.com/) 412 | - [Medium - Design/UX](https://medium.com/design-ux) 413 | - [Code Visually](http://codevisually.com/) 414 | - [DesignInstruct](http://designinstruct.com/) 415 | - [Bento](http://www.bento.io/) 416 | - [Cody](http://codyhouse.co/) 417 | - [ZURB Quips](http://zurb.com/quips) 418 | 419 | _____________ 420 | 421 | 422 | 423 | **Playground/Inspiration:** 424 | === 425 | - [ZURB Playground](http://zurb.com/playground) 426 | - [CoDrops](http://tympanus.net/codrops/) 427 | - [CSS Deck](http://cssdeck.com/) 428 | - [UIBox - curated HTML/CSS/JS components library](http://www.uibox.in/) 429 | - [Six UX](http://sixux.com/) 430 | - [UI Parade](http://www.uiparade.com) 431 | - [media queries](http://mediaqueri.es) 432 | - [lovely ui (mobile inspiration)](http://www.lovelyui.com) 433 | - [Awwwards (webdesign showcase)](http://www.awwwards.com) 434 | - [FWA (interactive showcase)](http://www.thefwa.com) 435 | - [Give n go](http://give-n-go.co/) 436 | - [The Expressive Web](http://beta.theexpressiveweb.com/#!/welcome) 437 | 438 | _____________ 439 | 440 | 441 | **Favicons:** 442 | === 443 | - [Favicon Generator](http://realfavicongenerator.net/) 444 | - [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet) 445 | 446 | _____________ 447 | 448 | 449 | **Drag-and-Drop Solutions + Template Generators:** 450 | === 451 | - [WebFlow](https://webflow.com/) 452 | - [Bricks](http://www.brickseditor.com/) 453 | - [Easel](https://www.easel.io/) 454 | - [HTML5 Up](http://html5up.net/) 455 | 456 | 457 | _____________ 458 | 459 | 460 | **Icons:** 461 | === 462 | - [IconFinder](https://www.iconfinder.com/) 463 | - [IconArchive](http://www.iconarchive.com/) 464 | - [IconMonstr](http://iconmonstr.com/) 465 | - [The Noun Project](http://thenounproject.com/) 466 | - [IcoMoon](https://icomoon.io/) 467 | - [Fontello](http://fontello.com/) 468 | - [CopyPasteCharacter](http://copypastecharacter.com/) 469 | - [FontAwesome](http://fortawesome.github.io/Font-Awesome/#) 470 | - [Glyphicons](http://glyphicons.com/) 471 | - [Icons Guide](http://www.iconsguide.com/) 472 | - [Testico](http://testico.net/) 473 | - [FlatIcons](http://flaticons.net/) 474 | - [Flat Icon](http://www.flaticon.com/) 475 | - [Pictos](http://pictos.cc/) 476 | - [Symbolset](http://symbolset.com/) 477 | 478 | _____________ 479 | 480 | 481 | **Stock Photography:** 482 | === 483 | 484 | 485 | - [Unsplash](https://www.unsplash.com/) 486 | - [Compfight](http://www.compfight.com/) 487 | - [Morgue File](http://morguefile.com/) 488 | - [IM Creator](http://imcreator.com/free) 489 | - [Public Domain](https://publicdomainarchive.com) 490 | - [PicJumbo](http://picjumbo.com/) 491 | - [Getty Images](http://gettyimages.com/) 492 | - [Think Stock](http://thinkstockphotos.com) 493 | - [Death to the Stock Photo](http://deathtothestockphoto.com/) 494 | 495 | 496 | 497 | _____________ 498 | 499 | **Resources/Freebies:** 500 | === 501 | - [Designmodo](http://designmodo.com/freebies/) 502 | - [Despreneur](http://despreneur.com/about/) 503 | - [Sketch App Resources](http://www.sketchappsources.com/) 504 | - [Konigi Tools](http://konigi.com/tools/) 505 | - [SmashingMagazine](http://www.smashingmagazine.com/tag/freebies/) 506 | - [Freebbble - Dribbble design freebies](http://freebbble.com/) 507 | - [365psd - free PSDs](http://365psd.com/) 508 | - [Design Freebies](http://www.designfreebies.com/) 509 | - [Photoshoplr](http://madebyvadim.tumblr.com/) 510 | - [FreePik](http://www.freepik.com/) 511 | - [Flaticon](http://flaticon.com/) 512 | - [52 Weeks of UX](http://52weeksofux.com/) 513 | - [Hack Design](https://hackdesign.org/lessons) 514 | --------------------------------------------------------------------------------