El blog para emprendedores

Diseño Web: Herramientas y trucos para optimizar tu tiempo.

Publicado por Alejandra el 17 - Nov - 2013

Hace poco leí un artículo en la revista Smashing Magazine con consejos, trucos y herramientas para optimizar nuestro trabajo en el Diseño Web. Aprendí muchas cosas nuevas y me pareció muy interesante compartirlas con vosotros.

Aquí van algunos de los consejos:

Diseño:

Mi secreto para las combinaciones de color” Erica Schoonmaker

Escoge una paleta de colores que quieras hacer, luego elige un color base con el que pintarás todo. Deberás sobreponer el color base sobre los demás. Lo más práctico es hacerlo en Photoshop, así puedes jugar más fácilmente con el “Blending mode” y la opacidad dependiendo si quieres colores más oscuros o claros.

Alineación práctica del espacio” Kris Jolls

Crea varios cuadrados y rectángulos con las medidas básicas que utilices dependiendo de los espacios de tu página. Así ahorrarás tiempo para alinear los elementos.

*Yo también suelo usar este truco y te recomiendo que para hacer los rectángulos escojas un color que no tenga nada que ver con el resto del diseño, así te será más fácil seleccionarlos y eliminarlos cuando termines. También puedes asignarles una capa, de este modo tu trabajo será más organizado y también podrás eliminarlos fácilmente.

Área de trabajo en Photoshop” Jacob Cass

Jacob Cass comparte sus trucos para trabajar en diseño web utilizando Photoshop. Es interesante mirar este artículo.

Herramientas de Colaboración:

Estas son herramientas que tienen que ver con el uso horario y facilitan el trabajo, sobretodo cuando los miembros del equipo no viven en el mismo país:

Más herramientas y artículos para facilitar el trabajo:

ScreenHero:

Una herramienta para compartir pantalla, lo mejor es que cada usuario puede usar su ratón para trabajar en conjunto.

Productividad:

Sofresh: Refresca tu pantalla automáticamente

Divvy:  Te ayuda a administrar tu área de trabajo dividiéndola en porciones precisas.

Shortcat: Ahorra tiempo utilizando el teclado cómo mouse.

The Thinkerbot: Escoge diferentes elementos de internet para hacer una productiva lluvia de ideas basada en el azar.

SizeUp: Permite redimensionar rápidamente las ventanas de tu ordenador con atajos de teclado.

PXtoEM: Te ayuda a hacer la conversión para pasar tu tipografía a em.

“Compartir archivos en la Nube”: Para facilitar el trabajo en equipo se hace imprescindible compartir todo tipo de archivos y que mejor manera que subirlos a la nube. A mi personalmente me gusta mucho trabajar con Dropbox. La única pega que tiene es que es de pago, pero funciona de maravilla.

Herramientas de diseño color e imagen:

Hex Color: Una herramienta que te ayuda a encontrar tonos más claros u oscuros de manera sencilla y precisa.

Guide Guide: Logra que el trabajo con guias y cuadrículas sea mucho más fácil. Gracias a esta herramienta puedes crear de forma precisa tus espacios de trabajo basados en tus documentos. Además puedes guardar tus plantillas para usarlas en futuros diseños.

CMYK to Pantone: Una herramienta muy útil para encontrar el Pantone (más cercano) equivalente al color CMYK son tener un libro de color.

Icomoon: Es una herramienta que te sirve para desarrollar iconos. Es de pago, pero tiene una versión gratuita.

Vector Stock: Es una galería de vectores gratuitos, muy útil a la hora de diseñar y ahorra tiempo.

Responsive Web Design:

Screenfly: Es una herramienta online que nos permite probar el diseño en las diferentes resoluciones, desde un Samsung Galaxy S III, pasando por un iPhone 3/4/5, hasta un ordenador de 1024 x 600 de resolución o una Tablet Google Nexus 7 o un iPad. Aunque si no encuentras la resolución que buscas puedes ajustar las dimensiones que más te convengan.

Responsive Web design Testing tool: Esta herramienta es parecida a Screenfly, testea tu web en varios tamaños.

Resize my browser: Funciona igual que los dos anteriores, la diferencia es que puedes abrir los distintos tamaños en diferentes pantallas y así será más fácil comparar los diseños.

Foundation: Aquí encontrarás Frameworks bien hechos para trabajar en Responsive .

________

También añadí algunos truquillos con los que yo trabajo, y si sirven para ayudar a optimizar vuestro trabajo ya me daré por satisfecha. ¿Tenéis algún truco o consejo para compartir?

Si alguna cosa no quedó muy clara, podéis consultar el artículo de Smashing Magazine: Powerful Workflow Tips, Tools And Tricks For Web Designers

Comentarios

  1. […] estructura, de este modo se hará mucho más fácil trabajar en Responsive. Hay un gran número de herramientas que nos ayudan sacar proyectos de calidad en un tiempo más […]

Deja tu comentario