Color Scheme Designer es una gran herramienta gratuita para elegir nuestro esquema o paleta de colores, creada por Petr Stanicek.

Personalmente me encanta, me permite encontrar los colores apropiados generar esquemas muy bacanos y armónicos, además de poder previsualizar el esquema aplicado en dos páginas de ejemplo, tanto clara como obscura, incluso permite guardar (Scheme ID ) en la misma web o exportar la paleta, en CSS/HTML, XML, Texto plano o como paleta para GIMP o Photoshop.

Entonces ya sabes, si necesitas encontrar los colores a tu medida, Color Scheme Designer de seguro te será útil.

Entradas relacionadas

• Twitter limitará el acceso a su API (0)
• Herramientas y recursos para hacer el diseño y desarrollo web más fácil (2)
• AllSilhouettes.com: siluetas en vector gratuitas para tus diseños (0)
• Clearfix Labs (2)
• 57+ soluciones Slideshow, Lightbox y Galerías de Imágenes totalmente gratuitas (0)

“Usabilidad es un atributo de calidad que evalúa que tan fácil de usar son las interfaces de usuario. La palabra usabilidad también se refiere a los métodos para mejorar la facilidad de uso durante el proceso de diseño.

La usabilidad es definida por 5 componentes de calidad:

- Aprendizaje: ¿Que tan fácil es para un usuario completar tareas básicas la primera vez que se encuentran con el diseño?
- Eficiencia: Una vez que el usuario haya aprendido el diseño, ¿que tan rápido puede ejecutar las tareas?
- Memorabilidad: Cuando los usuarios regresan al diseño después de un periodo de tiempo sin usarlo, ¿que tan fácil pueden restablecer la destreza de uso?
- Errores: ¿Cuantos errores hacen los usuarios? ¿Que tan severo son los errores? ¿Que tan fácil pueden recobrarse de los errores?
- Satisfacción: ¿Que tan placentero es usar el diseño?”

- Jakob Nielsen en Usability 101: Introduction to Usability.

En palabras sencillas la usabilidad se refiere a que tan fácil es para los usuarios usar cierta interfaz y que tan eficientemente pueden hacer las tareas básicas para las cuales está diseñada la interfaz, esto quiere decir que para que un sitio web sea usable debe permitir al usuario hacer las cosas que desea de la forma más sencilla y rápida posible.

“Todo debería ser hecho tan simple como sea posible, pero no más simple.”
- Albert Einstein

Con lo popular e importante que se ha vuelto la Internet para los negocios, se hace cada vez más necesario que un sitio web sea usable porque con tantos otros sitios web que ofrecen lo mismo o algo similar (mucha oferta), ¿por que un usuario gastaría tiempo en aprender a usar nuestro sitio si ya sabe usar los demás?. Además, se sabe que el usuario común de Internet no gasta mucho tiempo en un sitio si no consigue llamarle la atención, es más, en promedio los usuarios gastan 30 segundos si llegan a la página principal de un sitio antes de decidir si se quedan o se van y gastan unos 60 segundos si llegan a una página interior antes de decidir si siguen navegando el sitio o se van (Prioritazing Web Usability de Jakob Nielsen, pág 33).

Algunos tips para mejorar la usabilidad en tu sitio web:

1. No abrir links en una nueva pestaña o ventana del navegador: esto es algo que a mi personalmente me molesta bastante y es que si el usuario desea abrir el link en una nueva ventana puede hacerlo (click derecho –> abrir en nueva…). Además, al hacer esto, estarás rompiendo el botón de hacia atrás del navegador que es la segunda funcionalidad del navegador más usada y confundirás a más de un usuario.

Como una excepción a esta regla son los links hacia pdfs o documentos similares pues la gente está acostumbrada a cerrarlos al acabar de leerlos en vez de usar el botón de hacia atras pero se considera buena práctica avisar que el link se abrirá en una nueva ventana y dar una idea del tamaño del mismo por si el usuario prefiere descargarlo que es la opción más común.

2. Respetar las convenciones de la web: los usuarios gastan más tiempo en otros sitios web que en el tuyo, así que en lo posible respeta las convenciones que hay en la Internet pues la gente tiende a esperar comportamientos similares, por ejemplo, una convención es que si una palabra o frase se encuentra coloreada o subrayada dentro de un texto se espera que sea un link.

Otras convenciones comunes son: que el logo del sitio, normalmente, va en la parte superior izquierda del sitio web y es un link que dirige a la página principal, también se espera que la búsqueda se encuentre en la parte superior de la página, normalmente, del lado derecho.

