En diseño web, como todo, va por modas. Os voy a mostrar 7 elementos que arrasan hoy en día. Es decisión vuestra incluirlos o no en vuestros diseños web. Y es vuestro deber como diseñadores juzgarlos, diseccionarlos y utilizarlos o no según consideréis oportuno.

Autor:

Cofundador y Jefe de proyecto de Erasmusu.com. Desarrollador de juegos, diseñador gráfico y viajero. Si te gustan esos temas sígueme en twitter.

Acerca de esta recopilación

En diseño web, como todo, va por modas. De vez en cuando un elemento, por el motivo que sea, comienza a usarse por varios diseñadores y se propaga como la pólvora. Estoy seguro de que sabéis a lo que me refiero… sobre todo si conocéis las webs de Envato veréis como muchos de sus múltiples seguidores les imitan sin parar.

Os voy a mostrar 7 elementos que arrasan hoy en día. Es decisión vuestra incluirlos o no en vuestros diseños web. Y es vuestro deber como diseñadores juzgarlos, diseccionarlos y utilizarlos o no según consideréis oportuno.

¡Ojo! La inclusión de estos elementos en una web no tienen porque dar como resultado una web rompedora. Dependerá de tu propio bien hacer, tu destreza en la maquetación, en el diseño de la portada y de lo inspirado que estés en el momento. En resumen, de tu experiencia.

Os presento a los 7 fantásticos… 7 sencillos elementos de diseño que arrasan:

1. Sombra Sutil Especial

sombra especial css

Están de moda las sobras no uniformes. Fíjate bien en la sombra que arroja esa tarjeta. Si miras bien verás que no es una simple “sombra arrojada” de Photoshop. Se abre hacia los lados partiendo desde el centro.

sombra sutil y elegante photoshop

Con esto puedes conseguir el efecto de que la tarjeta esta ligeramente doblada, como la de la punta inferior derecha de la tarjeta de arriba, como si la punta estuviera más altas sobre el plano. Pero en realidad el rectángulo es totalmente recto. Es una sombra que crea un efecto sutil y elegante.

2. El Color Magenta y sus Amigos

magenta diseñadores

Quizás peque de exagerado, pero el Magenta es algo así como el color de los diseñadores. Si existe una paleta de colores 2.0, el magenta es el rey. Pero no viene sólo…

cyan diseñadores

Si además lo juntas con uno de sus mejores amigos, el Cyan, el resultado puede ser francamente espectacular. Echadle un vistazo.

3. Rótulo Saliente

rotulo saliente css

Es curioso como a una simple caja rectangular puede mejorar añadiéndole dos triangulitos de un color ligeramente más oscuro. El efecto de “cinta doblada” o “rótulo saliente” que se consigue con algo tan simple es muy resultón.

Por cierto, esta imagen reune 4 de los 7 elementos que estamos examinando en esta artículo… ¿sabes cuáles? Deja un comentario a ver si aciertas.

Otra variedad un poco más elaborada puede utilizarse en las esquinas de las cajas.

beta

Por cierta, lo de “beta” también estuvo muy de moda… hace un par de años era más “cool” tener una etiqueta “beta” en tu web que tener la versión final de la misma.

4. Gradient Radial / Glow Sutil

glow sutil css

Utilizando un glow, brillo en inglés, puedes hacer que de manera casi imperceptible, un elemento o parte de la página se muestre de manera más precisa a ojos del visitante. En este ejemplo vemos que el glow irradia desde el centro, desde la parte inferior del logo.

Bajo el logo de Nettuts también se puede observar este efecto.

glow sutil css

¿No lo ves? Quizás lo veas mejor si pongo sólo el fondo.

glow sutil css

Es un efecto que suele quedar bien en la zona del logo, para realzarlo. En Ontuts también lo utilizamos, de manera un poco más agresiva, en nuestro logo en la cabecera.

5. Superficies Rugosas o con Ruido

rugosa css

Los colores planos siguen llevándose, eso está claro, pero comienza a verse cierta tendencia, sobre todo en algunos de los mejores diseñadores, a utilizar superficies rugosas como la de la imagen en sus diseños.

rugosa css

En esta segunda imagen se puede ver de forma menos clara que en la primera, pero si te fijas bien verás que el degradado tiene un poco de ruido.

Mi consejo es que si utilizas superficies rugosas o ruido, ten mucho cuidado para que no resalten demasiado con respecto a otros elementos.

6. Thumbnails con Imágenes Giradas

imagen girada

Ideal para entradillas de posts… girar la imagen no falla casi nunca, suele quedar muy bien. Fácil y efectivo.

7. Hendidura de Separación

hendidura

Imagina un Header a dos colores. ¿Es lo ideal para separlos una única línea de un color? Puede… pero lo que está de moda es crear un efecto “hendidura”. Veamoslo más de cerca:

hendidura

Y es muy fácil de crear, tan sólo necesitas dibujar dos líneas, la de arriba de un color ligeramente más oscuro que la región superior y la de abajo ligeramente más clara que la región inferior.

Reflexión final

