Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. UI Design
Webdesign

10 herramientas que debes probar en tu próximo proyecto web

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Elena Pari (you can also view the original English article)

A continuación presentaremos algunas herramientas que puedes probar en tu próximo proyecto como desarrollador o diseñador. Esta lista no es de ninguna manera exhaustiva ni son “las diez mejores” de nada, simplemente son sugerencias para aquellos que buscan algo nuevo. Espero que disfrutes de estas herramientas. ¡Empecemos!

1. Inspect

Inspect es una aplicación que se sincroniza perfectamente con tus archivos de diseño y tus herramientas. Permite mantener sincronizados con un solo clic los archivos de diseño entre Sketch, Inspect e InVision.

Inspect acorta la brecha entre el diseñador y el desarrollador. Puedes generar códigos de trabajo a medida que diseñas, proporcionar medidas, colores y recursos de diseño con verdadera facilidad, así como colaborar a través de un sistema de mensajería, al mismo tiempo que mantienes actualizadas la información y las notas del proyecto.

Para empezar necesitarás Sketch. Una vez que tengas Sketch instalado también necesitarás Craft. Craft es un conjunto de plugins que permite diseñar con datos reales en mente y permite la sincronización entre InVision y Sketch. Crea un nuevo proyecto desde InVision y luego vuelve a Sketch. También sugeriría que le eches un vistazo a InVision Studio.

2. Archetype

Archetype es el diseño de tipografía digital hecho fácil. Funciona en tiempo real con Google Fonts en el navegador usando las mejores prácticas, como crear una escala modular y cuadrículas de base que sean consistentes y reutilizables.

Todos los estilos configurados con Archetype generan un código amigable para el desarrollador a fin de facilitar el handoff o traspaso.

Los cambios y las actualizaciones son instantáneos y se pueden compartir fácilmente permitiendo a los usuarios exportarlas a CSS o a Sketch. También puedes descargar el conjunto de fuentes que hayas elegido para usar en tu diseño. Guarda proyectos usando tu cuenta de Google y retoma tu trabajo en cualquier momento.

3. Probot

Si usas control de versiones, trabajas en proyectos de código abierto o realizas una revisión del código entre los miembros de tu equipo, Probot podría ser tu ángel encubierto. Probot es un set de aplicaciones impulsadas por la comunidad para automatizar y mejorar el flujo de trabajo con GitHub.

Puedes explorar todas las aplicaciones de código abierto o crear las tuyas. Algunas de las aplicaciones que se proporcionan actualmente son: Stale, que sirve para cerrar automáticamente los asuntos obsoletos y extraer las solicitudes que se acumulan durante un proyecto, o recordatorios para crear notificaciones de ayuda memoria relativas a los problemas de un proyecto y para los miembros del equipo.

Concéntrate en lo que quieres crear. Una API sencilla (basada en las últimas funciones de ES6 JavaScript) oculta los detalles que no te interesan usando GitHub y Node.js.

4. De PSD a Sketch

¿Alguna vez ha recibido un PSD que querías convertir en un archivo de Sketch? Pues estas de suerte. Avocode (otra herramienta interesante para probar) ha sido tan amable de proporcionarle a la comunidad una herramienta gratuita para hacer ese trabajo. Busca la URL y carga tu PSD. Aquí hay una hoja de ruta y una lista de las características que admite el proceso de conversión.

También ten en cuenta que Photoshop y Sketch son herramientas muy diferentes, así que solo se convertirán los elementos de diseño que se pueden crear en ambas aplicaciones de diseño: Sketch y Photoshop. No se puede convertir ni imitar las características de Photoshop que no están incluidas en la aplicación Sketch.

5. Prueba la velocidad de tu sitio web con Cloudinary

La optimización de imágenes puede reducir significativamente el tiempo en el que carga una página web, lo cual redunda en la satisfacción del usuario y hace que se quede más tiempo en el sitio. Website Speed ​​Test es una herramienta de análisis de imágenes que puede escanear cualquier sitio con una URL activa y proporciona información detallada para su optimización, indicando cómo los cambios en el tamaño de la imagen, el formato, la calidad y los parámetros de codificación pueden reducir la velocidad a la que carga la página.

Los resultados se pueden compartir y, una vez que termina el análisis, cada imagen incluida en los resultados se puede descargar en un formato optimizado u otro formato alternativo como webp o jpeg-xr.

Para saber más sobre este servicio, ve a su página de presentación. También hay un servicio CDN de Cloudinary al que tal vez también quieras darle una mirada.

6. Animista

En Animista puedes jugar con una colección de animaciones CSS ya listas que puedes modificar y luego obtener solo las que realmente usarás. Para esto, copia el código generado o descarga un solo archivo CSS.

