Normas para crear un diseño web simple y funcional

Como diseñador web sabes que simplificar elementos usualmente es una tarea compleja pues debes reconocer cuáles son las características esenciales de dicho elemento e ir eliminando aquellas que no lo son. Asimismo, sabes que un diseño simple es funcional y los usuarios fácilmente pueden entender, navegar e interactuar con el mismo.

¿Cómo comenzar con este proceso? ¿Cómo crear un diseño web simple? En este artículo te mencionamos algunas normas que debería seguir si este es tu objetivo.

Determina un objetivo por cada página del sitio

Al momento de crear un sitio web se estructuran todas las páginas y secciones que contendrá. Esta proceso usualmente se realiza con lápiz y papel en una especie de mapa conceptual o mapa mental para que el diseñador tenga una representación más visual de la estructura.

Si has diseñado otros sitios web entonces ya tienes una idea del proceso. Al realizar esta estructura en papel y posteriormente revisarla para verificar si hay secciones que se pueden combinar o simplemente páginas que deben eliminarse, puedes comenzar a tener una idea más clara del tipo de contenido que tendrá cada página. Y este es justamente el objetivo: establecer el contenido que tendrá cada página que conforma el sitio.

Aparte de establecer el contenido del sitio, te puede ser de ayuda determinar alguna acción y objetivo específico en cada página que forma parte del sitio. De esta manera, diseñas cada página en torno a este objetivo. Por ejemplo, en la página de contacto el objetivo es que los usuarios puedan enviar consultas o preguntas de forma sencilla. En algunos proyectos te será más sencillo determinar el objetivo para cada página, mientras que otros tal vez el objetivo no sea tan obvio.

Elige como máximo dos familias tipográficas

Como ya debes saber, la tipografía en un diseño puede reforzar el mensaje o personalidad de la marca y por esta razón debes elegirla cuidadosamente. No sólo eso, también debes asegurarte de que las fuentes seleccionadas sean legibles. Asimismo, es importante limitar el número de fuentes para que el diseño se vea coherente. Con dos o tres fuentes distintas es suficiente.

En la mayoría de casos, se emplea una fuente para título, otra para cuerpo de texto y una de apoyo. Si deseas eliminar una posible tercera fuente de tu lista puedes elegir familias tipográficas que posean una gran cantidad de variaciones. De ser así, sólo serán necesarias dos fuentes, una para título y otra familia tipográfica que tenga una gran cantidad de variaciones para cuerpo de texto, subtítulos, etc. De esta forma, logras tener una variedad de estilos para tus textos, pero se mantiene la coherencia de tu sitio web, mejora la legibilidad de tu sitio, así como la experiencia de usuario.

Establece una jerarquía

En un diseño web debes guiar al usuario. Por esta razón, una navegación clara es esencial, así como botones de llamada a la acción, entre muchos otros elementos. De hecho, incluso se puede considerar que todos los elementos que existen en el sitio sirven para guiar al usuario. Si se observa la composición como un todo, entonces notarás que hay ciertas zonas que el usuario observa primero. El sólo hecho de dividir una página en secciones es para determinar el orden de lectura deseado. De esta manera, determinamos que una sección es de mayor importancia en una página. Por ejemplo, el mensaje que es visible en el primer pantallazo de cualquier página suele tener mayor relevancia.

No sólo se establece jerarquía en la página en general, sino también en cada composición que se puede reconocer en el sitio si cada página se divide en secciones. De esta manera, todo el sitio puede leerse correctamente si se ha aplicado una correcta jerarquía visual.

Emplea los espacios en blanco adecuadamente

Los espacios en blanco son elementos de gran importancia en cualquier tipo de diseño. Mejoran la legibilidad y la lectura fluida del sitio, aunque a menudo no se les da la importancia adecuada pues se reconoce dicho espacio como “vacío”. Si bien esto es cierto hasta cierto punto, ese espacio tiene un propósito y como tal es importante en la composición.

El espacio en blanco que posea cada elemento depende mucho del volumen de contenido del sitio. Aunque en un diario online existen estos espacios, no son tan evidentes y extensos como puede ser en el caso de páginas de destino o lanzamiento. Asimismo, existen ciertas tendencias que hacen mayor uso de los espacios en blanco como el minimalismo.

Pero esos no son los únicos factores que determinan el uso de los espacios en blanco, sino también la cantidad de atención que deseas que tengan. Cuando a cierto elemento lo rodea una gran cantidad de espacio en blanco mayor que a otros, entonces este elemento particular se hace más visible para los usuarios. Es decir, el espacio en blanco es una de las herramientas que te permite establecer una jerarquía.

Utiliza el contraste para añadir variedad

Si bien en un sitio web debe existir coherencia para que la composición general se reconozca como un grupo o unidad, es esencial añadir elementos que sean diferentes para añadir variedad. Por ejemplo, aunque se puede emplear una sola familia tipográfica, para los títulos se emplea un estilo en negritas y con mucho mayor puntaje, mientras que para cuerpo de texto se utiliza la misma fuente en estilo Light y con un puntaje menor. Ya que los elementos tienen características que los relacionan, pero su modo de empleo es distinto en el sitio, se da la sensación de variedad.

La variedad permite que una composición se vea atractiva y se evita que se identifique lo monótono con la composición. Es una forma perfecta de añadir dinamismo al sitio mediante el contraste de elementos. Este contraste se puede aplicar en cualquier tipo de situación utilizando colores, formas y tamaños.

El sólo hecho de añadir iconos en una sección donde gran parte de los elementos son fotográficos ya genera contraste. O colocar una textura o color plano en la sección contigua donde el fondo era una fotografía también es un ejemplo clásico de contraste. Así que, como ves, aplicar contraste en el diseño de tu sitio web es una tarea sencilla, no hay necesidad de realizar modificaciones extremas.

En conclusión…

Un diseño web simple no tiene que ser completamente minimalista o evitar el uso de texturas, colores, icono o ilustraciones. De hecho, puedes incorporar una gran cantidad de recursos si lo ves necesario. Un diseño simple hace referencia a la facilidad con la que los usuarios pueden interactuar en su interfaz.

Si bien puedes ser creativo y más experimental en proyectos personales, en algunos proyectos de cliente es mejor decidirse por un diseño web simple y atractivo.