Si eres un diseñador novel te animo a que copies sin parar. ¡Copia, copia, copia! El estilo propio es algo que llegará con el tiempo. Mientras tanto copia, moldea y adapta a tus necesidades a partir de otros diseñadores mientras aprendes y desarrollas tu propia forma de hacer las cosas.

Sea como sea, si utilizáis alguno o varios de estos elementos, estoy seguro de que la impresión general de vuestro diseño puede llegar a mejorar… simplemente porque la verdad, no sólo están de moda, sino que también son bastante bonitos.

¿Conoces algún otro elemento de moda? Puedes contárnoslo dejando un comentario.

See you in another life!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (28 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

La paleta CGA está de moda, ¡¡quién lo diría!! :D

Goodlooking Revolutionnaire

Se os ha olvidado el letterpress! ;)

¿Qué es Letterpress Goodlooking? ¡Bienvenido por cierto!

Goodlooking Revolutionnaire

Es el efecto “hundido” que se usa sobre todo en encabezados de texto. Muy fácil de hacer en cualquier programa de diseño, con una sombrita interior y otra paralela de color más claro… muy resultón y muy de moda también, como todos los elementos que habéis puesto. Un ejemplo:

http://dribbble.com/shots/45635-Four-to-the-Fore-

Asias por la bienvenida. Buen trabajo con la web!

Muy bueno, tener todas las tendencias en un post! muchas graicas

@Goodlooking, estuve a punto de meterlo también, en serio, porque es un efecto que me encanta, pero que yo personalmente no acabo de controlar. Sé que puede emularse con CSS con sombra arrojada por el texto.

Sin embargo yo no consigo hacerlo en photoshop bien, no acabo de entender lo de la “sombra más clara paralela” ¿Tienes algún tutorial por ahí? ¡Se agradecería!

@Diseño web, ¡de nada!

excelente artículo; nos transporta a una mirada bastante profunda en cuanto al desarrollo de los gráficos, y también por cierto ayuda de cierta manera a incentivar nuestra creatividad y comprensión

Juan González

Gracias por el artículo, la verdad es que como dice Goodlooking el “letterpess” está muy de moda hoy en día y en realidad es bastante simple de hacer, sólo tienes que crear una una sombra interior oscura y una sombra paralela con un color más claro que el del fondo, la sombra sólo debe tener un pixel de distancia y tamaño 0 y eso es todo.

¿Con sombra paralela os referís a sombra arrojada?

> La paleta CGA está de moda, ¡¡quién lo diría!!

Jajaja, me parto! XD

10 screen 2
20 color 13
30 print “CGA forever”
40 goto 30

Que buen articulo, Javier, tienes muy buenos puntos que realmente se ven en los mejores sitios actualmente, yo agregaría ademas los textos con sombra gracias a CSS, las imagenes de texto con el efecto Letterpress o font replacement entre otros.

dominiocolectivo

Estas herramientas son muy buenas que me he fijado que fueron utilizados en dominiocolectivo.com

Estas herramientas realmente ayudan a mejorar el diseño web de tu pagina.

CP

Alguién sabe algún link donde expliquen como hacer el efecto de sombra sutil especial?

Yo lo he simulado creando una forma negra con la forma de dicha sombra, aplicándole luego un gaussian blur y cierta transparencia…

Si me dejas tu email te mando un ejemplo en PSD que tengo por aquí preparado :)

Que buena informacion javier, gracias de verdad que cada dia aprendo mas sobre diseño web… saludos

Hola:

Estoy muy interesado en saber como conseguir el efecto de sombra sutil especial para las imagenes de la web que llevo.

Mi correo es: ramonhoribai@gmail.com

Estaré muy agradecido ;)

Saludos

Gracias por sus consejos, tengo una pregunta un poco salida de tema :)

Tengo esta web: http://www.alfa1009fm.com/sunabr/html/index – copia.html que estoy desarrollando, y me gustaria que la barra de menu que está en posición fixed tuviese opacidad de 100% cuando esté en el tope de la página.

Me pueden ayudar con eso…

Pense en un javascript algo asi (ojo! soy nulo con JS)


if (YAxis = 0)
{
this.style.opacity=1;
}

Algo así… Gracias

Martin Menendez

Solo queda decir Gracias, para disenadores autodiactas como yo, este tipo de noticias son excelentes para continuar creciendo y superandonos dia a dia.

GRACIAS!!

Adán.

Hola Javier , muy inspirador tu post, sabes que yo soy novato y justamente estos efectos son los que mas me gustan.

es una tendencia que yo tambien note hace poco.

te mando otra tendencia:

no se si sera que yo no los vi antes, pero ahora estoy empezando a notar varias paginas de diseño web similares a esta, que tienen un diseño muy lindo, fresco y simple

y que tiene personas como vos que postean cosas muy copadas.

gracias y sigan asi
Adán.

faustina salmoran amrtines
Claudio Santibañez

Hola Javier.

me gusta mucho el efecto de sombra sutil pero sería ideal saber si se puede hacer en css3.

espero que alguien me pueda ayudar.

Atte.
Claudio Santibañez