Algunos consejos y buenas prácticas en diseño web

Estas son algunas buenas prácticas y tips que me parecen relevantes de resaltar para quieres recién comienzan en el diseño orientado a web.

Siempre Wireframes antes de Diseño Visual

img: commlogix.com

Los wireframes son representaciones esquemáticas de una página, a través de los cuales se piensan y diseñan las jerarquías de los contenidos e interacciones de las distintas secciones, sin el ruido ni la emocionalidad del diseño visual. Ya sean bocetos en papel o piezas más elaboradas, esta práctica permite ahorrar mucho tiempo de producción y correcciones posteriores.

Utilizar la herramienta adecuada: Fireworks

img: sweetpeabadges.com

En todo oficio siempre es fundamental trabajar con las herramientas apropiadas, lo que nos permite ahorrar tiempo y obtener mejores resultados. Podemos excavar un agujero en la tierra con una cuchara, o tomar sopa con una pala, pero ninguna de las dos opciones es obviamente la mejor. Adobe Fireworks es una software de edición de imagen creado para el diseño orientado a web, con muchas ventajas comparativas en relación a su competencia natural, Photoshop.

Navegar y buscar inspiración

Creer que un buen diseño debe ser obra y gracia de nuestra pura imaginación, sin ningún tipo de influencia es algo irreal y torpe. Es necesario ver como lo hacen los demás para tener un buen juicio y saber que es lo adecuado y que no. Buscar ideas sobre como resolver un ícono o como se muestra una tabla de precios puede ahorrar mucho tiempo y permite llegar a una solución más certera, entre los ejemplos vistos y lo que aportamos nosotros.

No olvidar los feedbacks visuales

Aunque nuestros diseños son imágenes planas, la interacción final del usuario con el sitio no lo puede ser, por lo que siempre hay que tener en cuenta el diseño de todos los feedbacks que se necesiten. El ejemplo clásico es pensar que sucede cuando el usuario pasa encima de un botón o un link de la navegación, ¿se oscurece o se aclara?, ¿es subrayado o no? Algo debe suceder que indique que se esta en un elemento de hipervínculo. Otras cosas que también hay que considerar son los mensajes de error en formularios, diseño de  loadings y notificaciones para acciones que ocurren con AJAX, e incluso, cuales son los tipos de efectos que se deben usar para esconder o mostrar contenidos.

Ser cautelosos en el uso de fuentes no seguras

img: randsco.com

Esto tiene que ver con una problemática técnica, pero que los diseñadores DEBEN conocer.
Debido a temas de copyright, los distintos sistemas operativos (windows, osx y linux) siempre han contado con un stock limitado y bastante distinto de tipografías que vienen instaladas por defecto, lo que ha hecho que tengamos que basarnos en las fuentes seguras (web-safe fonts) para asegurar que nuestro diseño se vea igual para todos los usuarios. Con el tiempo han aparecido nuevas técnicas que han permitido ir sorteando estas dificultades. La más popular es el @font-face en CSS que permite adjuntar las tipografías en nuestros estilos, sin necesidad de que este instalada en el ordenador del usuario. Sin embargo, como la mayoría de las fuentes conocidas son propiedad intelectual, existen ciertos resquicios que podrían hacer que los demanden por usarlas de este modo (aunque las hayan comprado) debido a que con esta técnica cualquiera que navega en el sitio puede descargar la fuente. Otro modo de solucionar el dilema es usar un intermediario que convierta los textos en imágenes o embeds, usando las fuentes que escogimos para el diseño. Puede ser un buen método, pero hay que considerar que el peso de nuestro sitio se verá incrementado, debido a la generación de este recurso. Lo mismo si usamos imágenes fijas para reemplazar textos conocidos.

Pensar las jerarquías y estilos de todos los elementos HTML básicos

Esta es una práctica muy útil y necesaria cuando se trabaja en un proyecto tipo CMS, donde son otros los que ingresarán los contenidos del sitio, probablemente a través de sistema de editores de texto web  (tipo Word) como TinyMCE. Por ejemplo, diseño de listas ordenadas o no ordenadas (ol, ul) e incluso como se anidan. También como se vería las citas y bloques de citas (q, cites, blockquotes) o diseñar la estructura de headings (h1-h6) para que ninguno de estos elementos se pierda en el contraste con el resto del contenido. Incluso planear como se deberían ver los elementos menos comunes como listas de definición (dl), elementos de teclado (kbd), abreviaciones y acrónimos (abbr, acronym), etc. Esto implica tener conocimientos básicos de HTML, lo que me parece que ayuda bastante para que puedan entender como se construye lo que diseñan.

4 thoughts on “Algunos consejos y buenas prácticas en diseño web”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>