Archivo de la categoría: Diseño

Sencillo efecto CSS: fotografía polaroid (o imagen con marco)


vauzza_efecto_polaroid_css_imagen_bordes

Hoy os dejamos un breve artículo para proponeros un efecto muy sencillo y rápido que consigue dar un toque especial las imágenes en tu diseño web, utilizando simplemento hojas de estilo CSS. En realidad, no se trata más que de establecer un color de fondo para tu imagen, con un margen de relleno y un borde. Por ejemplo, para la imagen que os presentamos en la parte superior, esta establecido el siguiente estilo:

img
  {
	  background-color: #EBEBEB;
	  padding-left: 10px;
	  padding-top: 10px;
	  padding-right: 10px;
	  padding-bottom: 80px;
	  border: 1px solid #CCCCCC;
  }

Como veréis, ésta es sólo una propuesta, las posibilidades son ilimitadas y todas igual de sencillas, jugando con los colores, márgenes y grosores, para crear de una manera muy fácil, por ejemplo, marcos:

vauzza efecto polaroid css imagen bordes

“¡Hagamos de la web un sitio más bonito!” 😀

Estilo minimalista, la plantilla web universal


Al ritmo al que surgen nuevos negocios en internet, se reduce el tiempo que dedicamos los usuarios a evaluar una empresa. Tenemos tantísimo donde elegir que si no captan nuestra atención o nos explican en que consiste lo que ofrecen en menos de 20 segundos probablemente busquemos otra solución.

Las empresas se han dado cuenta de esto y se están poniendo las pilas para que entendamos que es lo que ofrecen y que nos aportan en un breve periodo de tiempo.

Para ser rápido y claro, los textos tienen que ser cortos y directos, en una única frase nos tienen que generar la necesidad de adquirir el producto o aplicación y después a través de las diferentes secciones nos tienen que presentar el producto en más detalle.

A la hora de explicar la funcionalidad, se están usando los videos de menos de dos minutos en los que se muestra de forma visual como funciona y como se usa. Gracias a estos videos se puede reducir todavía más el texto que existe en la página. El uso de diagramas explicativos con imágenes es otra alternativa también utilizada para evitar escribir largos párrafos.

Además de que el contenido se bueno, bonito y breve, la página tiene que ser visualmente agradable y lo mejor es optar por un estilo sencillo y limpio. Se utiliza todo el espacio de forma que el texto no quede amontonado, tienen que quedar espacios libres y que este bien estructurado. De fondo se tiende sobre todo al blanco o a un color muy claro. El color principal suele ser el mismo  que el del logo o también se recurre a colores pasteles en diferentes tonalidades.

Algunos ejemplos de empresas de éxito que utilizan estas pautas de diseño son las siguientes.

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine

HTML5 + CSS3: Falta poco…


Esperamos impacientes el momento en el que se pueda trabajar naturalmente con HTML5 y CSS3, y poder experimentar al máximo sin miedo a que la mayoría de tus visitantes no puedan apreciar ni la mitad de trabajo que has hecho. Pero todavía falta tiempo, a pesar de que ya empieza a sonar por la red. Probablemente un cliente esté encantado con el nuevo diseño de su sitio / aplicación web que le has enseñado en tu portátil y todas las “cosas chulas” que puedes hacer. Pero si al llegar a casa, lo difunde entre su familia y amigos (o peor, sus clientes), y alguien no puede ver ni la mitad de las cosas, empezará a ver menos importante todas esas “cosas chulas” y te lo tirará por tierra.

Es muy probable que no consigas convencerle, ni a él ni a todo su entorno, de cuál es el mejor navegador, más compatible, más rápido, bla, bla, bla. Lo práctico: ponte en su lugar. Equilibrio entre diseño y compatibilidad, usabilidad para los clientes que le dan dinero. Y vistas las estadísticas, desde luego utilizando ya mismo HTML5 y CSS3 no vamos por el buen camino:

  • Compatibilidades HTML5 y CSS3 en los principales navegadores: Link
  • Estadísticas de tendencias de utilización de navegadores: Link

Por lo tanto, no es un mal momento para empezar a aprender estas nuevas técnicas y características de diseño, pero de momento cuidarse mucho de aplicarlas en situaciones comerciales reales.