El otro día me crucé con una gran frase del diseñador estadounidense Shawn Leslie: El buen diseño significa no tener que decir nunca “Haz Clic Aquí”.  ¿Qué más decir? Es evidente que la afirmación de Leslie resume a la perfección lo que es el diseño web, y muchos de los que nos dedicamos a ello, deberíamos tenerla escrita en el salvapantallas. A través de estas líneas intentaré aportar algunas ideas para aproximarnos al diseño para web y más concretamente en redes sociales, precedidas de una serie de cuestiones técnicas previas relacionadas con el cambio que supone pasar del diseño gráfico para impresión al diseño para web, muy útiles sobre todo para poder olvidarnos de ellas cuanto antes.

El diseño en ausencia de contenido no es diseño, es decoración.

Jeffrey Zeldman

Personalmente creo que lo más importante es el mensaje que se quiere transmitir, sobre todo en una web, y que el buen diseño es aquel que facilita la transmisión de ese contenido, lo acompaña y lo hace más atractivo. Y precisamente para poder centrarnos en lo importante, aquí van unos consejos para salvar los primeros escollos técnicos que encontramos en el tránsito del diseño gráfico tradicional al diseño web.

  • Resolución: Pasamos de diseñar de 150 o 300 píxeles/pulgada a 72 píxeles/pulgada. Esa resolución es perfecta para internet y pantallas. No necesitamos más. Todo lo que sea más que esto será exceso de peso para la web y por tanto lentitud.
  • Formato de imagen: Nos olvidamos de los .psd (excepto en el proceso de diseño) y damos la bienvenida a los .png, .gif y .jpg, mucho más ligeros. Un archivo demasiado pesado puede ralentizar la apertura de la web, y ya sabemos que una web que tarda en cargarse recibirá muchas menos visitas.
  • Color: Pasamos de CMYK a RGB. Los colores CMYK nunca serán tan brillantes o saturados como los colores en la pantalla. El RGB tiene gama de colores más amplia.
  • Medidas: Nos olvidamos de centímetros y milímetros, ahora pensaremos en píxeles.
  • Usabilidad: El objetivo es que la interfaz se muestre de forma más clara y sencilla para el usuario. Por lo tanto, mejorar la usabilidad significa mejorar la experiencia del usuario dentro del sitio web. En definitiva, Keep It Simple (& Keep Calm!!!).

 

Practica el diseño seguro: usa un concepto.

Petrula Vrontikis

El diseño para redes sociales es un caso particular de diseño web.  Para profundizar más sobre este tema me he puesto en contacto con Francisco Pérez, diseñador web muy muy experimentado (entre otros proyectos, fue responsable del primer rediseño de la red social Tuenti).  Charlamos sobre las características específicas del diseño social media y en primer lugar, destacó la “infinitud” del proceso ya que “el desarrollo o diseño de una red social realmente no tiene fin. Es más un ciclo vivo centrado en el usuario y en constante evolución. Todo se basa en análisis, aprendizaje e interacción”.

Además, hay que tener en cuenta la propia naturaleza del medio. Los cambios o ritmos de transformación sociales son cada vez más rápidos y las redes han de ser un reflejo de ello. Supongo que todos aprendimos alguna lección con la decadencia de Myspace, así que el diseño para redes sociales hace buena la máxima de El Gatopardo de Lampedusa, “algo tiene que cambiar para que todo siga igual”. Es decir, lo imprescindible y lo delicado de los cambios que casi siempre suelen ser a mejor, pero que en las redes sociales siempre crean un cierto escepticismo inicial (Facebook es un claro ejemplo de eso). Respecto a esa cuestión, Fran afirma que: “Cuando tienes unos cuantos millones de usuarios utilizando de una manera muy activa tu plataforma, tienes que andar con pies de plomo. Hay que planificar y estudiar cada mínima variación que se hace a través de las métricas de uso, utilizando A/B testing y otras herramientas de testeo y validación para que estar lo más seguros posible de las transformaciones que vas a proponer al usuario”. 

Por otro lado, hay que mimar exponencialmente siempre la conectividad. “En las redes sociales todo se basa en la conexión; de grupos, de personas, de sucesos… así que el desarrollo y el diseño han de poner el foco en aumentar el engagement (ya de por sí muy alto), a través del manejo que los usuarios dan a las funcionalidades de comunicación, potenciando así en última instancia el contenido que ellos mismos generan y la capacidad de interacción entre ellos”. 

Por último, en el aspecto visual, Fran coincidía con la gran mayoría de los diseñadores web en que menos es más. Simplificar la interfaz de elementos superfluos o visualmente más complejos, pero siempre manteniendo la identidad y la personalidad. Creo que esa es la clave del buen diseño web”.

Para finalizar, me gustaría plantear la siguiente reflexión. Creo que como diseñadores es muy sano que hagamos el siguiente ejercicio de vez en cuando: si vemos algo que no nos gusta, en vez de criticar por criticar que la crítica se vuelva en un ¿cómo lo haría yo?

15 comentarios a esta entrada

  • Odi Montero el 22 Feb a las 14:33

    Buenos consejos :)

  • Ditro el 23 Feb a las 09:03

    Gran debut. Enhorabuena ;)

  • Juan Pedro el 23 Feb a las 14:11

    Me ha gustado mucho la entrada, Esperanza. Una pregunta: ¿cómo crees que debe ser la tipografía? ¿Crees que, al ser líquida, es un elemento secundario? Un saludo.

  • Esperanza Torres Esperanza Torres el 25 Feb a las 23:41

    ¡Hola Juan Pedro! Gracias por tus palabras :)
    Respecto a la consulta que me haces, desde el punto de vista de diseño gráfico y editorial por ejemplo, personalmente creo que la tipografía nunca debería ser considerada un elemento secundario. Elegir la más acertada tiene todo un proceso detrás. Pero por otra parte y paradójicamente si al ver un diseño pensamos que la tipografía es algo secundario, es que el diseñador ha hecho muy bien su trabajo, y ha elegido e integrado la tipografía acertada. ¿Por qué creo esto? Porque si la tipografía fuera errónea sería lo primero en lo que nos fijaríamos y notaríamos que algo no está funcionando en el diseño.
    En diseño web sin embargo, la elección de la tipografía está ligada a otros factores y hasta hace no mucho el catálogo de fuentes disponibles estaba bastante limitado.

  • David el 26 Feb a las 12:06

    Buena entrada. Interesante para los que comienzan a adentrarse en el mundo del estudio creativo o los que dan el cambio de lo impreso a lo digital.
    Aplicable también a las nuevas plataformas (App’s, OS,…etc)
    Animo a que se publiquen más sobre el tema relación social media y diseño gráfico.
    ¡Saludos!

  • Esperanza Torres Esperanza Torres el 27 Feb a las 17:00

    ¡Hola David! Gracias por tu comentario. Seguro que habrá más post sobre el tema :)
    ¡Saludos!

  • iPixel Estudio el 03 Abr a las 10:25

    Un excelente post! Me ha encantado ;-)

Referencias a esta entrada