Diferencia entre revisiones de «User Experience»
Ir a la navegación
Ir a la búsqueda
(→Color) |
|||
(No se muestran 39 ediciones intermedias del mismo usuario) | |||
Línea 1: | Línea 1: | ||
− | == | + | == 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/ | * 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 === | === Personas Definition === | ||
Línea 12: | Línea 34: | ||
* http://www.smartinsights.com/marketplace-analysis/customer-analysis/web-design-personas/ | * http://www.smartinsights.com/marketplace-analysis/customer-analysis/web-design-personas/ | ||
+ | |||
+ | == Color == | ||
+ | |||
+ | * https://hihayk.github.io/scale/ | ||
+ | * https://www.colorhexa.com/76005e | ||
+ | * 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 === | === Reports === | ||
Línea 17: | Línea 66: | ||
* 2013: [https://www.dropbox.com/s/ay0q8b7sklv9y1g/2013_UserZoom_Ecommerce_Moda.pdf Estudio sobre ecommerces de Moda] #Usability | * 2013: [https://www.dropbox.com/s/ay0q8b7sklv9y1g/2013_UserZoom_Ecommerce_Moda.pdf 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 === | === Style Guides === | ||
* Android https://developer.android.com/design/index.html | * 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 === | === Design tools / templates === | ||
Línea 29: | Línea 98: | ||
* http://subtlepatterns.com/ | * http://subtlepatterns.com/ | ||
* http://designmodo.com/flat-free/ | * http://designmodo.com/flat-free/ | ||
+ | * http://html5up.net/ // http://pixelarity.com/ | ||
==== WP Templates ==== | ==== WP Templates ==== | ||
* http://themeforest.net/item/salient-responsive-multipurpose-theme/full_screen_preview/4363266 | * http://themeforest.net/item/salient-responsive-multipurpose-theme/full_screen_preview/4363266 | ||
+ | * http://thbthemes.com/themes/ | ||
=== Fonts / Icons === | === Fonts / Icons === | ||
Línea 38: | Línea 109: | ||
==== Icon Fonts ==== | ==== Icon Fonts ==== | ||
+ | * http://www.entypo.com/ | ||
* http://glyphsearch.com/ | * http://glyphsearch.com/ | ||
* http://symbolset.com/ | * http://symbolset.com/ | ||
* http://sixrevisions.com/resources/free-icon-fonts/ | * http://sixrevisions.com/resources/free-icon-fonts/ | ||
* http://fortawesome.github.io/Font-Awesome/ | * http://fortawesome.github.io/Font-Awesome/ | ||
+ | * http://ui8.net/ui-font | ||
==== Icons ==== | ==== Icons ==== | ||
* http://symbolicons.com/ | * 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.smashingmagazine.com/2013/06/17/foodie-icons/ | ||
* http://www.webresourcesdepot.com/30-awesome-and-free-flat-icon-sets/ | * http://www.webresourcesdepot.com/30-awesome-and-free-flat-icon-sets/ | ||
− | ==== Fonts | + | ==== Fonts ==== |
+ | * http://www.fontsquirrel.com/ | ||
* http://webfontscorner.com/ | * http://webfontscorner.com/ | ||
Línea 60: | Línea 137: | ||
* ClarendonFSLight,Georgia | * ClarendonFSLight,Georgia | ||
* "fenwick-1","fenwick-2",sans-serif (http://www.brainpickings.org/index.php/2013/07/09/vi-hart-explains-stravinsky/) | * "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 ==== | ==== Cool use of fonts ==== | ||
* http://bellroy.com/pages/travel-light/ | * http://bellroy.com/pages/travel-light/ | ||
+ | * http://thoughtbot.github.io/foundry/#gallery | ||
=== Forms === | === Forms === | ||
Línea 70: | Línea 149: | ||
=== UI Examples === | === UI Examples === | ||
+ | |||
+ | ==== Share buttons ==== | ||
+ | |||
+ | * http://carrot.github.io/share-button/ | ||
+ | |||
==== Configurators ==== | ==== Configurators ==== | ||
Línea 76: | Línea 160: | ||
+ | === Design inspiration === | ||
+ | * https://frontify.com/ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
== Mobile == | == Mobile == | ||
Línea 89: | Línea 170: | ||
* http://responsivenavigation.net/ | * 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 | ||
[[Category:User Experience]] | [[Category:User Experience]] |
Revisión actual del 13:32 8 nov 2022
Sumario
Principles
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
- https://hihayk.github.io/scale/
- https://www.colorhexa.com/76005e
- 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
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
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
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
Forms
UI Examples
Configurators
Design inspiration
Mobile