[Jon Moore](https://medium.com/ux-power-tools/guilty-pleasures-for-designers-b34f2a3f604a) Guilty Pleasures for Designers [Kamal Nayan](http://www.uxcuses.com/) Designer Excuses, based on [Jon Moore' article on medium](https://medium.com/ux-power-tools/100-excuses-for-designers-517344cdd910) [Jon Moore](https://medium.com/ux-power-tools/100-excuses-for-designers-517344cdd910) 100 Excuses for Designers, Because sometimes you need one! [UX Quotes](http://uxchoice.com/ux-quotes) Tweetable quotes on User Experience / Design https://digitalsynopsis.com/design/50-clever-hidden-meaning-logo-designs/ ## a11y [Easy checks: a fast review of web accessibility](http://www.w3.org/WAI/eval/preliminary.html) (mandatory) [Introduction to ARIA](https://webaim.org/techniques/aria/) [Just Ask: Integrating Accessibility Throughout Design](http://uiaccess.com/JustAsk/index.html) (mandatory) [A Complete Guide To Accessible Front-End Components - Smashing Magazine](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components) [How a CSS framework can enforce accessibility](http://www.ebaytechblog.com/2015/11/04/how-our-css-framework-helps-enforce-accessibility/) [Derek Featherstone Web Accessibility primer](https://www.linkedin.com/learning/accessibility-for-web-design/welcome?autoplay=true) [13 days of Accessibility by Sparkbox](https://seesparkbox.com/foundry/13_wcag_2.1_web_accessibility_guidelines) [A beginner's guide to manual accessibility testing - Pope Tech Blog](https://blog.pope.tech/2023/03/01/a-beginners-guide-to-manual-accessibility-testing/) [ARIA vs HTML - Adrian Roselli](https://adrianroselli.com/2023/02/aria-vs-html.html) [Official Web Content Accessibility Guidelines documentation](https://www.w3.org/TR/WCAG21/) [A very nifty tabindex enhancing primer for navigation](https://www.sarasoueidan.com/blog/keyboard-friendlier-article-listings/) [Sara Soueidan on Twitter: "If you use viewport units alone, you take away your user's ability to zoom text in and out. *But* combining it with a fixed unit using calc() (e.g. `font-size: calc(16px + .3vw);` ) restores that ability and works just fine. #CSS #UX #a11y"/Twitter](https://twitter.com/SaraSoueidan/status/1121645149983891457?s=20) [Linux Accessibility | bietet Accessibility Support for Free Software | Patreon](https://www.patreon.com/linux_a11y) [Home - IBM Accessibility](https://www.ibm.com/able/) [Building Accessible Menu Systems - Smashing Magazine](https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/) [Apple previews Live Speech, Personal Voice, and more new accessibility features | Hacker News](https://news.ycombinator.com/item?id=35960663) [Apple previews Live Speech, Personal Voice, and more new accessibility features - Apple](https://www.apple.com/newsroom/2023/05/apple-previews-live-speech-personal-voice-and-more-new-accessibility-features/) [Using HTML landmark roles to improve accessibility | MDN Blog](https://developer.mozilla.org/en-US/blog/aria-accessibility-html-landmark-roles/) [Gnome Receives €1M from German Government | Hacker News](https://news.ycombinator.com/item?id=38228649) [GNOME Receives €1M Investment from Sovereign Tech Fund - OMG! Ubuntu](https://www.omgubuntu.co.uk/2023/11/gnome-sovereign-tech-fund) - the comments are about a11y, which need to be touched on more [If Your Digital Content Isn't Accessible, You Could Be Leaving Behind Up to a Billion Users - Speaking Volumes - Features and fragments from the University of Tennessee Libraries](https://volumes.lib.utk.edu/news/if-your-digital-content-isnt-accessible-you-could-be-leaving-behind-up-to-a-billion-users) [Learn Accessibility | web.dev](https://web.dev/learn/accessibility/) [Home - The A11Y Project](https://www.a11yproject.com/) A community-driven effort to make web accessibility easier. [Checklist - The A11Y Project](https://www.a11yproject.com/checklist/) Determine how accessible your site is - [The A11Y Project Resources](https://a11yproject.com/resources/) Accessibility software, books, blogs, online tools, and more [Just because I have a vertical screen doesn't mean I'm on a phone | Hacker News](https://news.ycombinator.com/item?id=26000405) [Just because I have a vertical screen, doesn't mean I'm on a phone! - Terence Eden's Blog](https://shkspr.mobi/blog/2021/02/just-because-i-have-a-vertical-screen-doesnt-mean-im-on-a-phone/) [Kevin Marks](https://www.wired.com/2016/10/how-the-web-became-unreadable/) (2016) How the Web Became Unreadable [David Greenlees](https://www.stickyminds.com/article/how-usability-matrix-emotions-can-benefit-your-software-testing?page=0%2C1) How the Usability Matrix of Emotions Can Benefit Your Software Testing ## color design [Day-To-Day Series in Animation](http://www.toyarave.com/day-to-day-series.html) Free - Guides on tons of TV Animation Jobs (Board Artist, Revisionist, PA, Designers, Color Stylist, Writer, Director, etc) [What a Color Stylist Does in Animation](https://twitter.com/jessdrawz/status/938847340512681984) Free - Twitter thread by Jess Marfisi https://twitter.com/jessdrawz ### Example blueish palette Monotone: - White-ish Card background: #FCFCFC - Blueish-Black icons: #1C1E20 - Lighter text on white: #485963 - Bluish background: #202D34 Multicolor: - Black: #1d1d1d. - purple: #b066ff; - blue: #203447; - lightblue: #1f4662; - blue2: #1C2F40; - yellow: #ffc600; - pink: #EB4471; - white: #d7d7d7; You may or may not want to use generic names if you want it swappable for dark mode: ### Yellow palette Example [yellowish palette](https://codepen.io/oliviale/full/XyqQYL): - primary-light: #FFD151 mustard - primary-dark: #FFAE03 UCLA gold - secondary-success: #20A39E light sea green - secondary-warning: #EF5B5B sunset orange - secondary-info: #08D377 dark cerulean - grays: #E8E9E9, #D1D3D4, #BABDBF, #808488, #666A6D, #4D5052, #333537, #1C1D1E Note - THIS IS DISPUTED!!! Even Slack's impl has separate light and dark theming. > The problem is "primary" isn't a color, it's a measure of contrast in the current context. On the same page you might have a white panel with a black button and a black panel with a white button, and both of those buttons are "primary" even though they are different colors. - Adam Wathan One liner dark mode (careful about perf!) ## mobile-first design [The negative impact of mobile-first web design on desktop | Hacker News](https://news.ycombinator.com/item?id=38025767) [The Negative Impact of Mobile-First Web Design on Desktop](https://www.nngroup.com/articles/content-dispersion/) ## centering Easy way to make your text look balanced Previously, I remember there were libraries calculating that stuff, for example, [React Wrap Balancer](https://react-wrap-balancer.vercel.app/). But now, it's possible to do with pure CSS. ​ It's probably been around for years, but I learned about it a year ago. ​ Two options that save my life: text-wrap: balance and text-wrap: pretty. ​ The first one makes your text balanced (not too lengthy, not too short, sustaining optimal line length). The second ensures you don't have orphans (single words at the end of a line). ## open web [Why do I care the open web is dying? | Hacker News](https://news.ycombinator.com/item?id=25261132) [What do I care the open web is dying?](https://web.archive.org/web/20230626213548/https://insightbrowser.com/blog/open-web-dying-why-care) ## ux [Augustin Kendall](https://www.portent.com/blog/content-strategy/user-experience-content.htm) (2017) What Is the User Experience of Content? [Christian Beck](https://medium.com/ux-power-tools/terrible-ux-trends-for-2017-de6faebf099e) Terrible UX Trends for 2017 [How to Improve User Experience with Optimistic UI and SWR](https://www.freecodecamp.org/news/improve-user-experience-with-optimistic-ui-swr/) [The Psychology Behind McDonald’s $2 Billion Self-Serve Kiosks](https://growth.design/case-studies/mcdonalds-self-serve-ux) [Audible: Build seamless purchase experiences](https://growth.design/case-studies/audible-purchase-ux) https://growth.design/case-studies/too-good-to-go-onboarding https://growth.design/case-studies/strava-premium-preview [Signal: How To Ethically Boost Your Revenues](https://growth.design/case-studies/signal-revenue?activecampaign_id=greg%40stucky.tech) [Letterboxd: How to nail product market fit with clear Jobs‑To‑Be‑Done](https://growth.design/case-studies/letterboxd-jobs-to-be-done) [Adobe: The growing issue with "Free" trials UX](https://growth.design/case-studies/adobe-trial-ux) [Social Proof: Why people's behaviors affect our actions](https://growth.design/case-studies/social-proof) [Apple vs. Meta: The Illusion of Privacy | Hacker News](https://news.ycombinator.com/item?id=37433495) [Apple vs Meta: The Illusion of Privacy](https://growth.design/case-studies/apple-privacy-policy) - clarify the TI ratio, since that is VERY important - Transparency/Intrusiveness ratio - i.e., be transparent proportionally to being intrusive - (also, roach motel dark pattern) - https://blog.mobiversal.com/dark-patterns-or-how-ux-exploits-the-user-roach-motel-and-sneak-into-basket.html - Clarify "privacy washing" [Scarcity: The 3 pillars to using it ethically](https://growth.design/case-studies/scarcity) [The psychology of Temu's casino-like shopping UX](https://growth.design/case-studies/temu-onboarding-psychology) [Spotify Wrapped: 6 psychology principles that make it go viral every year](https://growth.design/case-studies/spotify-wrapped-psychology) [Framing Effect: Why context affects decisions](https://growth.design/case-studies/framing-effect) [How to avoid (and repair) these 3 critical design blunders](https://growth.design/case-studies/design-blunders) [The "almost" perfect trial conversion](https://growth.design/case-studies/mine-trial-conversion) [One simple way Apple could improve your sleep habits](https://growth.design/case-studies/apple-sleep-notification) [How small UI delighters have a huge impact on UX](https://growth.design/case-studies/been-onboarding) ## web standards [What are web standards and why should I use them?](http://www.webstandards.org/learn/faq/) (mandatory) [Web Standards and Accessible Design](http://www.washington.edu/accesscomputing/webd2/student/unit1/module3/index.html) [Washington Edu lesson in Standards](http://www.washington.edu/accesscomputing/webd2/student/unit1/module3/lesson1.html) [Quality Control](http://www.washington.edu/accesscomputing/webd2/student/unit6/index.html) ## annoying technology [Annoying Technology](https://annoying.technology/posts/b00dc0a202a00a14/) [Annoying Technology](https://annoying.technology/posts/9ce31b2181b7ff77/) [Annoying Technology](https://annoying.technology/posts/646486122330b2ef/)