• 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

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.

BaseKit, en busca de la sencillez y profesionalidad para crear sitios web

Sebastián Thüer · 17.01.2012 ·

Encontrar una forma fácil de diseñar un sitio web y, a la vez, obtener resultados profesionales, es el sueño de muchos. BaseKit es una plataforma online que persigue este objetivo y está ampliando sus operaciones hacia el mercado lationamericano donde » el espíritu empresarial y la gran cantidad de negocios familiares existentes llevan a que mucha gente quiera crear su propia página web», dice Jaime Jiménez,  Head of Search de BaseKit para mercados de habla hispana.

BaseKit apunta a diferentes públicos: desde el emprendedor entusiasta que necesita rápidamente un sitio web hasta el diseñador profesional que quiere escribir su propio código HTML y CSS. Además, acaba de lanzar una red de diseñadores web donde poder mostrar tus trabajos, intercambiar experiencias y, lo más interesante, conseguir clientes.

De todo esto hablamos en esta entrevista a Jaime Jiménez.

En pocas palabras, ¿Qué es BaseKit?

BaseKit es una plataforma 100% online, con la que, sin tener que descargar ningún software en tu ordenador, podrás crear páginas web, sin necesidad de programar y con un resultado absolutamente profesional.

Jaime Jiménez - Head of Search BaseKit Mercados habla hispana
Jaime Jiménez - Head of Search BaseKit Mercados habla hispana

¿Qué ventajas ofrece BaseKit frente a otras herramientas de diseño web?

Las características avanzadas de diseño y edición del editor web BaseKit, lo hacen único en el mercado, ya que permite al usuario tener un control absoluto sobre la creación de su sitio web.

Por un lado, permite a usuarios sin experiencia técnica previa, diseñar su propia web de una forma rápida y sencilla a partir de una de las más de 100 plantillas web prediseñadas que la plataforma ofrece.

Pero si en cambio, eres un diseñador profesional, con BaseKit, podrás sacarle mucho más partido a tus diseños web, pudiendo acceder a características avanzadas e incluso al código HTML5/CSS3, y tener un mayor control sobre el desarrollo de tu proyecto.

Además con la solución ‘todo incluido’ de BaseKit, tendrás todo lo que necesitas para hacer una página web, sin sorpresas posteriores: alojamiento, dominio y acceso ilimitado al editor. Y si necesitas ayuda, tienes a tu disposición un equipo profesional de soporte que estará encantado de atenderte siempre que lo necesites (también incluido).

¿Cómo puede esta plataforma ayudar a los diseñadores web?

BaseKit se presenta como la mejor opción para todos aquellos diseñadores que buscan una herramienta profesional y flexible para desarrollar su trabajo. Sin duda, la mayor ventaja para ellos es, que sin necesidad de tener que crear el código, los resultados son páginas web absolutamente profesionales que funcionan y pueden ser vistas desde cualquier dispositivo, incluidos teléfonos móviles y iPads. El editor incluye funcionalidades SEO, con las que podrás responder a los requerimientos más exigentes de tus clientes.
La plataforma puede ser aprovechada también por todos esos diseñadores gráficos que todavía no se han atrevido a dar el salto al diseño web.

¿Qué es la red profesional BaseKit?

La red profesional de BaseKit nace con el propósito de ofrecer a todos aquellos profesionales del diseño que utilizan BaseKit o que les gustaría empezar a utilizarlo, un punto de encuentro en el que compartir experiencias con otros diseñadores, formarse (gracias a los seminarios y webinars que se realizarán a menudo), y en definitiva convertirse en una plataforma de promoción para ellos y sus trabajos.

Una de las ventajas importantes de pertenecer a esta Red Profesional es que podrás ganar dinero utilizando BaseKit para crear páginas webs para nuestros clientes.

¿Qué costo tiene usar BaseKit?

Un plan anual Business en BaseKit, que incluye todo lo que necesitas para crear una web profesional: dominio, alojamiento, editor web, número ilimitado de páginas en el site, tienda online… tiene un costo de AR$ 53/mes.

¿Qué importancia tiene para ustedes el mercado hispano / Latinoamericano?

Basekit es un aliado perfecto para los mercados latinoamericanos, en los que el espíritu empresarial y la gran cantidad de negocios familiares existentes llevan a que mucha gente quiera crear su propia página web. Es por esto que desde Julio de 2011 BaseKit viene operando en Argentina, Chile, México, Perú y Colombia.

