Aprender las habilidades que necesitas para el diseño o el desarrollo web es el primer paso para trabajar en la web, pero eso también significa familiarizarse con las herramientas del oficio. Por eso hemos elaborado esta lista de 99 herramientas gratuitas que necesitarás para el desarrollo web, el diseño web o ambos.

Cada uno de los recursos de esta lista es de uso gratuito y complementa las habilidades que enseñamos en nuestros Blueprints de Diseño Web, Desarrollador Web y Desarrollador Front End (clases dirigidas por un instructor que te guían por los fundamentos de cada función).

Mientras aprendes, ten esta lista a mano y piensa en ella como tu propia caja de herramientas virtual.

Recursos de diseño web

Esta lista de herramientas de diseño web incluye herramientas de diseño web para principiantes, así como recursos de diseño que te servirán a lo largo de toda tu carrera.

(volver al principio)

Listas de boletines

1. Creative Market
Antes de hacer cualquier otra cosa, inscríbase en la lista de boletines de Creative Market. Una vez a la semana, recibirás un correo electrónico repleto de 5 descargas gratuitas, que incluyen desde patrones y fuentes hasta plantillas y temas.

(volver al principio)

Software + Apps

Estos programas de software y aplicaciones web proporcionan una base sólida para el diseño web.

2. CoffeeCup Software
Ofrecen todo tipo de aplicaciones gratuitas para diseñadores web, incluyendo un editor de HTML, un creador de formularios web, un diseñador de carritos de la compra y muchas otras.

3. InVision app
Potentes herramientas de prototipado y colaboración. Puedes obtener maquetas y prototipos de alta fidelidad en cuestión de minutos.

4. Pixlr
Edita imágenes directamente en tu navegador.

5. Canva
Un software de diseño gráfico increíblemente sencillo que cualquiera puede utilizar. La función de búsqueda y arrastre es muy sencilla y útil.

6. Easel.ly
Impresionantes plantillas infográficas gratuitas.

(volver al principio)

Fotos

Las fotos son una parte fundamental del diseño web. Estos recursos de fotos de archivo son clave cuando se necesita la foto correcta ahora mismo.

7. Unsplash
Algunas de las fotos de archivo gratuitas más hermosas que hay, y con toneladas de variedad. Se añaden nuevas imágenes cada día.

8. PicJumbo
Obtén fotos gratis en tu bandeja de entrada que son totalmente gratuitas para uso personal y comercial.

9. Gratisography
Imágenes gratuitas de alta resolución que puedes utilizar en proyectos personales y comerciales. Tienen categorías fáciles de navegar: animales, naturaleza, objetos, caprichosas y más.

10. Compfight
Busca toneladas de imágenes con licencia para uso personal y/o comercial, principalmente de Flickr.

11. IM Free
Recursos de diseño web seleccionados, incluyendo un montón de fotos categorizadas, además de iconos y plantillas.

12. Stock Up
Busca más de 9.000 fotos de 26 sitios web diferentes, todo en un solo lugar.

13. Death to the Stock Photo
Inscríbete en su lista de correo electrónico y recibe sus packs de fotos gratis en tu bandeja de entrada una vez al mes.

14. Little Visuals
Si te unes a su lista, recibirás 7 fotos gratuitas de alta resolución por correo electrónico una vez a la semana.

15. New Old Stock
Obtén gratis fotos vintage de archivos públicos.

16. Cupcake
Fotos gratuitas de alta resolución de Jonas Nilsson Lee.

17. Pexels
10 nuevas fotos de stock gratuitas cada día.

18. Magdeleine
1 foto gratuita de alta resolución al día.

19. SplitShire
Fotos de stock gratuitas y de alta calidad de un fotógrafo italiano.

20. ISO Republic
Fotos de stock de alta calidad comercializadas para creativos.

21. Paul Jarvis
Suscríbete para obtener 20 de las mejores fotos de Paul Jarvis de forma gratuita.

(volver al principio)

Símbolos e iconos

¿Buscas símbolos o iconos para utilizar en tu sitio web? No busques más.

22. Pixeden
Toneladas de conjuntos de iconos gratuitos, incluyendo iconos del tiempo, iconos sociales, iconos de línea, y muchos otros.

23. Iconmonstr
Más de 2800 iconos con gráficos atrevidos en unos cuantos estilos diferentes.

24. Captain Icon
Más de 350 iconos vectoriales gratuitos para diseños móviles y web.

25. Linear Icons
Una fuente de iconos con 170 iconos diferentes para elegir.

26. Font Awesome
Una fuente de símbolos que permite añadir símbolos a tus sitios web.

27. Fontello
Genera paquetes de fuentes de iconos.

28. flaticon
Descarga iconos vectoriales o incluye iconos como webfonts.

