Diseño a lo “2.0”

11/sep/2006 7

Logo Apple a lo AquaCreo que este es mi primer artículo sobre diseño en sí. ya era hora de entrar de lleno en mi área. Puedes haber notado que han proliferado 2 características principales en cuanto a diseño en los últimos 5 – 6 años. El primero vino con el gran estilo Aqua creado por Apple para su línea gráfica desde la llegada del sistema operativo Mac OSX (tanto en su sistema operativo, como en sus manuales y su sitio web). El otro son las gradientes de fondo que se han utilizado bastante también en todos lados, inclusive en este mismo sitio. Bueno, no es difícil hacerlas, pero sí necesitan de cierto control para que no lleguen a ser esos horribles gradientes que proliferaban en gráficas hechas por defecto a mediados de los ’90.

Bueno, en este momento trataré cómo llegar a tener sutiles gradientes, con las que podrán potenciar considerablemente la visual de sus sitios. Con esto ganaremos profundidad, y lograremos destacar ciertas partes de nuestro contenido que estimemos necesario hacerlo.

Imagen 1: CSSLabPara esto utilizaremos Adobe Photoshop. GIMP puede actuar de la misma manera. Otros, no lo sé. Primeros crearemos un encabezado para CSSLab, con otra tipografía de la utilizada normalmente aquí (ver imagen 1). Bien, en un nuevo archivo de 300x200px a 72 DPI, escribo el título de nuestro sitio (en un nuevo layer de texto) en una tipografía en bold, y condensada a -50 (ver imagen 2 ). Ahora, comenzaremos con darle estilo a la tipografía. Abrimos Layer Style (para el layer de nuestro texto) y primero, le agregamos algo de color (ver imagen 3). Utilizaremos una degradación de rojos, y he aquí la clave. Se trata de escoger un color y variaciones suaves del mismo (en hexacromía un tono hacia arriba o hacia abajo). En este caso será el rojo WebSafe #FF0000, y para el otro color, el mismo rojo pero levemente más oscuro, el #CC0000 (ver imagen 4). Importante en este caso es tener nuestra gradiente en 90º, así corre desde arriba hacia abajo de nuestra tipografía (ver imagen 5).

Bien, ya vimos cuál es el detalle que hace ver estas degradaciones tan ampliamente aceptadas. Se trata de encontrar la combinación de tonos, dentro del mismo color, pero levemente superior o inferior. O sea, si utilizo un gris #66666 para la parte de arriba (recuerda que nuestra gradiente estará en 90º), la de abajo sería #333333 o #999999 (ver imagen 6). Otro detalle importante que suele utilizarse para despegar el texto y separarlo del fondo que lo soporta, es un Drop Shadow pero también muy sutil. El que siempre utilizo es el con las configuraciones que muestro en la imagen 7, color negro, con 5px de radio, 0 de distancia (o sea, la sombra se reflejará a todos lados de la tipografía) y 30% a 40% de transparencia (nuevamente, muy suave como se ve en la imagen 8).

Bien hemos avanzado bastante. Ahora, el fondo. Utilizaremos otro gradiente, pero de negro a gris, o gris a negro, de gris a gris; esto queda a criterio del diseñador que existe escondido en todos nosotros. Hay que hacer las propuestas y probar. Me quedo con la que muestro en la imagen 9 (de blanco #FFFFFF a gris #CCCCCC). Pero esperen, aún falta un pequeño trazo blanco alrededor del texto, para que separe el rojo del gris (ya que tienen a vibrar, y para destacar más nuestro logotipo. Ver el resultado hasta aquí).

Por último, podemos agregar un Pattern al fondo, y fusionarlo con nuestra gradiente. Patterns hay muchas, las más utilizadas son las denominadas Scanlines, o las que son representadas mediante líneas horizontales, verticales, oblícuas o puntos de 1px o más.

Ver resultado final.

Links:

Comentarios

  1. josé luis báez [#]

    excelente información, gracias!

  2. CSSLab Admin [#]

    hago lo q se puede 😀

  3. dobled [#]

    Buen Tips Saludos

  4. seba [#]

    Bueno el post… y si, las degradaciones aportan mucho al diseño cuando son controladas, pensadas, no cuando se aplica default y colores azarosos… en la u me toco ver varios diseños con esas gradientes… un desastre…

    Bueno el post y los links… dale más de Diseño…

    saludos!

  5. Rob [#]

    Totalmente de acuerdo con lo dicho en el artículo. Está claro que los nuevos diseños estilo Aqua de Mac han marcado tendencia (para muestra el nuevo Windows Vista).

    Ha una página web este estilo puede dotarle de un contraste y dar la sensación de que no es plana, como pueda serlo una web llena de texto con alguna imagen ocasional.

    Sin embargo, el utilizar este estilo sin conocimiento puede llevar a crear imágenes que provocan sensaciones de rechazo.

  6. Arcadio [#]

    Donde encuentro mas cosas asi en photoshop?…..

  7. CSSLab » La semántica en la Web 3.0 [#]

    […] Aunque ha estado bastante de moda, me ha sido complicado dar una definición o hacerme parte de alguna sobre la Web 2.0. Creo que por lo mismo, porque ha sido tanto lo que le han dado que me hace ser reticente a unirme a ello. Enfin, más que los estilos gráficos o una manera diferente de construir sitios webs, me gusta el cambio de comportamiento en el usuario que ha conllevado, pasando de una web empresarial, una vitrina de información, a una web social donde el usuario toma el poder y toma la información como propia. Con la Web 3.0 me pasa algo similar, no existe aún un concenso pero sí está la idea: una web semántica donde se comporta tal como un ecosistema que evoluciona de acuerdo al contenido que alberga. Lo de semántico tiene mucho que ver, ya que lo hace universal, le da un sentido a cada elemento o atributo que contiene y lo potencia en los buscadores, que deberían de procesar todos estos avances y entregárnoslo como resultados más precisos y acertados. […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab