9 ago. 2010

6 Herramientas online que facilitan la tarea de diseñar una web



En la mayoría de casos, cuando empezamos a diseñar una web, iniciamos el proceso de estructurarla en nuestra mente, imaginarnos donde va a ir esto, donde va a ir aquello, que proporciones tendrá cada cosa, colores, etc... Y una vez lo tenemos más o menos claro, tenemos que plasmarlo en algo que puedan ver los demás a parte de nosotros en nuestra mente. En este punto del proceso es cuando empezamos a tirar de recursos externos, fotos de stock, generadores de texto simulado, etc... Y esta serie de herramientas son las que propongo a continuación.

1. Generador de texto simulado - www.lipsum.com
Cuando no disponemos de textos reales para crear los contenidos de nuestros diseños, tenemos dos opciones: inventarlo nosotros, teniendo que invertir más tiempo en pensar que ponemos, o recurrir a un generador de texto simulado como lo es el del enlace que encabeza este párrafo. Esta web genera el famoso "Lorem ipsum" pudiendo, además, configurar varios parámetros del texto generado. Desde decidir los párrafos que queremos, numero de carácteres, si queremos listados, etc... Una aplicación web realmente útil y que nos ahorrará bastante tiempo. Eso sí, siempre es mejor usar texto real o intentar inventarnos el contenido con textos legibles, ya que se acercará mucho más al diseño definitivo que no ajustando un texto simulado.

2. Contador de carácteres - Contador
Si necesitamos introducir en una parte de nuestro diseño un número de carácteres determinado y nos da pereza contarlos a ojo, solo tenemos que copiar y pegar en este sencillo contador, y obtendremos nuestra cifra.

3. Generador de imágenes de relleno - dummyimage.com
Como en el punto 1, siempre es mejor utilizar imágenes reales, pero en el caso que simplemente queramos generar la estructura, o necesitemos hacer un diseño rápido y aproximado donde importa poco el contenido real, en esta web encontraremos la posibilidad de generar imágenes de un color plano que nosotros le indiquemos, al igual que un texto y un formato (jpg, gif, png), sin olvidarnos de las medidas. A lo mejor esto no va tan enfocado al diseño, ya que en cualquier programa de diseño es más fácil crear un cuadrado con las medidas y colores que queramos, si no que quizá es más interesante para el desarrollador, que no tenga que estar molestando al diseñador pidiéndole imágenes de relleno, así que si eres diseñador envíale esto a tu desarrollador/maquetador/programador habitual.

4. Rejilla base - 960.gs
Como ya comenté en la entrada de Diseñar con una buena base: Rejillas, las rejillas son algo que nos facilitan bastante la faena ya que nos ayudan a ordenar mejor los elementos y a tener unas referencias para generar nuestra estructura.  En la web propuesta, disponemos de plantillas descargables para utilizar con cualquier programa de diseño, así como generadores online de rejillas, que nos ayudarán a investigar sobre otras webs y sus estructuras.

5. Stock fotográfico - Sxc.hu
Como de todo, hay miles de páginas que se dedican al stock de fotografías, pero la que a mi siempre me saca de los apuros y además es gratuita, es la de Stock.xchng. Lo bueno que tiene es que las fotos son de un tamaño considerable, ideales para editarlas, recortarlas, retocarlas a nuestro gusto, ya que disponen de licencias de libre uso y modificación tanto a nivel personal como comercial, por lo que cojamos la que cojamos de su parte gratuita, podremos estar tranquilos. Es recomendable realizar las búsquedas en inglés, nos mostrará más resultados, con diferencia.

6. Elección de colores - Colourlovers.com
Una impresionante web en la que encontraremos de todo lo relacionado con el mundo del color. Pero lo que nos interesa a nosotros como diseñadores web, es que hay miles de paletas generadas por la propia página y los usuarios de la misma, que además de poderlas ver, también podremos descargarlas en el formato que deseemos para así usarla en cualquier programa de diseño. Está realmente bien por que son, en su mayoría, paletas con colores bien equilibrados. Podemos encontrar sin problema la combinación que se acerque más a lo que tenemos en mente.

Con estas sencillas herramientas, creo que es posible dar el paso de la mente a la pantalla.

No hay comentarios:

Publicar un comentario

Comenta aquí lo que quieras