Las herramientas y aplicaciones inteligentes, especialmente aquellas que ahorran tiempo, son una necesidad para los diseñadores. ¡Y hemos recopilado algunas de las mejores y más recientes en esta lista de herramientas gratuitas para diseñadores!
Desde la tipografía que ayuda a los elementos hasta los fragmentos de código y las paletas de colores que puede descargar, esta lista incluye elementos cotidianos para facilitar su vida de diseño. Sumérgete y encuentra algunas herramientas gratuitas y prácticas para simplificar tu flujo de trabajo.
1. Gradientes Web
¿Quién no ama un buen gradiente? WebGradients es una colección de 180 gradientes lineales que puede usar como telón de fondo de contenido en cualquier parte de su sitio web. Copie el código de navegador de CSS3 o descargue las versiones PNG, Sketch or Photoshop.
2. Lista de verificación de la tipografía perfecta
La lista de Typewolf es un curso maestro de tipografía exhaustiva que se duplica como una herramienta interactiva para ayudarlo a evitar desastres de tipo. La lista es completa y proporciona instrucciones fáciles para ayudarlo a corregir errores.
3. LOL Colors
¿Necesitas una paleta de colores inspiradora? LOL está lleno de cuadrantes de colores (y códigos HEX) para ayudarte a encontrar combinaciones que quizás no hayas considerado.
4? cambio de tamaño
Pruebe la capacidad de respuesta de su sitio web con esta herramienta que le permite ingresar una URL y verla como lo hacen los usuarios en diferentes dispositivos. También puede cambiar entre las vistas horizontal y vertical.
5. Estadísticas CSS
¿Cómo se ven tus hojas de estilo? CSS Stats es una herramienta genial que analiza todo en un formato utilizable. (Es una gran ayuda si desea ver qué color o fuente se incluye en un diseño).
6. Adobe Spark
La herramienta Spark de Adobe es un generador de imágenes gratuito que es perfecto para crear gráficos promocionales para redes sociales. La herramienta es rápida y puede evitar que gaste grandes cantidades de tiempo en estas pequeñas imágenes. (Y funciona como la mayoría de los otros productos de Adobe, por lo que no hay una curva de aprendizaje real).
7. Google Web Designer
Esta aplicación aún se encuentra en versión beta, pero lo ayuda a crear diseños interactivos y atractivos basados en HTML5 y gráficos en movimiento que se pueden ejecutar en cualquier dispositivo. ¿Quién no querría esa ayuda de Google?
8. Biblioteca de fuentes
Manténgase al día con todas esas fuentes de Google utilizando esta herramienta que lo ayudará a etiquetar y organizar todo lo que tiene en uso.
9. ¿Qué fuente es
¿No estás seguro de cuál es el nuevo tipo de letra que estás viendo? Qué fuente es le permite cargar una imagen o especificar una URL y obtener coincidencias de tipo. También proporciona una buena lista de coincidencias cercanas para ayudarlo a encontrar el tipo de letra correcto.
10. Muerte a la acción
Este es un sitio de fotos de archivo que no tiene el aspecto tradicional de las fotos de archivo. Cada mes, los suscriptores obtienen un paquete gratuito de fotos para usarlas como quieran y cada una está a cargo de diferentes fotógrafos.
11. Todoist
Todoist es una aplicación pequeña y práctica lista de verificación. Úselo para realizar un seguimiento de los proyectos en la elegante interfaz minimalista que es fácil de usar y sin desorden.
12. Bulma
Bulma es un framework CSS simple y moderno construido en Flexbox. Es modular y sensible, y cada parte del código es de código abierto en GitHub.
13. Música para la programación.
Perdona el diseño brutalista; Usa la gran función de la música para la programación. El sitio es un conjunto colaborativo de mezclas de música hechas para escuchar durante la programación. (O simplemente puedes convertirla en tu lista de reproducción para casi cualquier cosa).
14. PlaceIt
Si necesita una maqueta para presumir de proyectos, este sitio tiene más de 2,500 opciones creativas para elegir.
15. Regla de CSS
Utilice esta herramienta para ver las diferencias entre las longitudes de CSS: relativo a la fuente, porcentaje de vista y absoluto. Introduce tus valores y vete.
16. Patterninja
Esta pequeña aplicación toma cualquier imagen (puedes usar la tuya o la biblioteca gratuita) y convertirla en un patrón para un uso en una variedad de tipos de proyectos. Es una herramienta con la que puedes jugar todo el día y no aburrirte.
17. Tema.Cartas
Encuentra los mejores temas gratuitos para WordPress, Bootstrap y más en un solo lugar. Además, todos los temas y plantillas en el sitio son receptivos, por lo que no tendrá que vadear mucho el desorden.
18. Escribe cualquier cosa
¿Crees que tienes una paleta de tipografía perfecta hasta que la incluyes en el CSS y te das cuenta de que las cosas no están funcionando según lo planeado? Type Anything te ayuda a crear excelentes combinaciones de fuentes que puedes ver en la pantalla, ajustando todo, desde la fuente hasta el tamaño y el espaciado. Pruébalo antes de codificarlo.
19. Img2CSS
Convertir cualquier imagen en CSS puro. Solo sube tu imagen y mira como sucede la magia.
20. Glyphdiff
Compara dos tipos de letra con esta herramienta. Elija dos tipos de letra de la misma familia o combinaciones muy diferentes solo por diversión.
21. Impalette
Compruebe si hay colores dominantes en las imágenes con una cuadrícula basada en Pantone. Lo que hace que la herramienta sea excepcionalmente agradable es que también proporciona muchas opciones de color relacionadas.
22. Centro visual
Encuentra el centro visual de objetos usando esta herramienta. (Es posible que se sorprenda de dónde cae en algunas imágenes). También puede obtener complementos de Sketch o Illustrator para usar la herramienta fuera de línea.
23. Patrones de héroe
Esta base de datos está repleta de fondos SVG repetibles que puede utilizar para proyectos web. Ajustar los colores de fondo y primer plano, la opacidad y la descarga.
24. Auditor del sitio
No se preocupe por la optimización de motores de búsqueda. El auditor del sitio analiza su sitio para encontrar problemas de SEO que puedan impedir que su sitio se clasifique en los motores de búsqueda como Google. Proporciona problemas y soluciones para ayudarlo a optimizar mejor su sitio. (Gratis para un sitio, hasta 50 páginas).
25. Sketchpacks
Encuentre y administre complementos para la aplicación Sketch directamente desde la barra de menú. La instalación con un solo clic.
26. Desarrollo web ético
Ayuda a crear una mejor web como diseñador ético. Esta lista incluye muchos principios y pautas para ayudarlo a mantenerse conectado a tierra.
27. Generador de punto de interrupción de imagen sensible
La herramienta lo ayuda a elegir las mejores resoluciones de imagen para diferentes tamaños de pantalla utilizando un concepto algorítmico para encontrar valores de ancho de imagen que ofrecen una reducción significativa en el tamaño del archivo.
28. Unsplash
Unsplash es otra base de datos de fotografía de alta resolución. Busque en la base de datos o suscríbase y obtenga fotos en su bandeja de entrada.
29. Material Design Palette
Todo el material de diseño está de moda en estos días, especialmente las opciones de colores brillantes. Esta herramienta lo ayuda a elegir colores, ver cómo se verán en el diseño y proporciona una paleta descargable con alternativas.
30. Escriba los términos
Si la jerga de la tipografía aún te resulta extraña de vez en cuando, esta animada hoja de trucos de tipografía te ayudará a aprender el idioma rápidamente.