No importa si estás usando un diseño de 3 columnas o de 2, tienes que escoger que columnas serán contenido y cuales sidebar. ¿Derecha o izquierda? ¿Cuál es mejor?

Como siempre, las respuesta es, depende de tu blog.

¿Por qué el sidebar a la derecha?

Los lectores occidentales leen de izquierda a derecha. Al escanear una página, vamos a escanearla de izquierda a derecha ( y de arriba a abajo?. Si poner tu sidebar a la derecha, la primera cosa que leerán tus visitantes será el contenido.

Muchas personas todavía usan resolución de 800×600. Cuando estás diseñando un tema para tu blog, te sientes tentado por usar una resolución de 1024. Es la resolución ideal para la mayoría de los usuarios.

Sin embargo, algunos aun usan resoluciones de 800×600, y tendrá una molesta barra de desplazamiento horizontal permanentemente. Si tu contenido está a la izquierda, no tendrán que desplazarse a la derecha con la barra para leerlo. La barra de desplazamiento sólo será necesaria para ver el sidebar.

Tu blog tendrá aspecto de blog. Como usuario de Blogger, prefiero leer un artículo en un blog que un sitio web. Me encanta la naturaleza de los blogs personales, la forma en que está escrito por personas que verdaderamente están entusiasmadas por sus temas, y las interacciones sociales posibles. Muchos bloggers sienten lo mismo.

Leer más…

No hay mejor forma de aprender bien que aprender de la gente que ha tenido éxito. Hemos entrevistado a un buen número de gurús del diseño web dispuestos a compartir experiencias y dar buenos consejos. Aquí abajo están los 21 consejos útiles del diseño web para principiantes.

Aprende HTML. Si estas escribiendo contenido para la web, va a ser presentado en HTML. No importa que haya por detrás, PHP, .NET, ASP, Java, lo que sea: Todo al final produce HTML. Como programador, escribir codigo HTML limpio te asegura que tus sitios no se rompan. Como diseñador, saber HTML ayuda a conocer cómo tus diseños pueden ser realizados. Conocer como son los ladrillos de tu edificio es crucial para tener éxito.
- Dan Mall

Presta atención en particular a la tipografía. Independientemente de que los productos en papel están a la baja, y lo de que “una oficina sin papeles” llegará algún día, el diseño del logo siempre será necesario, así que ve por él.

- David Airey

Aprende todo lo que puedas sobre web, diseño, usabilidad, accesibilidad, progrmación, porque todas estas disciplinas te ayudarán en el mismo punto. Las cosas que aprendes para crear cosas de la nada en la web son ilimitadas.
- Mike Rundle

Ser bueno nunca es suficiente. Tienes que ser capaz de justificar tus decisiones más allá del “creo que se ve bien”. Especialízate.

- Lea Alcantara

Guía a tu usuarios, no los atosigues

- Rob Weychert

Los usuarios pueden ver la diferencia (incluso subconscientemente) entre baja y alta calidad de diseño, fácil o difícil de usar, por lo que pon siempre un esfuerzo adicional para hacer que tu producto sea mucho mejor de lo que habría sido.
- Dan Rubin

1. ¡Ama lo que haces!
2. Nunca dejes de aprender.
4. Ten un buen portfolio.
5. Mantente conectado.
6. Organiza tu tiempo.
7. Construye una buena reputación.
- Mr Roggers

Leer más…

Fabio Zendhi nos presenta iCarousel, un script bastante cómodo para hacer cajas tipo carrusel, en las que puedes mostrar textos o imágenes. Tiene varios estilos y aparte un CSS que podemos modificar.

En palabras del autor:

Uno de los problemas mas comunes de los desarrolladores web está relacionado con rotar continuamente un fragmento de contenido. Puede ser una presentación de titulares o una lista de miniaturas. La naturaleza de las cosas que rotan no importa demasiado aquí porque todos estos tipos de aplicaciones tienen una cosa en común: Rotar. Este objetivo se puede alcanzar de diferentes formas, con fundidos o deslizando. Aquí es donde iCaruosel tiene utilidad. Es un paso adelante tratando de generalizar todos estos tipos de widgets generando una presentación atractiva y de fácil construcción.

Uno de los objetivos de la mayoría de los diseñadores es hacer que sus proyectos destaquen de alguna manera. Crear un sitio único entre tantos nuevos cada dia es una tarea cada vez más difícil. Cada diseñador tiene un enfoque diferente. Estas son 6 formas de hacer que tu sitio destaque por encima de los demás:

1. Grandes imágenes de fondo

Uno de los métodos más sencillos de crear un diseño único es el de usar una imagen de fondo de buenas proporciones. Las imágenes pueden mejorar el diseño de la página, hacerla más completa y visualmente más atractiva. Con CSS, poner una imagen de fondo y cambiarla por otra es muy fácil y puede cambiar por completo el aspecto de una web a otra.

Webdesignerwall es un conocido sitio que hace uso de un fondo bastante grande. La estructura del sitio es bastante común, 2 columnas, pero la imagen de fondo le da a la página un toque que se aleja de lo estándar.

Puedes ver algunos diseños con grandes imágenes de fondo en Big, Bold Backgrounds

2. Layouts únicos

La mayoría de los sitios usa un montón de patrones comunes. Puedes destacar de la multitud haciendo una estructura de página fuera de lo normal. El diseño de una página tiene que ser usable y eficaz, así que asegúrate de elaborar un diseño útil para ti y para el usuario.

Leer más…

Muchos habréis visto la evolución del logo/icono/splash screen de Photoshop a lo largo de su historia, yo empecé con la versión 4 o 5, no recuerdo ya. En esta página podéis ver alguna de estas imágenes de versiones antiguas de Photoshop. Y esta es una imagen de la evolución de la barra de herramientas.

Desde la versión 1.0 se ha usado el icono de una imagen con un ojo enmarcado. Lo que no sabía es que las versiones anteriores a esta, año 1989 supongo, el icono del programa era literalmente “Photoshop” o sea tienda de fotos:

En este icono se puede ver una tienda con un señor y una caja registradora. Por lo visto la parte de arriba que pone 1HR se traduce a “En una hora” haciendo referencia a los revelados de fotos, y la parte de abajo pues es la tienda en si.

Aquí teneis el logo en color del programa, versión 0.87, y el icono que se usaba para los documentos, un carrete de revelado. Así como los iconos para preferencias y plugins.

Y aqúi una captura de pantalla del primer photoshop en Mac.

Leer más…

En mi opinión el diseño de iconos se encuentra en un periodo de transición. Por un lado, cada vez hay más pantallas con resoluciones mayores, de ahí al aumento del tamaño de los iconos. Pero también tenemos los iconos de 16×16 e incluso más pequeños, que siguen siendo ampliamente utilizados. Así que estos son los errores más comunes en el diseño de iconos…

1. Insuficiente diferenciación entre iconos

Muchas veces en un set de iconos tenemos muchos que se parecen y es bastante difícil distinguir uno de otro. Si no lees las leyendas que lo acompañan, fácilmente te equivocarás.

Iconos de la sección de Utilidades en Mac OSX. Siempre me confundo y lanzo la aplicación que no toca. Este problema se hace mas gordo cuando los iconos son de tamaño reducido.

El problema se agrava más cuando se reduce el tamaño de los iconos.

2. Demasiados elementos en un mismo icono

Cuanto más simple sea el icono, mejor. Es preferible mantener el número de elementos dentro del icono al mínimo.

Sin embargo, los diseñadores de Microsoft, inspirados por el nuevo formato de los iconos de Windows Vista, decidieron hincharlos para justificar el hinchado presupuesto.

Leer más…

Empiezo una serie de artículos dedicados a errores comunes y algunos no tanto en el diseño web. Aunque intentaré no solo hacer una lista de cosas que no conviene hacer, sino de dar soluciones y alternativas. Por supuesto, estoy abierto a correcciones y aportaciones.

1. No confundas al usuario con varias versiones de la página

EL ERROR

Muchas veces se usa una página de inicio, de entrada, intros o splash screen, como lo queramos llamar. En ella en ocasiones se da a elegir al usuario que versión de la página quiere que se muestre. Que si resolución a 800×600, 1024×768, en HTML, en versión Flash, si tiene un router de 56kbps, 128kbps, que idioma hablas o si está sentado en una silla de mimbre. No hace falta decir que preguntar sobre que navegador estás usando y en base a ello mostrar una página u otra es intolerable.

El usuario no tiene porque saber nada de eso, y aunque lo supiese, lo que quiere es que se muestre el contenido de la web y te dejes de hacerle preguntas.

Leer más…

Como diseñador de páginas web puedes enfrentarte al reto de mostrar tu trabajo y habilidades a los demás. Si es este el caso, aquí hay una lista de 11 cosas diferentes que puedes hacer para llamar la atención.

1. Enviar tus diseños a galerías CSS

Las galerías CSS muestran diseños de alto nivel, puedes enviar el tuyo para que puedan considerar su inclusión. Las más importantes son (CSS Beauty, CSS Vault, CSS Drive, etc.), páginas que tienen mucha visibilidad. Además hay un gran número de galerías especializadas como Light on Dark, eduStyle, No Resolution, y Horizontal Way.

Nota del traductor: Una que suelo visitar con frecuencia y que me gusta mucho es WebCreme.

2. Empieza un blog

Como diseñador, mantener un blog puede ser una excelente manera de aumentar tu visibilidad. Las entradas del blog te darán la posibilidad de compartir tus conocimientos con los lectores, fomentar las visitas a tu web, incrementar el tráfico de los motores de búsqueda, e incluso puedes usar el blog para promocionar tus servicios y mostrar tus últimos proyectos. Escribir y mantener un blog lleva tiempo, pero te darás cuenta que la visibilidad adicional que proporciona vale la pena.

Leer más…

Como todos saben, los diseñadores gráficos son la razón por la que hay tantas guerras y caos en el mundo. Se meten en nuestras mentes con los mensajes subliminales que usan en sus diseños, nos obligan a gastar nuestro dinero en productos inútiles, nos llevan a la depresión y a cometer actos violentos y claro, la mayoría de los diseñadores son comunistas.

Así que para salvar al mundo de los malvados diseñadores gráficos he creado esta lista de cosas que podemos hacer para asegurarnos de acabar con ellos y obligarlos a dejar su profesión… por siempre!!!!

1. Microsoft Office. Cuando tengas que mandarle un archivo a un diseñador grafico asegúrate que este hecho en algún programa de Microsoft Office, versión para PC de preferencia. Si le tienes que mandar imágenes asegúrate que estas estén incrustadas en un archivo de Office como Word o PowerPoint, esto lo volverá loco. No se te olvide bajarle la resolución lo mas que puedas a la imagen de esa manera tendrá que llamarte para pedirte una en mas alta resolución y cuando lo haga, mándale una aun más pequeña. Si usas email para enviársela olvida adjuntar el archivo un par de veces.

2. Fuentes. (Tipos de letra) Si el diseñador escoge Helvética, tú pídele Arial. Si él escoge Arial pídele Comic Sans. Si él escoge Comic Sans quiere decir que ya está medio loco y tu misión será más fácil.

3. Más es mejor. Digamos que mandaste a diseñar un volante. Los diseñadores gráficos siempre tratan de dejar espacio en blanco por todas partes: usan márgenes grandes, mucho espacio entre letras y entre las líneas de un párrafo. Ellos dicen que esto hace que sea más fácil de leer y que el diseño se verá más limpio y profesional. Mentira! La razón por la cual hacen esto es para que tu documento sea más grande y costoso. ¿Por qué hacen esto? Porque los diseñadores gráficos odian a la gente… también comen bebes…crudos.

Leer más…

Muchas veces buscamos algún icono en concreto, con algo de calidad si puede ser, y varios modelos de diseño para escoger. Si en tus enlaces de sets de iconos no encuentras lo que buscas, prueba con alguno de estos buscadores a ver si tienes más suerte:

De los tres, el buscador que mas me gusta es SearchIcon, por cantidad y calidad. Iconfinder no está mal tampoco, pero tiene pocos iconos aun. Por último iconlet, que tiene bastantes pero no suelen ser iconos de tamaños grandes.

Estos enlaces van de cabeza al ikkaro.