• 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

Comprendiendo la semántica del HTML5 a través de un diagrama de flujo

Sebastián Thüer · 13.02.2012 ·

Logo HTML5Una de las principales características de HTML5 son sus posibilidades semánticas. Si antes usábamos DIV para dividir las diferentes unidades de información sin importarnos muchos sobre el tipo de contenido que había dentro, HTML5 nos ofrece un abanicio bastante más amplio: NAV, ARTICLE, ASIDE, SECTION, FIGURE y más.

La semántica es importantes porque ayuda a definir la naturaleza del contenido que se está mostrando. Si bien visualmente no hay grandes diferencias -podemos usar DIVs y modelarlo con CSS- desde el punto de vista lógico es mucho mejor que un intérprete como el el navegador pueda detrminar si lo que estamos mostrando es un menú para acceder a diferentes secciones, el artículo principal de una nota, una información complementaria o la sección de una monografía. En el futuro, seguramente los diferentes dispositivos harán uso intensivo de la semántica.

El problema para los diseñadores web es que a veces no está demasiado claro qué etiqueta utilizar en función del contenido que irá dentro. ¿Si es una noticia tengo que utilizar ARTICLE? ¿Si es la segunda parte de una nota en serie tengo que utilizar SECTION? ¿FIGURE se utiliza para tablas, ilustraciones, fotos o para todo?

Para ayudar a comprender mejor el funcionamiento de cada etiqueta el sitio HTML5 Doctor  ha elaborado un diagrama de flujo bastante clarificador. Para quienes no sepa cómo funciona esto es bastante simple: Se comienza en Start y hay que ir respondiendo las preguntas para deterinar qué etiqueta conviene utilizar. Ojo, si el contenido no tiene ningun valor semántico seguimos utilizando el viejo y conocido DIV.

Diagrama de flujo semántica HMLT5

Color Thief, obtener paletas de color a partir de una imagen

Sebastián Thüer · 06.02.2012 ·

El script Color Thief en acciónLa elección y construcción de una paleta de color para el diseño web probablemente sea una de las tareas más delicadas e importantes para determinar el look & fell de una aplicación. Definir el color dominante, sus variaciones tonales y uso de complementarios es una tarea que suele llevar bastante tiempo y donde tenemos el auxilio de varias herramientas como Adobe Kuler y aplicaciones como Website Color Schemer que a pesar del tiempo sigue siendo un de mis favoritas.

Pero la popularización de los móviles con cámara y los smart phones ha hecho que muchos diseñadores comencemos a tomar fotos solamente cuando vemos un paisaje, detalle o ambiente que nos resulte «inspirador». De estas imágenes casuales suelen derivar composiciones y, como no, paletas de colores que luego utilizamos en nuestras creaciones.

Por eso me ha sorprendido gratamente saber que existe una bibioteca de JavaScript que permite analizar los colores predominantes de una imagen como Color Thief. Esta aplicación, analizar las imágenes y puede obtener con bastante buen criterio una paleta de colores. Pensemos que con esto podemos crear una galería de fotos para buscar por colores. Podemos hacerlo para nuestra propia bibioteca de imágenes o incluso con imágenes de stock que hayamos adquirido.

Otra posibilidad de este librería: hacer que la tonalidad de una interfaz se adapte a una determinada imagen de forma automática. En definitiva, un excelente ejemplo de intersección entre diseño y programación.

Cómo se crea un Doodle

Sebastián Thüer · 02.02.2012 ·

El Doodle de Google para el aniversario de YupanquiGoogle decidió homenajear a Atahualpa Yupanqui con un doodle -una modificación alusiva del logotipo de Google- hace un par de días donde se podía ver una enorme guitarra que atravesaba las letras con el nombre del buscador, unas montañanas en el fondo, vaquitas y un sol: algunos de los elementos más iconónicos en la obra del folclorista argentino.

Lo interesante es que el blog de Google AdWords -realmente no sé qué tiene que ver este contenido aquí- ha entrevistado a Jennifer Hom, la diseñadora que lo creó donde habla sobre su trabajo en Google. Es sabido que Google tiene un extremo celo sobre el trabajo de sus empleados, así que no hay datos reveladores pero si algunas pistas y cuestiones bastantes curiosas.

Aquí van algunos de los puntos, a mi juicio, más interesantes de la entrevista:

  • Desde hace relataviamente poco tiempo existe un equipo exclusivo para diseñar los doodles.
  • No son más de 5 diseñadores los que crean los Doodles para todo el mundo.
  • Parce ser que todos los Doodles, de eventos internacionales y locales, se diseñan desde las oficinas de Google en Mountain View.
  • Los Doodles más complejos -como el de Gibson Les Paul’s o Freddie Mercury pueden llevar varios meses de trabajo en equipo.
  • Jennifer consiguió su trabajo en Google de una forma bastante clásica: cuando estaba terminando sus estudios de Bellas Artes mostró su portfolio y la llamaron a una entrevista.

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.

5 recursos de diseño que ya pasaron de moda y cómo suplantarlos

Sebastián Thüer · 19.01.2012 ·

