User Experience

Principles

• https://principles.adactio.com/

Design

• Many resources: https://nlevin.medium.com/ux-design-recommendations-8de563c5fbfa
• http://hackdesign.org/
• Required reading for product designers http://www.robertlenne.com/requiredreading/
• http://voiceandtone.com/

Process

• https://twitter.com/round/status/1157143396147818502 | https://pbs.twimg.com/media/EA7_yDkUcAEwqaH?format=jpg&name=4096x4096

Basics

• Explaining graphic design to four year olds https://medium.com/@deanvipond/explaining-graphic-design-to-four-year-olds-fe9257ffaf3d

Social

• Good Kickoff Meetings http://goodkickoffmeetings.com/
• The Social Design Methods Menu http://www.lucykimbell.com/stuff/Fieldstudio_SocialDesignMethodsMenu.pdf
• DIY Social Innovation http://diytoolkit.org

Personas Definition

• http://blog.hubspot.com/blog/tabid/6307/bid/30907/9-Questions-You-Need-to-Ask-When-Developing-Buyer-Personas.aspx
• http://www.smartinsights.com/marketplace-analysis/customer-analysis/web-design-personas/

Color

• http://demosthenes.info/blog/61/An-Easy-Guide-To-HSL-Color-In-CSS3
• http://itpastorn.github.io/webbteknik/future-stuff/svg/color-wheel.html
• https://color.adobe.com
• http://swisscolors.net/
• Color Blindness test http://colororacle.org/
• Extract dominant + palette from a photo http://lokeshdhakar.com/projects/color-thief/

HCI

• Psych 101: The Psychological Basis for UI Design Rules http://www.slideshare.net/guest45d695/jeff-johnson-psych-101-the-psychological-basis-for-ui-design-rules-522929
• Principles: http://www.measuringu.com/blog/hci-laws.php
  • Fitt's Law (of target width and distance)
  • Steering Law (of movement through a tunnel)
  • Hick's Law (of choices and decisions)
  • Miller's Law (of working memory)
  • Power Law (of practice)
• Affordances http://inside.envato.com/affordances-the-designers-secret-weapon/
• Stop Designing for Users http://www.thoughtworks.com/insights/blog/stop-designing-users

Cool Interactions

• http://codepen.io/fbrz/full/bNdMwZ/

Reports

• 2013: Estudio sobre ecommerces de Moda #Usability

UI / Visual

• 7 Rules for Creating Gorgeous UI (Part 1) https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda

Patterns

• http://thepatternlibrary.com/

Stock photos

• http://thestocks.im/ (aggregator)
• http://www.producthunt.com/e/best-stock-photography-tools
• https://unsplash.com/
• https://medium.com/p/62ae4bcbe01b
• http://lifehacker.com/heres-a-list-of-more-than-30-free-image-sites-that-dont-1650481161

Technical documentation sites

• http://strava.github.io/
• http://docs.spark.io/#/
• https://www.mapbox.com/mapbox.js/api/v1.6.0/mapbox-layers/#featurelayer.getfilter

Style Guides

• Android https://developer.android.com/design/index.html
• Front end and UI style guides: http://sideproject.io/front-end-and-ui-style-guides/

Design tools / templates

• http://subtlepatterns.com/
• http://designmodo.com/flat-free/
• http://html5up.net/ // http://pixelarity.com/

WP Templates

• http://themeforest.net/item/salient-responsive-multipurpose-theme/full_screen_preview/4363266
• http://thbthemes.com/themes/

Fonts / Icons

Icon Fonts

• http://www.entypo.com/
• http://glyphsearch.com/
• http://symbolset.com/
• http://sixrevisions.com/resources/free-icon-fonts/
• http://fortawesome.github.io/Font-Awesome/
• http://ui8.net/ui-font

Icons

• http://symbolicons.com/
• http://www.streamlineicons.com/
• https://picons.me/#thin
• Weather Icons: https://creativemarket.com/lilsquid/6687-Lil-Stories-Weather-Icons
• http://www.smashingmagazine.com/2013/06/17/foodie-icons/
• http://www.webresourcesdepot.com/30-awesome-and-free-flat-icon-sets/

Fonts

• http://www.fontsquirrel.com/
• http://webfontscorner.com/

Cool Fonts

• "Avenir Next LT W01 Demi", "Avenir Next W10 Demi", "MuseoSans", 'Helvetica Neue', Arial
• ProximaNova, ProximaNovaBold
• source-sans-pro, sans-serif
• ClarendonFSLight,Georgia
• "fenwick-1","fenwick-2",sans-serif (http://www.brainpickings.org/index.php/2013/07/09/vi-hart-explains-stravinsky/)
• http://www.fonts.com/font/latinotype/trend?SortColumn=name_ascending&font-size=32&colorpicker-foreground=000000&colorpicker-background=ffffff&QueryFontType=Web&SortDirection=Ascending&page=1#product_1243408

Cool use of fonts

• http://bellroy.com/pages/travel-light/
• http://thoughtbot.github.io/foundry/#gallery

Forms

• http://www.wufoo.com/gallery/

UI Examples

Share buttons

• http://carrot.github.io/share-button/

Configurators

• http://www.myownbike.de/singlespeed-und-fixie-konfigurator

Design inspiration

• https://frontify.com/

Mobile

• http://www.mobile-patterns.com/
• http://responsivenavigation.net/

Cool sites

Content/demo/presentations

• http://letterboxd.com/2014/#introduction
• http://2014.schoolofdata.org/

Beautiful wikis

• http://docs.webplatform.org/wiki/concepts/mobile_web