Saltar a contenido

Unidad de trabajo 2: Planificación y Prototipado de una interfaz web

1. Estructura web

  • ¿Tienes claro a qué tipo de público irá dirigida tu página? ¿Quieres obtener un rendimiento económico con cada visita? ¿Quieres contentar a todo el mundo que te visite o prefieres especializarte en un tema y tener menos seguidores?

Cuando comenzamos a diseñar una interfaz Web tenemos que tener en cuenta las respuestas a las preguntas anteriores, ya que dichas repuestas nos darán una idea clara de cuáles son los objetivos de nuestra Web y nos orientarán sobre el enfoque que debemos darle al diseño de nuestra interfaz.

Si comienzas un proyecto Web sin pensar en los usuarios a los que va a ir dirigido, es probable que no tengas la acogida que esperabas en un principio.

Una interfaz Web es un sistema gráfico que permite acceder a los usuarios a los contenidos de la Web mediante el uso de elementos gráficos, que deben ser conocidos por la mayor parte de los usuarios que acceden a nuestra página.

El objetivo principal en el diseño de una interfaz Web es que sus potenciales usuarios pueden acceder a todos su contenidos de la forma más rápida y sencilla posible.

Para que un diseño Web sea efectivo ha que diseñar una interfaz que cubra todos los objetivos. Debe lograr que los usuarios de nuestro sitio puedan acceder con facilidad a sus contenidos, puedan interactuar con eficacia con todos sus componentes y, se sientan cómodos haciéndolo.

1.1 Elementos de una interfaz web.

  • La interfaz web es el medio por el que se comunican los usuarios con un sitio web y está compuesta de numerosos elementos que dependen de su complejidad y objetivo. Así, por ejemplo, una página web de una tienda online o un portal de noticias dispondrá de mayor número de elementos que una página personal o una landing page de un restaurante. Los elementos más destacados de un sitio web son: identificación, navegación, contenidos e interacción.

1.1.1 Elementos de identificación

Los elementos de identificación son los que nos ayudan a reconocer el sitio web. Algunos ejemplos de elementos de identificación son los siguientes: - El nombre de la web. - El logotipo. - La imagen de la cabecera.

1.1.2 Elementos de navegación

Los elementos de navegación son los que nos permiten acceder a todos los contenidos del sitio web. Algunos ejemplos de elementos de navegación son los siguientes: - Menú principal - Widgets. - Aside de navegación. - Menú de navegación del footer.

Hay varias consideraciones a tener en cuenta para que el usuario pueda navegar por una web sabiendo dónde se encuentra y cómo moverse por el sitio. Para conseguirlo, el sistema de navegación debe disponer de los siguientes componentes: - Elemento de regreso a la página de inicio o home. - Menú principal situado en la parte superior de la página. - Información sobre la ubicación del usuario dentro del sitio: consiste en una línea de texto en la parte superior, bajo el menú de navegación principal, que indica al usuario dónde se encuentra. Para este cometido también se pueden utilizar las “migas de pan” o breadcrumbs.

1.1.3 Elementos de contenidos

Los elementos de contenidos son las zonas de la web en las que se muestra la información destacada como las áreas de texto de un artículo de un blog, el formulario de una página de contacto, etc.

Es muy importante que los contenidos de una web sean interesantes para el lector y estén escritos de forma clara y concisa.

1.1.4 Elementos de interacción

Los elementos de interacción son los que nos permiten realizar acciones en el sitio web. Algunos ejemplos de elementos de interacción son: - Cambiar el idioma. - Utilizar el buscador. - Consultar el carrito de compra. - Suscripción en la newsletter.

1.1.4 Componentes de una interfaz web

En prácticamente todas las páginas web hay elementos que son comunes.

Algunos ejemplos son: la cabecera, el menú de navegación, el cuerpo o el pie de página. Conocer el nombre de cada una de las partes de un sitio web es esencial ya que forma parte del vocabulario utilizado por los desarrolladores y diseñadores. La siguiente figura muestra la estructura general de un sitio web. Cabecera o header

1.1.4.1 Cabecera

La cabecera o header es la zona de la interfaz web situada en la parte superior y que sirve para identificar la empresa o marca. Normalmente, se utiliza para mostrar el logotipo de la empresa o su nombre. Además, este espacio da cabida a textos descriptivos, imágenes, paneles de acceso o banners publicitarios, entre otras cosas. Aunque la cabecera no es obligatoria, es utilizada en prácticamente todos los desarrollos de sitios web.

