• 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

Diseño Web

Cómo combinar tipografías

Sebastián Thüer · 27.03.2013 ·

El uso de tipografías en la web ha crecido mucho a partir de las posibilidades que brindan CSS3 y HTML5 para salirnos de las fuentes por defecto que incluyen los diferentes sistemas operativos. Sin embargo, mientras el repertorio tipográfico era acotado no había muchas posibilidades de error a la hora de combinar distintos tipos. Hoy, las posibilidades de crear mezclas de estética dudosa es una realidad.

standbuy

¿Cómo elegir una buena combinación de tipografías? Carrie Cousins ha escrito un interesante artículo donde da varias pistas. 

  • Buscar familias tipográficas que sean lo suficientemente diferentes como para distinguirse pero, a la vez, que no tan disímiles como para transmitir sensaciones contradictorias.  Además, hay que mantener el número de tipografías a combinar tan bajo como sea posible. En general, no más de 2 o 3 familias por cada sitio web.
  • Contrastar el uso de las tipografías. Además de la familia, variar el tamaño y el color para que la diferencia sea realmente apreciable y se produzca el contraste deseado. Lo más habitual es distinguir entre la tipografía para títulos y para textos de corrido.
  • No hay que olvidar que le principio central que guía el uso de tipografías es garantizar la legibilidad. Si utilizamos alguna tipografía más compleja o difícil de interpretar, debe ser usado para frases cortas y palabras no muy extensas.
  • Considerar el eje x, es decir, la distancia que hay entre el extremo inferior y el superior de la letra x. Al utilizar familias tipografías donde el alto de la x sea similar crea una sensación de harmonía y balance.
  • Las tipografías con características similares tienden a combinar mejor entre sí. Aquellas que tienen un ancho y grosor promedio, se combinan sin demasiados problemas. En cambio, aquellas tipografías con trazos muy gordos no se integran bien con las de trazos muy delgado (y viceversa).
  • Hay tipografías más bien neutrales y otras que expresan sensaciones muy concretas. De su correcta elección depende el estilo que imprimirán al proyecto. Los tipos neutrales se pueden combinar con otros más definidos para darle más personalidad a un trabajo. Pero si se usan varias familias tipográficas estas deben expresar sensaciones similares. 

Si este pequeño resumen te pareció interesante quizás deberías leer el texto completo donde se desarrollan más estas ideas:  Mixing Typefaces: Tips and Techniques

Cream UI Pack Free, elementos de interfaz de usuarios para sitos web

Sebastián Thüer · 11.03.2013 ·

Cream UI Pack

Los UI packs son un recurso cada ves más utilizados en el diseño web. Básicamente, consisten en un conjunto de elementos de interfaz con un mismo look & feel para ser utilizado en la composición de diferentes pantallas.

En este caso, el diseñador ruso Sergey Azovsky ha creado un buen pack gratuito que incluye botones en diferentes estados, flechas, barras de progreso y navegación, calificaciones, formulario de login, calendario, reproductor de video y varias cosas más.  Cream UI Pack se puede descargar gratuitamente del sitio del autor y, por ser gratuito, es bastante completo.

