• 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

Photoshop

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.

Vuelve BundleHunt con un pack de recursos para diseñadores

Sebastián Thüer · 03.12.2011 ·

BundleHunt, el un paquete de recursos para diseñadores, está de vuelta. Si en el comercio generalista reinan los sitios con cupones de descuento, en el ámbito del diseño estos packs llenos de programas, pantillas, libros, iconos y otros recursos se están consolidando como un modo de ofrecer productos a precio promocional.

Por casi 50 dólares tenés programas de diseño, libros de Smashing Magazine, varios themes para WordPress, colecciones de vectores e iconos. Como en la anterior oferta, la mayoría del software corre sólo sobre Mac. La oferta termina el 16 de diciembre.

LayerStyle: Crear efectos con CSS3 como si fuesen capas de Photoshop

Sebastián Thüer · 03.06.2011 ·

Si el HTML dio un salto con HTML5, CSS hace lo mismo con CSS3 ¿Qué hay de nuevo en esta versión del archivo de estilo? Básicamente, muchos cosas que antes requería de ciertos trucos ahora se pueden hacer directamente desde CSS sin la necesidad de utilizar imágenes.

Bordes redondeados, sombras y fondos degradados ahora se pueden trabajar de manera directa en CSS. Eso sí, la sintaxis también se ha hecho algo más compleja porque -como toda novedad en la industria- los desarrolladores de navegadores no se ponen de acuerdo y hay que utilizar propiedas específicas.

Seguramente que para el trabajo detallado es necesario aprender la sintaxis, pero como un primer acercamiento no está demás mirar algunas herramietnas como LayerStyles que se encargan de generar el código automáticamente utilizando una interfaz mucho más amigable para un diseñador: la ventana de capas de Photoshop.

Aunque ciertamente no es 100% igual, se acerca bastante el código generado sirve para los diferentes motores de navegadores que soporten CSS3 como WebKit (Chrome, Safari) , Gecko (Firefox, Camino) y el nuevo Internet Explorer 9.

El resulta es bastante bueno, aunque a veces puede que la pantalla del navegador se congele si agregamos demasiados efectos. Igualmente el proyecto de Felix Nicklas es de código abierto con lo cual es esperable que se vaya mejorando.

Obviamente, esta herramienta utiliza HTML5.

Una herramienta para manejar las resoluciones de pantalla en diseño web

Sebastián Thüer · 02.05.2011 ·

Uno de los dolores de cabeza más frecuentes en el diseño web es lidiar con las resoluciones de pantalla. Mientras en la gráfica optimizamos la composición para un tamaño determinado, los diseños que salen por pantalla pueden ser reproducidos en infinidad de condiciones: desde la pantalla de un smartphone hasta un LCD de 42 pulgadas.

No es solamente una cuestión de tamaño. El problema también afecta al ratio, es decir, la relación entre el alto y el ancho de la pantalla. Podemos tener ratios que van del 3:5 al 16:9 con lo cual las proporciones y distribución de los elementos varía considerablemente.

Punchcut es una empresa de diseño especializada en experiencias móviles y convergencia de dispositivos que ha puesto a disposición de los diseñadores un interesante set de recursos para contemplar el diseño con múltiples dispositivos. En un ZIP ofrecen una serie de PSD de base con el diseño en los dispositivos más frecuentes, un archivo con los ratios y resoluciones más habituales un archivo TPL para Photoshop con los preseteos para cada caso.

  • Ir Punchcut

Interfaz gráfica en PSD para el diseño en móviles

Sebastián Thüer · 25.01.2011 ·

La creación de interfaz para aplicaciones de smartphones o teléfonos móviles inteligentes es un interesante campo de trabajo que se abre a muchos diseñadores de interacción o UX. Una vez realizado el wireframe llega la hora de componer el diseño de pantalla para que los desarrolladores puedan ver con claridad como lucirá la aplicación en marcha. Es en estos casos que resulta intesante contar con los cada vez más populares kits que reúnen todo los elementos de la interfaz gráfica de un dispositivo.

iPhone 4 GUI (retina) por Rich Hemsley

Ver iPhone 4 GUI (retina)

iPhone PSD Vector Kit

Ver iPhone PSD Vector Kit

iPhone GUI PSD Version 4

Ver iPhone GUI PSD Version 4

RIM BlackBerry

Ver RIM BlackBerry GUI

BlackBerry Storm

Ver BlackBerry Storm GUI

BlackBerry Bold

Ver BlackBerry Bold GUI

Android GUI PSD

Ver Android GUI PSD

Google Nexus One GUI

Ver Goole Nexus One GUI

HTC Diamond

Ver HTC Diamond GUI

Motorola Droid

Ver Motorola Droid GUI

LG KS360

Ver LG KS360 GUI

Nokia 5800 Xpress Music

Ver Nokia 5800 Xpress Music GUI

¿Encontraste un kit para algún otro modelo? ¿Tenés un aporte propio? Dejá en enlace en los comentarios.

  • « Ir a la página anterior
  • Página 1
  • Página 2
  • Página 3
  • Página 4
  • Página 5
  • Ir a la página siguiente »

Sebastián Thüer

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