Debido a nuestra lectura visual, de arriba a abajo y de izquierda a derecha, el primer elemento que vemos en toda interfaz web es la parte superior izquierda de la página. Por este motivo, no es de extrañar que se aproveche este espacio para posicionar el logotipo y el nombre de la marca.

1.1.4.2 Cuerpo de la página

El cuerpo de la página es donde se muestran los contenidos. Puede verse acompañado de uno o varios sidebars (o menús laterales de navegación). Se sitúa bajo de la cabecera o header o bajo del navbar (o menú de navegación principal).

Generalmente, el cuerpo de la página cuenta con un título descriptivo. Todos los elementos del cuerpo de página deben seguir la guía de estilo del resto de la web.

El pie de página o footer se sitúa en la parte inferior de una interfaz web, bajo el cuerpo de la página. Generalmente, suele utilizarse para para mostrar enlaces a servicios, formulario de contacto, banners publicitarios, políticas de privacidad y cookies, entre otras cosas.

1.1.6 Otros elementos

  • Acordeón.
  • Action bar.
  • Anuncio, banner o ad.
  • Barra de búsqueda.
  • Barra lateral o sidebar.
  • Barra de progreso o progress bar.
  • Botones.
  • Call to action o CTA.
  • Carrito de compra o cesta.
  • Carrusel o carousel.
  • Contador.
  • Formulario de contacto o contact form.
  • Galería de imágenes.
  • Iconos.
  • Inscripción al boletín de noticias o newsletter.
  • Menú de navegación o navbar.
  • Menú hamburguesa o toggle.
  • Migas de pan o breadcrumbs.
  • Pestañas o tabs.
  • Políticas de privacidad y cookies.
  • Redes sociales o social media.
  • Selector de idiomas o menú de idiomas.
  • Slider.
  • Tooltip.
  • Ventana emergente o popup.

2. Patrones de diseño web

Elegir un patrón de diseño web es una de las primeras decisiones que debes tomar al crear una página web, y acertar con el adecuado es crucial. Además de definir su diseño, el patrón que elijas puede tener un gran impacto en la capacidad de tu página web para comunicar un mensaje y hacerla más intuitiva.

2.2 ¿Qué es un patrón de diseño web?

Un patrón de diseño web es una forma determinada de distribuir los elementos visuales de una página web y optimizar la relación entre ellos. Aunque los elementos se pueden distribuir como uno quiera, seguir un patrón de diseño web ayuda a transmitir mejor el mensaje de la página web y a mejorar su usabilidad.

El patrón del diseño es esencial en el diseño web. Establece un orden jerárquico visual de los elementos, define aquellos que deben captar mayor la atención del usuario, y contribuye al equilibrio general del diseño de la página web. Por decirlo llanamente, un buen patrón de diseño web puede ayudar a que el usuario preste atención primero a lo más importante de una página web y luego a otras secciones por orden de importancia.

2.3 ¿Cómo elegir un patrón de diseño web?

Cuando se acerca el momento de elegir el patrón del diseño de una página web, existen dos factores que hay que tener en cuenta:

- Ajustar tu contenido: el diseño web de una página debe apoyar el mensaje que deseas transmitir. Algunos patrones son mejores para mostrar productos, mientras que otros son preferibles para transmitir información rápida y eficazmente (un blog o un portal de noticias). El patrón de diseño web que elijas debe ajustarse a tu tipo de contenido.

- Usar patrones estándar: aunque admiten cierta creatividad, estos patrones de diseño web son generalmente la mejor opción porque han demostrado una y mil veces que funcionan. Como son muy comunes, cumplen las expectativas del usuario que ya está acostumbrado a ellos: son más intuitivos y fáciles de usar.

2.4 Los 10 mejores patrones de diseño web

  • Patrón Z
  • Patrón F
  • Imagen a toda pantalla
  • Pantalla dividida
  • Asimétrico
  • Columna única
  • Bloques
  • Mosaico
  • Revista
  • Franjas horizontales

2.4.1 Diseño web con patrón Z

Esta forma de "escanear" con los ojos la página se conoce como lectura rápida y la realizamos siguiendo un patrón parecido a la letra Z. Nuestros ojos hacen un barrido en forma de zigzag desde la esquina superior derecha de la página hacia su esquina inferior izquierda para luego desplazarse hacia la derecha.

