El diseño Real Web 2.0, las utilidades de diseño Web2.0 esenciales

Aunque hay algunos diseños importantes y relevantes que podemos asociar con "Web2.0", no son los estilos y efectos de superficie que podrían venir primero a la mente. Los elementos del diseño Web2.0 reales no son puramente gráficos.

Efectos como gradientes, colores sólidos, fuentes grandes, reflejos y etiquetas flash, que he descrito en 2 artículos previos (Estilo Actual en Diseño Gráfico para la Web y Guía de Estilo Web2.0) son productos a corto plazo para un giro cultural más fundamental.

Éste artículo apunta a explicar la diferencia, y demostrar los elementos valorables que todo diseñador debe aprender del diseño de paginas web moderno.

El sello del Diseño Web2.0 no es gráfico

El efecto de mesa brillante no representa el Web2.0 verdadero más que los alfileres de seguridad y la tela cuadriculada representan el punk.

En la Guía de Estilo del Diseño Web2.0, he afirmado que los ingredientes estilísticos no hacen al diseño Web2.0 más que la harina, los huevos y el azúcar hacen una torta.

En éste artículo, quiero dejar clara la esencia de lo que considero un diseño Web2.0 real, los factores principales que diferencian a un artefacto Web2.0 de algo parecido:

Su simplicidad

La simplicidad es la característica fundamental del Web2.0 con
– Marca frontal simple
– Foco simple

Veamos algunos aspectos de lo que significa el término "Web2.0".

Una nueva esperanza

Un aspecto del "Web2.0" es el reciente (hace alrededor de 3 años) resurgimiento de la economía web. Esto puede notarlo en la cantidad de iniciativas compitiendo en las áreas nuevas, en la cantidad de inversiones de capital empresarial disponibles, y las agresivas tomas de posesión y consolidaciones por parte de inversores de más peso.

La industria de la web está viviendo un aumento vibrante en su potencial. Una nueva generación de jóvenes punto com disfrutan el potencial de disfrutar la noche, los veteranos de Bubble1.0 están tratando de olvidar sus malas experiencias (con la ayuda de terapeutas de todo el mundo) y brillando bajo la luz del sol de una nueva era de posibilidades.

Todo este potencial trae un optimismo renovado en el sector web, que se traduce en nuevas marcas firmes, de vanguardia, con mucha personalidad.

Mezclando & Triturando información

Nada permanece igual en Web2.0

Muchos de nosotros vemos "Web2.0" fundamentalmente como un fenómeno tecnológico, en donde los datos y la funcionalidad son libres de moverse entre las aplicaciones más fácilmente, gracias a los nuevos formatos de transferencia de datos y técnicas como RSS, servicios web, microformatos, y AJAX.

El resultado de esto es que la información ingresada en un sitio puede terminar siendo reutilizada en algún otro lugar, e incluso en un medio de comunicación diferente. La movilidad del contenido requiere una separación fundamental de los datos del estilo de despliegue. La información es más comunmente almacenada en bases de datos, o como XML, y preparada para una serie más amplia de dispositivos en una serie más amplia de formatos que nunca antes.

Democracia

Usted es más valioso en Web2.0

Una tercera perspectiva significativa en Web 2.0 es la democratización de la información.

Los usuarios web de a pie son con más frecuencia los creadores y editores de contenido. Cualquiera puede ser un periodista por intermedio de su blog y su alimentación RSS, y todos tienen una voz sobre lo que cuenta como noticia a través de sitios marcadores sociales como Digg y del.icio.us.

Puede ser una coincidencia que la cultura es mucho más comprensiva de los medios y consciente de las relaciones comerciales que al final del siglo 20. Se puede describir a las relaciones en el mercado de hoy como "consumismo posmoderno".

Por el otro lado, los canales de comunicación tradicionales y, en cierto grado, los modelos de negocios se han invertido en el siglo 21. No hay que tener un montón de contactos o dinero para hacer negocios, o para influenciar a miles de personas a través de los blogs.

Cómo se manifiesta esto en el branding y el diseño en Web 2.0

En Scratchmedia, tenemos un montón de pedidos de compañías que quieren rediseñar su sitio con unos arreglos en 2.0.

Por supuesto, cualquier rediseño debe ser algo más que sólo un tratamiento estilístico visual. La apariencia es una extensión de la marca.

Una marca simple de vanguardia

Es ciertamente posible para las corporaciones el beneficiarse de las tendencias de diseño de Web2.0.

Como los negocios grandes pueden aspirar a rejuvenecer su cultura, su marca o su oferta tomándolo de iniciativas más novedosas, un gran sitio web corporativo puede adquirir un nuevo estilo aprendiendo de la mentalidad de Web2.0.

En ambos negocios cultura y diseño web, esto significa tomar una postura de marca renovada, lo que puede involucrar ser más:
-Transparente
-Directo
-Sólido
-Audaz
-Confiable

La energía competitiva y la evolución acelerada en la industria del internet se combina con la focalización en el poder de la gente para crear marcas que tienen que ser distintivas e instantáneamente "obtenibles"- publicando su mensaje rápida y concisamente, diciendo "Esto es lo que hacemos, para quién, y porqué usted debe usarnos."

