Listado de recursos interesantes. A modo de memorando. No todos los he investigado. Por tanto, pueden no resultar tan interesantes... ;)
- Research-Based Web Design and Usability Guidelines from U.S. Department of Health and Human Services (HHS) - Un listado muy numeroso de pautas concretas, pero escaso de ejemplos para entenderlas bien.
- 247 Web usability guidelines by David Travis of Userfocus - Consisten únicamente en los enunciados de las pautas. Se pueden descargar en forma de Excel. También en español.
- Guidance on World Wide Web user interfaces (ISO 9241-151) from ISO - International Organization for Standardization - Es un documento PDF de pago.
- 113 Design Guidelines for Homepage Usability by Jakob Nielsen of Nielsen Norman Group - Enunciados de las pautas acompañados de explicación que lo aclara.
- Design better data tables - This article presents a list of design structures, interaction patterns, and techniques to help you design better data tables.
- 60 charts to visualize your data - Excelente cheatsheet con distintas tipologías de gráficos y sus posibles usos. Descargar el cheatsheet en PDF.
- Design Better Forms - Common mistakes designers make and how to fix them.
- Reduce el número de campos de los formularios - Los seres humanos somos reacios a realizar trabajo de más. Esta idea se aplica también a rellenar campos de un formulario.
- Dropdown alternatives for better (mobile) forms - Alternativas a los select.
- Form Design for Complex Applications - Diferentes patrones de maneras de mostrar formularios. En una modal, en un sidebar, etc.
- Designing More Efficient Forms: Structure, Inputs, Labels and Actions - Especialmente interesante el apartado sobre cuál es la mejor ubicación para los labels. Ampliado en CSS-TRICKS.
- Designing More Efficient Forms: Assistance and Validation - Centrado en las ayudas y las validaciones.
- Use these top 10 tips when you design for forms - 10 pautas de usabilidad.
- Placeholders in Form Fields Are Harmful
- Funkify - Funkify is a new extension for Chrome that helps you experience the web and interfaces through the eyes of extreme users with different abilities and disabilities. Dyslexia simulator. Cognition simulator. Motor simulator. Vision simulator. Interesante para propósitos educacionales.
- Axe - Axe is an open source rules library for accessibility testing. Disponible en forma de extensión de Chrome, entre otras alternativas.
- How Can I Make My Icon System Accessible? - Artículo breve y directo sobre cómo hacer accesibles los iconos.
- How To Use WebPageTest and its API - Tutorial para aprender a usar WebPageTest. Una herramienta bastante visual.
- Prueba la velocidad de tu sitio web - By Google. Con tecnología de WebPageTest. Muy visual, sencillo de entender y útil para mostrar a clientes.
- The Front-End Checklist - The Front-End Checklist Application is perfect for modern websites and meticulous developers.
- SonarQube - Code Smells. Bugs. Vulnerabilities.
- Varios sistemas para enseñar a programar a niñ@s - Osmo Coding, Sphero, Lego Mindstorms, Scratch.
- A free guide to elements - Recopilación exhaustiva y clara.
- lazysizes - JavaScript que permite establecer de manera muy sencilla distintas imágenes para distintas resoluciones. También permite insertar vídeos de YouTube de manera responsive.
- Atomic CSS - Framework de CSS pensado para componentes. Muy verboso.
- Tailwind CSS - Framework de CSS pensado para componentes. Muy verboso inicialmente, aunque con una sintaxis más amigable que Atomic CSS. Lo interesante es que después, tras el prototipado inicial, se puede componentizar mediante @apply en el CSS común.
- Learn CSS Variables for free - 8 interactive screencasts to take you from beginner to advanced.
- Learn CSS Grid for free- 14 interactive screencasts to take you from beginner to advanced.
- Learn Flexbox for free - 12 interactive screencasts to take you from beginner to advanced.
- Los 10 principios de diseño de Dieter Rams - Sencillo artículo que los enumera e ilustra.
- Anatomía del tipo - Esquema claro de los diferentes elementos que constituyen una tipo.
- Fontjoy - Una interesante herramienta para jugar/descubrir fuentes.
- How to Use BrowserSync for Faster Development - Tutorial de iniciación.
- Crello - Crear diseños para publicaciones en redes sociales. A partir de plantillas. Muy resultón.
- Freepik - Vectores , PSD, Iconos y fotos. Proyecto español.
- Animista - Impresionante web para la generación online de animaciones 100% CSS.
- CSS Arrows From CodePen - Recopilación de flechas desarrolladas solo con CSS.
- 30 Seconds of CSS - A curated collection of useful CSS snippets you can understand in 30 seconds or less.
- Coverr - Vídeos de fondo gratuitos. Algunos están muy bien.
- Okta - Okta adds authentication, authorization, and user management to your web or mobile app within minutes. Incluye Multi-Factor Authentication.
- Duo - Protect every user with Duo’s easy-to- use two-factor authentication, endpoint security and secure single sign-on.
- Auth0 - Completa plataforma para la gestión de autenticación. Incluye Multi-Factor Authentication. Incluye integración de autenticaciones Google, Github, Facebook...
- Project PWA Fire - Open source javascript and json bundle that allows you to convert your existing website into a progressive web app or build one. Features: Offline Capabilities, Add to Homescreen and Push Notifications.
- Understanding Media Queries in HTML Email - Explica las funcionalidades de Media Queries que soporta cada cliente de email y cómo sacarles partido.
- El currículum perfecto - Interesante artículo de la Bonilista sobre una manera distinta de redactar nuestro currículum.
- Good Web Design - Puedes encontrar muy bien clasificados, un buen montón de capturas de buenos ejemplos de landing pages, menús, cabeceras, tablas, CTA, footers. Hay cosas muy chulas para obtener ideas.
- Choose an open source license - Muy clara. Facilita escoger una licencia.