29. The Noun Project
Busca un sustantivo y obtén un símbolo o icono gratis.

30. Endless Icons
Biblioteca de iconos gratuita.

31. Perfect Icons
Personaliza y optimiza los iconos de las redes sociales para tu sitio.

32. iconSweets
60 iconos vectoriales gratuitos de Photoshop.

33. Iconos redondos
Los paquetes de iconos extravagantes y profesionales gratuitos.

(volver al principio)

Fonts

Las fuentes son una parte tan crucial del diseño que pueden ser fáciles de pasar por alto. Mira aquí, en cambio, y encuentra las fuentes para llevar tu diseño al siguiente nivel.

34. Google Webfonts
Añade fuentes a tu sitio web en unos pocos clics.

35. typegenius
Generador de parejas de fuentes.

36. Font Squirrel
Cientos de fuentes totalmente gratuitas.

37. Beautiful Web Type
Consulta una colección curada de las más bellas Google Webfonts.

38. Lost Type
Preciosas fuentes de pago.

(volver al principio)

Colores

¿Necesitas ayuda para elegir los mejores colores para tu diseño? Estas herramientas de color están a tu servicio.

39. Material UI
Una galería de colores de Material Design y flat design para usar en tus diseños.

40. Paletton
Comienza con cualquier color y obtén una paleta (con 5 tonos por color) basada en unos cuantos patrones de esquema de color diferentes: monocromático, adyacente, tríada, tétrada o personalizado.

41. Design Seeds
Toneladas de estupendas paletas de colores tomadas de fotografías. Puedes buscar por palabra clave o por colores similares.

42. Adobe Color Wheel
Elige entre diferentes tipos de combinaciones de colores y guarda tus paletas de colores.

43. Paleta de materiales
Genera una paleta de colores basada en 2 colores.

44. Flat UI Color Picker
El nombre lo dice todo.

45. Flat UI Colors
Igual que el anterior.

46. Bootflat
Recogedor de colores planos.

47. Coolors
Generador de paletas de colores.

48. Skala Color
Descarga gratuita del selector de colores.

49. BrandColors
Consulta los colores exactos que utilizan las principales marcas.

50. De 0 a 255
Encuentra la variación de color perfecta que buscas.

51. Colour Lovers
Examina las paletas de colores de los usuarios y añade la tuya a la comunidad.

52. Palette for Chrome
Genera paletas de colores basadas en imágenes.

(volver al principio)

Fondos y texturas

Las fotos, los tipos de letra y los colores no son el final de un diseño: también necesitas fondos y texturas para mantenerlos todos juntos. Encuentra los tuyos con estas herramientas.

53. Pattern8
Toneladas de patrones repetitivos divertidos, atrevidos y brillantes para elegir.

54. Repeat-X Repeat-Y
Asombrosos patrones de repetición de todo el mundo.

55. Texture King
Todas las texturas que puedas desear: grunge, óxido, yeso, hormigón, suciedad y muchas más.

56. Patternico
Crea tus propios patrones usando iconos de Font Awesome. Personaliza el color de fondo, el tamaño del lienzo y la transparencia de la forma.

57. Subtle Patterns
Patrones de descarga gratuita.

58. Lost and Taken
Texturas gratuitas en un montón de categorías, incluyendo cartón, piedra, metal, burbujas, sin costuras, y más.

59. BG Patterns
Crea patrones sin costuras con colores, formas y mucho más personalizables.

(volver al principio)

Kits/Guías de interfaz de usuario

El diseño web es algo más que un simple atractivo visual. La forma en que la interfaz de usuario de un sitio «se siente» para el usuario es también un factor crítico. Estas herramientas le ayudarán a asegurarse de que su propio diseño de interfaz de usuario está a punto.

60. 55+ Elements Free UI Kit
Un kit de interfaz de usuario limpio y moderno. Asegúrese de buscar en el sitio web de Behance para obtener toneladas de grandes recursos de otros diseñadores.

61. Oh no, no otro kit de interfaz de usuario
Un kit de interfaz de usuario simple, plano y de código abierto para móviles y web que viene como un archivo PSD.

62. PSD Booster Freebies
Toneladas de fantásticos freebies de Photoshop, incluyendo kits de UI, temas y mucho más.

63. Material Design Guidelines
La guía oficial de los estándares de Material Design de Google.

(volver al principio)

Recursos de desarrollo web

Después de diseñar un sitio web, ¡hay que desarrollarlo! Ya sea que esté trabajando en ambos lados del proceso (diseñando Y construyendo un sitio), o construyendo un sitio basado en los diseños de otra persona, estas herramientas de desarrollo le ayudarán a hacer que el diseño sea una realidad virtual.

(volver arriba)

Motores de búsqueda de nombres de dominio

