sábado, 7 de diciembre de 2013

Herramientas gratuitas para elegir los colores de nuestra web

Uno de los aspectos esenciales para garantizar una buena experiencia de usuario es elegir una combinación de colores adecuada para nuestra web. El esquema de colores de una web ayuda a crear su propia identidad, por tanto no debe dejarse nunca a la improvisación.

A continuación, se presentan algunas herramientas que nos pueden ayudar en la elección de los colores de nuestro site:

Kuler

Es una de las mejores herramientas de creación de esquemas de color para la web. Nos ofrece infinidad de combinaciones predefinidas de colores, y además podemos crear nuestras propias combinaciones a través de una interfaz bastante intuitiva y sencilla. Para descargar los esquemas de color, necesitamos darnos de alta mediante el correo electrónico. Lo más interesante, la opción de buscar las combinaciones de colores por palabra clave (Mediterranian en la siguiente imagen).  

Experiencia de usuario mediterránea a través de Kuler

Color Scheme Design

Una interfaz sencilla para crear esquemas de color web que nos ofrece una herramienta imprescindible para garantizar la accesibilidad de nuestra web: una simulación de la visión de las combinaciones de colores para personas con diferentes problemas de visión. No necesitamos auntenticarte para descargar tus combinaciones. 

Color Scheme Designer. Combinar colores en la web teniendo en cuenta la accesibilidad

Web Colour Data

Esta herramienta nos permite extraer la combinación de colores de una web ya existente simplemente introduciendo la url. Si una web nos gusta, podemos inspirarnos en su esquema de colores para crear el nuestro propio.

Extrae la paleta de colores de cualquier web con Web Colour Data


Colour Lovers

Una comunidad de aficionados al diseño de colores. Lo más interesante de esta herramienta es la opción de consultar las últimas tendencias en combinaciones de colores para poder inspirarnos para nuestro propio site.
Colour Lovers, últimas tendencias en combinación de colores





miércoles, 4 de diciembre de 2013

Una buena experiencia de usuario implica prototipar: WireframePro, herramienta gratuita de prototipado


Una de las claves de diseñar una web que genere una buena experiencia de usuario es el hecho de trabajar con prototipos y wireframes.


El hecho de ver estos prototipos de la web permite al equipo de diseño: 



  • Ver implementada la arquitectura de la web en un boceto
  • Ver implementadas las bases del diseño web en un boceto
  • Empezar a testear con usuarios potenciales la funcionalidad y usabilidad de la web


Esto ayuda al equipo de diseño de la web a ir mejorando la interfaz durante todo el proceso de elaboración (diseño incremental).


WireframePro de Mockflow es una herramienta gratuita (podemos abocetar webs de hasta 4 páginas, para diseñar webs más complejas tendremos que usar la versión de pago).


¿Cómo funciona WireframePro?

Para empezar a trabajar con esta herramienta nos encontramos con un lienzo en blanco sobre el que imnplementaremos nuestro boceto:

Para ello, empezaremos a agregar elementos prediseñados que encontramos en el panel a la derecha de la pantalla arrastrándolos hacia el centro del lienzo. Antes que nada, para favorecer que los elementos del boceto estén centrados os recomiendo añadir una cuadrícula de fondo a través del icono Grid situado en la parte inferior del menú:


Una vez tengamos un objeto en el lienzo podremos cambiar colores, disposición, añadir texto... A continuación, os muestro un boceto muy sencillo elaborado para una web de recetas:

!Os animo a que probéis la herramienta!

* Para más información, podéis visitar el blog Apunts Digitals de mi compañera de master Marina Vallès.

Artículos relacionados

Related Posts Plugin for WordPress, Blogger...