2. Estructura web
• Lo que define una página web y
su diseño es la forma de
organizar los elementos que la
componen
• Hay miles formas diferentes,
pero son pocas las que le dan
sentido a nuestro trabajo
• Ahora les dare unos ejemplos de
como estructurar su pagina web
3. Estructura del
diseño web
Empezaremos por el Contenedor
gran mayoría de las páginas web tienen divisiones o
secciones similares
Por lo general en la parte superior de la página se
encuentre un encabezado,
seguido de un cuerpo principal que suele estar a sus
costados por una columna, lateral tanto a la izquierda
como a la derecha o dos columnas laterales seguidas
al final de la página por un pie de página.
Se debe tener en cuenta que
este esquema sufre variaciones, aunque
normalmente son pequeñas.
4. Estructuras
necesarias
para el diseño
web
siguiendo por el encabezado
Para identificar y acceder fácilmente a la página
principal.
Además del logotipo, el encabezado también puede
incluir el nombre del sitio, un eslogan o una breve
descripción del mismo.
Es importante que el encabezado sea visualmente
atractivo y que refleje la identidad de la marca o el sitio
web.
También se puede utilizar para mostrar información
adicional, como el número de teléfono de contacto o
los enlaces a las redes sociales del sitio.
En resumen, el encabezado es una parte fundamental
del diseño web, ya que contribuye a crear una
sensación de unidad y coherencia en el sitio, y facilita
la identificación y navegación de los usuarios.
5. • El encabezado de un sitio web suele contener una serie de
franjas de diferentes grosores, donde la faja superior
incluye enlaces generales de la página, como acceso a
usuarios registrados, registros de usuarios nuevos, acceso
a perfiles, salidas, ayudas y buscadores internos.
• La zona más ancha generalmente se encuentra ocupada por
el título de la página, nombre de empresa, slogan, etc.
• La zona inferior del encabezado se emplea para ubicar los
enlaces de navegación y las etiquetas de navegación, uno
de los elementos más importantes a la hora de ayudar a los
usuarios a encontrar las páginas componentes del sitio
web. Dependiendo de la complejidad del sitio, puede
encontrarse solo uno de estos sistemas de navegación o los
dos.
• La navegación del sitio web utiliza menús con enlaces
internos que facilitan a los visitantes encontrar la página
que están buscando.
• La buena navegación es un elemento esencial de un sitio
fácil de usar y existen diferentes tipos de navegación en el
sitio web, como la navegación global y la navegación dentro
de cada sección
El
encabezad
o
6. • La navegación
• La navegación y el menú que la contiene son de gran importancia en
un sitio web, ya que facilitan la exploración y la navegación de los
usuarios. Los menús horizontales son el tipo más común y se
encuentran debajo o junto al encabezado del sitio, conteniendo
opciones generales como "Acerca de", "Productos", "Precios", etc.
• [1]. Los menús verticales pueden utilizarse como complementos o
submenús de los horizontales y deben ser visibles en el primer
pantallazo al entrar al sitio
• Además de los menús horizontales y verticales, también es importante
considerar la instalación de un buscador interno. Los usuarios suelen
buscar este tipo de elementos en la parte superior de alguna de las
columnas laterales, aunque en algunos casos, puede encontrarse en la
parte superior de la página[1].
• En resumen, la navegación y el menú que la contiene son cruciales para
la exploración del sitio por parte de los usuarios. Los menús
horizontales son el tipo más común y se encuentran en la parte superior
del sitio, mientras que los menús verticales pueden utilizarse como
complementos o submenús. Además, la instalación de un buscador
interno puede facilitar la exploración del sitio para los usuarios.
La
navegació
n
7. Contenido
principal
• Contenido Principal
• • Lo más importante y fundamental de
una buena página. Lo que mantiene al
visitante cautivo e interesado. Si el
contenido es malo o poco interesante,
abandonará la página en pocos
segundos. Para eso, debe estar
centralizado y enfocado y a la primera
vista.
• El mejor lugar debe ser para los
contenidos. Para Google, el contenido
es el rey.
8. El área de contenido es la parte principal de la página web,
donde se encuentran los elementos más relevantes e
importantes para los usuarios. Aunque el diseño de esta zona
puede variar según el tipo de contenido y la cantidad de
información, hay algunas reglas importantes que deben
seguirse:
• Títulmejorar la experiencia de navegación en la página web.
o : El título debe estar entre etiquetas, ya que contiene las
palabras clave que los usuarios utilizarán en sus búsquedas
y es fundamental para que los buscadores encontrar la
página correctamente.
• Disposición : La disposición de los contenidos debe ser
clara y fácil de seguir, permitiendo que los usuarios accedan
a la información que buscan sin problemas.
Tipo de contenido : El tipo de contenido, como texto, imágenes
o vídeos, debe ser adecuado a la función y objetivo de la
página web.
Cantidad de contenido : La cantidad de información debe ser
suficiente para satisfacer las necesidades de los usuarios y
proporcionar una experiencia de usuario adecuada.
Estilo : El estilo del contenido debe ser adecuado al objetivo y
al público objetivo de la página web, utilizando un lenguaje
claro y accesible.
Optimización : El contenido debe estar optimizado para
motores de búsqueda, utilizando palabras clave relevantes y
estructurando la información de manera que sea fácil de
ingresar
Accesibilidad : El contenido debe ser accesible a todos los
usuarios, incluyendo aquellos con discapacidades visuales o
motoras, utilizando etiquetas y estructuras adecuadas.
Diseño responsivo : El contenido debe ser adaptable a
diferentes dispositivos y resoluciones de pantalla, permitiendo
que los usuarios accedan a la información de manera óptima
Interacción : Si el contenido incluye elementos interactivos,
como formularios o botones, deben ser fáciles de encontrar y
utilizar
Diseño visual : El contenido debe estar acompañado de
imágenes, gráficos o vídeos que lo complementen y faciliten la
comprensión.
Reglas
importante
s
9. Columnas
de
exploración
• Columnas de exploración
En el diseño moderno de páginas web, una de
las divisiones del cuerpo principal de la página
consiste en una o dos columnas de
exploración, las cuales se utilizan para ubicar
elementos importantes como enlaces externos,
navegación interna, publicidad, información
adicional y contenidos secundarios. Si se
emplea una única columna, es indiferente para
los usuarios, pero en el caso de que se
requiera el empleo de dos columnas, pueden
ubicarse una a cada lado del cuerpo principal
de la página o ambos a uno de los lados,
siendo también indiferente si se ubican a la
derecha o la la izquierda del contenido
principal. Los usuarios suelen la información
de contacto en este tipo de columnas, por lo
que resulta uno de los mejores lugares para
ubicar los datos de contacto.
10. El pie de
pagina
Y para ir finalizando
El pie de página es una sección también importante en
el diseño de una página web, que se encuentra en la
parte inferior de la misma.
En esta sección se pueden incluir elementos
importantes como el autor, copyright, acceso a
diversas políticas del sitio y asuntos legales, datos de
contacto, enlaces a sitios relacionados, enlaces
internos, etc. Además, el pie de página es un lugar
ideal para incluir un mapa del sitio web, que ayuda a
los visitantes a encontrar lo que están buscando, y
para destacar elementos específicos como los
testimonios de los clientes, las páginas en las redes
sociales o la prensa.
El diseño del pie de página debe ser limpio y claro, y
debe adaptarse a los dispositivos móviles para evitar
que los usuarios tengan que realizar mucho scroll para
ver toda la información
11. Y por último
el espacio
negativo
• El espacio negativo, también conocido
como espacio blanco, es un elemento
esencial en el diseño de páginas web. Es
todo lo que no tiene información de ningún
tipo, pero que cumple un rol importante
para la web, ya que nos ayuda a tener
espacios de respiración, a equilibrar y dar
equilibrio a todo el diseño.
Para aplicar el espacio negativo de manera
efectiva en el diseño de páginas web, es
importante considerar los niveles de espacio
negativo, como el microespacio entre
elementos pequeños como líneas, palabras
letras y el microespacio entre bloques o
elementos más grandes
Además, es importante evitar llenar todos los
espacios con contenido, ya que esto puede
saturar la página y hacerla ilegible e
innavegable.