Desde luego, un buen branding siempre lo ha hecho, pero nunca antes bajo ésta presión. Los consumidores web, y la competencia en línea, son más sofisticados que lo que eran en el último boom de internet, y la mejora de las tecnologías ha hecho más fácil que nunca el implementar una idea, así que una marca necesita imponerse ante un escrutinio escéptico, lo que significa establecer una credibilidad rápidamente.

Las generaciones previas de sitios web no pueden construir confianza en pocos minutos – como tal vez hicieran hace 10 años. Ya no nos impresiona una página inicial que apunta a eso con mucho volumen de información, o una foto recortada de un apretón de manos.

En Web2.0 el sitio entero tiene que verse transparente, abierto, y confiable. Cada elemento de cada página tiene que ser original y de vanguardia en su enfoque de una proposición simple.

La apertura y la confianza van hacia ambos lados

-El sitio (marca) es abierto conmigo sobre sus objetivos y cómo planea alcanzarlos
"Queremos darle la manera más fácil de manejar sus múltiples cuentas"
-La marca espera también una apertura de mi parte, como parte del trato
"Necesitará darnos su información de contacto, y si le gusta y quiere usar la versión premium necesitará proporcionar los detalles de pago"
-Pero me muestra que puedo confiar en él
"Pero le prometemos que no compartiremos su información personal con nadie más de ningún modo y en ningún momento"
-Y deposita su confianza en usted
"Díganos qué es lo que le gusta y lo que no, para hacerlo que funcione mejor para usted"

Algunos ejemplos de un branding abierto y directo

Una comunicación directa por parte de los desarrolladores detrás de time-tracking solution Tick.

¿Hay una manera más transparente de presentarle a Ruby, el potente lenguaje de programación orientado a objetos que mostrarle algo del código?

Unfortunate es un sitio donde usted puede hacer y enviar sus propias galletas de la fortuna – original, como afirman serlo.

Wishlistr, un sitio de listas de deseos lanza el sitio diciendo exactamente a qué se dedica y cómo.

Enfoque simple

En el mercado de Web2.0, usted no tiene tiempo para palabras bonitas y seducir a los visitantes. Ellos conocen su poder, son post-consumidores inteligentes, y no hay muchas opciones por fuera de ello.

(De hecho, éste siempre ha sido el caso, pero la diferencia con esta Web es que sus competidores saben esto, así que usted también debe saberlo)

He escrito un ebook que trata sobre cada aspecto sobre este tema – "Save the Pixel – the Art of Simple Web Design".

Menos diseño

Casi todo debe ser más simple en el diseño Web2.0, y cualquier complejidad debe ser justificada.

Cualquier pixel, el que sea, debe sostener la atracción simple hacia la página. Los pixeles deben agregar color, contraste, o riqueza visual que puedan atraer al ojo. Pueden también crear formas o líneas fuertes.

Lo que uno nota sobre un diseño gráfico bueno en el mundo del Web2.0 es que los pixeles son usados con mucho cuidado, para manejar con cuidado la atención del visitante. Todo elemento en toda página debe justificar su existencia, o debe ser simplemente quitado.

"Si buscas web hospedaje y dominio al mejor precio, aprovecha nuestras promociones en registro de dominios . MX "

El lugar más obvio en el que estamos empleando pixeles extra es el cromo de la página, p.ej. gráficos utilizados para decorar la propia página, más que atraer la atención hacia el contenido de la misma.

Como la atención del visitante es finita, y hay un mensaje claro que comunicar, cualquier cosa que diluya esa atención hace correr el riesgo de que la página fracase, ya sea cansando al visitante o simplemente no ayudándolo a encontrar lo suficientemente rápido el siguiente link hacia lo que está buscando.

¿Cómo describimos la diferencia entre cromo y contenido? Bien, el contenido cambia de página en página, mientras que el cromo es parte de la propia plantilla de la página. Cualquier cosa que sea lo mismo en todas las páginas puede tener sólo un valor mínimo.

La única excepción a esta regla es en las áreas de branding y navegación. Su logo puede ser firme y atractivo al ojo, aunque pueda estar presente en toda las páginas, porque es tan importante para la obtenibilidad de la página (ver el libro por más sobre esto). Asimismo, la navegación de alto nivel es vital para hacerle saber a alguien dónde está y qué tiene a su disposición en el sitio.

¡Pero eso no significa pixeles desperdiciados! Vea mis ejemplos de abajo, y vea cuán cuidadosos han sido los diseñadores para emplear cada pixel para atraer la atención del visitante hacia el contenido principal.

Algunos buenos ejemplos de disposiciones que ahorran pixeles

En el sitio del software de Miro de TV Internet, todo el trabajo de diseño ha ido dentro del contenido. No se usan prácticamente pixeles para decorar la página en sí misma.

En Traineo.com, un sitio de motivación de salud & fitness, vea como el contenido se ubica directamente sobre la página en blanco, sin cuadro que lo contenga.

Sky es un servicio que produce bonitos sitios web para iglesias
El fondo liso y claro permite sobresalir a los colores brillantes y al alto contraste en el contenido.
 

La disciplina de ahorro de pixeles ha sido vigorosamente aplicada con Conceptshare.com, un servicio para apoyar la colaboración con los proyectos creativos,.

El fondo es simple y liso. El contenido no está encuadrado, así que tiene espacio para ser grande & firme.

No se le da razón alguna a su ojo para que se distraiga del mensaje principal.

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

<w:lsdexception locked=