El diseño -ya sea web, gráfico, de modas o industrial- está alcanzado por tendencias o modas que marcan una cierta pauta de los recursos que se están utilizando. De algún modo, los usuarios o consumidores esperan manejarse en un contexto previsible que las aporte seguridad y, a la vez, reconocer rasgos distintivos que doten de personalidad al objeto.

En este sentido, es interesante el aporte que hace DesignShack a través de 5 Former Design Trends That Aren’t Cool Anymore (So Stop Using Them) donde recoge algunos de los principales clichés del diseño que han sido exprimidos hasta el hartazgo y ya no provocan ese toque sofisticado y moderno que tenían antaño.

1. Bevel & Emboss (biseles y relieve)

En algún momento pudo ser original, pero ahora parece un recurso de principiante con el Photoshop. Una imagen así hace que tu diseño automáticamente retroceda 10 años.

Bevel & Emboss

Hoy en día se tiende a minimizar el uso de estos recursos y darle a los objetos un aspecto más real sin sombras y brillos artificiosos. En lo personal creo que no hay que obsesionarse con estos efectos iluminación y mejor trabajar con sombras más situales. De todas formas, si la intención es dar sensación de relieve mejor trabajar con sombras y brillo más tenúes y progresivos. Un buen ejemplo es este trabajo de Matt Gentile.

Twitter UI

2. Brillos «a la» Web 2.0

Sí, en un momento la web 2.0 se puso de moda y surgieron los colores brillantes y efectos de plástico brillante. Era un lindo momento donde decir redes sociales era estar a la vanguardia y todo el mundo ponía el rótulo de «beta» al lado de su logo.

Gradientes web 2.0

Esa época ya pasó. Los degradados con efecto vidriado ya tuvieron su hora estelar y si bien son un recurso válido su abuso terminó por homogeneizar muchos sitios web. Hoy en día es preferible apostar por degradados más suaves, bordes ligeramente marcados para despegar el botón del fondo. Como lo hacen en la web de Firefox.

Botón Firefox

3. Textos en manuscrito

Por alguna razón la utilización de la tipografía manuscrita cada tanto resurge en el diseño. Se trata de un recurso que bien utilizado aporta un toque fresco y casual para quebrar la sucesión de tipografías formales. Pero normalmente se termina recurriendo a fuentes gratuitas que aparecen por todo el sitio con lo cual se pierde su intencionalidad original y el sitio en lugar de lucir «fresco» parece desorganizado y con problemas de legibilidad.

Tipografía manuscrita

En su lugar, mejor apostar por tipos claros y simples para presentar el texto. Hoy en día, existe muchísimas tipografías con estilo y buena legibilidad. Mejor reservar el estilo manuscrito para lugares donde realmente tenga valor.

Tipografía Brandon Grotesque

4. Promociones estrelladas

Ofertas, descuentos, 2×1 y demás reclamos promocionales solían estar siempre dentro una estrella de colores vibrantes. Un golpe de efecto al que ya le pasó su cuarto de hora y que actualmente se puede reemplazar por una gama mucho más amplia de recursos gráficos para destacar argumentos de venta.

Las estrellas con promociones ya no van más

En su lugar, podemos optar por lazos colocados en esquinas, vértices o centrados en la misma página. Otra alternativa son los distintivos o divisas que ayudan a destacar la información pero de un modo mucho más armónica e integrado con el resto de los elementos gráficos de la página

Lazos o divisas para remarcar ofertas

5. Sombras exageradas sobre el texto

Hubo un tiempo en que el descubrimiento de las sombras causó furor y se aplicaba a casi cualquier elementos. Como suele ocurrir con las cosas nuevas, se utilizó de una forma abundante y exagerada donde pasada la sorpresa inicial la sombra se convertía en un elementos distractivo. Como ocurre con el efecto «bevel & emboss», utilizar este recursos de la misma manera significa gritar a los 4 vientos que nuestro criterios estético se ha detenido en el tiempo.

Sombras exageradas no van más

¿Hay que dejar de usar sombras? Seguro que no, pero si emplearlas de un modo diferente. Apostar por la sutileza, los matices y degradados suaves que ayuden a reforzar la comprensión del texto. O líneas definidas que ayuden a marcar el relieve sin utilizar excesivos nivels de degradado.

Degradados suaves para las tipografías

Conclusión

Un sitio con aspecto anticuado y donde adentrarse en sus página implique un salto en el tiempo es algo que nadie quiere. Una cosa es utilizar la estética retro o vintage como recurso y con cierto sentido y otra cosa es abrir en el navegador un diseño al que simplemente le pasó el tiempo.

Las técnicas y recursos descriptos son propias de un modo dediseñar sitios web que ya está superado. No quiere decir que lo que se utiliza hoy sea mejor -aunque es cierto que ahora hay una mucho mayor preocupación por los pequeños detalles- pero sí que al menos aporta un toque actual al diseño. En definitiva, aggiornare a los tiempos que corren.

  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 7
  • Página 8
  • Página 9
  • Página 10
  • Página 11
  • 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