El diseño y desarrollo web se puede definir como la tarea destinada a la planificación, el bosquejo y la confección de páginas y sitios web. Se deben tener en cuenta aspectos como:

  • Navegabilidad: facilidad con la que un usuario puede desplazarse por todas las páginas que componen un sitio web.
  • Interactividad: proceso de comunicación entre personas y máquinas; en este caso, entre los usuarios y el sitio web.
  • Usabilidad: lo fácil que es de usar una web.
  • Estructura y distribución de la información: la manera en la que se colocan los elementos en una página web.
  • Contenido multimedia: incluir imágenes, vídeo, audio, etc.

El desarrollo web profesional implica aprender técnicas de programación, sobre todo HTML y CSS. Sin embargo, también es importante estructurar y distribuir la información adecuadamente, además de presentar el contenido de manera atractiva y sencilla para el usuario.

Principios del diseño y desarrollo web

De la enorme cantidad de web alojadas en Internet, solamente una pequeña parte está bien diseñada. Esto se debe a que, la mayoría de personas que desarrollan, no tienen en cuenta los principios básicos del diseño y desarrollo web.

El diseño y desarrollo web es una técnica basada en un conjunto de reglas, más o menos definidas, que sirven para crear páginas útiles y atractivas a la vista.

Además del diseño gráfico, también hace falta planificar los contenidos de la web: estructurar menús, definir la manera de interactuar con el usuario, colocar bloques de texto, etc. En resumen, no es únicamente darle aspecto y color al sitio web.
El diseño y desarrollo web se puede dividir en:

  • Funcionalidad o usabilidad.
  • Aspecto o estética.

Factores a tener muy en cuenta, ya que una web bonita pero que funcione mal, provocará que los usuarios no vuelvan. Y una funcional, pero con un aspecto desastroso, no llamará la atención.
Algo importante es que el diseño vaya en conjunción al contenido; de este modo, el usuario sabrá con qué se va a encontrar.

Principios básicos de un buen diseño estético

Para que una página web sea atrayente, se debe tener en cuenta:

  • Balance: el equilibrio entre los distintos elementos de la web.
  • Contraste: la manera de diferenciar elementos que quieran resaltarse, llamando la atención del usuario.
  • Énfasis: la manera de diferenciar una parte dentro de un elemento.
  • Repetición o ritmo: la manera de definir patrones para ordenar los elementos que forman parte de la web. Principio fundamental para mantener la usabilidad.
  • Proximidad o unidad: situar juntos o próximos elementos relacionados. Esto mantendrá la coherencia del contenido de la web.

Diseño orientado al usuario

Se caracteriza por asumir que, todo el proceso de diseño y desarrollo, debe estar conducido por el usuario, por lo que se tendrá en cuenta sus necesidades, características y objetivos. Obviamente, debe estar implicado desde el principio para saber cómo es, qué necesita y para qué usa la página.

Además, es necesario evaluar el sitio web desde su punto de vista (analizar sus impresiones sobre el diseño, atender a su experiencia al navegar, etc.), buscando una evaluación constante (para mejorar de forma continua).

Diseño orientado a objetivos

Consiste en definir y planificar los propósitos a alcanzar con el desarrollo del sitio web. Se identificarán los requerimientos del proyecto en cuestión, mediante la pregunta: ¿qué se pretende conseguir?

Diseño orientado a la implementación

Consiste en centrar el diseño en las posibilidades tecnológicas actuales y que sea posible utilizar en la web.

El proceso del diseño y desarrollo web

Se necesita seguir una serie de etapas que permitan transformar la información y el contenido en un sitio, donde el usuario, se sienta a gusto y encuentre rápidamente lo que busca.

1. Delimitar el tema

Es el proceso inicial por el que se define lo que se va a tratar en el sitio web, y el contenido que se va a añadir. Se deben definir los objetivos a alcanzar con el desarrollo de la web, y saber el tiempo disponible para adaptarlo.

2. Recolectar información

En esta etapa se obtiene la información a añadir en la web, descartando la que no se considere relevante.

3. Agregación y descripción

Una vez se tenga la información, será necesario organizarla adecuadamente. Debe haber equilibrio entre linealidad y jerarquía: el tipo lineal serán aquellos trozos de información que el usuario consultará en un avance paulatino de algo. Para información complementaria o dependiente, se utilizará el tipo jerárquico.

4. Estructura del sitio y navegabilidad

Consiste en definir los vínculos entre las distintas páginas del sitio web, según lo definido en el punto anterior. Se podría añadir:

  • Ayuda para navegar por el sitio web.
  • Enlaces que permitan mostrar la jerarquía.
  • Enlaces entre elementos que pertenezcan al mismo nivel jerárquico.

Tras definir la estructura y navegabilidad, se podrá empezar la implementación con los lenguajes correspondientes.

5. Estructura y composición de páginas

Es fundamental conocer las tres partes en las que se divide una página.

  • La cabecera (header) está en la parte superior; contiene información relacionada con la temática del sitio (logo y título, barra de navegación, información de contacto, etc.).
  • El cuerpo (body) contiene la información más relevante del documento web.
  • El pie de página (footer) está en la parte inferior; contiene información de contacto, menús que enlazan a las secciones más importantes y, en general, contenido complementario.

Es importante tener en cuenta que, un estilo gráfico adecuado, puede ser determinante en la comodidad de los usuarios. Se debe buscar equilibrio entre contenido multimedia y texto.

6. Ensamble final

En esta etapa, se añaden los últimos contenidos y se aplica el estilo gráfico a las páginas del sitio.

7. Testeo

Es la última fase, donde se revisará que no haya enlaces rotos, la gramática y la ortografía, subdividir páginas con mucho contenido, funcionalidad de botones, etc.

Será interesante permitir que, personas ajenas al diseño, interactúen con el sitio y comenten sus conclusiones (esto durante todo el desarrollo, no solamente al final).
Además, debe comprobarse que todo el sitio web se visualice en la máxima cantidad de navegadores existentes (al menos, los más usados). Esto se debe a que, cada navegador, trata el código HTML o CSS de forma distinta.

Diferencias entre diseño orientado a presentación y a impresión

El diseño web está orientado a presentar contenidos en el navegador y, aunque éste permita la impresión física de algunas páginas, hay que tener en cuenta las diferencias entre el primero y el de impresión.

Por ejemplo, para una revista física se maqueta el contenido en unas dimensiones fijas (diseño de impresión); sin embargo, en el diseño de presentación, se debe tener en cuenta que esa web podrá ser visualizada en distintos dispositivos (diferentes tamaños de pantalla). Además, los recursos multimedia (vídeo, audio, etc.) utilizados en una web, están ausentes en un documento impreso (salvo imágenes).

Pin It en Pinterest