• 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

Flat design, ¿la tendencia más popular de la web?

Liliana Bustillos · 23.03.2017 ·

El flat design o diseño plano surgió hace algún tiempo de la mano de Microsoft en contraposición a Apple. La firma de Steve Jobs apuesta por un diseño realista o skeuomorphism que imita la realidad a través del uso de sombras,
texturas y todo tipo de trucos visuales. Ahora bien, el diseño plano o, denominado “auténticamente digital” por Microsoft, como nos hace entender su nombre, es un diseño minimalista, moderno, limpio y sencillo que ha adquirido protagonismo estos últimos años gracias a su facilidad de adaptarse a cualquier pantalla y que, según los expertos del diseño web, seguirá siendo tendencia por muchos años más.

El diseño plano o flat design está influenciado por el estilo suizo; un diseño gráfico desarrollado en Suiza en la década de los años 50. Para entonces, se buscaba lograr la unidad del diseño a través de la asimetría en la composición. La información que se deseaba reflejar debía ser clara, legible y objetiva para lograr que fuera socialmente útil e importante.

Desde el año 2002, Microsoft ha implementado en sus lanzamientos el diseño plano como característica de diferenciación entre otras empresas, el cual estuvo dominada por formas grandes e imágenes brillantes acompañadas por fuentes tipo San-serif.

Ya que tenemos una idea general de lo que es el diseño plano, aquí te dejamos sus características principales para que decidas si este tipo de diseño es que el que más le conviene a tu página web o no:

  • El flat design se caracteriza por el uso de colores planos y vivos
    con pocas variaciones en la paleta para favorecer el contraste sobre fondos oscuros e imágenes.
  • Con sus composiciones limpias y minimalistas, ofrecen un contenido sencillo y libre de distracciones, donde el texto debe ser reducido a lo estrictamente necesario. En el diseño plano aplica el conocido decir de menos es más con el objetivo de lograr un diseño más funcional.
  • Las tipografías que reinan en el mundo plano son las Sans Serif con un uso elegante y moderado de tamaños y negritas resaltar contenidos.
  • La diferencia primordial entre el diseño realista y el plano es la ausencia de efectos visuales, degradados, texturas y sombras, los cuales tienden a causar distracción en el usuario y a recargar el ambiente visual.
  • Por último, las formas geométricas y los íconos sencillos son fundamentales en el
    flat design, debido a que aportan nitidez al diseño global.

¿Todavía no estás convencido? Te mencionamos algunas ventajas que no solo resaltan su parte estética, sino su funcionalidad que es lo que al final cuenta.

  1. Este tipo de diseño facilita el uso y la comprensión de interfaces gráficas en las pantallas de los dispositivos móviles como tu smartphone o Tablet.
  2.  Al momento de diseñar una página web, tendrás mucho más libertad en el uso de los recursos y, así, lograrás transmitir la información que desees de forma más directa (el conocido call to action). Por eso, es más recomendable este tipo de diseño para los landing pages o webs de una sola página en donde la comunidad web que te visita podrá encontrar y entender la información de forma más fácil y rápida.
  3. Por su diseño simple, el uso de colores vivos producirá en tu portal web un ambiente amigable y provocará una serie de emociones positivas en el usuario.

Gracias a su diseño adaptable (Responsive Design), el diseño plano es perfecto para acomodarse a cualquier tipo de formato, incluyendo teléfonos inteligentes, pantallas con retina display, tablets y monitores, facilitando así la conservación del look minimalista de la web en otros dispositivos. Además de su funcionalidad, las páginas web o aplicaciones con diseño plana son fáciles de usar, tienen una apariencia moderna, son más eficientes y tardan menos tiempo en cargar su contenido, el cual, además, se deja de rodeos y va directo al punto. Para que tengas una buena idea de la aplicación de este tipo de diseño, Microsoft, con su sistema operativo Windows 8, fue el pionero del flat design. El landing page de neuvoo también es un gran ejemplo del diseño plano.

Si decides que el diseño plano es la mejor opción para modernizar tu página web, solo debes recordar que ¡menos es más!


Autora invitada: Liliana Bustillos, del equipo de comunicaciones de neuvoo.

JPG, GIF y PNG: Para qué sirve cada formato y cuándo usarlo [infografía]

Sebastián Thüer · 17.02.2017 ·

Unas de las dudas más frecuentes de los diseñadores web que recién comienzan tiene que ver con los formatos de archivos. Los navegadores web puede mostrar imágenes con extensiones JPG, PNG y GIF. Pero cada una tiene sus particularidades.

EL JPG es el formato estándar de la mayorías de las cámaras de foto. Admite diferentes niveles de compresión de la imagen, puede reproducir con bastante fidelidad los colores y también posee buen desempeño en imágenes oscuras o con sombra. Por ello sus uso predominantes es mostrar imágenes fotográficas.

El formato GIF solo permite una paleta de 256 colores pero incorporara canales de transparencia. Las imágenes se comprimen pero sin pérdida de calidad. Por ello, se utiliza en iconos y gráficos con pocos colores. Además, tiene una característica única: el formato puede contener una secuencia de imágenes, de forma tal que puede contener una animación simple.

El PNG es el último formato en arribar a la web. Se presenta en dos versiones: el PNG de 8 bits que es muy similar al GIF, y el PNG de 24 bits con la misma cantidad de colores que un JPG. El PNG comprime la información sin pérdida de calidad e incluye un canal alfa para añadir una escala de transparencia. Se emplean fundamentalmente para logos que necesitan transparencia y degradados e imágenes de alta calidad, cuando el tamaño del archivo no es un problema.

Todo esto está explicado visualmente en la siguiente infografía:

Vía: TicsyFormacion

Dime donde diseñas y te diré cuanto ganas: El sueldo de diseñadores según puesto y país

Sebastián Thüer · 08.08.2014 ·

Los diseñadores web suelen tener la impresión general de que su trabajo está mal pago ¿Realmente es así? Cameron Moll, del sitio Authentic Jobs, hizo un sencillo cuestionario compuesto por algunas preguntas básicas: ¿cuánto ganas al año en tu trabajo de diseño? ¿cuál es tu título? ¿en qué país resides?

Los resultados están disponibles y arrojan algunos resultados bastante interesantes. Hubo 1.000 respuestas de más de 58 países de todo el mundo y entre los datos generales más destacatos encontramos:

  • El ingreso más alto provine de Palo Palto (California) donde un desarrollador afirma ganar unos USD $950.000 al año.
  • El más bajo se trata de un freelance en Túnez, que apenas llega a las USD $200.
  • El salario medio de un director creativo o de diseño es de unos USD $$115.500 al año; mientras que un diseñador sr. está en unos USD $85,716.

Ingresos según puesto

Si entramos a mirar un poco los detalles vemos que hay bastante diferencia entre los ingresos según sea el puesto. Un diseñador junior recibe sólo nos USD $43.000 al año, mientras que un diseñador senior lo duplica con casi USD $90.0o0 anuales.

Como era de esperarse los mejores ingresos son para los puestos jerárquicos. Un Director de Arte se aproxima a los USD $120.000 anuales; un Director de Experiencia de Usuario algo menos (USD $117.00 aproximadamente) y un Director Creativo o Director de Diseño se ubica en unos USD $114.000.

El siguiente gráfico muestra los diferentes ingresos promedio según el puesto:

ingreso-web01

Ingresos según región del mundo

Más de la mitad de los cuestionarios enviados se hicieron desde Estados Unidos. Luego le siguen Reino Unido, Canadá y Alemania. Apenas 4 españoles y 5 lationoamericanos respondieron por lo cual los países de habla hispana están subrepresentados en los resultados.  Por lo tanto, los sueldos indicados hay que tomarlos como ingresos propios del hemisferio norte más que del sur del mundo.

En cambio, sí se puede hacer una comparación entre Estados Unidos y Europa a nivel global. En todos los rubros del diseño se puede observar que los norteamericanos tienen mejores sueldos. Pero hay más: la brecha se amplía cuando hablamos de puestos jerárquicos con personas a cargo: un director general de diseño gana unos USD $138.666 en USA contra unos USD $73.323 en Europa, es decir, casi el doble.

El siguiente gráfico muestra los niveles de ingreso según puesto comparando USA y Europa:

ingerso-web02

Y por casa… ¿cómo andamos?

10 habilidades que necesita un diseñador web

Sebastián Thüer · 11.03.2014 ·

habilidades

Crear sitios web no se trata solo de diseñar y programar. A medida que el sistema de producción para la web se va complejizando por la propia evolución del campo, el avance tecnológico, nuevas demandas y nuevos perfiles de usuarios es necesario adquirir nuevas competencias. El diseñador web Ben Hunt ha hecho una lista con las 10 habilidades todo diseñador web debería tener:

1. Escritura y edición

