• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

css3

Diseño web: Una selección de listas con lo mejor del 2012

Sebastián Thüer · 03.01.2013 ·

Es un clásico. A esta altura del año salen las clásicas listas de recopilación que repasan lo mejor y lo peor de cada rubro ¿Qué hay del diseño web? Varios sitios especializados han armado sus catálogos para presentar lo más destacado del 2012.

Podemos encontrar dos tipos de listas: las ilustrativas, que pretenden recoger los mejores diseños; y las conceptuales, que analizan las tendencias. Aquí una selección de estos listados que siempre conviene repasar para reconocer el contexto en el cual estamos haciendo diseño web.

Best of Web Design in 2012

best2012-01

Esta recopilación del blog especializado Web Design Ledger hace una selección de los diseños que más comentarios y debates despertaron en sus lectores. La selección es variada con cierta predominancia de diseños minimalistas, uso de grande fotos y tipografías y, en menor medida, algo de collage.

[tf_button link=»http://webdesignledger.com/inspiration/best-of-web-design-in-2012″ align=»center»]Ver[/tf_button]

The 30 Best Web Design Gallery Picks of 2012

best2012-02

La presencia cada vez más fuerte de HTML5, CSS3 y el diseño web adaptativo fueron las principales características del diseño web en 2012 según Design Shack que armó su propio listado donde sobresalen los sitios con amplias imágenes, tipografía preponderante y aquellos que tienen hacen uso del espacio con una cuidada composición.

[tf_button link=»http://designshack.net/articles/inspiration/the-30-best-web-design-gallery-picks-of-2012/» align=»center»]Ver[/tf_button] 

40 Super Creative And Crazily Unique Web Designer Portfolios: 2012

best2012-03

Si sos diseñador web y estás pensando en renovar tu portfolio deberías mirar este post de 1st Web Designer que recopila algunos de los trabajos online más creativos donde sobresale el uso de metáforas, el humor y especialmente un estilo propio que se advierte desde la misma página principal de cada sitio.

[tf_button link=»http://www.1stwebdesigner.com/inspiration/web-designer-portfolios-2012/» align=»center»]Ver[/tf_button]

15 top web design anddevelopment trends for 2012

best2012-04

En lugar de hacer una presentación de sitios este artículo propone reflexionar sobre cuáles fueron las principales tendencias del diseño web en el 2012 desde el punto de vista conceptual. Las mejoras progresivas gracias a HTML5 y CSS3, diseño web adaptativo y la recuperación de Flash como tecnología para animación y 3D son algunos de los elementos salientes junto a la importancia cada vez mayor de la optimización para dispositivos móviles.

[tf_button link=»http://www.netmagazine.com/features/15-top-web-design-and-development-trends-2012″ align=»center»]Ver[/tf_button]

50 Unique and Inspiring Website Designs 2012

best2012-05

En lugar de concentrarse en las tendencias este post propone revisar lo contrario: aquellos sitios que se destacaron por alejarse de las propuestas mayoritarias. Diseños coloridos, divertidos y artísticos predominaron en este original listado.

[tf_button link=»http://blog.wezile.com/2012/01/50-unique-and-inspiring-website-designs/» align=»center»]Ver[/tf_button]

20 experiential web design trends for 2012

best2012-06

«El diseño web sigue evolucionando por su propia naturaleza, como debe ser, para sacar el máximo provecho de los navegadores modernos y usar HTML5, CSS3 y jQuery para proporcionar una experiencia de usuario maravillosa para los propietarios de teléfonos inteligentes y tabletas», comienza diciendo este artículo que analiza las tendencias del año que pasó. Experiencia de usuario independiente del dispositivo, elementos fijados en pantalla, diseños para tocar, uso de grillas al estilo Pinterest, formularios de registro ultrarápidos y buscar una conexión emocional con el usuario son algunas de las claves que reconoce en el diseño web actual.

[tf_button link=»http://econsultancy.com/ar/blog/11005-20-experiential-web-design-trends-for-2012″ align=»center»]Ver[/tf_button]

Liffect, generador de animaciones en CSS3 para galería de fotos

Sebastián Thüer · 13.11.2012 ·

Una de las grandes incorporaciones del CSS3 es la introducción de algunos elementos básicos para realizar animaciones. Mientras que antes había que recurrir a Flash o trucos de javascript, la versión 3 del CSS incorpora de forma nativa algunos etiquetas que permiten mover los elementos presentes en la pantalla.

Lieffect es un generador de animaciones pensando para elementos que se muestran en listas, cómo sería una galería de fotos. Desde su página nos deja elegir el tipo de animación, su duración y nos ofrece que el código que debemos ingresar en nuestra página. Aunque las animaciones están basadas en CSS, igualmente se usa algo de javascript. 

En lo personal, prefiero un sitio web calmo donde ningún elemento se escape de mi control y pueda navegar tranquilo. Sin embargo, a veces un pequeño toque de animación ayuda a realizar el diseño y dotarlo de personalidad. Eso sí: ¡No abusar!

  • Liffect: effect for lists 

Para geeks con estilo: Los autos de James Bond [infografía]

Sebastián Thüer · 09.11.2012 ·

James Bond es uno de esos personajes del cine que han sobrevivido a varias generaciones. Las películas del agente secreto del servicio británico no suelen descollar por su originalidad sino todo lo contrario: apuestan por una serie de clichés reconocibles como son su gusto por las mujeres bellas, los coches y la buena vida.

En este caso, la atención está puesto sobre los autos presentes en las diferentes películas del agente 007 que sirven como excusa para un cuidado trabajo de diseño que recupera las líneas principales de cada vehículo con un interesante trabajo del color en las secuencias.

Pero lo interesante es que también hay una infografía interactiva especial para diseñadores web muy geeks: los autos están dibujados con vectores con CSS3.

CSS3 Maker, un sencillo generador de estilos CSS3 online

Sebastián Thüer · 26.03.2012 ·

CSS3 Maker: Generador online de CSS3

Bordes curvos, gradientes de color, animaciones, transisiciones, sombras y nuevas tipografías son solo algunas de las ventajas que trae CSS3 para los diseñadores web. Sin embargo, muchos todavía desconocen las nuevas etiquetas y otros se complican con la escritura específica que hay que realiza para algunos navegadores.

Para eso sirven herramientas como CSS3 Maker, un sitio web que nos ofrece las funciones más usuales que incorpora la nueva versión de CSS y genera las sintaxis automáticamente a partir de las opciones que configuramos en línea.

Sencillo y bastante práctico.

 

 

HTML5: Qué herramientas conviene usar ahora y cuáles deben esperar

Sebastián Thüer · 01.02.2012 ·

Logo sitio html5please.us
Varias veces en este blog hablé sobre la conveniencia de comenzar a utilizar HTML5 en el diseño web. Desde la Guía de HTML5 para diseñadores web, esta presentación sobre HTML5 en 15 minutos hasta el listado de recursos HTML5 para comenzar ya.

De todas maneras, antes de correr a estudiar HTML5 hay que tomar nota que se trata de una versión de HTML en pleno desarrollo y que todavía hay algunas funcionalidades en modo experimental o que se van corrigiendo sobre la marcha. Por eso es interesantes darse una vuelta por HTML5please.us donde hay un buen listado de todas las funcionalidades del lenguaje, su estado de desarrollo y nivel de compatibilidad.

Por ejemplo, ya es hora de comenzar a utilizar border-radius para las esquinas curvas en lugar de emplear imágenes, pero hay que evitar siemprea que sea posible la etiqueta filters porque su sintaxis todavía no está fijada. Para utilizar tipografías online se recomienda @font-face pero asegurando la compatibilidad para navegadores que no soportan esta propiedad.

Captura pantalla sitio html5please.us
Captura pantalla sitio html5please.us

Lo mejor de todo es que la información funciona al estilo WIKI pero con un formato mucho más amigable y rápido para la consulta: se puede editar la información publicada, consultar qué navegadores soportan determinadas etiquetas y obtener enlaces para ampliar la información.

Ya estás informado: antes de lanzarte de lleno al HTML5 conviene darte una vuelta por HTML5please.us para verificar que las propiedades y etiquetas a utilizar sean soportadas de un modo estándar por los navegadores más modernos.

  • Página 1
  • Página 2
  • Página 3
  • Ir a la página siguiente »

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder