6 Herramientas útiles para realizar un diseño web

En un tutorial habíamos visto cómo realizar paso a paso un diseño web en photoshop cs6. En este artículo vamos a ver algunas herramientas que existen en internet y que nos facilitará muy aparte de crear el diseño en sí. Por ejemplo, qué colores pueden combinar para la web, como el fondo, enlaces, etc.; qué fuentes utilizar y qué texto hay que poner para rellenarlo de alguna manera. Son preguntas que uno se va haciendo conforme se está realizando el diseño y que aquí despejaremos algunas de ellas.

Los colores

Los colores son importantes a la hora de realizar un diseño, saber combinar ciertos colores para encontrar el punto exacto de tonos es indispensable.

Los colores que usaremos tienen que ir según la temática de la web, por ejemplo, si es una web de noticias básicamente de fondo sería blanco, los enlaces de otro color y las cajas o menú diferentes, algo serio. Si es un diseño para un sitio de juegos pues los colores tienen que ser más llamativos e impactantes.

En colorexplorer encontramos una herramienta que nos ayuda a elegir colores. Si, al mover la barra nos indica un color, en los siguientes cuadros nos indicará otros colores que pueden combinar con el color escogido y así colocarlos en enlaces, textos o como fondo.

Definitivamente es una gran herramienta.

Buscar fuentes

Sabemos que identificar buenas fuentes para nuestro texto o logo es también importante. Pero lo malo es que cuando entramos a alguna web que nos brinde fuentes gratuitas, en la imagen de la fuente nos muestra el texto de la fuente. Por ejemplo, si la fuente se llama “orgh”, entonces la imagen mostrará un texto con el nombre de la fuente y si queremos saber cómo se verá con nuestro texto tenemos que descargarlo e instalarlo y probar en el programa, todo un proceso que nos tomaría mucho tiempo. Sin embargo dafont, un sitio que ofrece muchas fuentes gratuitas, podemos buscar diversas fuentes con un texto específico, por ejemplo el nombre de nuestra web, y así ver si nos agrada antes de ser descargada.

Buscar fuentes ya instaladas

Hemos visto cómo colocar nuestro texto y buscar fuentes para descargarlo de una manera rápida, pero, ¿qué pasa cuando queremos saber cómo se verá cierto texto con nuestras fuentes ya instaladas en nuestra computadora?. Para eso existe wordmark.

En este sitio simplemente lo que tenemos que hacer es colocar el texto que queramos y presionar “enter”, esperamos unos segundos y aparecerá una lista con el texto colocado en todas las fuentes de nuestra computadora. Simplement… ¡increíble!

Favicon

Todo sitio web debe contar con un favicon. ¿Pero qué es exactamente un favicon? Un favicon es un icono de página, una imagen pequeña, de 16 x 16 píxeles, que aparece en la parte superior del navegador, exactamente al costado del título. En algunos navegadores de versiones anteriores no es posible visualizarlas pero siempre es necesario tener el favicon para la identificación de nuestro sitio.

En favigen podemos subir, por ejemplo, nuestro logo y el programa lo achicará para luego descargarlo e insertar en nuestro sitio web.

Iconos de las redes sociales

Actualmente las redes sociales es un factor importante en la promoción de un sitio web por lo que en casi todos los sitios lo llevan. Entre los iconos más usados son de facebook, twitter o google.

En iconfinder podemos realizar búsquedas de cientos de iconos de las redes sociales, pero no sólo eso, también podemos buscarlos con fondo transparente, un aspecto importante y que todo diseñador quiere.

Rellenar de texto

¿Algunas vez ustedes han visto plantillas para páginas en wordpress o blogger? seguro que sí y muchas de ellas tienen bastante textos y claro, es necesario poder ver el diseño completo de la página, con contenido.

Para rellenar de texto algún diseño web existe lipsum. Este sitio ofrece una cierta cantidad, de párrafos, palabras, bytes o listas para copiar y rellenar las partes que necesitemos.

Conseguir imágenes

Así como necesitamos textos para rellenar la página, también necesitamos imágenes. Para eso tenemos a lorempixel. En este sitio podemos encontrar un espacio que nos permitirá escoger imágenes de diversos tamaños y colores.

Por ejemplo tenemos este enlace http://lorempixel.com/400/200. Aquí podemos ver una imagen de 400 x 200 píxeles. Si actualizamos (F5) nos mostrará una imagen diferente. Sólo es cuestión de copiar la imagen y pegarlo en el diseño que estemos realizando.

Bueno esos son algunas herramientas que estoy seguro les ayudará cuando comiencen a crear su diseño web.