La habilidad más necesaria en el cualquier campo del diseño es la comunicación. En este sentido, poder expresar claramente ideas de forma verbal y escrita es un capital enorme y mucho más valioso que hacer trucos exóticos en Photoshop. Una redacción clara y efectiva ayuda al propio diseñador a desarrollarse como profesional y le permite ayudar a sus clientes a establecer su marca en la web. Una buena selección de palabras es también el punto de partida para la usabilidad: elegir las palabras adecuadas para etiquetar el contenido, indicar la sección del sitio donde el usuario está o poner título al contenido.

Además, los motores de búsqueda que indexan sitios web son devoradores de texto. Un contenido bien organizado, estructurado y redactado tiene muchas más chances de lograr una buena ubicación en las páginas de resultados de búsquedas que otro que no lo sea.

2. Concepción holística

Básicamente, significa poder ver un problema desde diferentes ángulos. Diseñar para la web no es un ejercicio mecánico y simple de trasladar el contenido hacia un nuevo soporte. Si queremos que un sitio funcione como una pieza de comunicación interactiva, hay que ponerse en el lugar del usuario y pensar realmente qué tipo de contenido le interesaría y de qué forma debería estar presentado.

Un vicio común de todos los diseñadores es enamorarse (primero) y odiar (después) su propio trabajo. Por eso, hay que ser capaz de tomar cierta distancia de las propias creaciones e intentar hacer un análisis más realista. La concepción holística no es algo que se pueda aprender en un curso, más bien requiere un cierto entrenamiento en observar a los demás y ver cómo se comportan frente a una computadora.

3. Teoría del diseño

Muchos diseñadores tienden a menospreciar el aporte conceptual y teórico de la teoría del diseño. Creen que se trata de una serie de principios abstractos que poco pueden aportar a algo tan «novedoso y dinámico» como el diseño para la web. Nada más alejado de la realidad. En la web el componente gráfico es fundamental y más allá de los trucos visuales o eyecandies hay que volver a pensar en los principios básicos de la teoría del diseño: composición, equilibrio, proporciones, color, contraste y flujo de lectura.

Luego, en un segundo nivel, tenemos aquellos aspectos más específicos que hacen a la puesta en escena del diseño: tipografía, edición de imágenes, 3D y los diferentes recursos que se emplean para materializar el diseño. Ambos niveles son importantes: el más general permite organizar, clarificar y facilitar la información; el segundo, le da un acabado y terminación que hará que el producto tenga un aspecto único y encantador. Pero atención: si no hemos resuelto bien los aspectos generales del diseño poco podrá hacer una linda ornamentación.

4. Escuchar & discernir

El ego de los diseñadores es un tema complicado. Muchos piensan que sus años de estudio y experiencia le dan un estatus superior sobre sus clientes que son incapaces de apreciar su capacidad creativa y su obsesión por lograr la perfección en cada pixel. Algo de razón pueden tener, pero nunca hay que subestimar a nuestros clientes que por lo general llevan años en el negocio y conocen mucho mejor que nosotros su mercado. Por lo tanto, la regla básica es muy sencilla: escuchar.

Cada negocio tiene sus necesidades particulares. Será la experiencia y el conocimiento del medio lo que ayude al diseñador a discernir en qué aspectos debe prestar especial atención a las indicaciones recibidas y en que cuestiones puede innovar aportando su propio toque personal. Pero siempre hay que tener en cuente que los grandes diseños, las propuestas audaces e innovadoras que marcan tendencia tiene muy claro sus objetivos y se esfuerzan en cumplirlos.

5. Autoaprendizaje

Si por cada tecnología, producto o servicio nuevo que aparezca en el mercado vas a necesitar tomar un curso lo más probable es que pierdas mucho dinero. El diseño web requiere habilidades en diseño visual, tecnología, comunicación, psicología, programación y empatía. Eso requiere un esfuerzo constante para mantenerte actualizado tanto en la nueva versión de Photoshop como en estudios de psicología experimental. Requiere conocer el estado del arte en el diseño web pero también las herramientas tecnológicas que se están empleado. Hay que estar al tanto de estudios e investigaciones sobre uso de la tecnología tanto como las nuevas tendencias en diseño.

¿Cómo sobrevivir en esta jungla? Un buen punto de partida es dedicar algo de tiempo a bucear entre los sitios de referencia de las áreas que nos interesan y darles regularmente un vistazo para ver qué hay de nuevo. Lo mismo podemos hacer con Twitter que es medio fantástico para ver lo que están haciendo los líderes y referentes de la industria en distintos temas.

6. SEO

