• 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

No va más: 10 recursos visuales que conviene olvidar este año

Sebastián Thüer · 05.02.2014 ·

Ya se habló bastante de las tendencias en diseño web para este año así que esta lista propone lo contrario: identificar aquellos recursos visuales que conviene evitar. Veamos:

1. Sombras largas

long-shadow

Tuvieron un fugaz furor de la mano del flat design y la interfaz Metro que desarrolló Microsoft para Windows 8. Sin embargo, gráficamente aportan poco, no aportan volumen ni profundidad y hacen que el texto o gráfico resulte más difícil de leer.

2. Objetos espejados

mirror

El estilo lo impuso Apple y ha sobrevivido bastante tiempo. Los iPhones, iPad y MacBooks con su reflejo han sido una constante… hasta que Apple renovó su gráfico con el nuevo sistema operativo y apostó por figuras más simples y sencillas.

3. Fondos negros

boring-black

Tradicionalmente se suele decir que el fondo negro aporta sobriedad y distinción. Sin embargo, sobre una pantalla el brillo propio de un color luz estos atributos que adquiere sobre papel. En una interfaz web, el fondo negro plano (#000000) es aburrido y proporciona un contraste exagerado. La solución es emplear algunas variaciones con un toque de color, combinarlo con figuras degradadas o texturas.

4. Tipografía script

no-scripts

Son complejas de leer. Y también un recurso gastado. Las fuentes que simulan el trazo manuscrito definitivamente son un recursos para eliminar en la pantalla a menos que haya una razón contundente para utilizarlas.

5. Adiós al beige

no-beige

El diseño plano a vuelto a poner en primer plano el color. Entonces, adiós a los tonos beige indeterminados que transmiten poca personalidad y pasan desapercibidos en un contexto donde la combinación de colores brillantes o fuertes tienen un fuerte protagonismo.

6. Drop shadows

no-shadow

Las sombras que por defecto incorporan programas de diseño como Photoshop fueron espectaculares al principio pero a fuerza del uso intensivo y empleo indiscriminado se convirtieron en la forma más fácil de arruinar el diseño. Si no se van a trabajar la sombras de un modo especial , con personalidad propia y en función de la composición del diseño mejor archivar el recurso.

7. Basta de sitios móviles

Un punto polémico: los usuarios no quieren la experiencia limitada de un sitio para móviles. La mayoría de los dispositivos no tienen problemas en reproducir una página web completa por lo tanto es mejor pensar en una versión adaptada para la resolución de pantalla que un sitio despojado de todo recurso visual.

8. Basta de códigos QR sin sentido

qr-billboard

Los códigos QR que permiten a un dispositivo móvil dar información adicional sobre lo que se está viendo deben usarse estrictamente para ese propósito. Entonces, basta de usar códigos QR en un sitio web (mejor usar un enlace tradicional)., basta de códigos QR diminutos que no pueden ser escaneados por el lente del celular y basta de QR en cartelería publicitaria sobre rutas y avenidas.

9. Demasiado parallax

El parallax scrolling es una tendencia en diseño web que se está imponiendo por su simplicidad, facilidad de navegación e impacto visual. Pero como muchas cosas de moda, se utiliza demasiado y sin criterio.  Un sitio que conserve su simplicidad y agregue profundidad y atractivo con desplazamiento vertical está perfecto. Pero cuando hay demasiados elementos y efectos superpuestos se convierte en algo terriblemente confuso.

10. Tipografía muy light

helvetica-light

Los últimos lanzamientos de los sistemas operativos de Apple y Windows -que al final de cuentas son los lugares donde se marcan tendencias en el diseño de interfaces- apostaron por tipografías con trazos bastante delgados (light) que le daban un aire fresco y delicado a las pantallas. Pero, en el caso de Apple, exageró y tuvo que variar hacía una variante donde los caracteres tuvieron algo más de cuerpo porque los usuarios simplemente tenían dificultades para leer el texto. Como dice el ABC del diseño, lo más importante de un texto sea legible.

Vía Design Shack

Tendencias en diseño visual para 2014 [infografía]

Sebastián Thüer · 13.12.2013 ·

No más mujeres perfectas ni fotografías retocadas hasta el detalle. La tendencia en imágenes para el próximo año es clara: imágenes reales. Mujeres reales y no modelos. Hombres retratados en su vida cotidiana. Imágenes con componentes étnicos para mostrar la diversidad global. Vectores que muestran las imperfecciones del dibujo a mano. Fotos con reflejos en el lente que ya no es un error técnico sino opera como una marca de autenticidad.

Esta es la infografía que el sitio iStock ha elaborado donde proyecta cuáles serán las tendencias en imagen y diseño visual para el 2014, un clásico a medida que avanza diciembre.

Tendencias en diseño visual para el 2014

Vía iStock

Branding disaster: El nuevo logo de Yahoo!

Sebastián Thüer · 05.09.2013 ·

yahoo

La cuenta regresiva llegó a su fin. Yahoo se presentó su nuevo logo y muchos ya hablan de un branding disaster. Y no es para menos.

Desde hace 30 días Yahoo venía presentando diferentes versiones de su logo, algunas de las cuales estuve viendo y me parecieron trabajos bastante amateurs. Pero como duraban poco, no pasaba nada. Ahora, que nos presentan la versión final el nuevo logo de Yahoo parece un viaje en el tiempo… 10 años atrás.

Cuando el minimalismo ha dejado de ser una moda para convertirse en una necesidad de las interfaces que apuntan a la máxima simplificidad. Una vez que Microsoft innova y apuesta por el flat design para dejar atrás sombras, degradados y efectos de luces Yahoo nos devuelve una imagen propia de fines de los ’90 con un intento por dale un toque de formalidad a su logo sin perder frescura.

Para empezar, las letras de Yahoo! están basadas en Optima, una tipgorafía humanística paloseco o sin serif que puede funcionar muy bien para un estudio de arquitectos o abogados, pero que en manos de una marca que quiere transmitir frescura, desenfado y que termina con un signo de exlamación queda un poco raro.

Además, si miramos el video veremos una especie de inspiración matemática para equilibrar las líneas del diseño. Un interesante pasatiempo para un ingeniero pero algo totalmente alejado de la práctica profesional del diseño. Es más, a simple vista el logotipo luce desequilibrado y no quedan rastros de las provocativas diagonales del diseño anterior.

Hace un tiempo Yahoo a comenzando un proceso de rediseño de algunas de sus páginas e interfaces donde se aprecia una preocupación por simplificar la lectura, despojar sus pantallas de elementos innecesarios y apostar por fotografías en gran tamaño para transmitir emociones y capturar la atención. El flamante logotipo va en dirección contraria y parece más el resultado de un capricho que el de un proceso de diseño. Moraleja: En diseño, a veces contratar profesionales externos que no tengan que quedar bien con su jefe es una buena idea.

Consejos para pasar el diseño gráfico al diseño web

Sebastián Thüer · 22.08.2013 ·

web

Cada vez más los diseñadores alternan sobre diferentes plataformas. Del papel a la web, muchas veces un mismo trabajo se distribuye por múltiples canales y no sé sabe muy bien cuál soporte quedará plasmado el trabajo. De todas formas, cada área tiene sus cuestiones técnicas específicas, sus trucos y un modo de trabajo diferente.

Sin embargo, con esta tendencia a la convergencia muchas veces un trabajo que comienza para papel termina en la web… o viceversa. En este post van algunos consejos básicos para diseñadores gráficos que quieren incursionar en la web.

1. El diseño web es fluido

Hace años que lo repito: Mientras un producto gráfico está cerrado y acabado (al menos como producto, no nos metamos en tema del otorgamiento de sentido); en la web hablamos de un diseño abierto donde no sabemos muy bien bajo que condiciones nuestro trabajo será reproducido. Hoy en día menos que nunca. 

Una computadora de escritorio, una tablet o un teléfono o inclusive un smart tv. Las producciones se consumen en diferentes pantallas y con diferentes interfaces. Y un sitio web debe estar preparado para verse bien en cualquier condición. Por eso, hablamos de un «diseño líquido» o «diseño adaptativo» donde cada elemento es una pieza de rompecabezas que se ensambla de distinta forma según sea el tamaño y la resolución del dispositivo bajo el cual se muestra el sitio.

2. Aprender un poco de HTML

Seamos claros: para hacer un trabajo de diseño web medianamente profesional hay que saber un poco de HTML. Hoy en día existen múltiples herramientas que nos permiten trabajar de forma visual y se encarga de generar el código automáticamente. Algunas son muy buenas. Pero en algún punto siempre tenemos que recurrir a trabajar sobre el código, aunque más no se apara insertar un enlace, embeber información de otra página o modificar algún detalle.

HTML es un lenguaje de etiquetas, es decir, que de acuerdo al tipo de elementos que tenemos en una página le asignamos una etiqueta determinada: p a los párrafos, img a las imágenes, a  los enlaces… No hay dominar algoritmos ni técnicas de programación, solo tener algo de tiempo y ganas de apreneder.

3. El contenido es dinámico

Cuando estás diseñando un folleto, un libro o una tarjeta normalmente te envían un archivo con el texto a incluir. Sobre este texto aplicamos tipografías, interlineados, márgenes, tamaños, negritas, itálicas, separaciones de párrafo y un largo etcétera. En la web, el texto puede venir predeterminado o puede provenir de una fuente dinámica: una base de datos, una página externa, una actualización de Facebook o cualquier otro lugar que pueda almacenar información.

Es decir, no podemos trabajar sobre un texto concreto sino sobre  un área de texto que podrá variar su extensión. Pero también hay una ventaja: podemos obtener también imágenes, videos y todo tipo de contenido multimeida de forma dinámica. Por ello el consejo fundamental es emplear metáforas visuales fácilmente reconocibles por los usuarios.

4. Nuevo sistema de color

Tema de diseño estrictamente técnico: Mientras el modelo de color tinta se basa sobre la síntesis sustractiva (cada vez que mezclamos colores obtenemos como resultado uno más oscuro), la pantallas trabajar con el color luz que funciona por síntesis aditiva (mezclamos haces de luces y obtenemos por resultado un color más claro). 

En gráfica se trabaja sobre el modelo CMYK de cuatro colores, mientras que en las pantallas empleamos el modelo RGB. Es decir, los colores no son los mismos y esto se nota particularmente en el brillo de las tonalidades y la saturación de las tonalidades verdosas. Para complicar un poco más la cosa, la forma convencional de referirse a los colores en la web es sobre base hexadecimal.

5. Tipografía en la web

Años los recursos tipográficos para la web eran de una austeridad franciscana. Hoy en día, tenemos más variedad. Sin embargo debemos tener presente que la tipografía que queremos usar debe estar disponible en un servidor y descargarse a la computadora del usuario. Por lo tanto, no se trata de un recurso para abusar. 

Al mismo tiempo, tipografías que se ven hermosas en papel pueden tener problemas para mostrarse en pantalla. Y para complicar más la cosa, cada navegador y sistema operativo tiene sus bemoles y particularidades. Por eso conviene chequear bien el texto en diferentes tamaños y pantallas para asegurarse que el contenido es legible.

Eso explica porque hay tantos sitios web que para no complicarse emplean  Arial / Helvetica para los párrafos de texto: estas tipografías vienen instaladas por defecto en Windows / Mac instalada  y siempre se ve bien.

6. El tamaño de las imágenes importa

El ancho de banda siempre es un recurso escaso. A pesar de la mejora generalizada de las conexiones a nivel global, también es cierto que cada vez más programas y aplicaciones se conectan a la red y que el volumen de datos que se transporta es mayor. Conclusión: sigue siendo importante optimizar el sitio web para obtener una mejor velocidad.

Uno rol importante lo juegan las imágenes: a mayores dimensiones y resolución, mayor tamaño del archivo y más tiempo requiere para transferirse. Por lo tanto es importante limitar la resolución de las imágenes  72 DPI, aunque en el caso de los dispositivos con pantallas de alta definición como es el caso de la tecnología retina para los últimos iPad y iPhones es mejor elevarlo a 150 DPI. 

En la web se trabaja básicamente con tres formatos: JPG, GIF y PNG. El primero admite control de compresión por lo tanto hay que afinar el ojo y reducir el tamaño del archivo lo máximo posible sin sacrificar calidad de imagen. Para los otros dos formatos, hay que probar reduciendo la paleta de colores.

7. El impacto del SEO

La optimización de las páginas de un sitio web para ser correctamente indexadas por los buscadores como Google o Bing tiene un nombre: Search Engine Optimization o SEO. Esto es, que ademas de hacer diseños bonitos, funcionales y de acuerdo con el público y los objetivos del producto hay que tratar que los buscadores lo encuentren.

Para ellos conviene prestar mucha atención a algunos elementos clave de una página: el título de la misma (definida con la etiqueta TITLE), los títulos del texto (H1, H2, H3…) y siempre que sea posible tener un poco de texto para los buscadores tengan un poco algo para indexar. Básicamente, los robots de búsqueda son voraces escrudiñadores de textos y, aunque han mejorado, tiene problemas para detectar el contenido en formato de imágenes, animaciones Flash u otro tipo de elementos interactivo.

8.  El diseño no es perfecto…

Los diseñadores obsesivos por cada milímetro pueden volver locos en la web. Es imposible tener el  control total y absoluto sobre cómo se mostrará cada elemento. Aunque tecnologías como CSS y las adopción de estándares han contribuido a mejorar mucho, lo cierto es que con la variedad de dispositivos, sistemas operativos y navegadores lograr que una pantalla se va absolutamente igual es imposible.

No es para desesperarse. Siguiendo los estándares y empleando tecnologías extendidas se pueden conseguir generar experiencias muy similares. Obsesionarse porque el interlineado no funciona de la misma manera en un iPad o una PC, enojarse porque un pixel rojo no luce del mismo modo en distintos celulares no conduce a nada. En su lugar, mejor preparar un diseño para que pueda verse bien bajo múltiples condiciones.

Vía Design Shack 

Un ebook para aprender a diseñar aplicaciones para móviles

Sebastián Thüer · 31.07.2013 ·

ebook_ipad
El diseño de apps para móviles o smartphones es uno de los nichos más interesantes de hoy en día para los diseñadores. Sin embargo, dar el paso no es sencillo. Para eso llega “Diseñando apps para móviles”, un ebook en español escrito por Javier “Simón” Cuello y José Vittone, dos diseñadores argentinos que residen en Barcelona.

El libro explica el proceso de diseño y desarrollo de una aplicación para Android, iOS y Windows Phone desde la idea inicial hasta la publicación en las tiendas.

«En Internet hay mucho material sobre diseño de aplicaciones, pero la mayoría está en inglés. La documentación en español está dispersa y suele ser difícil de encontrar. Esto es un inconveniente sobre todo para aquellos diseñadores que están comenzando y aún no tienen buenas guías de referencia», dicen los autores.

El libro está pensado especialmente para diseñadores, con o sin experiencia en el diseño de aplicaciones, que quieran involucrarse en el proceso de producción de una app de principio a fin. Se desarrollan conceptos de interacción y diseño visual, comparando permanentemente a Android, iOS y Windows Phone.

El libro tiene casi 300 páginas, 18 capítulo y se ofrece en formato PDF y ePub. El precio, una ganga si te vas a dedicar al tema: 10 euros.

  • Ir al sitio web: Appdesignbook.com
  • « Ir a la página anterior
  • Página 1
  • Página 2
  • Página 3
  • Página 4
  • Página 5
  • Páginas intermedias omitidas …
  • Página 8
  • Ir a la página siguiente »

Sebastián Thüer

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