Como distrubuir correctamente la información en una web
10/03/2017

Como distrubuir correctamente la información en una web

Programación y Diseño Web

Una web se debe presentar como un medio cómodo a la lectura, rápido de acceder y adaptable a todas las plataformas, especialmente a las móviles, tanto smartphones como tablets. Es por ello que debemos pasar un rato pensando cómo vamos a estructurar la información: dónde vamos a mostrar el contenido, los créditos, etc. Hoy quiero que reflexionemos sobre ello para no tener que lanzar una web sin conocimiento y nos encontremos un resultado que parece más un plato de espaguetis a una estructura ordenada y con lógica.

Como mostrar la información web

Antes de nada debemos entender la naturaleza de nuestra web, pero hay algunas claves que se repiten en todos los ámbitos. Por ejemplo, la parte central, como es de esperar, la usaremos para mostrar el contenido más nuevo, algo que se puede aplicar tanto a una web estática que pretende mostrar información sobre una empresa, o de un blog, el cual está en constante movimiento y según el tema que trate puede tener nuevos posts varias veces al día. No tendría sentido colocar toda este bombardeo de información en otra posición, no sólo por la lectura. Recordad que en el caso de los teléfonos la posición es vertical, lo que significa que los laterales quedan ocultos más allá de los márgenes de la pantalla, de modo que no es buena idea ignorar este principio. Estamos de acuerdo que no es lo mismo representar el contenido en un equipo de escritorio que en un aparato móvil, por eso los diseños responsive no se pueden ignorar.

Pero no todo va a ser contenido actualizable, por supuesto. Tenemos cosas como menús y otras secciones que necesitamos mostrar al usuario. ¿Qué hacemos con ello? Bien, no os voy a mentir, yo no soy diseñador, soy programador, por lo que adopto un concepto que me ha servido de siempre: observar la competencia con más visitas. Incluso en desarrollo de aplicaciones esto es útil. No necesariamente debéis saber de todos los campos, de hecho si sois freelance o independientes, a menos que tengáis un socio que se encargue del diseño, nadie os puede guiar en ese camino, por lo que no tenemos más remedio que mantener los ojos bien abiertos en qué hacen los demás. Pero, ojo, no os fijéis en cualquiera. Pensad el tipo de web que vais a construir y buscad referencias con un tráfico muy alto para poder comparar y sacar conclusiones.

Tratad de entender el por qué de sus decisiones entrando en dicha web desde distintos dispositivos: smartphones, tablets, videoconsolas, escritorio. Cuantas más plataformas comparéis, mejor, y entonces procedemos a hacer un wireframe de lo que estamos buscando. El wireframe es un concepto de diseño que trata de representar, sin elementos bonitos, únicamente con líneas rectas, lo que deseamos conseguir. Normalmente yo aprovecho y me anoto el nombre de los componentes que voy a necesitar, por ejemplo una lista, cabecera, etc. Esto agiliza el proceso ya que ayuda a dejar en vuestra cabeza las ideas bien claras. De hecho no os debe sorprender si os encontráis descartando ideas en el proceso de wireframe que en vuestra mente parecían funcionar muy bien, pero sobre papel (literalmente) no se ven tan atractivas.

Observando otras páginas nos damos cuenta que los laterales se reservan para mostrar información en equipos de escritorio, como mucho en tabletas en posición horizontal. Habitualmente la dejamos para sugerir al usuario otros contenidos que puedan interesarle, o los más vistos en la vida de la web, los hot de nuestro sitio, mientra que el menú de navegación lo dejamos en la parte superior, donde vamos a mostrar desde secciones disponibles, o, en el caso de una página estática, podemos poner lo más importante.

Usando un framework responsive, este contenido va a transformarse en un menú desplegable, por lo que no debemos rompernos especialmente la cabeza con la programación. Algo que os recomiendo es que si ya existe algo que hace exactamente lo que buscamos, no perdamos el tiempo tratando de construirlo nosotros mismos, con matices por supuesto, si nos va el sueldo en ello aplicad esta norma, lo primero es cobrar, luego ya tendremos tiempo para experimentar.

Es posible que con este título se esperara un post muy enfocado en el diseño, pero sin embargo considero que es interesante que un perfil más de desarrollo aprenda a enfocar lo que observa en un campo que no es el suyo, ya que no, como comentaba, no siempre vamos a poder disponer de un desarrollador profesional con nosotros, por lo que es importante que aprendamos a analizar y aplicar.

De hecho, el desarrollador debe ser un buen analista, quedarse con las ideas más potentes y ejecutarlas de manera correcta en sus productos, ya que de ese modo comprenderá también porqué está aprendiendo ciertos conceptos que, en solitario, carecen de uso, pero que en grupo pueden crear algo interesante y útil.

Curso relacionado: Curso Superior de Creación y Desarrollo de Páginas Web

Comparte en:

Grado Superior de Desarrollo de Aplicaciones informáticas en la Salle de Barcelona. Trabaja actualmente como desarrollador de aplicaciones para móviles, especialidad en videojuegos.

Mejores plataformas para crear un ecommerce
21/05/2020
Carlos Yañez

Mejores plataformas para crear un ecommerce

En el post de hoy veremos cuales son las plataformas de ecommerce más adecuadas para crear una tienda on-line para que, si estás interesado, puedas desarrollar tu pr...

Consejos para detectar un ciberataque
21/05/2020
Rubén Bellido

Consejos para detectar un ciberataque

Estamos en un momento de pleno auge digital, es por ello que también estamos en un punto que los ciberataques van en aumento exponencialmente y así lo demuestran dif...

claves web exito
09/05/2020
Carlos Yañez

6 consejos para hacer una web exitosa

En el post de hoy te daremos las claves para que tu web sea realmente exitosa. Veamos en qué apoyarnos para conseguir el éxito.