Los 3 Componentes de un Buen Diseño Web

El buen diseño no solo consiste en una buena apariencia, y esto es todavía más cierto si cabe en el caso del diseño web. De hecho tiene sentido concebir el diseño web como la simbiosis de tres principales elementos no técnicos: diseño de la estética, diseño de la información y diseño de interfaz. Si deseas convertirte en un excelente diseñador gráfico, es esencial que tengas un conocimiento sólido de los tres.

Diseño de la Estética

El diseño estético versa sobre la creación de un aspecto adecuado. Ser bueno en esta disciplina implica no solo que eres capaz de diseñar sitios atractivos, sino también diseñados apropiadamente. Diferentes mensajes necesitan diseños diferentes para el usuario final, así que es esencial que el diseño refuerce y acompañe el mensaje del sitio.

El otro día deambulaba por un supermercado y vi una marca de zumo que tenía el diseño propio de un detergente de lavadora. Lo que me hizo preguntarme  inmediatamente por qué estaba el detergente en el pasillo de los zumos fue simplemente algo en la forma en la que la caja estaba construida. Del mismo modo, asignar a una web un "packaging" inapropiado para su contenido y mensaje – incluso aunque este sea muy bonito, es una apuesta fallida a largo plazo. Por eso, es muy importante que tú, como diseñador, no te guíes ciegamente por las novedades y las tendencias. Debes estar continuamente pensando no solo en cómo puedes conseguir un diseño atractivo para un sitio, sino también uno que sea apropiado.

De los tres componentes mencionados sobre diseño web, el diseño de la estética es sin duda lo que la gente identifica realmente como diseño. Algo que encuentro interesante sobre el diseño de la estética es que se trata de algo que engañosamente se supone fácil. Recuerdo estar diseñando en una ocasión un cartel, al mostrárselo a un amigo, este comentó, "oh, son simplemente unas líneas y algo de texto, debes haberlo hecho en diez minutos" - ¡ah las alegrías de ser un diseñador!.

Diseño de la Información

El diseño de la información se ocupa de preparar el contenido o información de una web de la mejor forma posible, de modo que los usuarios consigan encontrar y digerir eficientemente la información que realmente necesitan.  En sitios web amplios, encontrar la información constituye un reto, pero en sitios tanto grandes como pequeños, procesarla es siempre un problema de diseño.

Un ejemplo rápido de diseño de información es la forma en la que organizas y aplicas formato al texto de una página. Debido a que los usuarios escanean a través del contenido de una pantalla, es mucho mejor organizar el texto mediante titulares, subtítulos, diagramas y ganchos visuales, en general, con variaciones para la vista.  Técnicas como éstas hacen más digerible el contenido de la página. Pero el diseño de la información no está únicamente limitado al contenido de la página, también versa sobre las estructuras que usas para construir y encajar las distintas partes del sitio, cómo distribuyes y muestras los menús y submenús, y como estableces los vínculos entre diferentes secciones.

Puede que te interese saber que para proyectos de sitios grandes y complejos, existe de hecho una profesión específica dedicada a modelar y estructurar la información llamada Arquitectura de la Información. El Arquitecto de la Información más famoso que conozco es Jesse James Garret, el cual por cierto acuñó el término AJAX. Es alguien bastante prolijo y claro sobre el que puedes leer más en la Wikipedia.

El estupendo Diagrama de Collis

Como estamos hablando de diseño de la información, me parece una buena oportunidad para convertir 6 párrafos sueltos en un diagrama, y así mostrarte mi increíble ¡diagrama sobre los componentes del diseño web!. ¡Metidos en sus fantásticas pastillas rojas y grises!

Diseño de Interfaz de Usuario

El diseño de interfaz es la distribución y el maquillaje de la forma en la cual un usuario puede interactuar con un sitio. La palabra interfaz significa un punto de una superficie en la que dos cosas se tocan. Así que la interfaz de un usuario web es el lugar en el que una persona y una web entran en contacto - por tanto, menús, componentes, formularios, y todos aquellos métodos con los que puedas interactuar con una web.

El buen diseño de interfaz intenta hacer la experiencia del uso de una web sencilla, eficaz e intuitiva. Realmente es mucho más fácil demostrar un mal diseño de interfaz que uno bueno, ya que es en la primera situación cuándo realmente se notan sus efectos negativos. Los iconos son ejemplo sencillo de diseño de interfaz. ¿Has visto alguna vez un icono y pensado ¡qué se supone que representa esto!" - bien, ese sería un ejemplo de mal diseño de interfaz. El empleo de iconos para representar diferentes tipos de contenidos o acciones es solo una parte del diseño de interfaz.

Otro ejemplo de interfaces con los que incidentalmente te encontrarás como diseñador web son las Interfaces de Programación de Aplicaciones o APIs. Una API es el conjunto de funciones y protocolos mediante los cuales tú (o más concretamente, tu programa) puedes interactuar con cualquier cosa para la que esté pensada la aplicación. Por ejemplo, Google Maps proporciona una API que puedes usar para crear aplicaciones o sitios que integren o funcionen con los Mapas de Google.

Qué hay sobre…

Ahora estarás pensando, todo esto está muy bien Collis, pero ¿dónde encaja aquí CSS? O, ¿qué hay de Flash? Bien, como ya he dicho, estos son los tres aspectos no técnicos del diseño web. La otra cara está compuesta por todas esas tecnologías y habilidades, HTML/CSS, Flash, JavaScript, etc. Pero tiendo a pensar que forman más parte del desarrollo web que del diseño. De igual manera que es importante separar HTML y CSS para mantener la presentación y el diseño separados e independientes, podrías argumentar que el método que usas para llevar el diseño a la realidad está separado del proceso mismo de su diseño. Dicho claramente, ¿tiene el conocimiento de un truco de CSS algo que ver con el diseño?

No me mal interpretes, tienes que saber cómo construir las cosas para saber diseñarlas con propiedad. No obstante, cuando se trata de explicar en qué consiste un buen diseño web, mi respuesta se mantiene en Diseño de Interfaces, Diseño de la Información y Diseño de la Estética.

¿Cuál es tu opinión? ¿Me he perdido algo esencial en el ámbito del diseño web? ¿O crees que el desarrollo es una parte esencial del propio diseño web?

Más adelante en esta misma semana podrás leer artículos profundidad con trucos y consejos para cada uno de estos tres componentes del diseño web - diseño de interfaces, diseño de la estética y diseño de la información. De hecho el primero va a a aparecer en unas horas.