Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Usa CSS3 para Conseguir Diseños Sutiles

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

He escuchado que esto de CSS3 esta causando furor. Los recursos están volando por todo el mundo y la blogosfera en forma de tutoriales con brillantes ejemplos sobre nuevas y creativas formas de diseño mediante módulos CSS3. No obstante, es fácil sobrepasarse y perder la brillantez que tienen los pequeños detalles en el diseño de interfaces de usuario. Aquí te presentamos tres trucos rápidos para usar poderosas técnicas de CSS3 con las que logra sutiles cambios en tus diseños.


Prefacio: No Conlleva Mucho Esfuerzo

La gente es capaz de percibir y distinguir los pequeños cambios.

El objetivo final es que la gente perciba y diferencie inconscientemente pequeñas modificaciones que no sean capaces de recordar. No creo que este concepto sea nuevo para nadie. Es uno de los conceptos mejor conocidos por los estudios sobre las sensaciones y la percepción. En ocasiones, una cosa resulta más agradable que otra. Y en ocasiones, ni siquiera sabes por qué.

Sin embargo, recuerda que el diseño web es un proceso consciente. El diseño sutil puede ser difícil porque tendemos a pensar que "esto necesita algo más". Y antes de darte cuenta, se ha perdido la sutileza.

Teniendo esto en cuenta, me gustaría mostrarte tres técnicas CSS3 que puedes emplear para proporcionar distintas formas de diseño sutil.


1. Transición

La transición es una potente herramienta, proporciona un medio para que podamos en esencia crear animaciones con CSS3 entre dos puntos. Los paquetes de su sintaxis contienen herramientas verdaderamente útiles: property (propiedad), duration (duración), y easing (desaceleración). Puedes variar los valores de cada una de estas piezas para ofrecer distintos grados en el efecto. Con frecuencia, bastará con realizar algunas pruebas hasta conseguir el resultado deseado. En otras palabras, juega variando los valores hasta que tenga buen aspecto. No te vuelvas loco. Es fácil perderse modificando listas de variables, aunque sean así breves.

Ejemplo: Transiciones de Color

Su uso es muy habitual en los elementos que componen un menú, para cambiar su color cuando el ratón se sitúa sobre uno de ellos. La transición puede hacer que estos cambios de color sean más suaves o sutiles.

Aquí el cambio de color no es sutil. Es claramente brusco. Es más elegante y sutil un cambio suavizado.

El truco para que el efecto sea sutil reside en la duración. Si es demasiado largo, el resultado será demasiado evidente. La navegación puede fácilmente acabar resultando engorrosa y teniendo un aspecto amateur.

Mira la muestra de ejemplo.

Notas sobre CSS

En el caso de que todavía no tengas muchos conocimientos sobre CSS, es importante que seas consciente del orden en el que deben indicarse las declaraciones que son específicas para ciertos navegadores. Sobre todo, es importante que observes que la declaración que no hace referencia a ningún navegador concreto va siempre en último lugar. CSS coge la última declaración y le asigna máxima prioridad en caso de conflicto. Una vez se hace publica una especificación, en principio, todos los navegadores implementarán el módulo sin que sea necesario indicar el prefijo. Por tanto, tu CSS estará de alguna manera preparado para el futuro.

Además, observa como las transiciones están declaradas en el estilo del elemento <a>, no en su estado "hover". Esto proporciona la transición tanto cuando el ratón está sobre el elemento como cuando no lo está.


2. nth-of-type (or nth-child)

El selector nth-of-type o nth-child-selector permite la declaración de patrones en series de elementos y su aplicación. Por ejemplo, en una tabla, con nth-child(odd) podríamos aplicar color a filas alternas. Veamos un ejemplo para clarificarlo.

Ejemplo: Agrupando

Imagina que tenemos el código para un sistema de navegación estándar…

…y qu ele aplicamos algo de estilo.

Esto creará un menú escalonado con algunos elementos más elevados, otros más bajos, y algunos alineados. La diferencia visual entre esto y un menú alineado es evidente.

Entonces, ¿qué tiene esto de sutil? La sutileza aquí es doble.

  1. Los elementos elevados parecen más importantes. Quizá la persona que lo diseñó quería destacar su portafolio y su blog. Estos, junto con el enlace para la página "Home" (inicio), han sido elevados para tener más prominencia. A la gente se le irá primero la vista sobre ellos.
  2. Observa la agrupación. Los elementos del menú "About" (sobre mí) y "Work" (trabajos) han sido agrupados, al igual que "Forum" (foro) y "Blog". Estos grupos reúnen en el menú de navegación a aquellas páginas con algún tipo de similitud. Los elementos de menú "Work" y "About" hacen ambos referencia a páginas sobre la persona, mientras que "Forum" y "Blog" son páginas dirigidas a una audiencia y a la interactividad.

Así que, quizá un usuario primero verá el elemento "Home". Ese usuario probablemente se dará cuenta de que él o ella ya estaban en la página de inicio o "Home". Después ese usuario probablemente se dirija a la página "Work" (trabajo). *clic*. Tras ver algunas piezas de trabajo, es posible que visiten el "Blog" pero quizá la agrupación acaba ejerciendo mucha fuerza y su deseo se inclina hacia "About". El diseñador está dirigiendo al usuario a través de la disposición del los elementos del menú. Él o ella ha proporcionado pistas que indican al usuario hacia dónde deberían dirigirse, secuencialmente.

¿Me va a ocurrir esto siempre? En absoluto. ¿Ocurrirá en ocasiones? Apuesto a que sí.

