Contenido del Articulo
¡Querrás marcarlos!
A lo largo de los años, me he encontrado con varias hojas de trucos que me han ayudado con el diseño como desarrollador full-stack y estudiante de diseño de UX.
Esos son mis 5 principales, pero si está buscando marcadores más útiles, como una lista de números de tarjetas de crédito de prueba para probar el extremo frontal de un sistema de pago, un validador de expresiones regulares o un convertidor de píxel a em, eche un vistazo a 15 marcadores útiles para ayudarlo en el desarrollo web front-end.
¡Empecemos!
Seguir estas leyes lo ayudará a comprender el impacto de ciertos aspectos del diseño en el usuario.
The Laws of UX es una colección de las mejores prácticas de UX que debe tener en cuenta al diseñar. También viene en forma de libro y mazo de cartas.
A menudo me refiero a este sitio para elegir en qué leyes me quiero centrar al desarrollar. Seguir estas leyes lo ayudará a comprender el impacto de ciertos aspectos del diseño en el usuario.
Explore el sitio y piense qué leyes ya sigue y cuáles son nuevas para usted.
Visita https://lawsoflux.com
El hecho de que otra compañía (más popular) lo haga no significa que esté bien.
Patrones engañosos (formalmente darkpatterns.org) es un sitio de referencia que enumera patrones de UX engañosos o manipuladores.
Este es un gran sitio para visitar. No hacer al diseñar. También es un buen recurso para señalar a las personas cuando desea mostrarles por qué no deberían estar haciendo algo. especialmente cuando los grandes nombres lo hacen. El hecho de que otra compañía (más popular) lo haga no significa que esté bien. Esto no significa que una pequeña empresa no sufra que los usuarios pierdan la confianza en sus productos o marca.
Echa un vistazo a estos patrones engañosos para asegurarte de que no engaño tus usuarios
Visita https://www.deceptivo.diseño/
Puede usar estas heurísticas siempre que necesite hacer una evaluación heurística, o usarlas como regla general al crear diseños fáciles de usar.
Las 10 heurísticas de usabilidad del diseño de interfaz de usuario son principios creados por Jakob Nielsen para ayudar a crear diseños intuitivos y usables. Fueron desarrollados después de años de experiencia en la interacción humano-computadora y son un conjunto sólido de pautas a seguir.
Utilizo este sitio para probar la usabilidad de mis proyectos. Puede usar estas heurísticas siempre que necesite hacer una evaluación heurística, o usarlas como regla general al crear diseños fáciles de usar.
Revise 10 heurísticas de usabilidad. ¿Qué estás usando ya en tus proyectos? ¿Cuáles puedes usar para mejorar tu diseño actual?
Visita https://www.nngroup.com/articles/ten-usability-heuristics/
Este sitio ha sido mi compañero durante décadas cuando necesito una referencia rápida sobre algo relacionado con CSS y HTML.
La referencia de selectores de CSS de W3 School es mi sitio que me recuerda a todos los selectores y pseudoselectores de CSS.
W3 Schools es… una escuela tan antigua. Este sitio ha sido mi compañero durante décadas cuando necesito una referencia rápida sobre algo relacionado con CSS y HTML. Marqué la página de referencia de selectores de CSS porque a menudo olvido la sintaxis exacta para excluir un nombre de clase o seleccionar un atributo cuyo valor comienza con “algo”.
Ejemplos:
excepción de clase con :not selector:
:not(p.foo) {
// Selects every element that is not a <p> element with the class "foo"
}
Seleccionando un elemento con un atributo de datos cuyo valor comienza con animation-:
[data-query^="animation-"] {
// Selects every element with a data-query attribute
// whose value starts with "animation-"
}
Marque esta página como favorita y regrese a ella de vez en cuando. Encontrarás algunos de ellos que no has usado antes.
Visita https://www.w3schools.com/cssref/css_selectors.php
La tipografía no es mi fuerte, y usar un sitio como este ayuda a simplificar las matemáticas al armonizar los diferentes tamaños de fuente en mis diseños.
Visual Type Scale es un sitio web muy útil inspirado en Modular Scale de Tim Brown que te permite crear una escala tipo basada en escalas musicales. Puede agregar sus personalizaciones y obtener una idea visual de la tipografía antes de agregar especificaciones a su sistema de diseño.
La escala de tipo visual es muy útil para definir la tipografía de mis proyectos. La tipografía no es mi fuerte, y usar un sitio como este ayuda a simplificar las matemáticas al armonizar los diferentes tamaños de fuente en mis diseños.
Visite el sitio si aún no lo ha hecho y avíseme si cambia su vida como lo hizo conmigo.
Visita https://typescale.com/
Si tuviera que enumerar todas las hojas de trucos que he marcado, nunca terminaría este artículo 😅. Echa un vistazo a las menciones de honor a continuación.