3. Mantener la consistencia durante todo el sitio web: no solo esto le ayudará al usuario a reconocer que sigue en el mismo sitio web sino que también le ayudará a ubicarse mejor y hacer ciertas tareas con mayor facilidad a medida que visita más veces o dura más tiempo en el mismo sitio web. Una mala práctica aquí es, por ejemplo, cuando presionas un link del menú principal que en la siguiente página esté una sección de subcategorias donde estaba el menú principal, ¿Quien confiaría en un mapa donde aparecen y desaparecen secciones a medida que avanza?.

4. Dar retroalimentación al usuario: si, por ejemplo, un usuario se toma el tiempo de llenar un formulario y al oprimir el botón de enviar es redireccionado a la misma página del formulario entonces el usuario no sabe si fue que lleno mal el formulario, hubo un error o se envió exitosamente el mismo. Otro ejemplo es cuando la página debe cargar antes de ser mostrada al usuario ya que puede ser una aplicación web con muchos datos en cierta sección, si no se le dice al usuario que está cargando, éste puede pensar que la página está dañada o algo así, pero también es oportuno avisarle cuanto falta para que esté lista o el usuario puede pensar que su computador se daño si se demora mucho en cargar, una forma para mejorar esto es ofrecer algo como la barra de gmail que se va llenando mediante va cargando la página.

Finalmente, vale la pena recalcar que aunque existen ciertas convenciones y estándares, solo hay un secreto para crear la mejor experiencia del usuario y es que depende… depende de quien es tu audiencia objetiva, no es lo mismo diseñar un sitio web de juegos para niños pequeños que diseñar un sitio web de juegos para adolescentes.

Entradas relacionadas

• WP-ClickMap: Plugin para WordPress para seguimiento de clicks (0)
• Minify: Combina y comprime archivos JavaScript o CSS (0)
• Labs (1)
• favicon.cc: Crea tus favicons en linea (0)
• 40 Hojas de trucos para desarrolladores web (0)

Colourlovers:

Es un recurso que monitorea las paletas de colores que están de moda y donde puedes encontrar una gran cantidad de colores, paletas y patrones para inspirarte en tu diseño y ver que combinaciones de colores funcionan y cuales no.

Snippely

Es una aplicación hecha en adobe air que te permite mantener ordenada tu colección de códigos, haciendo la reutilización del mismo mucho más fácil. Algunos ejemplos de los códigos que tengo guardados son:

Para centrar una página horizontalmente con css:

margin:0 auto;

Para eliminar los valores por defecto de los navegadores en los elementos de una página (reseteo):

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;}

Plantilla básica de una página html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<title>title</title>
<link rel="shortcut icon" href="favicon.ico"
type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css" />
</head><body></body>
</html> 

También puedes ver Six Ways to Style Blockquotes para encontrar varios códigos para estilizar las frases en tu sitio web.

Recursos para usar en tus proyectos comerciales

Mantengo mi propia colección de recursos para usos comerciales que incluye iconos, texturas, vectores, etc y creó que para cualquier diseñador es importante pues es un gran ahorro de trabajo poder usar arte ya hecha de gran calidad, algunos de mis colecciones favoritas son:

• Free High Res Rough Textures: excelentes texturas de alta calidad.
• freebiesdock: Un muy buen sitio para encontrar iconos y themes gratuitos.
• Friday Freebies: Flavours Icon Set And Cute Tweeters Icon Set: me fascinan sobretodo eson iconos de twitter!
• Free Icons, Photoshop Brushes and a WordPress Theme: algunos iconos y pinceles gratuitos.

Notepad++

Es un editor de código gratuito para Windows que ofrece la posibilidad de auto-completar código por ti, diferenciar distintos lenguajes de programación como php, css, html, entre otros. Puede que está herramienta no sea tan práctica para todo diseñador web pero para la persona que le guste ensuciarse las manos creó que será una buena herramienta de ayuda pues es muy simple y ofrece buena funcionalidad.

¿Usas alguna otra aplicación buena? ¿Conoces de algún recurso interesante? dejanos saber con un comentario.

Entradas relacionadas

• favicon.cc: Crea tus favicons en linea (0)
• Diseña tus paletas de colores con Color Scheme Designer (2)
• Bespin: IDE Cloud para Desarrollo Web de Mozilla Labs (3)
• 40 Hojas de trucos para desarrolladores web (0)
• 15 brochas grunge para Photoshop (0)

AllSilhouettes.com es un sitio en donde encontrarás muchas siluetas listas para usar, mayoritariamente gratuitas en formato vectorial, así que si necesitas siluetas de seguro este es tu sitio.