Una página web con patrón Z se sirve de nuestro hábito de lectura rápida para distribuir la información más importante en forma de Z. El logotipo se suele colocar generalmente en la esquina superior izquierda para que sea lo primero que perciba el usuario. En frente, a la derecha, se suele colocar el menú de navegación junto a un llamado a la acción que destaque.

La diagonal que se extiende a lo ancho de la página, de arriba a abajo, es donde se coloca la información que más nos interesa que capte la atención. Esto se consigue usando imágenes seductoras acompañadas de un breve texto que explique de qué trata la página web.

La recta final del patrón Z debe ser la culminación de todo lo que la ha precedido hasta ahora. Tanto si has intentado seducir o convencer al usuario para que compre un producto o reserve un servicio, este es el momento y lugar para que lo hagan. Coloca el llamado a la acción (CTA) más importante al final del patrón Z con un botón que anime o urja al usuario a la acción. Ideal para: páginas de alto contenido visual y muy poco escrito. Este patrón es el idóneo para landing pages que tienen como objetivo una conversión muy específica.

2.4.2 Diseño web con patrón F

Al igual que el patrón Z, este patrón de diseño web se basa en otro tipo de hábito de lectura. En las páginas web con mucho contenido escrito, tendemos a "escanear" el texto siguiendo un patrón de lectura en forma de F. Es decir, la sección superior horizontal de la página recibe gran parte de nuestra atención y, a continuación, dejamos caer nuestra mirada verticalmente hacia la izquierda que se convierte en nuestro punto de referencia.

Si decides usar este patrón de diseño, invierte lo mejor de tus recursos en la sección superior de tu página donde tus visitantes probablemente permanezcan más tiempo. Escribe en esa franja horizontal un contenido que sintetice de forma convincente de qué trata tu página. En la parte superior de la F se suele incluir un encabezado, un subtítulo y una imagen.

La línea vertical de la F del lado izquierdo tiene como propósito apoyar y hacer más atractiva la sección horizontal. Puedes conseguirlo usando todo tipo de imágenes e íconos o con otros elementos como una lista de puntos o numeración. - Ideal para: páginas web de gran contenido escrito. Al crear un blog, por ejemplo, este patrón de diseño web es aplicable tanto a la página de inicio como a las distintas entradas del blog.

2.4.3 Diseño web con imagen a pantalla completa

Este patrón de diseño web incluye poco texto sobre una imagen que suele ser grande u ocupar toda la pantalla. Colocar un elemento visual como protagonista en la pantalla consigue captar formidablemente la atención de los usuarios y generar una poderosa experiencia visual en la página de inicio. Además, también ayuda a comunicar tu mensaje de forma inmediata y eficaz.

Los elementos visuales (fotografías, ilustraciones o videos) de gran tamaño son capaces de expresar eficazmente y al instante lo que eres y lo que haces. Por tanto, elige un elemento visual de alta calidad y que guarde relación con tu producto, servicio y el tono de tu marca.

En este tipo de diseño web, el elemento visual siempre viene acompañado de una breve frase para presentar y explicar lo que ofreces. Por tanto, es conveniente incluir aquí un eslogan con gancho que despierte el interés y la curiosidad de tus usuarios. - Un apunte: este patrón de diseño web funciona estupendamente en su versión para móviles.

- Ideal para: negocios que quieran destacar en un nicho de mercado específico o un producto en partículas. Por ejemplo, la página web de un restaurante puede presentar su plato estrella, mientras que una página web de boda a la pareja de novios felices y sonrientes.

2.4.4 Diseño web con pantalla dividida

El diseño con pantalla dividida es una de las principales tendencias en diseño web. Dividiendo verticalmente la pantalla por la mitad se logra un equilibrio simétrico perfecto - un importante principio de diseño. La división en dos partes permite que cada sección exprese dos ideas de forma completamente diferente o una misma idea pero desde un ángulo distinto.

El diseño web de la plantilla que indicamos en este ejemplo presenta una experiencia culinaria mediante una imagen a la izquierda para captar la atención, y mediante texto y arte vectorial a la derecha. El diseño permite que ambas mitades se complementen en lugar de competir entre ellas. Este diseño también funciona bien cuando se le pide al usuario elegir entre dos opciones opuestas como las categorías de 'Hombre' y 'Mujer' de una tienda online de moda. - Ideal para: páginas web que ofrecen contenido distinto de forma significativa, o páginas web que combinan contenido visual y escrito a partes iguales. Las tiendas web que segmentan a sus usuarios por sexo o edad también encajan con este patrón de diseño web.

