GMC_M3_U2_MM_30_PaginasWeb

Elementos de las páginas web

Antes de entrar al tema, repasemos algunos conceptos básicos. Haz clic sobre los botones.

Sitio web

Hosting

Dominio

Elementos de estructura

Nuevos conceptos

Ahora que recuerdas estos temas, vamos a agregar conceptos para entender de forma más clara todo lo que debes tener en cuenta al momento de diseñar tu sitio web:

Haz clic sobre los botones.

Diseño adaptativo

Content Management System (CMS)

URL (Uniform Resource Locator)

¿Qué es el diseño web?

Este concepto se define como la combinación de elementos estéticos, funcionales, de organización y planificación del contenido que irán en cada página web, las cuales constituyen el sitio web que se aloja en internet. Por otro lado, el diseño web también es el arte de disponer colores, fuentes y componentes gráficos (imágenes, videos, animaciones, etc.) para dar forma a la estructura del portal y ofrecer una experiencia agradable a los usuarios.

Dentro del diseño web, aparte de lo antes mencionado, se debe considerar combinar las herramientas necesarias para que los usuarios puedan interactuar con el contenido y, de esta forma, analizar las estadísticas del proyecto y el posicionamiento en los buscadores.

Así mismo, es la carta de presentación, la primera impresión que tendrán los usuarios de tu marca, proyecto, empresa o servicio. Revisemos primero los puntos cruciales a determinar antes de conocer los principios de un diseño web.

Puntos clave

Antes de lanzarte a la aventura, es necesario que definas los siguientes puntos para decidir la plataforma y el diseño de tu sitio.

1. Definir el propósito u objetivo de tu sitio, así como la temática en lo general y lo particular.
2. Estudiar a tu competencia para revisar fortalezas y debilidades que pueden ayudarte a mejorar tu sitio web.
3. Elegir un dominio y hosting.
4. Delimitar las secciones que abarcará tu espacio digital.
5. Elegir tu paleta de colores, tipografías y la identidad (buyer person) que tendrá tu sitio.
6. Definir el estilo de imágenes y videos que acompañarán tus contenidos.
7. Colocar un complemento SEO y una herramienta de métricas para analizar cómo va tu sitio web, como Google Analytics.

Principios del diseño web

Antes de lanzarte a la aventura, es necesario que definas los siguientes puntos para elegir la plataforma y el diseño de tu sitio.

Movimiento

Énfasis

Contraste

Equilibrio

Ritmo

Jerarquía

Espacios en blanco

Unidad

Componentes

Considerar la funcionalidad del sitio es un punto crucial puesto que, en ocasiones, hace que el usuario decida si se queda a navegar o no en tu sitio. Por lo que los componentes básicos que se deben considerar son: Haz clic sobre los botones.

Navegación

SEO

Velocidad

Elementos visuales

Los elementos visuales, bien aterrizados y aplicados, harán que se transmita la identidad de tu marca, los objetivos, así como los mensajes que quieres transmitir, y se intuirá el contenido que se quiere compartir. Entre los elementos visuales más importantes están: Haz clic sobre los botones.

Paleta de colores

Encabezado

Pie de página

Fondo

Tipografía

Imágenes

Animación

Jerarquía

Debes determinar el contenido más importante, este tiene que aparecer primero, en un lugar destacado y visible para que los usuarios lo distingan desde el inicio y empiecen a interactuar con él.

Se refiere al balance visual, en donde cada elemento tiene su lugar. Este equilibrio se logra al trazar una línea imaginaria por el centro de la página y a partir de ahí se colocan los componentes que la van a formar. Para ello, existen dos maneras de realizarlo:

Simétrico: A partir del eje marcado, el peso visual debe estar distribuido en los dos lados, como si fuera el reflejo de un espejo. Esto da una sensación de equilibrio y belleza.

Asimétrico: Es aquel que sí tiene ese peso visual armónico pero los componentes no están dispuestos en forma de espejo, este enfoque se considera más moderno o contemporáneo; sin embargo, aunque los elementos no sean simétricos, se debe lograr una armonía.

Movimiento

En el diseño web, el movimiento se refiere a lo que lleva al usuario de un componente a otro, esto se da al controlar el tamaño, la dirección y el orden de los elementos, que son parte de la composición general de la página.

Navegación

Se refiere al elemento que permite a los usuarios encontrar la información que necesita dentro del propio sitio web, es decir, internamente. A este componente se le denomina “menú de navegación” y es el que ayuda a unir las distintas páginas y secciones dentro del sitio. Aquí se pueden encontrar diferentes diseños:

Énfasis

En este punto, lo más importante es determinar aquello que quieres que el usuario vea primero, por ejemplo, el logotipo, una imagen, video, entre otros. Se puede destacar a través de colores, animaciones o distintos tamaños.

Unidad

Es la parte o el resultado final, es decir, el cómo se verá realmente el sitio web, aquí se puede determinar si los elementos anteriores, en conjunto, alcanzaron el objetivo planteado al principio. Por lo que la unidad debe ser esa composición equilibrada y armoniosa que haga que el usuario se quede en tu página desde que entra; es revisar que cada elemento esté colocado en el sitio que debe estar, que tenga un buen funcionamiento y que aporte a la meta final.

Ritmo

Es la repetición de componentes para tener coherencia y una línea definida que te destaque de los demás. Aquí aparece la paleta de colores de la marca, el tipo de letra, así como el tamaño del título y subtítulos, entre piezas que construyen una identidad y dan armonía visual a la página web.

Contraste

Es disponer distintas piezas de la composición de manera estratégica, de tal forma que destaquen sus diferencias: claro-oscuro, áspero-suave, grande-pequeño. El contraste hace que la imagen pueda volverse interesante, a veces con rasgos dramáticos, que atrapen y cautiven al usuario.

Espacios en blanco

Se definen como aquellas zonas que no cuentan con ningún elemento, aun cuando el color no sea literalmente blanco. Estos son sumamente importantes porque dan ese respiro a la imagen, haciendo que la vista no se sature y cree una armonía, además, ayuda a lograr principios del diseño como el mismo equilibrio, énfasis o jerarquía.