• 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

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

El manual de estilo visual de Google

Sebastián Thüer · 09.07.2013 ·

Preferencias por las formas geométricas, sombras duras en lugar de degradados y atención a cada pixel para evitar la ruidos en la imagen al modificar el tamaño. Son algunos de las normas que desarrolló Google en su manual de estilo visual que de forma no oficial está circulando por la web: Google Visual Assets Guidelines Part 1 y Google Visual Assets Guidelines Part 2.

En una empresa dominada por ingenieros no hay detalles librados al azar. Por ejemplo, a la hora de definir un ícono hay directivas bastante claras: deben ser extremadamente simples, exagerados y caricaturizados de una manera tal que puedan ser utilizados a escalas muy pequeñas.

Pero todo esto se entiende mucho mejor de manera visual.

92e4fbf53a96ceff9a9b403eb8583be3

Color y tipografía

Otro aspecto de importante en la identidad visual de Google es el color. Atrás quedaron los tiempos de coloridos y chillones para pasar una paleta mucho más racionalizada con secuencias de uso del color. Además, hay un cuidado por las cajas donde se presentan los íconos, cuidar los píxeles y la tipografía que deben ser completamente legible en diferentes escalas.

9f94a56613cc1830a36cb99786265ca7

Íconos para la interfaz de usuario

A la hora de emplear íconos en la interfaz de usuario de sus programas Google se mantiene fiel al principio de reducción de elementos, la preferencia por formas geométricas y un uso del color bastante restringido donde el negro y los grises son protagonistas.

bdcd5885f2055ad7ce72da55d9f9be99

Ilustraciones

La ilustraciones de Google son otra marca registrada de la compañía. Simples, coloridas y a veces al borde de lo naïf, los artistas visuales de Google deben diferenciar los trabajos para el mundo de los negocios de los productos de uso personal. Los principios de simpleza, preferencias por las formas geométricas y el «colorido controlado» se aplican también al arte gráfico de la empresa.

d461e7d40aa4d684a94d0f40d788bac5

Consejos para jóvenes diseñadores

Sebastián Thüer · 02.07.2013 ·

secret-handshake

¿Cuál es el secreto para convertirse en un diseñador exitoso? Si la respuesta fuese fácil, la pregunta no tendría interés. Por eso es interesante el proyecto The Secret HandShake a través del cual diseñadores experimentados comparten pistas, consejos y recomendaciones para los más nuevos.

Concretamente, se le preguntó que recomendaciones harían para jóvenes de 18 a 25 años que quieran ser diseñadores o estén estudiando diseño. Las respuestas se agruparon en tres temas: armar el portfolio, crear un currículum y buscar trabajo.

Acá algunas de las que más me gustaron:

Simplicity, wit, and good typography (Michael Beirut).

Remember, the person reviewing your resume is very busy and has seen hundreds of résumés (Bud Rodecker).

Ruthlessly edit your portfolio. Quality is much more important than quantity—and the last thing you want to do is have the weakest project in your portfolio leave a longer lasting impression than the strongest one (Brett Burwell).

The strategy is to provide a tease on the web, then a little more in an e-mailed PDF, and finally the full picture in print, via a face-to-face interview (Prescott Perez-Fox).

Más en The Secret HandShake.

El Diseño Universal en la producción de materiales educativos

Sebastián Thüer · 22.06.2013 ·

6companamHace un par de semanas estuve en el VI Encuentro Panamericano de la Comunicación organizado por la Escuela de Ciencias de la Información de la Universidad Nacional de Córdoba. Hubo varios paneles muy interesantes, un momento emotivo con la entrega del doctorado honoris causa (vía teleconferencia) a una leyenda viva de la investigación en comunicación como Stuart Hall y muchas pesas con ponencias.

En mi caso, presenté con parte de mi equipo de investigación de la UNRC el trabajo «El Diseño Universal en la producción de materiales educativos: El caso Conectar Igualdad», que ya se puede descargar desde la sección Publicaciones. También hay una presentación en SlideShare.

  • « 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 19
  • Ir a la página siguiente »

Sebastián Thüer

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