2.4.5 Diseño web asimétrico

  • Al igual que el diseño de pantalla dividida, este diseño web también divide la pantalla en dos partes, solo que difieren en tamaño y densidad de contenido. La asimetría de ambas partes genera tensión visual en la pantalla añadiendo dinamismo a la página. Se trata de un diseño llamativo que sirve de herramienta para generar – y retener – el engagement del usuario.
  • Gracias a la desigual distribución de la escala, color y anchura de la página, se puede atraer la atención del usuario en algunos elementos antes que en otros. Para lograrlo, basta con darle más protagonismo a ciertos elementos visuales para convertirlos en puntos de atracción.
  • Decide qué contenido deseas destacar. Puedes elegir desde una imagen o un producto, hasta formularios online para que lo completen los usuarios. Luego, hazlo destacar usando colores de alto contraste, aumentando las proporciones y resaltando todo tipo de elementos visuales.
  • Ideal para: páginas web que buscan un look innovador y contemporáneo y están interesadas en generar engagement en el usuario. Una página web para negocios o el portafolio de una agencia de diseño son buenos ejemplos.

2.4.6 Diseño web de columna única

  • Este patrón de diseño web presenta todo su contenido en una columna vertical. Es un diseño sencillo y directo.
  • La navegación aquí es fácil de entender, basta con hacer scroll hacia abajo para obtener más información. Sin embargo, en este tipo de diseño hay un consejo sobre navegación web que conviene seguir: agregar siempre un botón 'Volver al principio' o un menú flotante fijo para ayudar al usuario a explorar mejor la página.
  • Cuando utilices el diseño web de columna única para una página con bastante texto, procura fragmentarlo intercalando imágenes, títulos o subtítulos. - Ideal para: páginas web con contenido de gran formato o páginas que presentan su contenido de forma cronológica. Idóneo tanto para blogs como para los feeds de redes sociales.

2.4.7 Diseño web en bloques

  • El diseño web en bloques combina muchas piezas de contenido en un solo diseño geométrico. Gracias a la hábil distribución de la información en cada bloque, los elementos no se solapan entre ellos, sino que contribuyen a dar uniformidad al look general del diseño. En este patrón, cada bloque conduce a una página interior distinta donde el usuario puede acceder a más información sobre el tema que más le interese.
  • Una práctica muy recomendable es añadir un bloque de gran tamaño que sirva de encabezado y nexo de unión entre todos los bloques. Este bloque puede incluir el título de la página y una explicación breve de su contenido. Otro buen consejo es organizar los elementos visuales de cada bloque para que funcionen bien juntos y añadan coherencia a la identidad de marca. - Ideal para: páginas web ricas en contenido. Este patrón de diseño web es una buena solución para un portafolio de diseño gráfico en el que cado bloque conduce a un proyecto diferente.

2.4.8 Diseño web en mosaico

  • Al igual que el anterior, el diseño web en mosaico también se sirve de bloques y receptáculos rectangulares para mostrar contenido variado. Este diseño web no es jerárquico, es decir, ningún bloque recibe más protagonismo que otro. Toda la información se trata por igual.
  • Como cada bloque es idéntico (fuente tipográfica, tamaño, etc.), importar contenido en ellos es fácil. Como resultado, el diseño adquiere un aspecto modular que se adapta perfectamente al tamaño de todo tipo de pantallas. A pesar de la elevada cantidad de contenido que puede albergar, facilita una navegación intuitiva mejorando la experiencia del usuario. - Ideal para: páginas web con mucho contenido. Este patrón de diseño web es idóneo para un vlog o una tienda online.