Me gustó muchísimo la colección de monstruos mitológicos de Gloomus.com, pues me encantan los grifos, ¿Y a ti cual te ha sido útil?.

Entradas relacionadas

• Herramientas y recursos para hacer el diseño y desarrollo web más fácil (2)
• favicon.cc: Crea tus favicons en linea (0)
• Labs (1)
• Diseña tus paletas de colores con Color Scheme Designer (2)
• 40 Hojas de trucos para desarrolladores web (0)

favicon.cc es una aplicación web que te permite crear (como su nombre lo indica) favicons (¿Qué es un favicon?) gratuitamente, disponiendo de un lienzo en el cual puedes “pintar” a tu gusto tu icono para luego descargarlo y usarlo en tu web, con vista previa “en vivo” en tu navegador, incluso pues te permite también importar una imagen existente y generar tu favicon.

Una funcionalidad que me parece muy atractiva es poder crear favicons animados como este.

Así que ¿que esperas? crea uno y ponlo en los comentarios, si haces uno de Clearfix.net podría reemplazar actual

Entradas relacionadas

• Labs (1)
• Una pequeña mirada a la usabilidad (3)
• Clearfix Labs (2)
• AllSilhouettes.com: siluetas en vector gratuitas para tus diseños (0)
• Twitter limitará el acceso a su API (0)

Para responder a este problema, WebAIM esta desarrollando una encuesta para usuarios de screen readers. La intención es averiguar como este tipo de usuarios usa la web y sus preferencias. Si usas software screen reader, considera leer el post de la encuesta y contestarla.

Fuente: 456 Brea Street

Entradas relacionadas

• No hay entradas relacionadas.

Las brochas grunge o brushes grunge son utilizadas para crear efectos desgastados, tipo piedra, con sensación de descuido, abandono, feos, sucios, arrugados y desordenados.

En pxforce puedes encontrar una maravillosa lista de 15 brochas para Photoshop, no te las pierdas!.

Entradas relacionadas

• Herramientas y recursos para hacer el diseño y desarrollo web más fácil (2)
• favicon.cc: Crea tus favicons en linea (0)

1. Create Vimeo-like top navigation
2. CSS Drop-Down Menu Framework
3. JavaScript Dropdown Menu with Multi Levels
4. MenuMatic Recomendado!
5. A circular menu with sub menus
6. Fancy Sliding Menu for Mootools
7. Smooth Navigational Menu
8. Collapsable menu
9. Designing the Digg Header
10. jQuery File Tree

Bonus

11. UvumiTools Dropdown Menu Recomendado! es el que más uso

Ya lo sabes no hay excusa para que tu navegación o menú luzca desanimado

Entradas relacionadas

• Userfly: mira como tus usuarios usan tu web (1)
• WP-ClickMap: Plugin para WordPress para seguimiento de clicks (0)
• JavaScript funcional (0)
• Minify: Combina y comprime archivos JavaScript o CSS (0)
• 57+ soluciones Slideshow, Lightbox y Galerías de Imágenes totalmente gratuitas (0)

Entradas relacionadas

• favicon.cc: Crea tus favicons en linea (0)
• Labs (1)
• Minify: Combina y comprime archivos JavaScript o CSS (0)
• Userfly: mira como tus usuarios usan tu web (1)
• WP-ClickMap: Plugin para WordPress para seguimiento de clicks (0)

Userfly es una aplicación que te permite hacer estos estudios, teóricamente “graba” las acciones que los usuarios realizan en tu sitio permitiéndote saber como usan tu interfaz, ofreciéndote retroalimentación (Feedback) inmediata y sin preguntas, directamente con gente del MundoReal, si aplicas el diseño centrado en el usuario no lo pienses dos veces, daté de alta en la versión gratuita o pregunta los precios si la versión gratuita te queda corta.

Su uso es muy sencillo basta con que incluyas un archivo JavaScript entre el tag HEAD de las páginas que desees evaluar y listo, en tu cuenta de Userfly te mostrará las nuevas capturas realizadas y en que páginas.

Puedes ver como funciona en su demostración o en el siguiente vídeo:

Nota: el video empieza a partir del segundo 50.

userfly.com de Chris Estreich en Vimeo.

Entradas relacionadas

• 10 técnicas para menús multinivel (0)
• 57+ soluciones Slideshow, Lightbox y Galerías de Imágenes totalmente gratuitas (0)
• Labs (1)
• JavaScript funcional (0)
• Bespin: IDE Cloud para Desarrollo Web de Mozilla Labs (3)