Diseño Web: 10 recursos on-line imprescindibles

Como diseñador web, una de las cosas que agradezco de vez en cuando es una lista, decálogo o pentálogo, de recursos para mejorar mi trabajo. Normalmente siempre se puede sacar algo de ellos. En agradecimiento, pongo aquí diez de las utilidades que uso a menudo en mi trabajo, por si alguien no las conociera. Si así fuera, os recomiendo que las probéis.

¡Contad vuestra experiencia u opinad!

¡Los comentarios son siempre bienvenidos!

 

1) Seleccionar juegos de color o temas

Una de las problemáticas, de los retos, de las bases de un buen diseño web es el juego de colores que se utilicen. Para ello es bueno leer teoría y tener en cuenta algún software especializado. Hay multitud de recursos Para escoger colores.

Uno de los mejores es http://colorschemedesigner.com/, que nos permite ver cómo queda el juego de colores escogido, exportarlo, crear paletas de Photoshop, etc. Además nos permite crear varias combinaciones de dos, tres o más contrarios o afines.

Color Scheme Designer

Color Scheme Designer con el color del Donkey Kong

2) Crear un favicon

Crear favicons es una sencilla tarea que, si no se tienen las herramientas adecuadas, puede hacernos perder mucho tiempo. Lo mejor es ir a una de las muchas herramientas on-line para ello. Un buen ejemplo es http://convertico.com/. Simplemente escogemos la imagen que queremos que nos represente, accedemos a esta herramienta y creamos el juego de iconos. ¡Un minuto!

Convertico

Utilizando Convertico para nuestro favicon

3) Utilizar iconos web

Utilizar la fuente de Font Awesome para crear iconos en la web es uno de los avances en diseño web que más contento estoy de haber descubierto estos últimos meses. Se acabó el ir creando gifs o bajando juegos de imágenes, aplicarles filtros o cambiar colores en Photoshop, crear el hover… SI utilizamos esta fuente de iconos, los iconos serán ahora texto, de manera que cambio de color, de tamaño, de imagen, etc., es ya cuestión de una línea de css.

La selección de iconos es también espectacular, y se va renovando a menudo. Un imprescindible, especialmente si llevais una web de gestión.

Font Awesome

Una pequeña parte de los iconos disponibles en Font Awesome

¡Actualización! – Desde WordPress 3.6, recién salida del horno, los usuarios de WordPress (como yo mismo) contamos ya en el estándar con un paquete de iconos desde fuente: Genericons.

4) Añadir fuentes a nuestra web

Utilizar fuentes alternativas a las estándares del ordenador es ya algo bien establecido en el diseño web. Hay varios recursos, y también pueden embeberse en el servidor. Sin embargo, para salir rápidamente del paso o para iniciarse en la revolución tipográfica del diseño web, hay que ir, cómo no, al emperador: http://www.google.com/fonts/

Google Fonts

Primeras fuentes disponibles en Google Fonts

5) Generadores de CSS

La revolución en CSS, el nuevo estándar CSS3, sigue avanzando y cambiando la manera de crear diseños webs o incluso de entender el concepto de interacción. Para generar complejos diseños en css lo mejor, de nuevo, es irse a la nube y seleccionar generadores de css3, cuanto más especializados mejor.

Para que os hagáis una idea si no los conocéis, podéis probar un generador de botones que contiene también la opción de hover y, muy importante cada vez más, transiciones: http://www.cssdrive.com/css3button/. También podéis explorar la generación de degradados o gradients, que está adquiriendo en el estándard css una gran complejidad: http://www.colorzilla.com/gradient-editor/.

Generación de degradado css con Colorzilla

Generación de degradado css con Colorzilla

6) Comprobar responsiveness: Responsinator

Poder ver rápidamente cómo queda nuestra página en diferentes resoluciones, ya sea tablet, teléfono, pantallas antiguas, panorámicas, etc., es cada vez más necesario. Así, cada vez hay más herramientas: desde el Emulador del Chrome hasta software especializado. Sin embargo, Responsinator sigue siendo un clásico y, para algunos, un imprescindible.

Responsinator

Vista de nuestra página en Responsinator

7) Las cheat sheets

Si hablábamos antes de qué importante es el nuevo estándar de css para el diseño, no tardamos en darnos cuenta de que todavía más importante lo es para que la página quede sólida, en diseño y en cimientos a la par. Para ello hay que tener muy claras una serie de reglas y todas las posibilidades más importantes, especialmente en cuanto a jerarquías, valores por defecto o posicionamientos relativos.

Para ello, no viene mal tener presentes una de las hojas-resumen que proliferan en la red. Algunos las tienen colgadas en su estudio. Aquí tenéis una buena selección (cuidado, algunos son de pago): http://www.elwebmaster.com/general/14-cheat-sheets-html-css-javascript

Chuleta de CSS

Chuleta de CSS

8) Texturas gratis

Cuando hablamos de diseño, hablamos también de texturas, incluso en la web. Poder dar textura a un background general, a uno parcial, a una sombra, etc., es algo que muchas veces marcará la diferencia, aunque sea difícil dar con el punto exacto de uso. Para ello se requiere experiencia y trabajo. Y para ello, es imprescindible poder recurrir a un banco de imágenes de texturas de uso libre. Y este es uno de los mejores: Freestocktextures.com.

Y, por supuesto, en versión más modesta, nuestra propia selección de texturas gratis.

Freestocktextures

Freestocktextures

9) Fotos de uso libre

Lo mismo que ocurre con las texturas, tanto más con las imágenes. Es importante, sobre todo si estamos diseñando para empresas, tener muy en cuenta que la vulneración del copyright puede ser un problema grave, especialmente si la empresa es grande.

De manera que los bancos de imágenes libres de uso es un recurso imprescindible, y, como tal, hay muchas. Everystockphoto es, probablemente, una de las más utilizadas. También podemos echar un vistazo a FreefotoPhotorackFreepixels o 123rf.com.

Everystockphoto

Everystockphoto

 10) Comprobar la velocidad de carga de nuestra web

Y alejándonos un poco del diseño y la maquetación, pero a tener en cuenta siempre, y en relación con las imágenes: ¿cuán óptima es la velocidad de carga de nuestra página? Es difícil encontrar el equilibrio entre una buena calidad y riqueza de imágenes y una carga rápida (uno de los primeros consejos que te dan los de Google AdSense para optimizar tu sitio). Una de las mejores herramientas es Pingdom, y una impecable introducción a esta herramienta la podéis encontrar en http://blogueaygana.com/como-medir-velocidad-carga/.

 

 

Leave a Reply