Si mientras trabajas ves algo que te gusta, haz clic en el ícono del corazón o explora tus favoritos en cualquier momento haciendo clic en el ícono de embudo. Animista ofrece todo tipo de opciones prefabricadas y personalizadas para ajustar tu secuencia de animación, incluyendo opciones 3D junto con las típicas transformaciones en 2D. El código se puede reducir y canalizar a través de Autoprefixer para asegurarte de obtener el código más utilizable posible para el soporte del navegador.

7. Hero Patterns

Hero Patterns es una colección de patrones SVG repetibles que puedes usar como fondos en tus proyectos web. Cada patrón de fondo que selecciones se convierte en un fondo repetible y se codifica en base64 para que lo uses en el archivo CSS que elijas. Ajusta las propiedades individuales, como el color de primer plano, el color de fondo y la opacidad de primer plano conforme a lo que decidas para tu diseño.

Actualmente, la aplicación permite elegir entre 87 patrones diferentes y ofrece una gran variedad, considerando la pequeña cantidad de patrones proporcionados.

También puede descargar el SVG sin estilo, tal como se puede ver en el fragmento de código anterior. Esto es perfecto para aquellos que no quieren usar la opción base64 o desean personalizar aún más el patrón.

8. Cushion

Cushion brinda tranquilidad a las personas que trabajan por cuenta propia y que tienen su propio negocio, pues les proporciona una mejor visión y "trae calma a la montaña rusa diaria que es el trabajo independiente".

Ofrece un período de prueba de 14 días (no se requiere tarjeta de crédito), y si te gusta, los planes comienzan desde $ 5 al mes; también conocido como el plan “Moonlighter”. Esta aplicación te ayuda a cubrir tus procedimientos básicos:

  • Elaborar cronogramas de proyectos
  • Hacer un seguimiento a tus gastos
  • Exportar hojas de cálculo
  • Emitir facturas
  • Llevar un registro de facturas
  • Vista de ingresos mensuales
  • y más…

Cushion está considerando crear una aplicación móvil, pero por el momento no la ofrece porque su prioridad es crear una aplicación web integral. Si estás buscando específicamente la opción de integrar cuentas bancarias (y esto es un factor decisivo para ti), la mala noticia es que la aplicación no tiene un soporte bancario, pero sí puedes importar estados de cuenta como un archivo .csv. Pruébalo, no tienes nada que perder.

9. Launchy

Launchy es una ventana modal accesible. No tiene jQuery y solo pesa 27.7 KB.

Algunas características notables de esta herramienta son:

  1. Cuando se inicia, el foco del teclado cambia al contenedor de ventana modal.
  2. La ventana modal está descrita con un encabezado modal opcional.
  3. El foco del teclado se sitúa en el modal cuando está activo/visible.
  4. La ventana se cierra al pulsar la tecla esc.
  5. La ventana se cierra al hacer clic sobre ella con el mouse.
  6. El foco del teclado vuelve al elemento de inicio cuando se cierra la ventana.
  7. ¡Puedes añadir tus propios controles de cierre personalizados!
  8. ¡Agrega tus propios controles personalizados que envían el foco a otro lugar de la página!
  9. Tiene borde transparente para temas de Windows de alto contraste

Launchy también tiene muchas clases de CSS disponibles en sus elementos generados para un estilo personalizado. Echa un vistazo al archivo style.scss para ver los nombres de las clases y un ejemplo de cómo puedes manejar el estilo de tus ventanas modales. El proyecto también está disponible como un paquete de NPM: npm i launchy-modal-window. Verdaderamente una ventana modal accesible bien hecha.

10. Formcore

Formcore es un proyecto de código abierto (descrito como "de peso ligero y formularios validados") del grupo Filament y es un conjunto de patrones para formularios, como la contraseña de mostrar/ocultar, contador de caracteres, entrada y validación de tarjetas de crédito, texto de varias líneas que se amplía a medida que el usuario escribe y mucho más.

Hay una serie de otras características incorporadas, como la normalización del comportamiento de los campos de un formulario <input type="number">, funciona para imponer el atributo maxlength, y también sirve para solucionar errores de <input type="number"> en Safari 6 y Firefox para escritorio, por mencionar algunas.

Si estás creando formularios en la web (y apuesto que sí), entonces esta podría ser una buena opción para probar en tu próximo proyecto que incluya entradas de formularios.

Conclusión

Ahora que hemos llegado al final de nuestra lista, ¿qué piensas? ¿Alguna de estas herramientas llamó tu atención como para animarte a probarla? ¿Ninguna te impresionó y podrías sugerir otras? ¡Cuéntanos en los comentarios a continuación. ¡Feliz diseño web para todos!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.