2.4.9 Diseño web estilo revista

  • Inspirado en la prensa escrita, este patrón de diseño web consiste en distribuir el contenido en varias columnas de estilo periodístico creando una compleja jerarquía visual. Insertando columnas que se pueden modificar individualmente, el diseño web de estilo revista te permite priorizar los principales titulares o encabezados sobre los artículos más pequeños.
  • Esto se puede conseguir a través del tamaño (las imágenes y los títulos de mayor tamaño son los primeros en captar la atención), la distribución de los elementos (el artículo superior será el primero en leerse), o con el nivel de elaboración del diseño (un artículo acompañado de imágenes atrae más la atención que uno con únicamente texto).
  • Fíjate que el diseño web estilo revista utiliza el patrón de lectura en F que es capaz de combatir la atención decreciente de tus lectores. Cuando combinas el patrón F con una estructura más compleja consigues desmenuzar grandes cantidades de información para facilitar su lectura, y al mismo tiempo también mantienes el diseño de la página despejado y ordenado. - Ideal para: páginas web con mucho contenido como portales de noticias y blogs.

2.4.10 Diseño en franjas horizontales

  • Este patrón de diseño web divide el largo scroll de una página en franjas horizontales. Cada franja actúa a modo de pantalla completa (o casi) y convierte su contenido en una sorpresa para el usuario cada vez que hace scroll.
  • Para diferenciar cada franja de la anterior, procura variar el estilo entre una y otra. Puedes hacerlo usando para cada franja un color distinto de tu paleta de colores web, o incluyendo texto en una franja e imágenes en otra. Además, si agregas efectos de scroll a cada franja, le dotarás al diseño de un sutil efecto de movimiento y profundidad. - Ideal para: páginas web de largo scroll. Este patrón de diseño web es perfecto para sitios web de una sola página.

3. Arquitectura web

3.1 Mapas conceptuales

El mapa conceptual es una representación gráfica de conceptos interrelacionados. Consiste en un esquema visual que detalla ideas o conceptos y sus diferentes relaciones. El principal objetivo de un mapa conceptual es representar la estructura conceptual de un tema en concreto.

Los mapas conceptuales se suelen organizar de arriba abajo o de izquierda a derecha y parten de un concepto principal o raíz. A partir de esta idea central se establecen las relaciones con los nuevos conceptos formando una estructura arbórea. Herramientas para hacer mapas conceptuales

Hay muchas formas de hacer mapas conceptuales. En las siguientes páginas puedes ver algunas herramientas online para hacer mapas conceptuales y algunos de los estilos de mapas que se utilizan actualmente. - xmind.net - smartdraw.com - creately.com - lucidchart.com - mindmeister.com

3.2 Mapas de navegación

Los mapas de navegación sirven para representar la arquitectura de las páginas de un sitio web. Tal y como los mapas conceptuales, los mapas de navegación se pueden representar de forma gráfica. En ambos modelos hay un concepto raíz (página inicial en el caso de un mapa de navegación) a partir del cual se ramifican el resto de elementos del mapa.

Sin embargo, los mapas de navegación de las páginas web no suelen ser gráficos, en la mayoría de ocasiones se trata de listados con texto. En este caso, la diferencia entre el diseño un mapa de navegación y un mapa conceptual es muy visible.

Uno de los objetivos principales de los mapas de navegación a la hora del diseño es estructurar bien los contenidos antes de crear un sitio web y que los usuarios encuentren de forma sencilla lo que están buscando.

Cuando el diseño de una web es muy complejo, en algunos casos, es difícil entender lo que se quiere transmitir entre el diseñador del mapa de navegación y el equipo de desarrollo. Por este motivo, los prototipos son herramientas muy interesantes para ver de forma visual un borrador de cómo será un sitio web. Existen diferentes formas de realizar el prototipo de una web: esquemas, bocetos, sketches, wireframes, mockups, diagramas, etc.

3.1 Sitemaps o mapas para motores de búsqueda

Los sitemaps o mapas para motores de búsqueda son archivos en los que se proporciona información sobre las páginas, los vídeos y otros archivos de un sitio web, así como sobre las relaciones entre ellos. Los buscadores, como Google, leen estos archivos para rastrear los sitios web de forma más eficaz. Los sitemaps informan a los rastreadores de qué archivos de un sitio web son importantes y, además, incluyen datos relevantes sobre ellos; por ejemplo, en el caso de las páginas, pueden indicar cuándo se actualizaron por última vez, cada cuánto se modifican y si existen versiones en otros idiomas.

¿Es necesario un sitemap?

