CUALES SON LOS ELEMENTOS DE UN SITIO WEB?
UN SITIO WEB SE COMPONE POR 18 ELEMENTOS QUE SON LOS SIGUIENTES:
Elementos de diseño de un sitio web1. Bloques
Desde el punto de vista del diseño, un sitio web requiere una maquetación o boceto, esto es, las partes por las que estará integrado y cómo será visualmente. Así que es necesario tener claros cuáles serán los bloques que formarán cada página.
Dichos bloques están constituidos por elementos fundamentales (texto, imágenes y videos), los cuales veremos a continuación.
2. Texto
Se refiere a los contenidos escritos que integran un sitio web. Cada bloque que se ha pensado para el diseño incluye una parte textual. Estos textos pueden ser títulos, subtítulos, descripciones, llamadas a la acción (CTA), frases persuasivas, etiquetas, entre otros.
Cuando se incluya un texto es importante verificar que las tipografías sean válidas para sitios web y elegir la que vaya acorde con el mensaje que quieres comunicar.
3. Imágenes y videos
Un sitio web debe ser atractivo visualmente; esto se logra a través del uso de videos o imágenes en distintos formatos. Un bloque de una página web puede contener solamente texto, imagen, video o hacer una combinación. Por ejemplo, cuando ves un banner principal ubicado en el home de un sitio web, por lo general se muestra una imagen con un copy (texto corto y directo), que indican lo que ofrece el sitio web.
4. Espacios
Para el diseño, un elemento clave es lo que no se ve, es decir, el espacio. Una buena conjugación de bloques respeta espacios en blanco que funcionan como descansos visuales, generan expectativa o le dan un estilo minimalista, elegante o funcional al sitio web.
Si observas cualquier sitio web siempre habrá una combinación de textos, imágenes y espacios. Por ejemplo, si estás mostrando un bloque de productos y tienes 3 imágenes, cada una puede ir acompañada de un texto debajo que describa el producto. Pero para que haya una armonía, estas 3 imágenes y 3 textos deben tener espacios entre sí que sean homogéneos, justamente para que sea visualmente atractivo y conceptualmente correcto.
5. Hosting
Para que un sitio web exista requiere 3 elementos clave desde el punto de vista técnico. Necesita un hosting o servidor que es donde se aloja el sitio web (con todos los elementos propios de la programación). Existen hostings de diferentes tipos y capacidades; por lo regular, varios sitios web comparten o están alojados en un mismo hospedaje.
6. Dominio
Este se refiere al nombre del sitio web, más una extensión, por el que será localizado en la red. Mediante el dominio los navegadores web y los usuarios pueden encontrar un sitio web y navegar en él. Por ejemplo, el dominio de HubSpot es hubspot.es
El nombre de dominio es único para cada sitio web y se ubica generalmente en la dirección URL o liga de un sitio, por ejemplo: www.casas-en-venta.com, escuela-primaria.org. Las terminaciones o conexiones tienen que ver con el tipo de dominio. De ahí que .com sea el más usado porque se refiere a páginas comerciales, mientras que .net se emplea más cuando son proveedores de servicio en la red, y .org se utiliza para organizaciones o instituciones generalmente sin fines de lucro. También existen dominios por país como .mx para México o .es para España.
7. Plataforma
Se refiere a los espacios virtuales de un sitio donde se ejecutan acciones de programas o aplicaciones con diferentes propósitos; por ejemplo, realizar un pedido y pagarlo. Por esta razón, la plataforma es la base de cómo se desarrolla un sitio web a partir de la programación web, por medio de diferentes lenguajes como HTML, CSS, Java Script, entre otros.
Todo sitio web requiere un lenguaje propio que la red comprenda y resulte funcional. Incluso puede configurarse de tal manera que se convierta en un sitio web dinámico, que genere contenido de acuerdo con la petición del usuario.
8. Home
Respecto a la estructura de un sitio web hay varios elementos que debes considerar. Recuerda que un sitio web está formado por varias páginas vinculadas, así que cada una se convierte en un elemento.
La primera página o home page es fundamental; es la cara que todos ven desde el principio. Funciona como una carta de presentación, por lo que debe mostrar todo lo que puede encontrarse en dicho sitio web.
El home se divide en bloques y cada uno indica de forma breve alguna información del propietario del sitio web, como quién es, qué hace, qué ofrece, cómo lo hace y cómo lo puedes contactar. El bloque principal, por lo regular, suele ser un banner o una serie de banners en carrusel, ya que es lo primero que verá el usuario y en estos se destacan aspectos clave del sitio web.
9. Header
El header o cabezal es el elemento que va en la parte superior del sitio web, el cual se mantiene mientras ingresas o navegas en las demás páginas o secciones. Es crucial que el header sea intuitivo y funcional para que los usuarios puedan navegar sin problemas.
En el header regularmente verás el logotipo y nombre de la empresa, porque es una forma de identificar en todo momento con quién estás tratando. Ahí suele ubicarse el menú, algún dato de contacto, iconos de redes sociales, una barra de búsqueda, botones de inicio de sesión, entre otros elementos.
La tendencia actual es hacer menús desplegables y minimalistas, pensando en que la mayoría de la gente navega desde su smartphone.
10. Body
El body o cuerpo de una página web es todo el espacio que hay entre el header y el footer; en él se integran los contenidos visuales y textuales. Esta parte refleja cómo se visualizó desde la etapa de diseño para determinar cuántos bloques habrá, si es más horizontal o si juega con algunas columnas verticales; incluso si es un sitio web más creativo que no utilice bloques tan definidos.
Existen muchas formas, estilos y combinaciones que pueden utilizarse para cada bloque de una página web; por ejemplo, títulos grandes e imágenes en recuadros, una gran imagen que abarque todo el bloque con texto encima, una frase sin imagen, usos de bullets o listas, etcétera.
11. Footer
El footer o pie es la parte baja de un sitio web; al igual que el header, permanecerá fijo en todas las páginas o secciones del sitio. Por su ubicación no conviene utilizar los elementos de mayor valor, sino algunos aspectos que ayuden a la navegación o a comprender el sitio.
Por lo regular en el footer se coloca el logotipo, aunque en un tamaño menor. Pueden colocarse los iconos de redes sociales y el aviso de privacidad; asimismo, puedes incluir un dato, un descargable o una página que te interesa reforzar.
Cuando los sitios web son complejos, es decir, con una serie de páginas y elementos, en el footer suele ubicarse un mapa de navegación que indica las secciones y subsecciones que pueden encontrarse en todo el sitio.
12. Menú
El menú se refiere a las secciones que forman el sitio web, es decir, las demás páginas aparte del home. El menú puede ser corto con pocas categorías o, si el sitio web lo requiere, ser más amplio con desplegables para observar las subsecciones.
Este elemento es clave para que un usuario identifique qué información ofrece un sitio web.
13. Secciones
Las secciones son páginas web entrelazadas al sitio web, por eso un sitio es diferente a una página, ya que es más completo y complejo.
Las secciones que pueden ir en un menú son: quiénes somos, productos/servicios, contacto, soporte/servicio al cliente, ya que estas páginas responden en general a las necesidades de una empresa y de sus usuarios.
Sin embargo, existen sitios web que usan subcategorías en su menú; por ejemplo, si se trata de un fabricante de ropa, su menú podría tener las secciones: Para hombre, Para mujer, Para niños, Nuevos lanzamientos, Calzado, Joyería.
También hay sitios más completos que pueden añadir una sección de blog o noticias, y un comercio electrónico o tienda online. Incluso se pueden tener secciones más especializadas; por ejemplo, si se trata de una empresa financiera puede incluir una página o sección que contenga una calculadora para préstamos o fondos de retiro.
Elementos de conectividad de un sitio web
14. Hipervínculos
La esencia de la red es su interconexión con los demás entornos que se alojan en este universo. Así que los hipervínculos son el ADN del internet, ya que estos permiten justamente la conectividad digital.
Un sitio web cuenta con varios hipervínculos, en principio los internos, que ayudan a navegar de un lado a otro entre las secciones y páginas del sitio; por ejemplo, el menú cuenta con hipervínculos para direccionar hacia cada página; además puede haber vínculos para hacer una descarga o llenar un formulario, suscribirse, hacer más grande una imagen, etc.
Por igual, un sitio web suele usar hipervínculos o enlaces externos que llevan al usuario hacia otro lugar de la red, fuera de ese sitio; por ejemplo, si se utiliza una referencia, al hacer clic se abrirá otro sitio web para mostrar la procedencia de la fuente.
15. Call to Action
Las llamadas a la acción o call to action (CTA) suelen representarse en un sitio web con botones, diseñados y programados con distintos estilos, formas y colores; el usuario sabe que al hacer clic en ellos algo pasará.
Un CTA es un hipervínculo incrustado en una frase que pide al usuario que realice una acción; por ejemplo, regístrate, suscríbete, descarga, inicia sesión, agenda una cita, compra, contáctanos, dona, conoce más, entre otros.
16. Barra de búsqueda
Los sitios web complejos utilizan barras de búsqueda para facilitar que los usuarios localicen rápidamente algo de su interés; sobre todo, cuando ya saben qué quieren en concreto o cuando el sitio es grande y complejo. Por ejemplo, en un sitio web de mascotas, un usuario que quiere saber si venden una marca específica de alimento para perro y no quiere perder tiempo navegando en todo el catálogo, en la barra de búsqueda puede teclear lo que busca y el sitio le arrojará las opciones disponibles.
Estas búsquedas pueden ser por concepto, términos, palabras, marcas, productos, categorías, etc.
También es especialmente importante cuando el sitio web funge como directorio o como base de datos; por ejemplo, IMDb que contiene un sinfín de fichas y reseñas de películas.
17. Mapa de navegación
Como ya lo mencionamos, el mapa de navegación suele estar en el footer, y es un elemento clave para establecer la conectividad del usuario con cualquiera de los elementos integrados a un sitio web.
El mapa de navegación suele simplificar las ramas de un sitio a fin de que una persona las identifique fácilmente y llegue al punto que le interesa.
18. Formas de contacto
Esta es una parte fundamental de un sitio web, independientemente del objetivo que tenga, ya que abre las posibilidades a la interacción, pertenencia y una búsqueda de información más amplia.
Las formas de contacto son elementos como los chats en vivo, redes sociales, formularios web, registros, chatbots y cualquier herramienta que permita la conectividad entre el usuario y las personas que están detrás de un sitio web, ya sean empresas, marcas, organizaciones o individuos.
En términos de marketing digital, ventas y servicio, cuanto más utilices las formas de contacto, mayores oportunidades tendrás de atraer a tu audiencia, convertir a las personas en clientes y a estos en embajadores de marca. De esta forma contarás con una base de datos fundamental para tu negocio.