Este es el objetivo del diseño sutil. No presiona abrumadoramente al usuario, sino que le proporciona pistas útiles o alicientes por aquí y por allá.


3. Gradientes

Aquí tienes una forma sencilla para introducir sutileza en el diseño. Irónicamente, es muy posible que tenga una de las sintaxis más complicadas que existen. Y no solo eso, sino que tiene distintas sintaxis para cada navegador. Echémosle un vistazo.

Ejemplo: formularios

Imagina que tenemos un bonito y simple formulario de contacto (con campo para email y mensaje), aquí tienes algunas declaraciones de estilo para aplicarle.

Es una declaración bastante extensa, ¿no? Pues es solo para dos navegadores.

No voy a explicar aquí toda la sintaxis, ya que otros la han explicado por ahí. Consulta el artículo "Entender los degradados CSS" aquí en Tuts+ para entenderlo mejor. Cuando hayas terminado, hablemos sobre la sutileza.

El degradado en estas áreas de texto es casi imperceptible. Sin embargo, si juegas con el CSS y eliminas el borde, te aseguro que está ahí.

Si todavía no lo puedes ver en esta segunda imagen, desplaza la cabeza hacia un lateral de tu monitor de manera que lo observes desde un ángulo más pronunciado. ¿Lo ves ahora? Si no es así, no soy responsable. Yo lo veo, es posible que tu monitor esté estropeado.

En cualquier caso, observa lo próximos que son los colores rgb de la declaración css. La parte superior del campo de entrada de texto está ligeramente sombreada. Este es un ejemplo de diseño sutil. Cuando se esté cumplimenta el formulario, será poco probable que alguien note el gradiente. Sin embargo, sí lo percibirán como un poco más atractivo que otros, aunque no sepan decir por qué.


Consejo extra: Incompatibilidad en navegadores

Bien, casi hemos acabado con este artículo sobre CSS3 y aún no hemos hablado sobre los problemas con los navegadores. ¿Cómo es posible? Hay un motivo, no hemos hecho mucho énfasis en el código. Y más importante aún, he guardado lo mejor para el final.

Aunque falten cambios sutiles no se notará demasiado su falta.

Echa un vistazo al ejemplo propuesto en este tutorial desde un navegador webkit, y después compara su aspecto viéndolo en Firefox, observarás algunas diferencias. Si después pasas a Internet Explorer, comprobarás que las diferencias son aún mayores. Lo mejor del uso de diseños sutiles es que las diferencias casi son inapreciables, probablemente la gente no se dé cuenta. En otras palabras, los cambios de color en el primer ejemplo todavía funcionan sin la transición; simplemente serán un poco menos suaves. Si el objetivo del uso de nth-of-type fue agrupar elementos basándonos en sus relaciones, ningún usuario se va preocupar si esa agrupación no existe. El menú todavía funciona. ¿Y qué pasa con el gradiente? ¿Te acuerdas de lo que nos costó verlo aunque te dije donde estaba exactamente?

Este último ejemplo si que será percibido…

Conviértelo en una oportunidad para la creatividad, en lugar de un reto insuperable.

Probablemente la oposición más racional en el diseño web a que se den "discrepancias en la apariencia en distintos navegadores" se basa en que (quizá la mayoría) de los clientes esperan encontrar exactamente la misma web en los principales navegadores. Si no dispones de margen para esto y tienes que pagar tu factura eléctrica, haz lo que sea necesario para que todas esas importantes esquinas estén redondeadas en todas las versiones de Internet Explorer, incluso las más antiguas.

No obstante, es posible educar a los clientes y persuadirles de las ventajas de tener un diseño en un navegador y otro algo distinto en otro. Por ejemplo, aceptar ligeras diferencias en el aspecto puede reducir drásticamente las solicitudes HTTP y evitar el exceso de elementos HTML, en el caso de que usemos demasiadas imágenes para crear los bordes, las sombras y todo lo demás. O, si te pareces a mí, tienes algunos proyectos personales pendientes y te gustan los retos como podría ser ofrecer la misma experiencia en los distintos navegadores sin necesidad de presentar siempre un mismo diseño. O, quizá tengas con dos diseños distintos que te gustan por igual, y no sabes cual implementar. Es una oportunidad para implementar uno en un navegador y el otro en otro navegador, olvidándote de usar una única hoja de estilos.

Lo cierto es que la incompatibilidad de los navegadores es un hecho en el estado actual de la web en lo que respecta al uso de CSS3. Así que convierte esto en una oportunidad para la creatividad en lugar de concebirlo como un obstáculo insuperable.

Pero, ¿qué tiene de sutil el último ejemplo?

La sutileza aquí no está en el diseño. En cambio, es más un diseñador sutil. Según mi experiencia, la mayoría de la gente solo usa el navegador. Los profesionales web se olvidan a veces de esto, conforme instalamos tres versiones de los cinco navegadores distintos que existen en cada dispositivo que encontramos.

Así que, si un usuario solo emplea Internet Explorer para visitar tu sitio web puede ver su contenido de forma clara, habrás tenido éxito con tu diseño. Si otro usuario visita tu web desde Chrome y su experiencia es satisfactoria y puede acceder al contenido con claridad, habrás alcanzado el éxito con tu diseño. Y quizá este usuario aprecie alguna golosina extra. Felicidades. Aunque lo más importante es que si alguna vez tienes la oportunidad de sentarte y verlo de forma simultánea,  lograrás divertirte de forma sutil.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.