«Si un árbol cae en el bosque pero nadie lo veo, ¿cayó realmente ese árbol?», dice una pregunta filosófica clásica. En el diseño web, existir quiere decir estar presente en las páginas de resultados de los buscadores que a pesar del enorme poder de las redes socialeles siguen siendo un medio fundamental para encontrar el contenido qué buscamos. Search Engine Optimization (SEO) u optimización para buscadores es el nombre que recibe un conjunto de técnicas y estrategias para hacer que nuestro sitio pueda ser leído, interpretado y clasificado por los buscadores.

Optimizar las páginas para que puedan ser encontrados por los buscadores es una parte importante del diseño web hoy en día. Es más, casi nadie contrataría un diseñador que no pudiera hacerlo. Hay que tener en cuenta que existen expertos en marketing y buscadores que se dedican al SEO 100% y por lo tanto no competimos con ellos en el trabajo, sino que debemos poder complementarnos y entender que si nos piden incluir determinadas palabras claves, en ciertos lugares y con una serie de etiquetas precisas no es un capricho sino una necesidad que debemos satisfacer. Y sino trabamos con expertos, al menos debemos poder proporcionar un sitio web con un nivel de optimización decente que permita a los buscadores indexar el sitio y ofrecer descripciones claras en las páginas de resultados de búsqueda.

7. Creatividad gráfica

¿Por qué esta habilidad está tan abajo en la lista? Porque se puede hacer un buen sitio siguiendo las teorías del diseño sin necesidad de ser creativo. Podemos hacer una página eficaz y que funcione sin necesidad de revolucionar el campo del diseño. Sí, seguro que una propuesta innovadora y original le da un plus a nuestro trabajo, lo hace reconocible y eleva la calidad del servicio que ofrecemos pero primero hay que preguntarse si el sitio que vamos a desarrollar realmente necesita de ello.

Google, eBay y WikiPedia son sitios con un diseño muy sencillo y llano que sin embargo funciona. Sin embargo, muchas veces hay que lograr un impacto (más en nuestros clientes que en los usuarios finales del sitio web) tenemos que frotar la lámpara para crear alguna imagen que deslumbre.

8. Producción de sitios con HTML / CSS

Hace mucho tiempo atrás pensar en un diseñador web que no supiera escribir código HTML era sencillamente absurdo. Sin embargo, con el auge de las herramientas de diseño visual que generan código de forma automática (Dreamweaver) y un gran número de empresas que se especializan en trasladar un diseño en Photoshop a HTML y CSS esta necesidad no se hizo tan patente.

Por mi parte, creo que saber HTML y CSS es imprescindible para dedicarse de forma más o menos profesional al diseño web. Pero ese conocimiento no garantiza por sí solo que sepamos crear buenas páginas. Saber HTML y CSS no solo nos permite crear el código de nuestra página sino que incluso nos ayuda a crear una forma de pensar, organizar y trabajar con los elementos del diseño aunque no seamos los responsables finales del código. Y nos permite no depender de una persona o de un programa para hacer un cambio o actualizar nuestro diseño.

9. Sentido del negocio

Hacer páginas web es un negocio. Ya sea que trabajemos como freelance, en una pequeña empresa, una gran compañía o sea una ocupación part-time lo cierto es que se trata de una actividad por la cual queremos ganar dinero. Entonces, es importante conocer cómo funciona el mercado, cómo funcionan las empresas y tomar decisiones comerciales razonables. Mucho de este conocimiento lo da el sentido común aunque también es interesante conocer gente del medio ya sea a través de amigos, asociaciones o eventos para aprender de personas con más experiencia.

Si no sabemos nada de negocios y tenemos que enfocarnos en una sola cosa debería ser el marketing. Crear cosas que la gente quiera y hacer que elijan nuestro producto o servicio por encima de los demás. Una vez que logremos esto habrá que administrar el dinero y hacer una lista con nuestros ingresos y gastos para saber si nuestro trabajo vale la pena.

10. Mecanografía

Un diseñador web pasa la mayor parte del tiempo detrás de un teclado. Aunque la tecnología avanzó mucho todavía no encontramos una forma mejor de ingresar grandes cantidades de texto que escribiéndolo tecla por tecla. Si bien los programas de gráficos e edición de imágenes se manejan mayormente con el mouse, hay muchas otras actividades que hace un diseñador y que requieren escribir: armar un presupuesto, enviar un email, codificar en HTML, CSS, PHP o el lenguaje que sea, crear un informe o completar un formulario online.

Agregaría en este punto también el conocer los atajos de teclado (shortcuts) de los programas que utilices más habitualmente. Realmente se ahorra mucho tiempo y se gana en productividad con ello.

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

  • Página 1
  • Página 2
  • Página 3
  • Páginas intermedias omitidas …
  • Página 19
  • Ir a la página siguiente »

Sebastián Thüer

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