46 recursos útiles para diseño web

46 recursos útiles para diseño web

En este artículo enumeramos distintos recursos que pueden servir para procesos de diseño web. Son útiles para diseñadores o para cualquier persona que se dedique al marketing online, pues a menudo en este campo el diseño es un punto clave en las campañas y en los resultados, y cuantas más herramientas se conozcan, mejor.

1. Concepto e inspiración

Empezar de cero es siempre complicado, y mucho más en el ámbito del diseño. A menudo, las soluciones no se encuentran fácilmente y puede llevar consecuencias en el plazo de entrega. Para que eso no suponga un problema para nosotros y el trabajo final debemos tener siempre unos cuantos links a mano:

behance

Behance
Red social y depósito de trabajos de diseñadores.

Dribble
Red social y depósito de trabajos de diseñadores. Mayoritariamente online.

Awwwards
Depósito de ejemplos de webs premiadas por el staff.

Inspiration Über Alles
Depósito de recursos a cargo de Sergi Muñoz

Ads Of The World
Depósito de ejemplos de publicidad, tanto pantalla como print.

Medium
Magazine de diseño, donde encontraremos ejemplos, recursos, etc.

Smashing Magazine
Magazine que trata el mundo del diseño online.

Design Taxi
Magazine sobre diseño, con ejemplos.

Fubiz
Magazine para inspirarse. Mucho contenido en arte.

Baubauhaus
Contenedor de ejemplos.

2. Material gráfico

Al margen del papel y el bolígrafo, algunas herramientas que nos pueden ser de utilidad son aquellas que van completando la composición y la forma.

Boceto: wireframes y prototipado

Para empezar un proyecto con buen pie no hay nada mejor que estructurar bien los elementos y plasmarlo visualmente antes de comenzar a diseñar. Estas herramientas permiten bocetar de manera casi automática y favorecen la comprensión de principio a fin.

balsamiq

Balsamiq
balsamiq.com

Axure
axure.com

Moqups
moqups.com

Bancos de imágenes

Los stocks de fotos son bastante útiles cuando queremos que las imágenes tengan un aspecto profesional y no disponemos de fotografias propias ni queremos usar las muestras que nos puedan ofrecer servicios sin derechos (filtrando) como Google imágenes.

unsplash

Unsplash
unsplash.com

Death to the stock photo
deathtothestockphoto.com

Iso Republic
isorepublic.com

Picography
picography.co

Foodiesfeed
foodiesfeed.com

Jay Mantri
jaymantri.com

Imcreator
imcreator.com

Gratisography
gratisography.com

Páginas de vectores

La mayoría de estos bancos también disponen de logos y otros elementos estándar que nos pueden evitar echarle horas a algunas partes del diseño. Los siguientes trabajan exclusivamente con logotipos y otros recursos vectoriales.

seeklogo

Seek Logo
seeklogo.com

Brands of the world
brandsoftheworld.com

Free Pik
freepik.com

..Misc

DB Freebies
dbfreebies.co

Repositorios de Tipografías

El motor del diseñador son las tipografías. Todo diseñador tiene unas favoritas pero siempre que se queda en blanco debe recurrir a algún sitio, aquí os ofrecemos algunos ejemplos de repositorios. También es muy importante tener en cuenta, sobre todo para el diseño web, que cada vez se usan y hay más webfonts.

fontfabric

Font Fabric
fontfabric.com

The league of moveable type
theleagueofmoveabletype.com

Dafont
dafont.com

Font Squirrel
fontsquirrel.com

MyFonts
myfonts.com

Google Fonts
google.com/fonts

Páginas para creación de paletas de colores

Aunque vistan siempre de negro, los diseñadores tienen buen ojo para los colores. Una buena manera de llegar a esa combinación es tirando de seleccionadores automáticos de color. Con estos conseguiremos tener un acabado con estilo.

coolors

Coolors
coolors.co

Paletton
paletton.com

Brand colors
brandcolors.net

Trianglify
qrohlf.com/trianglify

Gradient Animator
gradient-animator.com

3. Herramientas de diseño

Casi no hace falta mencionar las herramientas más necesarias. Tan sólo mencionar la gran sorpresa de los tres últimos años que es Sketch, que viene a ocupar el lugar que dejó Fireworks y mejora muchas de sus funcionalidades.

Adobe Photoshop
La herramienta de retoque digital por excelencia. Es la más usada e incluso se habla de “photoshopear” para aquellas fotografías de famosos que han sido retocadas exageradamente: ya es parte de la cultura popular.

Adobe Illustrator
Esta herramienta sirve para diseñar con vectores. Es el hermano pequeño de photoshop, pero tiene un potencial enorme. El más usado por los diseñadores, tipógrafos y otros profesionales del campo.

Sketch
Herramienta de diseño web y aplicaciones para móviles. Vendría a ser un sustituto de Fireworks pero pensado para el diseñador dinámico que trabaja con formatos y estándares actuales. Actualmente solo está disponible para Mac.

4. Maquetación / Animación

Para maquetar o animar necesitaremos saber algo de código. Cada vez hay más herramientas con interfaz gráfica, pero no siempre podremos disponer de ellas en cualquier lugar. Para poder retocar aquellas creaciones en HTML, CSS o Javascript, unos buenos editores de texto siempre nos irán bien. Adobe Edge es el único que es visual en esta lista, aunque Adobe lo ha sustituido recientemente por Animate CC a raíz de la muerte definitiva de Adobe Flash.

Adobe Edge Animate (ahora sustituido por Animate CC)
Esta herramienta permite animar imágenes y vectores en html5 de manera visual, sin necesidad de conocer código. Es versátil y vino a dar espacio a aquellos que se quedaron sin flash.

Sublime Text
Sublime text es un editor de texto pensado para picar código html, javascript, css, etc. Tiene infinidad de extensiones que se instalan en el programa y permite a los desarrolladores crear atajos y ahorrar mucho tiempo.

sublimetext

Brackets 
Este es otro editor de texto pero más visual que Sublime Text ya que da opción de previsualizar dentro del mismo programa.

Por último haremos una mención especial a TinyPNG, esta herramienta online gratuita (o instalable en Photoshop, de pago) que hace prácticamente magia con el peso de los archivos de imágenes, sobre todo PNGs y JPGs.

TinyPNG

Está claro que esto no es todo lo que hay, que salen herramientas nuevas cada semana y que todo está por ver. Internet permite buscar y rebuscar para seguir encontrando métodos nuevos. En este momento y ahora, estas son nuestras propuestas. Esperemos que os sea de utilidad.

Conoce nuestros servicios de Diseño web / UX

Conoce nuestros servicios de Diseño web / UX

Estrategia + UX + tecnología

Descargar

¿Qué te ha parecido este artículo?

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Síguenos

Categorías

Suscríbete al blog de Binaria

¿Quieres recibir más artículos como este? Suscríbete aquí

Diseño web / UX

Conoce nuestra visión del diseño digital y explora casos de éxito

Saber más Binaria

Suscríbete por email a nuestro blog

Recibe en tu correo nuestros mejores artículos sobre Marketing digital y Diseño web.