Cómo crear el favicon perfecto

Sebastián Thüer · 28.12.2011 ·

Favicons, iconos para sitios web

El icono que acompaña a nuestro sitio web suele ser una pequeña pieza a lo que se le presta gran valor. En parte, porque se minimiza su importancia y en parte por el gran desconocimiento que existe entre los diseñadores web sobre cómo crear buenos iconos que logren transmitir la identidad de la página.

Comencemos por el principio. El icono que acompaña a las páginas web fue introducido por Internet Explorer 5. Para ello bastaba con copiar en la raíz del sitio web un archivo «favicon.ico» que consistía una imagen de 16×16 píxeles. Hoy en día todos los navegadores modernos utilizan los iconos. Es más, algunos navegadores como Firefox suelen dejan un soso recuadro blanco si no hay imagen asociada para mostrar.

Jon Hicks acaba de editar The Icon Handbook, un libro que contiene un capítulo entero dedicado a los faviconos o iconos para páginas webs. En .netMagazine publican un extracto del capítulo con algunos interesantes consejos. Veamos:

  • El icono no es un logotipo. Cumple una función similar a la bandera, una firma o una señal de tráfico: sirve para identificar de manera rápida y fácilmente reconocible.
  • Hay que tener en cuenta el contexto donde el icono se va a reproducir. La imagen de 16×16 ya no es el único tamaño, los smartphone y tablets y nuevos navegadores utilizan sus propias resoluciones que llegan hasta las 195 pixeles en el caso de las ventanas iniciales de Opera.
  • Las imágenes de mayor tamaño pierden nitidez al redimensionarse a otro tamaño y crean pixeles intermedios que dificultan la interpretación del gráfico. Por eso, lo mejor es incluir varias versiones del mismo icono
  • El formato ICO y el PNG son los más adecuados. Ambos soportan transparencias y pueden ser reproducidos sin problemas por la mayor parte de dispositivos y navegadores.
  • Una vez que tenemos la imagen de base en formato vectorial, el diseño tiene que partir del tamaño más pequeño y es fundamental borrar los píxeles intermedios que crean automáticamente los editores de imágenes.
  • El formato ICO permite agregar múltiples resoluciones a un mismo archivo.
  • Hay que considerar el formato tamaño para los dispositivos táctiles de Apple que trabajan en resoluciones diferentes (72×72). Los dispositivos con Android también lo soportan.

 

WordPress vs. Drupal

Sebastián Thüer · 22.12.2011 ·

Probablemente WordPress, Drupal y Joomla son los gestores de contenido (CMS) más utilizados por desarrolladores, diseñadores y administradores de sitios web. La versatilidad que ofrecen, junto con la experiencia de varios años y la robustes propia de las aplicaciones de software libre los han ubicado en un lugar destacado.
Personalmente, trabajo con WordPress y -algo menos- con Drupal y por eso me resulta interesante leer esta comparativa publicada en Smashing Magazine. Antes de ponerse a discutir «cuál es mejor» conviene detenerse en cuáles son sus principales fortalezas a la hora de tener que optar por uno.

WordPress posee una enorme comunidad de usuarios y es debería ser la primera opción cuando se trata de llegar a usuarios que no está muy familiarizados con el HTML. Para los diseñadores, la personalización resulta bastante más sencilla y para los expertos en SEO el manejo de las redirecciones y URL es tan sencillo como eficaz.

Drupal tiene su fortaleza en un completo sistema de manejo de permisos por usuarios con lo cual podemos crear un entorno donde existas múltiples roles y funciones. Puede gestionar mejor picos de mucho tráfico y posee un sólido manejador de base de datos.

¿WordPress o Drupal? La respuesta depende de para qué. La Casa Blanca, por ejemplo, gestiona bastante de sus sitio a través de Drupal por la solidez que le ofrece la herramienta. Por contrapartida, la curva de aprendizaje para un administrador es más lenta y no siempre resulta fácil introducir modificaciones a la estructura predeterinada.

Pero si lo que importa es un diseño creativo y la posibilidad de personalizar el sitio WordPress saca unos cuerpos de ventaja. Hay cientos de themes de muy buena calidad que permiten modificar radicalemente el aspecto del sitio sin necesidad de tocar el corazón del sistema.

  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 13
  • Página 14
  • Página 15
  • Página 16
  • Página 17
  • 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