Digilicious, Blog de diseño

Hoy en día al momento de diseñar sitios web es imposible abstraerse de los nuevos códigos que forman parte de la web 2.0, personalmente rescato, por sobre las decisiones estilísticas de este código, el interés por mejorar la estructura de la información, el diseño más centrado en el usuario y en hacer que éste entienda el sitio y cómo debe usarlo. Les dejo este listado que tomé de otro sitio *guia de estilo web 2.0 (inglés), pero que me dí el gusto de re-escribir en los detalles manteniendo los títulos del original, en él se habla acerca de cómo lograr este código, ojo, no significa que todos los sitios que diseñen se basen en esta guía de estilo, muy por el contrario, úsen estos datos como una simple ayuda en los casos en que realmente los consideren pertinentes teniendo en cuenta que la mayoría de los puntos son también extrapolables a otros tipos de códigos gráficos web y son, en general, una muy buena costumbre el seguirlos.

El siguiente listado principalmente se refiere a los conceptos más generales de diseño de un sitio 2.0, destaca una serie de conceptos que se deben tener en cuenta si se quieren utilizar los elementos comunes que caracterizan este tipo de sitios, como por ejemplo:

1. Simplicidad
• Este desde mi punto de vista es el mas importante de los aspectos de esta guía, el centrar el diseño en la simplicidad, ayuda a que el usuarios se sientan más cómodos cuando visiten nuestro sitio, a que entiendan por donde partir, a que sepan que es lo más importante y que puedan navegarlo fluídamente.
2. Diagramación centrada
• La verdad es que este punto es discutible, personalmente acostumbro a diseñar sitios de ancho fijo centrado, considero que es mas ordenado para el usuario que los sitios que cambian su diagramación mientras cambias el tamaño de la ventana y ocupa mejor el espacio de la pantalla que las diagramaciones alineadas a la izquierda.
3. Menos Columnas
• Lo importante es que sean las menos posibles con el objetivo de mantener la simplicidad en la estructura de los contenidos
4. Sección superior separada
• El famoso Header, infaltable para colocar presencia de marca y una imagen pertinente, es muy usado también el colocar en esta zona una pequeña descripción de lo que se trata el sitio, muy útil para que nuestro sitio aparezca listado en los buscadores. (elegir muy breve y estratégicamente las palabras de esta descripción)
5. Areas semánticas claramente separadas
• Si estamos hablando de dos cosas distintas, que se note, recuenden que en internet los usuarios no leen; escanean los textos, los ayudaremos mucho separando claramente los contenidos que son distintos.
6. Navegación simple
• Es muy raro ver un sitio que se rija por los estándares de la web 2.0 que tenga una botonera rebuscada, de esas que hay que aprender a usar, que generalmente están hechas en Flash y que la verdad son muy bonitas pero poco útiles, recuerda ordenar tus temáticas en secciones con el objetivo que cubran los contenidos a mostrar dentro del sitio pero sin colocar demasiados botones, esta tarea es compleja y creo que amerita ser tocada con mayor profundidad en un post exclusivo (nota mental: debo hacer un post sobre mapas de sitios y flujos de navegación), por ahora les dejo este interesante link sobre botoneras en la onda web 2.0
7. Logos pregnantes
• Suena fácil no? pero en realidad no lo es , les dejo de todas maneras un link a ejemplos de logos de sitios web 2.0
8. Textos más grandes
• Durante harto tiempo en la web estaban de moda los textitos pequeños, esos que nosotros los jóvenes leíamos perfecto, pero cuando le mostrabamos el sitio a alguién mayor parecián verdaderas hormigitas en la pantalla, con este código se aumentan un tanto los tamaños en general de las tipografías, buscando no sólo accesibilidad sino también claridad en la jerarquización de contenidos
9. Introducciones con textos notorios
• Muy similar al punto anterior, estos textos, estratégicamente colocados y formateados dentro de la diagramación para que sean jerárquicamente muy importantes, ayudan al usuario a saber que es lo primero que debería hacer cuando entra a nuestro sitio, que es lo más importante que tenemos para ofrecerle.
10. Colores fuertes
• El rol que juegan los colores fuertes en este tema es principalmente dar al usuario una sensación de que el sitio es lúdico, (casi para niños) por tanto fácil de usar y entretenido de explorar
11. Superficies trabajadas
• En este código el uso de imágenes bastate reducido, generalmente se privilegian los fondos de gradientes (prox. punto) por lo que las imágenes que se utilizan deben ser muy bien elegidas y trabajadas, no es raro ver texturas que muchas veces son casi imperceptibles a primera vista pero que luego de una mirada mas en detalle terminan dándole al sitio una profundidad gráfica que se basa en la simplicidad pero sin lllegar jamás al extremo de la pobreza.
12. Gradientes
• Las gradientes son frecuentemente utilizadas en este tipo de código, si son bien utilizadas, tienen una gran gracia, pueden cubrir grandes extensiones de pantalla con un peso mínimo debido a que se valen de la propiedad de mosaico de los fondos en CSS para con una imagen de sólo 1 pixel de ancho (si es necesario puede ser un poco mas), cubrir grandes zonas de pantalla.
13. Reflexiones
• Este punto hace referencia a los efectos de “reflejo en el piso” que tienen las marcas o los textos importantes
14. Atractivos iconos
• Hacer iconos es todo un arte, no sólo producirlos, sino conceptualizar su abstracción, de todas maneras hay muchos recursos disponibles en internet que te puden servir de base para realizar tu propio set.
15. Estrellas de muchas puntas
• Esta famosa estrellita acompaña a muchos diseños 2.0, generalmente hace referencia a que el sitio está en versión BETA (la mayoría de los sitios web 2.0 se encuentran en eterno Beta, con el objetivo de proclamar su eterna re-estructuración y auto-mejoramiento)
16. Respeto por los standares
• Me permitiré agregar dos puntos que me parecen primordiales, el primero es que los diseños web 2.0 se basan en estándares web, en armado en base a Divs y CSS, dejando las tablas sólo para contenido tabular, en la independización del contenido con el diseño, el mismo Html con un Css distinto puede servir para ser visto en una PDA o en un celular, ninguno de los aspectos de forma se encuentra definido en el Html, todo está en el CSS. En una primera impresión esto parece estar más ligado al aspecto técnico de la producción, sin embargo creo que el diseñador debe estar familiarizado con estas técnicas de producción al momento de pensar su diseño, le harán su camino más simple y con menor posibilidad de errores
17. Ojo con las posibilidades de AJAX
• Ajax introduce todo un mundo en posibilidades de navegación que estan siendo cada día mas explotadas en los sitios 2.0 (hablamos algo de ajax en este post), el diseñador debe estar al tanto de las posibilidades que le entrega esta “tecnología” para poder ofrecer la mejor solución posible.

El post original viene de webdesignfromscratch, pueden verlo en español y resumido en el blog de sentido web
Por último, del punto vista netamente técnico y con el ánimo de profundizar esta info, les dejo este vínculo con más detalles de cómo crear efectos web 2.0, desde cómo hacer las estrellitas hasta gamas cromáticas perfectas para este tipo de look.
Que los disfruten y les sirva de base para proponer sus propias soluciones, saludos

Posteado por MAD |

(No Ratings Yet)

 Loading ...