10 excelentes hojas de trucos de diseño de UX/UI

Hojas de trucos de UX/UI para ahorrar

Todo el mundo necesita un poco de ayuda a veces, incluso los profesionales. Es difícil recordar cada pequeño detalle. De vez en cuando terminas buscando cosas básicas que has olvidado momentáneamente. Qué pérdida de tiempo puede ser eso. Por lo tanto, buscamos y recopilamos algunas hojas de trucos de diseño populares para ayudarlo a lo largo del día y ayudarlo a tener las mejores estrategias de UX.

Si estas estrategias son útiles, no olvide consultar también estos consejos al mejorar el diseño UX de su sitio web.

1. Hoja de trucos de diseño de iOS 7

El lanzamiento de iOS 7 trajo muchos cambios a la interfaz y los diseñadores deberán adaptar su lenguaje visual para adaptarse al nuevo diseño plano de iOS. Apple ha actualizado los sistemas de cuadrícula, las dimensiones, la tipografía y la iconografía. Ivo Mynttinen ha tenido la amabilidad de crear una hoja de trucos (actualizada) para desarrolladores y diseñadores que cubre toda la información que necesitará saber para iOS 7, que incluye:

• • Resoluciones en todos los dispositivos
  • Mostrar información en todos los dispositivos
  • Dimensiones del ícono de la aplicación (incluida la información sobre los cambios en el diseño de esquinas redondeadas y dónde obtener una plantilla, ya que Apple aún no ha lanzado una para iOS7)
  • Detalles sobre los cambios en la interfaz de usuario
  • Una breve lista de otros recursos que encontrará útiles mientras diseña una aplicación

Esto le ahorrará tiempo y esfuerzo ahora que no tendrá que ir a buscar cada pequeño detalle. Usando esto, no tendrá que compilar su propia lista. Además, es una de las hojas más extensas sobre el tema y está maravillosamente organizada.

2. Hoja de trucos de diseño de Android

Por supuesto, también incluimos una hoja de trucos de diseño de Android similar para usted. Esta es una magnífica infografía diseñada por Meghan Dever, una diseñadora móvil de Double Encore, Inc. La guía de diseño para Android tiene esta información disponible, pero es mucho más fácil encontrarla y leerla en esta dulce hoja de trucos.

Fue creado para uso interno en la empresa, pero pensaron que era un ahorro de tiempo tan útil que quisieron compartirlo con toda la comunidad. Esto viene con:

• • Campos de texto de Android, barras de búsqueda, controles giratorios, selectores, interruptores y sus casos de uso
  • Activos de 9 parches, con la adición de capacidades de diseño de límites ópticos
  • Tamaños de dispositivos Android y sus tamaños de elementos asociados
  • El relleno adecuado para los elementos de la interfaz de usuario
  • Detalles específicos de la barra de acción, contextual e ícono del lanzador
  • Conversiones de Dp a px

3. Psicología del Color Infografía

Bien, hay gráficos más que suficientes que cubren la psicología del color, pero este es mi favorito porque es mucho más extenso que los demás. En lugar de solo cubrir los conceptos básicos (rojo, amarillo, azul, morado, verde), te brinda una descripción de 50 colores diferentes. Además, no solo cubre las emociones e ideas positivas, sino también las negativas con las que se pueden asociar varios colores.

4. Hoja de trucos de HTML5

Actualización 9/9/16: Esta hoja ya no está disponible.

Esta es una gran hoja de referencia en caso de que estés aprendiendo HTML5 o simplemente te hayas dado un pedo en el cerebro y hayas olvidado una etiqueta. Esta es una lista extensa y realmente le brinda bastante información útil además de las etiquetas. Entra en detalles adicionales sobre dónde se pueden usar las etiquetas y qué navegadores admiten qué, incluso en dispositivos. Viene con:

• • Nuevas etiquetas que salieron para HTML5
  • Etiquetas existentes de HTML4 que todavía están disponibles para HTML5
  • Etiquetas antiguas que están obsoletas en HTML5
  • Atributos y lo que es viejo y nuevo para ellos también
  • Un gráfico de preparación del navegador

5. Hoja de trucos de Ninja UX

Para la etapa de investigación del proceso de UX, puede echar un vistazo a esta genial hoja de trucos creada por Hilary Little para su discurso de apertura de CodeFest. Son algunas de las mejores prácticas a tener en cuenta al evaluar a los usuarios.

Este es otro gran recordatorio de los conceptos básicos para los profesionales y es perfecto para cualquier persona nueva que necesite buenos consejos y sugerencias. También puede ver su presentación desde el discurso de apertura aquí. Esto complementará bastante bien la hoja de trucos y le dará al primer diseñador o emprendedor de UX una gran dirección.

6. Diseño de formulario web de hoja de trucos

Smashing Magazine nos ha traído esta belleza para que podamos usarla y compartirla. Es una hoja de trucos descriptiva para diseñar grandes formularios. Los diseñadores de esta sábana para cuna están bien versados ​​en el diseño y las formas de prueba.

Decidieron encontrar los problemas más comunes y describir cómo los solucionan, luego lo pusieron todo en esta excelente hoja de trucos del diseñador. Querían crear algo para mejorar las formas de todos. Contiene una plantilla de Omnigraffle, así como ejemplos de Photoshop (PSD) y PDF para descargar. Viene con excelentes consejos, qué hacer y qué no hacer, y algunos ejemplos de diseño que puede usar.

7. Hoja de trucos de jQuery

Esta es una increíble lista organizada de elementos jQuery que puede usar como referencia cuando no puede recordar algo. Fue hecho por Oscar Otero, un diseñador y desarrollador web que sabe lo útiles que pueden ser estas cosas. Viene con:

• Selectores
• Atributos/CSS
• Manipulación
• Atravesando
• Eventos
• Efectos
• Ajax
• Centro

Esta hoja de trucos de diseño en particular también viene con una función de búsqueda increíble. Puede seleccionar la versión de jQuery que está buscando y buscar opciones específicas. Esta es una gran herramienta para tener a mano como una referencia rápida y fácil.

8. Terminología de UX

Como diseñador de UX, interactúas con muchas personas diferentes dentro de una organización y no todos conocen la jerga. ¿No sería genial si no tuvieras que darte explicaciones constantemente? Esto es para que lo entregues a tus colegas para ayudarlos a entender de lo que estás hablando. Fue presentado por Bride Trozelli e incluye:

• práctica de experiencia de usuario
• roles de experiencia de usuario
• actividades de experiencia de usuario
• Términos de la interfaz de usuario
• Entregables de UX

9. Hoja de referencia de iconos de JQuery

Esta es una increíble lista rápida de íconos que puedes hacer con jQuery. Es posible que muchos de ustedes ya conozcan un montón de estos, ¡pero vamos!

No todos podemos memorizar cada uno de ellos. Esto será útil para aquellos de nosotros que tenemos dificultades para recordar información de nuestras cabezas. También es ideal para principiantes.

Esto fue presentado por Pete Freitag de Foundeo Inc. Personalmente, esta es mi favorita de todas las hojas de trucos de los diseñadores.

10. Hojas de trucos de WordPress

El lector Mike Wallagher de Startbloggingonline.com ha compartido estas hojas de trucos de WordPress que desarrolló. Estos son excelentes tanto para principiantes como para usuarios avanzados, ya que ofrece ambas versiones. ¡Échales un vistazo! Y si necesita asistencia técnica, ¡obtenga ayuda de WordPress de WP Buffs!

¿Tienes alguna hoja de trucos de diseño genial que quieras compartir? Háganos saber en los comentarios a continuación.