Diferencia entre revisiones de «User Experience»
Ir a la navegación
Ir a la búsqueda
| (No se muestran 2 ediciones intermedias del mismo usuario) | |||
| Línea 1: | Línea 1: | ||
| − | == | + | == Principles == |
| − | * https:// | + | * https://principles.adactio.com/ |
== Design == | == Design == | ||
| + | * Many resources: https://nlevin.medium.com/ux-design-recommendations-8de563c5fbfa | ||
* http://hackdesign.org/ | * http://hackdesign.org/ | ||
* Required reading for product designers http://www.robertlenne.com/requiredreading/ | * Required reading for product designers http://www.robertlenne.com/requiredreading/ | ||
* http://voiceandtone.com/ | * http://voiceandtone.com/ | ||
| + | |||
| + | |||
| + | == Process == | ||
| + | |||
| + | * https://twitter.com/round/status/1157143396147818502 | https://pbs.twimg.com/media/EA7_yDkUcAEwqaH?format=jpg&name=4096x4096 | ||
| + | |||
=== Basics === | === Basics === | ||
Revisión del 07:41 3 sep 2021
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
- 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