Los nombres de dominio son el corazón de un sitio web: son la dirección directa donde los usuarios pueden encontrar su sitio en línea. Pero Internet es un lugar muy concurrido y puede ser difícil encontrar el nombre de dominio exacto que quieres. Estas herramientas le ayudarán a averiguar si el nombre que desea está disponible, y a crear uno que SÍ lo esté si su primera opción no lo está.

64. Namemesh
Un potente motor de búsqueda de nombres de dominio que te ayuda a encontrar dominios cortos, divertidos, comunes, similares y varios otros calificativos.

65. Nameboy
Introduce una o dos palabras clave y obtiene una lista de dominios disponibles que las incorporan.

66. Panabee
Describe lo que quieres en dos palabras y Panabee generará una lista de posibles nombres de dominio.

67. Impossibility
Genera nombres de dominio aleatorios basados en una palabra.

68. LeanDomainSearch
Busca un nombre de dominio por palabra clave.

(volver al principio)

Frameworks, Templates, Code Packs, + Themes

A veces necesitarás codificar cada parte de un sitio web desde cero-pero a veces no. Aquí tienes una lista de frameworks, plantillas, paquetes de código y temas que puedes utilizar para reducir el trabajo pesado.

69. WP-Flex
Una plantilla para temas de WordPress en blanco y con capacidad de respuesta que sigue las mejores prácticas y requisitos oficiales del Códice de WordPress.

70. Foundation
Un framework responsivo avanzado que es uno de los más populares que existen.

71. Ionic
Crea aplicaciones móviles utilizando las tecnologías web que conoces y amas.

72. Initializr
Genera rápidamente una plantilla basada en HTML5 Boilerplate.

73. Materialize
Un framework moderno y responsivo basado en las especificaciones de Material Design de Google.

74. WordPress Plugin Boilerplate
Si quieres crear plugins para WordPress, el Plugin Boilerplate es un punto de partida estandarizado y orientado a objetos.

75. Front-end Boilerplate
Un punto de partida básico para crear tus sitios web y no tener que recrear todo desde cero cada vez.

76. HTML5 Boilerplate
El primero y el mejor. Código boilerplate HTML5 gratuito.

77. HTML5 UP
Plantilla HTML5 totalmente responsiva y gratuita.

78. 1 Line CSS Grid Framework
¡Un framework para CSS de sólo 1 línea!

79. 960 Grid System
Un favorito de Skillcrush.

80. Starkers for WordPress
Una plantilla básica para desarrollar tu primer tema de WordPress.

81. Barebones for WordPress
Una plantilla gratuita de WordPress para desarrolladores.

82. Underscores
Plantilla de WordPress para construir un tema totalmente nuevo.

83. Sage for WordPress
Un tema de inicio para WordPress basado en HTML5 boilerplate y Bootstrap.

84. Whiteboard for WordPress
Un tema de WordPress limpio y básico para desarrolladores.

85. Bootstrap
Un framework HTML, CSS y JS responsivo.

86. Bootswatch
Temas gratuitos para Bootstrap.

(volver al principio)

Guías de estilo de código

No puedes empezar a codificar sin aprender las habilidades básicas, pero una vez que tengas esas habilidades clavadas es hora de aprender a codificar con arte. Estas guías le enseñarán las mejores prácticas de codificación que elevarán su trabajo más allá del nivel básico.

87. Web Field Manual
Una colección de recursos, mejores prácticas, inspiración y materiales de referencia para la codificación moderna. También hay secciones llenas de herramientas y recursos adicionales e información específica del lenguaje.

88. Google Developers Web Fundamentals
Un recurso completo para las mejores prácticas de desarrollo web, directamente desde Google. Perfecto tanto para los nuevos desarrolladores como para los que quieren mejorar sus proyectos.

89. Mejores prácticas de despliegue
Antes de desplegar un sitio web o una aplicación, asegúrate de consultar estas mejores prácticas para asegurarte de que todo va bien.

90. GitHub
Guía de estilo de código propia de GitHub.

91. Google
Guía de estilo de código de Google.

92. Mozilla
Una guía de estilo de código de los profesionales de Mozilla.

(volver al principio)

Validación de código

¿Has terminado con esa web? No tan rápido. Antes de marcar ese proyecto como «terminado», utilice estas herramientas para atar los cabos sueltos de su código y compruebe si cumple las normas de accesibilidad, estilo y las mejores prácticas del sector.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Code Beautify

98. JSLint

99. Free Formatter

(volver al principio)

¿Listo para combinar estas herramientas con las habilidades que necesitas para ganar dinero en tecnología? Consulta nuestra página de programas para encontrar el curso Skillcrush Blueprint adecuado para ti. En sólo tres meses puedes estar calificado para empezar a trabajar en la web.