[tf_button link=»http://flexrs.me/media/files/cream_ui_pack_free.zip»]Descargar Cream UI Pack Free[/tf_button]

 

 

Un vistazo al nuevo Facebook: En busca del orden perdido

Sebastián Thüer · 08.03.2013 ·

http://youtu.be/_PW54Sm99ck

«Estamos anunciando una nueva versión de Facebook diseñado para reducir el desorden y centrarse más en las historias de las personas que te importan». Con estas palabras comienza el comunicado oficial de la red social para presentar un importante rediseño con el foco puesto en una presentación más visual de los contenidos.

Con un promedio de 229 contactos por cada usuario, 7 nuevos amigos por mes y un 80% de invitaciones que son aceptadas (ver infografía) se hace cada vez más difícil organizar todo este flujo de información. Por eso, Marck Zuckerberg dijo claramente cuál es el nuevo desafío: crear el «mejor periódico personalizado del mundo». 

La nueva propuesta incluye un diseño visual renovado que jerarquiza el contenido multimedia y permite aplicar filtros. Por ejemplo, escoger entre ver fotos, ver música, ver lo que hacen nuestros amigos o las actualizaciones de las páginas públicas que seguimos. Y todo esto sería algo así: 

Imágenes más grandes y contenido multimedia jerarquizado.
Imágenes más grandes y contenido multimedia jerarquizado.

Más visual

A nivel de diseño el cambio fundamental de Facebook tiene que ver con limpiar su interfaz de usuario para permitir un mayor desarrollo de imágenes y videos. Esto es, dar al usuario una experiencia más inmersiva donde  lo central no sean los botones y opciones del propio Facebook sino la información de amigos, páginas y -también hay que decirlo- la publicidad.

Antes y después. El mismo anuncio en el Facebook actual (izquierda) y el nuevo (derecha).
Antes y después. El mismo anuncio en el Facebook actual (izquierda) y el nuevo (derecha).

Justamente, una de las principales críticas de este rediseño tienen que ver con que parece atiende más las necesidades de publicistas y anunciantes que de los usuarios. Si bien la renovación visual cae muy bien, lo cierto es que ahora la publicidad no pasa tan desapercibida como ahora -en general, relegada a una columna en la derecha- sino que se incluye en el propio flujo informativo del usuario.

Selectivo. El nuevo Facebook permite filtrar por tipo de contenidos.
Selectivo. El nuevo Facebook permite filtrar por tipo de contenidos.

Pero el rediseño trae un arma de doble filo para los especialistas en marketing: la posibilidad de filtrar las actualizaciones de páginas. Es decir, si el usuario filtra el contenido para ver solo la información de páginas públicas su pantalla de llenará de actualizaciones y avisos de productos, servicios o artistas. Pero también tiene la opción de ver solo la información publicada por amigos con lo cual toda la información de páginas de empresas será silenciada.

Experiencia consistente

Experiencia consistente a través de diferentes plataformas.
Computadora, tablet o móvil. Todo el mundo verá un mismo Facebook.

Un importante eje del rediseño de Facebook tiene que ver con ofrecer una experiencia de usuario consistente a través de diferentes dispositivos. Es decir, ver más o menos el mismo sitio en una computadora de escritorio, en el teléfono móvil o en una tablet. Hoy, la experiencia en cada uno de ellos es sensiblemente diferente.

Esta búsqueda de un mismo diseño a través de las diferentes plataformas toma como base la experiencia móvil. La propuesta de los diseñadores es un Facebook no solo más visual sino que también den ganas de tocar para realizar acciones de forma sencilla. El Facebook de escritorio con menús y botones está condenado al olvido.

Algo de este se cuenta en este interesante video que muestra las ideas y conceptos básicos que se pensaron para encarar el rediseño de la red social más extendida del mundo.

http://www.youtube.com/watch?feature=player_embedded&v=YaQQHYQHnMk#!

La nueva interface será liberada de forma gradual  para analizar los datos que recojan de la interacción con la plataforma, analizar las reacciones y hacer ajustes sobre la marcha.  

Ahora, la palabra la tienen los usuarios.

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]

El costo de un sitio web lento [infografía]

Sebastián Thüer · 07.12.2012 ·

La velocidad de acceso a un sitio es un aspecto clave de la experiencia de usuario. Y  muchas veces no se tiene en cuenta.

La performance de un sitio web pasa por muchos aspectos: un diseño pensado para mostrarse con rapidez, buena programación, uso de técnicas de optimización, un hosting eficiente y, si es necesario, una CDN para mejorar la distribución de contenido en diferentes países. Una mala performance no es solo cuestión de gusto: impacta diferctamente en las conversiones de una web.

Esta infografía muestra el costo de un sitio web lento. El 57% de los usuarios abandona una web después de los 3 segundos. Hay más: por cada seguro de demora en la carga de una página cae un 16% la satisfacción de los usuarios y se pierden un 7% de conversiones. Aquí más detalles.

Vía Mashable

  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 3
  • Página 4
  • Página 5
  • Página 6
  • Página 7
  • Páginas intermedias omitidas …
  • Página 38
  • Ir a la página siguiente »

Sebastián Thüer

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