Por lo general, si las páginas de tu sitio web están bien enlazadas, los rastreadores web podrán detectar la mayoría de ellas. Aun así, un sitemap puede mejorar el rastreo de tu sitio web, sobre todo si este cumple uno de los siguientes criterios: - Es muy grande. - Tiene un gran archivo de páginas de contenido que están aisladas o no están bien enlazadas entre sí. - Es nuevo y hay pocos enlaces externos que dirigen a él. - Ver más información sobre sitemaps y herramientas de generación de mapas Herramientas para la generación de mapas - Hay disponible multitud de herramientas para la generación de mapas tanto online como en aplicaciones, así como gratuitas o de pago. Además, los gestores de contenido nos ofrecen la posibilidad de utilizar plugins específicos para la creación de nuestros sitemaps y mapas de navegación. En la wiki de Google puedes encontrar un listado muy extenso de herramientas que puedes utilizar.

4. Wireframe, Mockup y Prototipado Web

4.1 Wireframe

  • Descripción: Es un esquema básico que representa la estructura de una página web. Se usa para definir la disposición y jerarquía de los elementos sin entrar en detalles visuales como colores, tipografías o imágenes.
  • Características:
    • Usa formas simples (cuadrados, rectángulos, líneas).
    • Suele ser en escala de grises o con colores mínimos.
    • Se centra en la distribución y funcionalidad, mostrando qué tipo de contenido o funcionalidad estará en cada área.
    • No incluye interactividad ni estilo visual detallado.
  • Herramientas comunes: Balsamiq, Wireframe.cc, Sketch (en modo wireframe), Figma (en modo wireframe).

4.2 Mockup

  • Descripción: Es una representación visual más detallada de la interfaz. A diferencia del wireframe, el mockup incluye elementos de diseño como colores, tipografía, imágenes y estilo, pero no tiene interactividad.
  • Características:
    • Representa el diseño final de la interfaz en términos visuales.
    • No se enfoca en la funcionalidad, sino en la apariencia.
    • No es interactivo, es decir, no se pueden realizar clics ni simular navegación.
  • Herramientas comunes: Photoshop, Sketch, Figma, Adobe XD.

4.3 Prototipado

  • Descripción: Es un modelo interactivo de la interfaz web que simula la experiencia de usuario. Permite realizar clics, navegar entre pantallas y probar flujos de usuario.
  • Características:
    • Incluye interacciones y transiciones entre páginas.
    • Puede ser de baja, media o alta fidelidad dependiendo del detalle visual y funcional.
    • Se usa para testear la usabilidad y funcionalidad antes del desarrollo.
    • Puede estar basado en wireframes (baja fidelidad) o mockups (alta fidelidad).
  • Herramientas comunes: Figma (modo prototipo), Adobe XD, InVision, Axure.

4.4 Diferencias Clave:

  1. Detalles Visuales:

    • Wireframe: Diseño básico, sin detalles visuales.
    • Mockup: Diseño completo, con detalles visuales finales.
    • Prototipo: Puede tener detalles visuales, pero su foco es la interactividad.

  2. Funcionalidad:

    • Wireframe: Sin funcionalidad.
    • Mockup: Sin funcionalidad, solo diseño visual.
    • Prototipo: Incluye funcionalidad y navegación simulada.

  3. Uso:

    • Wireframe: Para definir estructura y distribución.
    • Mockup: Para mostrar la apariencia final del diseño.
    • Prototipo: Para probar y validar la experiencia de usuario y funcionalidad.

Tutoriales

Referencias

  • https://www.canva.com/es_mx/aprende/elementos-y-principios-diseno-tips-e-inspiracion/
  • https://karensincuir.wordpress.com/2014/11/16/importancia-de-la-comunicacion-visual/
  • https://www.begoromero.com/psicologia-del-color/
  • http://www.slideshare.net/Nivck/psicologa-del-color-en-el-diseo-grfico
  • http://www.creativosonline.org/blog/psicologia-del-color.html
  • https://imborrable.com/blog/tipografias-que-son/
  • https://www.rayitasazules.com/tipografias-monoespaciadas-la-irresistible-belleza-del-orden/
  • https://www.domestika.org/es/blog/2492-que-es-un-icono-y-cuales-son-sus-diferencias-con-los-pictogramas
  • https://neoattack.com/que-es-la-imagen-corporativa/
  • https://blog.ida.cl/diseno/guia-de-estilo-diseno-web/
  • https://es.wix.com/blog/2020/05/los-mejores-patrones-de-diseno-web/
  • https://webdesign.tutsplus.com/es/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521