Diferencia entre revisiones de «User Experience»
Ir a la navegación
Ir a la búsqueda
(→Color) |
|||
(No se muestran 16 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/ | ||
+ | * 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 == | == 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://demosthenes.info/blog/61/An-Easy-Guide-To-HSL-Color-In-CSS3 | ||
* http://itpastorn.github.io/webbteknik/future-stuff/svg/color-wheel.html | * http://itpastorn.github.io/webbteknik/future-stuff/svg/color-wheel.html | ||
* https://color.adobe.com | * 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 == | == HCI == | ||
Línea 20: | Línea 61: | ||
* http://codepen.io/fbrz/full/bNdMwZ/ | * http://codepen.io/fbrz/full/bNdMwZ/ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
=== Reports === | === Reports === | ||
Línea 44: | Línea 76: | ||
=== Stock photos === | === Stock photos === | ||
+ | * http://thestocks.im/ (aggregator) | ||
+ | * http://www.producthunt.com/e/best-stock-photography-tools | ||
* https://unsplash.com/ | * https://unsplash.com/ | ||
* https://medium.com/p/62ae4bcbe01b | * https://medium.com/p/62ae4bcbe01b | ||
Línea 64: | 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 ==== | ||
Línea 107: | Línea 142: | ||
* http://bellroy.com/pages/travel-light/ | * http://bellroy.com/pages/travel-light/ | ||
− | |||
* http://thoughtbot.github.io/foundry/#gallery | * http://thoughtbot.github.io/foundry/#gallery | ||
Línea 125: | Línea 159: | ||
* http://www.myownbike.de/singlespeed-und-fixie-konfigurator | * http://www.myownbike.de/singlespeed-und-fixie-konfigurator | ||
− | |||
− | + | === Design inspiration === | |
− | * | + | |
− | + | * https://frontify.com/ | |
+ | |||
== Mobile == | == Mobile == |
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