Jueves, 18 Agosto 2016 18:01

Pautas básicas para el diseño de un sitio web

Valora este artículo
(3 votos)

Diseño Web: Algunas etapas a considerar

Algunas pasos a considerar durante el desarrollo de un sitio web

Varios de los problemas con los que muchas veces se encuentran, tanto estudiantes como jóvenes profesionales del diseño, al momento de proyectar un sitio web comienzan desde el momento de conceptualizar el diseño; conceptualización que, en muchos casos ni siquiera existe, o se limita a procesos tales como la búsqueda de ejemplos y plantillas, sin siquiera evaluar cuáles serán los objetivos, el contenido, público objetivo, frecuencias de actualización de los contenidos, etc.

Pensada como un material de apoyo en clases para mis cursos de diseño web, esta entrada intenta mostrar gráfica y textualmente algunos pasos básicos vitales al momento de diseñar un sitio web, sin llegar, ni aproximarse, a lo que sería el desarrollo de un brief de diseño (para esto te invitamos a leer las siguientes entradas: "Consideraciones para el desarrollo de un brief creativo" y "Bases para redactar el brief de una campaña gráfica" en este mismo sitio).

Veamos gráficamente algunos de los puntos destacados vistos en clases

Descargar para uso personal, o ampliar a tamaño real la siguiente imagen con el fin de mejorar su lectura:

Algunos pasos vitales en el desarrollo de un sitio web

Así, antes de comenzar con el proceso de diseño visual (diseño gráfico) del sitio, ni mucho menos aún de comenzar con la determinación de las tecnologías a emplear, debemos entender los propósitos que debe cumplir este sitio, el tipo y cantidad de contenidos, las frecuencias de actualización, fechas de entrega, presupuestos disponibles, ciclo de vida; etc.

Brief de Diseño

Como en todo proceso de diseño (gráfico o no), es fundamental establecer un brief que acote y determine el alcance que tendrá el proyecto (en nuestro caso, el diseño de un sitio web); para esto, debemos considerar, entre otros, los siguientes puntos:

  • Tecnologías disponibles, tales como capacidades del servidor, tipo y características del hosting contratado, etc.
  • Los plazos de entrega, ya que nos darán una panorama adicional del tiempo disponible para desarrollar nuestro trabajo.
  • Presupuesto de que dispone el cliente, lo que puede parecer obvio, pero este es un dato que debemos establecer claramente desde un inicio.
  • Alcances y objetivos del sitio a desarrollar: No es lo mismo un sitio institucional, con poca rotación de contenidos, a otros con una gran frecuencia de actualizaciones, ni que otro con necesidades de comercio electrónico, etc.

Contenidos

Superada la elaboración de brief (suponemos acá que hemos presupuestado nuestro trabajo, métodos de pago, plazos de entrega, etc.), el siguiente paso es contar con todo el contenido (o la mayor parte) a publicar en el sitio que estamos desarrollando, con éste a nuestra disposición podremos:

  • Organizar la información; la que puede referirse tanto a tipologías (textos, videos, sonidos, animaciones, etc.) sino también a lógicamente cómo se la presentaremos al usuario; todo esto sin pensar en la normalización de datos, ni usos de bases, que se escapan al alcance de esta entrada.
  • Jerarquización de los datos: teniendo clasificados clararmente cada uno de los datos, podemos establecer las distintas jerarquizaciones que nos permitan presentarle estos datos a nuestros visitantes; no solamente al momento de crear los distintos artículos, sino que también nos resultará de utilidad durante la creación del o de los menús.

SEO

Todo lo que se refiera al posicionamiento en motores de búsqueda es de importancia fundamental para la supervivencia de un sitio (tanto sea de caracter comercial como informativo), por lo que debemos considerar la buena redacción, usando las palabras correctas, el uso de etiquetas meta adecuadas, y lo que es sumamente importante, codificar semánticamente nuestro diseño (maquetación web).

Interfaz gráfica

El diseño de una buena interfaz gráfica debe hablar no solamente de su aspecto (colores, tipografías, espacios en blanco, imágenes, etc.) sino también de la distribución de elementos tales como menús y submenús (ver el punto anterior "Contenidos"), formularios de búsquedas de información, etiquetas en los pies de contenidos, etc. que permitan al usuario encontrar rápidamente lo que está buscando de forma sencilla (usabilidad).

Por otra parte, cuando establezcamos opciones de navegación (colores en los menús, elementos estructurales visuales, contenidos, etc.) debemos pensar en aquellos usuarios que cuenten con capacidades físicas diferentes, tales como problemas de visión (miopía, daltonismo, etc.), como motrices o auditivas, para quienes debemos crear las condiciones de uso más favorables (usabilidad).

Implementación y testeo

Una vez acabados los prototipos primarios (inclusive a nivel de wireframes) debemos someter nuestro diseño al testeo por parte del cliente, o de su propio público, lo que nos permitirá encontrar posibles fallos de usabilidad, accesibilidad, tiempos de respuesta de las distintas páginas, funcionamiento correcto de los distintos scripts, y hasta el propio diseño gráfico de nuestro sitio.

Superada esta etapa, ya podemos encaminarnos al diseño y testeo final de nuestro sitio, y a la posterior implementación y entrega del mismo a nuestro cliente.

Debido a que esta entrada fue creada como material de apoyo en clases, algunos temas pueden requerir de aclaraciones complementarias, por lo que, en caso de querer plantear dudas, correcciones o nuevos puntos de vista e información, puedes usar el formulario de contacto que se encuentra al pie de este artículo.

Saludos para todos!
Plácido Luna.

 Nota: Este material se encuentra corregido y actualizado, como parte del material de apoyo a nuestros cursos de diseño web, en el Campus Virtual de Formación Gráfica.

Visto 575 veces Modificado por última vez en Miércoles, 07 Junio 2017 12:21