Consejos para diseñar una Web
Voy a identificar algunas de las áreas en que el diseño de un sitio puede ser un desastre y vemos por qué son importantes para conseguir el éxito online.
Selección de Colores
El color es importante porque define la atmósfera y la personalidad de la página. Un diseñador debe empezar con un color de base y trabajar a partir de ahí. La diversión comienza en el momento de combinar colores, logos, fondos, textos,etc. Una paleta de colores armónica es esencial para conservar la concentración del usuario en la página. La elección erronea de unos colores que no combinen bien pueden disuadir a usuario de seguir adelante visitando nuestro sitio.
Lo mas común a la hora de crear nuestro esquema de colores, es limitarnos a dos o tres colores además del blanco, claro. Una vez elegida nuestra paleta cromática, debemos identificar claramente cual va a ser nuestro color principal y dominante y cuales van a ser un simple complemento.
Para poder elegir unos buenos colores puedes basarte en la teoría de color explicada aquí: guia-basica-para-la-combinacion-de-colores , pero si no encuentras la inspiración suficiente para elegir una paleta armónica, puedes buscar ayuda online con Adobe Kuler 
(kuler.adobe.com) que es un generador de paletas de colores online. Desde aquí puedes generar tu propia paleta eligiendo primero una regla (análoga, Monocromática, Tríada o Personal) y seleccionando luego en la rueda de colores para conseguir la paleta al instante. Otra alternativa es ir al apartado de Created Themes donde hay una gran cantidad de paletas predefinidas. Una solución rápida y simple para conseguir un esquema de color perfecto es el de generarla mediante la carga de una imagen. El usuario carga una imagen y selecciona un modo (Brillante, Profundo o Kuler). Otra manera de crear una paleta de color basandonos en una imagen usando photoshop se explica aquí: crear-paleta-de-colores-en-photoshop-desde-imagen.
Construcción y Organización
Las páginas web pueden estructurarse de muchos modos: 1 columna, 2 columnas, 3 columnas, barra lateral izquierda o derecha, alineación izquierda, centrada, líquida, etc.
Antes de comenzar a introducir contenidos, es muy importante pararse a pensar cómo deben presentarse estos contenidos. Primero hay que pensar en las diferentes resoluciones de pantalla y las diferentes opciones que se nos presentan. Una columna central y una estructura fluída son dos buenas opciones. Una vez tengamos la estructura decidida hay que pensar en la posición de los elementos (encabezado, pie, barra lateral, columnas…), este apartado está condicionado al típo de contenidos que aparecerán en la web. Lo mas común es que el encabezado ocupe la posición superior y el pie ocupe la posición inferior, respectivamente, y salirse de esta posición tradicional puede perjudicar en la futura navegación del usuario. La barra lateral suele posicionarse a la derecha ya que conseguimos que el usuario haga menos movimientos con el ratón.
Una vez terminada la estructura y posición de elementos hay que detenerse en el flujo de contenidos, teniendo en cuenta que el usuario leerá de izquierda a derecha. Además es muy importante ( Aviso especial para los desarrolladores web y programadores, ya que este punto suelen descuidarlo a menudo) dejar espacio para que los contenidos respiren y evitar comprimirlos demasiado en secciones demasiado pequeñas; El tamaño de la letra debe ser legible, pero nunca enormes, ya que perdería elegancia y poder para destacar la importancia de un texto de otro. Conviene evitar páginas muy largas que obliguen al usuario a largos recorridos.
Navegación
La navegación es un apartado importantísimo una vez el usuario ha llegado a su destino. Los enlaces con los contenidos deben estar visibles y ser intuitivos, no debemos obligar al usuario a pensar y perder tiempo buscando ya que los desconcertamos y abandonarán nuestra web con una mala impresión. Por norma general el usuario no debería de hacer mas de 3 clics para llegar a donde quiera ir. La colocación de los elementos principales de navegación es muy importante, y popularmente se decide por colocarlos en la parte superior de la página y debajo de los encabezados, porque ofrecen un acceso instantáneo a los enlaces y siempre son visibles.
Otra prioridad para nosotros es la disposición uniforme de los elementos de navegación. Al usuario común le gusta encontrar las cosas donde piensan que van a estar y situar estos elementos en otra posición distinta les puede desesperar y confundir.
El nombre de los enlaces debe ser claro y conciso (algo que se cuida poco normalmente), siempre mejor una sola palabra relevante y clara.
Una técnica para evaluar las páginas de una web es un método conocido con el nombre de Navigation Stress Test. El test comporta 3 preguntas básicas: ¿Dónde estoy? , ¿Qué hay aquí? y ¿Adónde puedo ir?. Para saber más, visitar : http://instone.org/navstress.
Enlaces Ausentes/Rotos
Los enlaces son el corazón del sistema de navegación y son la única manera de recorrer un sitio web. El usuario para poder llegar a su destino debe hacer clic sobre un enlace. Por tanto, lo primero que debe de cumplr nuestros enlaces o hipervínculos es estar activos y debe efectivamente llevar a donde se supone que lleva. Claro, no?.
Un enlace roto ocupa espacio inútilmente y da la sensación de que la web no está siendo atendida adecuadamente como merece. Uno al encontrarse una situación así de un enlace roto, inmediatamente tiende a preguntarse ¿qué otras cosas no funcionarán como deberían?.
Una página de Error 404 bien hecha puede ser una buena manera de salir del paso temporalmente pero no podemos tardar en arreglar la situación tan pronto como se pueda.
La colocación y la relevancia de los enlaces es otro punto importante. Por lo general, un motor de búsquedas empezará su análisis en la parte superior de la página e irá bajando hasta los contenidos. Por tanto, los enlaces principales del sitio deben estar cerca de la parte superior del sitio y deben apuntar a contenidos relevantes.
Los enlaces con imagenes son muy populares pero entonces no debemos olvidar nunca incluir el texto ALT para facilitar la accesibilidad y mejorar los resultados de búsquedas; también es importante usar la etiqueta TITLE para la compatibilidad entre navegadores.
Texto
Es obvio que si el contenido de nuestro sitio está mal escrito, contiene faltas de ortografía o en definitiva una mala prosa, nuestro sitio se verá perjudicado. La proliferación de l movimiento BLOG y la agilidad de estos sitios para publicar artículos rapidamente y de cualquier manera ha repercutido negativamente en los textos que encontramos online y eso no está siempre unido a una mala técnica en el diseño.
Un texto torpe y farragoso puede resultar casi tan frustrante como una mala navegación si este oculta la información que busca el usuario entre montones de palabras vacías.
Por otra parte, un muy buen texto se puede ver perjudicado por una mala elección en la tipografía : un tamaño de texto excesivamente pequeño y un color poco contrastado con el fondo puede hacer el texto ilegible y poco accesible. Conviene buscar la simplicidad y recordar que las tipografías universales del sistema son universales por algo y que los procesadores de textos utilizan por defecto un sistema de contraste de negro sobre fondo blanco, por un buen motivo y no por capricho.
Imágenes
Es fácil abusar de los gráficos con la idea de aportar un mayor atractivo visual al diseño, pero lo cierto, es que no es tan necesario. Si no nos andamos con cuidado acabaremos por saturar la web, y hacer los tiempos de carga muy grandes, con la consiguiente demora en la carga y presentación de la web. Para conseguir efectos como el de esquinas redondeadas, degradados, transparencias, etc. siempre aconsejo en la mayoría de lo posible, usar las propiedades que nos ofrece el HTML y sobretodo el CSS, que con cada versión nueva que aparece, nos permiten conseguir una mayor cantidad de efectos, con una pequeña línea de código.
Como defensor de la estandarización de internet, y en concreto de la web, quiero pedir que olvidemos de una vez por todas los navegadoers desfasados como Internet Explorer 6, y obliguemos a los usuarios de alguna manera a actualizarse a cualquiera de los nuevos navegadores que siguen las reglas de la W3C. Como en mi anterior post sobre IE8, si puede ser, nos olvidamos de cualquier versión del navegador de Microsoft, por el momento.
Los años en los que las web estaban plagadas de GIF animados por todas partes, fondos con mosaicos sicodélicos, publicidad por todas partes y música de 8 bits, ya han pasado por suerte.
Optimización
Es muy importante hoy en día, seguir las recomendaciones SEO, porque son pocos casos en los que no interesa ser encontrados por los buscadores como Google. Para ello es importante escribir un código bien estructurado, para limitar el peso de la página, conseguir cargas mas rápidas y mas fluidas. En internet siempre estamos ante un proceso de flujo de datos que, por instantáneo que nos parezca gracias a las velocidades actuales de conexión, no lo es. No podemos permitirnos el ofrecer al usuario una web que demore mucho su carga, a nadie le gusta esperar. Y ya no se trata de culpar a los contenidos flash o no, ese puede ser otro tema para debatir, porque los scripts mal construidos también pueden disminuir la velocidad de carga.
El exceso de bucles anidados puede ser uno de los errores más frecuentes, ya que provocan un exceso de llamadas a memoria. Y cosas tan tontas como una etiqueta huérfana, pueden ser fatales y repercuten también en el SEO. Conviene recordar seguir unas ciertas reglas, y respetar cierta ‘etiqueta’ del código, con sangrados y comentarios que puedan ayudar al mantenimiento futuro del sitio. Puedes no ser tú quien lo tenga que hacer en el futuro.
Y con esto y un bizcocho me despido. Espero que pueda servir de alguna ayuda estos consejos y como siempre espero comentarios.
para mostrar/ocultar todas las capas, excepto la activa.
Raúl Ballester : Diseñador Gráfico. Cartagena (Murcia). 1984
