Diseño web: cómo presentar el contenido de una página web

Cuando la construcción de sus estructuras alámbricas, recuerde que usted no está limitado a una presentación estática de texto y gráficos. Muchas de las tecnologías, de la animación Flash para DHTML, ayudan a maximizar el espacio de la página y el contenido presente en formas más interesantes e interactivos.

Video: Curso de Joomla Gratuito (55 Videos) - Desarrollo de Páginas Web Profesionales

Indicando texto sobre una estructura metálica

Debido a que usted está compartiendo wireframes con los clientes y miembros del equipo por igual, indicar todos los elementos de navegación y los titulares de las secciones principales de contenido con texto legible para orientarlos. Todos los demás componentes de copia pueden indicarse con los llamados griego texto (Que en realidad es un galimatías América) que refleja su carácter recuento asignado (el número de letras, puntuacion y espacios) para que pueda obtener una sensación de tamaño de bloque de texto real.

Puede buscar en la web generador de lorem ipsum para encontrar sitios que generan párrafos de texto griego - y el carácter cuenta incluso específicas - que se puede copiar y pegar la derecha en sus estructuras alámbricas.

Video: Crea tu pagina web - Boceto web # 1 | Diseño Web

Trabajar con un sistema de gestión de contenidos

UN gestión de contenido sistema es un sitio web fácil de usar o aplicación que ofrece a los administradores del sitio de acceso seguro a la base de datos que puebla su página web. Al iniciar sesión en un CMS, el manager de un sitio web puede fácilmente añadir, eliminar y actualizar el contenido almacenado en la base de datos. La ventaja de usar un CMS para almacenar texto y los gráficos es que una vez que se define un montón de tipos de contenido, como imagen en miniatura del producto “breve descripción”, “nombre del producto,” y “” crear instancias de estos objetos, llenarlos de copia o las imágenes reales, y luego asignarlos a una o más páginas web. De esta manera, si se actualiza la instancia en el CMS, el contenido se actualiza automáticamente siempre que se utiliza en el sitio. Esta estrategia separa el contenido de la presentación de la página web para darle una mayor flexibilidad para los futuros cambios de diseño y contenido, haciendo que el sitio sea más fácil de mantener.

Si su sitio utiliza un sistema de gestión de contenidos, un estratega de contenido trabaja en estrecha colaboración con el arquitecto de la información (en equipos más pequeños, esto puede ser una y la misma persona) para identificar primero todos los diferentes tipos de contenido de un sitio tiene y luego determinar qué tipos de contenido van en cada página.

Maximizando su espacio en la web

La mayoría de las personas tienen pequeñas pantallas de ordenador, y muchas personas están navegando a través de sitios web móviles y dispositivos inteligentes. Si mantiene hasta una pieza 8-1/2 x 11 pulgadas de papel horizontalmente, que está buscando en el tamaño de las ventanas de la mayoría de la gente en la World Wide Web. Después se toma en cuenta la interfaz del navegador con todos sus botones en la parte superior, pestañas favoritas, y los controles de desplazamiento, el espacio de visualización dedicado a la web se redujo a un tamaño postal, o alrededor de 800 x 600 para muchos usuarios. Esta ventana esquelético es el lienzo de diseño web.

He aquí algunas estrategias organizativas e interactivos que le ayudarán a una mejor presentación de su contenido en este pequeño espacio wee:

• Desplazarse para ver el contenido menos importante. Simplemente no se puede meter todo en el área visible - los primeros 800 x 600 píxeles de la ventana del navegador. Por lo tanto, colocar los elementos de alta prioridad dentro de esa ventana inicial y artículos de menor prioridad por debajo del pliegue.

  Dar pistas visuales para que los usuarios sepan más cosas está por debajo del pliegue al mostrar a propósito titulares o la parte superior de las imágenes que llevan a más cosas más adelante. Los usuarios no les importa desplazamiento, con tal de que la página no se enciende siempre. Una buena regla es apuntar a la altura total de la página a dos veces la altura visible inicial (por lo que 1200 píxeles para una página 800-wide-por-600-alto).

• Utilizar el espacio horizontal también. Puede utilizar tecnologías como Flash o HTML 5 para presentar el contenido de desplazamiento horizontal o un “carrusel” de los contenidos de rotación.

  

• Capa de su contenido. Otra manera de maximizar el espacio de visualización es revelar capas de contenido en la parte superior de la página web que el usuario se da la vuelta o hace clic en algo. Puede ocultar y mostrar capas de contenido a través de tecnologías como javascript, DHTML (HTML dinámico), y Flash.

  
  Un vuelco usuario expande este módulo de contenido en un sitio web de Disney para revelar más información.
  
  DHTML puede producir un menú desplegable “mejorado” que ofrece opciones organizados cuando un usuario pasa sobre un elemento de navegación.

• Diseñar una puerta giratoria de contenido. Dado que el espacio página Web es un bien escaso, otra dimensión que debe tener en cuenta es el tiempo. Si usted no puede caber todo lo que desea en el interior del área visible, es posible que desee pensar en la animación de la zona.

Describiendo sus wireframes

A veces las páginas web contienen componentes altamente interactivas que deben ser explicados en los wireframes a través de anotaciones. anotaciones son simplemente notas al margen que describen cómo los elementos en la obra página, lo que inicia la interacción, y qué contenido se muestra en diferentes escenarios. Numerando las áreas de la estructura metálica, y la numeración de las notas, se puede describir de manera eficiente el detalle interacción. A menudo, usted también tendrá que incluir un diagrama adjunto que muestra un estado diferente que aparece en una acción del usuario, como un vuelco o haga clic.