UX - Offirmo-team/wiki GitHub Wiki

Voir aussi typographie, design, VR réalité virtuelle...

Introduction

Bases

• foundations, from Apple: https://developer.apple.com/design/human-interface-guidelines/foundations
• terminology
  • https://tailwindui.com/components
  • https://docs.google.com/spreadsheets/d/1fpA90zxkI6wGX2wKVjYfEAYQ5B6ZgnYlC0fxV9IBOtM/
• https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
• https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0
• https://uxplanet.org/10-rules-for-better-dashboard-design-ef68189d734c
• https://uxplanet.org/how-to-simplify-your-design-69d97fde11b9
• https://medium.com/@taras.bakusevych/data-tables-design-3c705b106a64
• Mobile / small surface
  • https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
  • https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/
    • The average width of an adult thumb (...) converts to 72 pixels.
• design systems https://designsystems.surf

Bonnes pratiques

Conseils Google

• https://developers.google.com/web/fundamentals/design-and-ui/
• https://web.dev/ux-basics/

Références

• tailles d'écran
  • +++ 2022 https://viewports.fyi/
  • https://www.screensizemap.com/
  • iphones https://ios-resolution.com/ https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
    • smaller common = iPhone12 mini = 360x780
    • ATTENTION 3 modes: safari, in-app, preview
  • browser size
    • most common base = 1920 * 1080
    • macOs menu bar = -22px Chrome top = -79px -> final 1920x1001
    • windows menu bar = -40px chrome top -68px -> final 1920x972
  • notches https://www.businessinsider.com.au/best-smartphone-notches-ranked-2018-9

Patterns

• 2023 https://pencilandpaper.io/articles/ux-pattern-analysis-loading-feedback/

Autres

• humour worst practices https://userinyerface.com/
• humour https://theoatmeal.com/comics/design_hell
• empty spaces https://www.useronboard.com/onboarding-ux-patterns/empty-states/
• http://uxdesign.cc/
• +++ bonnes pratiques http://goodui.org/ (http://improve.goodui.org/)
• +++ ironique https://medium.com/s/silicon-satire/how-to-design-for-the-modern-web-52eaa926bae2
• https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
• Crafting beautiful UX with API requests https://uxdesign.cc/crafting-beautiful-ux-with-api-requests-56e7dcc2f58e
• close icon https://medium.com/tap-to-dismiss/tap-to-dismiss-fbc66bdf500a
• Little UI details https://codepen.io/tyrellrummage/full/ZJPXgy/
• Optical Effects in User Interfaces https://medium.muz.li/optical-effects-9fca82b4cd9a

web design

Historique

• http://toastytech.com/guis/index.html
• old school moderne
  • https://www.lingscars.com/
  • https://www.warnerbros.com/archive/spacejam/movie/jam.htm
  • captain marvel

Avancé

• 2019 "alarm fatigue" https://science.slashdot.org/story/19/12/07/0222250/hospitals-new-issue-a-glut-of-machines-making-alarm-sounds
• 2019 + concepts https://jenson.org/games/ "How Video Games Inspire Great UX" brutaliste
• avant/après https://www.arun.is/blog/10-year-challenge/

...

• ++ user flows https://uxdesign.cc/the-biggest-wtf-in-design-right-now-87139f367d66

• ++ the laws of emotion in design http://blog.fluidui.com/the-laws-of-emotion-in-design/

• https://econsultancy.com/blog/64096-18-pivotal-web-design-trends-for-2014

• http://blog.teamtreehouse.com/web-design-trends-found-in-startup-homepages

• First Time User Experiences http://firsttimeux.tumblr.com/about

• Outdated http://sideproject.io/outdated-ux-patterns/

• ui qui marche http://www.codinghorror.com/blog/2014/02/complaint-driven-development.html

• à ne PAS faire http://theoatmeal.com/comics/websites_stop

• vitesse http://www.webperformancetoday.com/2014/07/16/eight-tricks-improve-perceived-web-performance/

• https://medium.com/philosophie-is-thinking/the-when-why-and-how-of-designing-in-browser-3c7fa2ebcb94

• about flat UIs https://slashdot.org/story/17/09/05/1750238/its-official-users-navigate-flat-ui-designs-22-percent-slower

• ...

• http://darkhorseanalytics.com/blog/data-looks-better-naked/

• http://darkhorseanalytics.com/blog/clear-off-the-table/

20 lois https://lawsofux.com/

3 règles http://www.fastcodesign.com/3041374/3-rules-of-app-design-according-to-yahoos-marissa-mayer

• The Two Tap Rule
• The 5-Point Rule
• The 98% Rule

icônes

• pas top "The best icon is a text label" http://thomasbyttebier.be/blog/the-best-icon-is-a-text-label

tooltips

à éviter https://adamsilver.io/articles/the-problem-with-tooltips-and-what-to-do-instead/

responsive

http://blog.froont.com/9-basic-principles-of-responsive-web-design/

Typographie

Voir page dédiée.

Architecture de page

• Bon exemple http://engineering.flipboard.com/2014/03/web-layouts/
• parallaxe https://medium.com/@dhg/82ced812e61c

outils

• inkscape
• https://projectparfait.adobe.com/

Wireframing: conseils: https://www.creativebloq.com/advice/how-to-create-better-wireframes

• free http://framebox.org/
• https://wireframe.cc/
• https://balsamiq.cloud/
• https://app.moqups.com/

Diagrammes

http://www.anychart.com/chartopedia/

themes

couleurs

• +++ http://www.colorhunt.co/
• ++ https://github.com/rekire/MaterialColorGenerator
• ++ http://colorsupplyyy.com/app/
• http://baanajarn.com/living-in-thailand/colors-in-thailand-and-why-they-matter/
• http://colourco.de/
• http://www.colourlovers.com/
• http://colorbrewer2.org/
• http://www.alsacreations.com/tuto/lire/1619-creer-facilement-une-palette-de-couleurs-accessibles.html