Contenidos
Diseño de páginas web
Además de definir partes individuales de su página (como “un párrafo” o “una imagen”), HTML también cuenta con una serie de elementos a nivel de bloque que se utilizan para definir áreas de su sitio web (como “la cabecera”, “el menú de navegación”, “la columna de contenido principal”). Este artículo analiza cómo planificar la estructura básica de un sitio web y cómo escribir el HTML para representar esta estructura.
Secciones básicas de un documentoLas páginas web pueden tener y tendrán un aspecto bastante diferente entre sí, pero todas suelen compartir componentes estándar similares, a menos que la página muestre un vídeo o un juego a pantalla completa, forme parte de algún tipo de proyecto artístico o simplemente esté mal estructurada:
Enlaces a las secciones principales del sitio; suelen estar representados por botones de menú, enlaces o pestañas. Al igual que la cabecera, este contenido suele ser consistente de una página web a otra: tener una navegación incoherente en tu sitio web sólo hará que los usuarios se sientan confundidos y frustrados. Muchos diseñadores web consideran que la barra de navegación forma parte de la cabecera en lugar de ser un componente individual, pero esto no es un requisito; de hecho, algunos también argumentan que tener las dos separadas es mejor para la accesibilidad, ya que los lectores de pantalla pueden leer las dos características mejor si están separadas.
Nombres de los elementos de la página web
Los componentes de una página web son: imágenes, textos y otros contenidos multimedia. Las secciones internas están enlazadas para que el usuario pueda navegar de una página a otra mediante hipervínculos, un concepto de interactividad surgido con el fenómeno de Internet.
Los textos han hecho del inglés el idioma universal de la red. En su objetivo de llegar al mayor número posible de personas, muchos sitios ofrecen su información y servicios en su lengua materna y en otros idiomas, principalmente en inglés.
Aunque no se debe abusar del uso de imágenes por el riesgo de aumentar el peso de la página, y por tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial para ofrecer información visual del contenido y mostrar un diseño atractivo y personal
Los marcos fueron muy utilizados en una época, pero además de crear algunos inconvenientes en el diseño, es una opción poco recomendable ya que los buscadores no indexan correctamente los sitios realizados con marcos.
El éxito de un sitio depende de la forma en que se combinen estos cinco factores que determinan en gran medida la velocidad con la que se genera y se ofrece la información, y por supuesto el éxito de un sitio.
Un buen diseño web tiene una serie de características comunes que hacen que los sitios web sean más fáciles y agradables de usar. Conocerlas te ayudará a entender por qué te gustan algunas páginas y odias otras, y qué quieres incluir en tu propio sitio web.
Este artículo sobre la anatomía de una página web cubre los elementos individuales de una página, para qué sirven y por qué los necesitas. Para ver qué formatos de página se utilizan habitualmente y conocer los diseños responsivos, lee nuestro artículo sobre el tamaño y la disposición de una página web.
La zona de la parte superior de la página suele denominarse cabecera de página. En una página típica como la de Microsoft o eBay, esta zona tiene entre 50 y 100 píxeles de altura. Presenta el logotipo de la empresa, tal vez una línea de presentación y la navegación principal. A menudo incluye información clave o llamadas a la acción, como un número de teléfono, un botón de contacto o un cuadro de búsqueda. Es lo primero que verán sus visitantes y será un tema común en todo su sitio.
Puede pensar en la estructura de un sitio como un diagrama de árbol o un directorio con subcarpetas anidadas. En la parte superior de la estructura está la página de inicio, inmediatamente debajo las secciones o temas más importantes y dentro de éstas, otras subsecciones.
Diseño de la página web
Tenga en cuenta que la página de inicio no siempre es la primera página en la que aterrizan los visitantes cuando entran en su sitio web (especialmente si tiene una estrategia inteligente de marketing y SEO basada en la educación). Por lo tanto, todas las páginas de su sitio web deberían llevar a los visitantes a saber más sobre usted y a actuar, no sólo la página de inicio.
Aunque los sliders eran muy populares hace varios años, no suelo recomendar el uso de sliders en el diseño de sitios web modernos. Consulte este artículo para conocer muchas razones por las que los sliders no hacen un gran trabajo para que los visitantes tomen acción.
A menudo escuchamos a los clientes llamar a estos “pestañas” en la parte superior del sitio, pero los menús diseñados para parecer pestañas son básicamente inexistentes en 2018. En lugar de llamar a estas “pestañas”, en su lugar nos escuchará referirse a los elementos del menú como “enlaces” o “páginas” en el menú.
Ten en cuenta que la navegación puede incluir menús de navegación primarios y secundarios. Se utilizan dos menús de navegación separados cuando puede haber mucha navegación necesaria, y se quiere tener claro qué enlaces son los más importantes.