Elementos de una pagina web

Anatomía de una página web

Aunque cada diseñador puede tener un plan diferente a la hora de construir una página web, tiene una lista de control común. Por mucho que se intente evitar, hay algunos elementos que todo sitio web debería (y suele) incluir.

Desde mucho espacio en blanco y grandes imágenes, hasta funcionalidad de búsqueda y llamadas a la acción claras, estos elementos comunes son las cosas que los usuarios esperan cuando se trata de usar un sitio con facilidad. Hoy vamos a echar un vistazo a diez elementos a los que deberías dar prioridad en tu sitio web, a ejemplos perfectamente diseñados de cada uno de ellos y a consejos sobre cómo utilizarlos en tu próximo proyecto de diseño web. Como dice el refrán, «el diablo está en los detalles».

El espacio es una de las herramientas de diseño más importantes porque lo dicta todo, desde la fluidez hasta la legibilidad. Los diseñadores están empezando a utilizar el espacio de formas que no veíamos en la web hace una década. Cada vez hay más diseños de sitios que incluyen espacios amplios, un mayor espaciado entre líneas de texto y un uso general del espacio abierto.

Las relaciones espaciales clave incluyen la coherencia en el espaciado. Los elementos similares deben incluir un espaciado similar. La cantidad de espacio entre líneas de un párrafo debe ser la misma, al igual que la cantidad de envoltura alrededor de las imágenes.

Tipos de páginas web

Los «sitios» web son abstracciones completas: no existen, salvo en nuestra cabeza. Cuando identificamos un sitio como tal, lo que realmente estamos describiendo es una colección de páginas individuales enlazadas que comparten un aspecto gráfico y de navegación común. Lo que crea la ilusión de continuidad en un «sitio» cohesionado son las características de diseño que comparten las páginas. Las páginas html individuales y la forma en que están diseñadas y enlazadas son la unidad atómica de los sitios web, y todo lo que caracteriza la estructura del sitio debe aparecer en las plantillas de las páginas.

A medida que la web ha ido madurando en la última década, la estructura de las páginas de los sitios de información basados en texto se ha vuelto más uniforme y predecible. Aunque no todas las páginas web comparten el diseño y las características exactas descritas aquí, la mayoría de las páginas web incorporan algunos o todos estos componentes básicos, en ubicaciones de página que se han vuelto familiares para los usuarios de la web (fig. 6.1).

Las cabeceras de las páginas son como versiones en miniatura de la página de inicio que se sitúan encima de cada página y hacen muchas de las cosas que hacen las páginas de inicio, pero en un espacio limitado. Las cabeceras proporcionan la identidad del sitio y la navegación global, con búsqueda y quizás otras herramientas. La ubicación exacta y la disposición de los componentes varían de un sitio a otro, pero el patrón de diseño general se ha vuelto bastante consistente.

Elementos de diseño de páginas web

Metadatos del documentoLos metadatos contienen información sobre la página. Incluyen información sobre estilos, scripts y datos que ayudan al software (motores de búsqueda, navegadores, etc.) a utilizar y representar la página. Los metadatos de estilos y scripts pueden estar definidos en la página o enlazar con otro archivo que contenga la información.

Seccionamiento del contenidoLos elementos de seccionamiento del contenido permiten organizar el contenido del documento en partes lógicas. Utilice los elementos de seccionamiento para crear un esquema amplio para el contenido de su página, incluyendo la navegación de cabecera y pie de página, y los elementos de encabezamiento para identificar las secciones de contenido.

El elemento HTML <article> representa una composición autocontenida en un documento, página, aplicación o sitio, que está destinada a ser distribuida o reutilizada de forma independiente (por ejemplo, en sindicación). Algunos ejemplos son: una entrada de un foro, un artículo de una revista o un periódico, o una entrada de un blog, una ficha de producto, un comentario enviado por un usuario, un widget o gadget interactivo, o cualquier otro elemento de contenido independiente.

El elemento HTML <header> representa el contenido introductorio, normalmente un grupo de ayudas a la introducción o a la navegación. Puede contener algunos elementos de encabezamiento, pero también un logotipo, un formulario de búsqueda, un nombre de autor y otros elementos.

Qué es una página web

Si usted es propietario de un negocio, su página web es absolutamente una de las herramientas más importantes que tiene en su arsenal para conseguir más -y mejores- clientes y consumidores. Entonces, ¿qué separa una buena página web de una mala, o una buena de una excelente? He aquí 10 cualidades que debe tener un gran sitio web. Independientemente de que acabe contratando a makespace! como sus diseñadores web de Louisville, debería encontrarlas útiles:

El diseño del sitio web debe ser fácil de navegar y los elementos del menú deben ser fácilmente accesibles desde cualquier página. El espectador debe saber en todo momento en qué parte del sitio web se encuentra y tener fácil acceso al lugar en el que le gustaría estar. Un mapa del sitio es una gran idea y se utilizará si está disponible. Esto parece elemental, pero la mayoría de los sitios web podrían mejorar en este aspecto. Recuerde que hay una línea fine entre un menú interactivo y uno molesto, por lo que la funcionalidad debe ser la idea.

Las personas son criaturas orientadas a lo visual, y la utilización de grandes gráficos es una buena manera de hacer que su sitio web sea más atractivo. Su sitio web tiene aproximadamente una décima de segundo para impresionar a su visitante -y cliente potencial- y hacerle saber que su sitio web -y su negocio (por delegación)- es digno de confianza y profesional. Sin embargo, es importante no exagerar. Los textos en movimiento, las animaciones y las intros deberían usarse con moderación en el diseño de tu web y sólo para enfatizar un punto para obtener el máximo efecto.