Kit de herramientas para diseño web


Kit de herramientas para diseño web

Este es un artículo como invitado de Mario Germán Reyes (@mager19), blogger de Imaginando la Web, sitio que ofrece artículos para Geeks, Gamers, serie-filos y también para aquellos que quieren conocer más sobre tecnología.

Recuerda que si quieres puedes escribir un artículo para Trazos Web y de paso promocionar tu sitio. Ve las condiciones aquí: Participa en Trazos Web.

 

Cada vez que afrontamos un diseño web siempre nos encontramos en la disyuntiva de qué herramientas usar para agilizar procesos y sobre todo hacerlo más sencillo. Con este kit de herramientas (que no quiere decir que sean las únicas que se pueden usar) busca resaltar algunas aplicaciones con potencial y que no son tan reconocidas.

 

PLACEHOLD.IT

Placehold.it

Esta genial herramienta nos permite crear un cuadrado del tamaño deseado y nos sirve para cuando estamos maquetando y requerimos una imagen de un tamaño preciso, Placehold.it hace esto, solo requerimos copiar la URL que se encuentra en su sitio y simplemente reemplazar las dimensiones que deseamos, ejemplo:

 

La url que se encuentra en la web es <img src=”http://placehold.it/350×150″> si requerimos una imagen de 600×400 solo procedemos a cambiar las dimensiones y listo: <img src=”http://placehold.it/600×400“>

 

Si colocas esta imagen en tu maquetación veras que se genera una imagen de 600×400.

 

ADAPTIVE IMAGES

Adaptive Images

Esta genial script detecta el tamaño de pantalla del visitante al sitio web y crea la imagen a la escala apropiada para cada dispositivo.

 

TINKERBIN

Tinkerbin

Genial editor online para realizar pruebas, o crear sitios sencillos, permite crear el archivo html, la hoja de estilos css, y si deseas agregar algo de Javascript lo puedes hacer.

 

Se muestran 3 áreas de texto en el que se definen los elementos antes mencionados, y lo mejor de todo es que permite una visualización en tiempo real.

 

Quizás el único defecto es que no permite generar un archivo que se pueda descargar, aunque tiene un botón SAVE, lo que hace es generar una URL para compartirla.

 

MOQUPS

Moqups

Para mi parecer (de hecho lo uso) es la más sencilla y práctica herramienta para crear wireframes (modelos del diseño de un sitio web), la cantidad de opciones con las que cuenta, además de la interfaz intuitiva la convierte en una aplicación con un potencial invaluable para ser gratuita.

 

Algo para resaltar es que cuenta con una versión para Chrome.

 

RESPONSIVE JS

Responsive JS

Herramientas de este tipo se están haciendo abundantes, ya que permiten ver el diseño de un sitio web o su maquetación en diferentes resoluciones, para así probar como se vería si aplicamos Responsive Design.

 

Esta en particular me parece que por su sencillez, solo ingresar la URL y en la parte de arriba puedes ver los dispositivos que permite, eso hace que nuestro trabajo se más rápido y efectivo.

 

FILLERATI

Fillerati

Fillerati es una herramienta que nos permite generar elementos de texto, para realizar maquetaciones (muy al estilo de Lorem Ipsum), darle un toque diferente.

 

¿Por qué? porque el texto generado es de novelas o escrito de grandes pensadores como Julio Verne, Hernan Melville.

 

Es bueno y muy sencillo.

 

COLLLOR

Colllor

Colllor (si con 3 LLL) es una buena herramienta para el tema del color, en el cual debemos escoger un color y automáticamente nos genera una paleta de colores de los posibles que se pueden o deben usar con el color elegido.

 

Herramientas de este tipo nunca sobran y si has tenido que lidiar con colores poco comunes lo tendras presente.

 

Esta es la primera entrega de varias que haré mostrando posibilidades, para tener material de sobra para usar en nuestros diseños.

 

Mucha mas información sobre diseño y muchos otros temas.

0 Comentarios en “Kit de herramientas para diseño web”

  • Muchas gracias por publicar mi articulo en su importante blog.

    Si alguien conoce alguna herramienta o aplicación como las anteriores, por favor déjela en los comentarios, o háganme conocer por twitter el enlace para incluirla en una próxima entrega.

    @mager19

  • gracias por estas herramientas, Puede que las utilize para mis blogs. saludos

  • Mastil

    Para maquetar te recomiendo esta herramienta http://pencil.evolus.vn/

  • Gracias por las herramientas, muchas de ellas no sabía que existian y me serna de gran ayuda.

  • gracias por este articulo

  • Muy interesante el post al igual que las herramientas que propones. Las probaremos. Sin duda, parecen muy útiles

  • Grandes herramientas, son de gran utilidad

  • Muy interesante kit de herramientas, como diseñador web me serán de mucha utilidad, muchas gracias por compartir tan valiosa información para diseñadores web

    • Gracias a todos por sus comentarios, ya estoy preparando la segunda parte de este articulo.

  • que buena entrada, la información es excelente muchas de estas no las conocía, un saludo.

  • Gracias por el post, la gran mayoría ni las conocía. Muy bueno!
    PD: esperando esa segunda parte que comentas. 😉

    • Si claro, muy pronto lo posteare, las cosas buenas tardan un poco jajajja no mentiras he tenido exceso de trabajo pero pronto trabajo en ello.

      Saludos @mager19

  • Muy buen artículo es una gran ayuda encontrar web tan apañadas como esta.

  • esto es muy útil, muchas gracias