Unidad 2. Diseño de contenidos

Interfaces gráficas para la web

2025

Unidad 2. Diseño de interfaces

Esto es un párrafo listo para contener creatividad, experiencias e historias geniales.

Competencia de la unidad

Conocer cuáles son las directrices para el diseño de interfaces y elegir adecuadamente los formatos, con el propósito de desarrollar sistemas amigables que faciliten la navegación en una página web.

Info

2.2 Arquitectura de la Información.

2.1 Diseño de contenidos

2.3 Mapa del sitio web o app.

2.5 Componentes de una interfaz.

2.4 Wireframes y Mockups

2.2 Arquitectura de la Información.

2.1 Diseño de contenidos

2.3 Mapa del sitio web o app.

2.5 Componentes de una interfaz.

2.4 Wireframes y Mockups

Principios del Diseño de Contenidos

Para que los contenidos sean efectivos, deben cumplir con los siguientes principios:

1. Claridad y Concisión

2. Escaneabilidad y Jerarquía Visual

3. Relevancia y Personalización

4. Consistencia en el Lenguaje y el Estilo

5. Inclusión y Accesibilidad

Principios del Diseño de Contenidos

Para que los contenidos sean efectivos, deben cumplir con los siguientes principios:

1. Claridad y Concisión

• La información debe ser clara y directa, evitando el uso innecesario de tecnicismos o información redundante.
• Se recomienda el uso de frases cortas y directas.

Ejemplo: Mal diseño de contenido: "Bienvenido a nuestra plataforma en línea donde puedes realizar compras de una variedad extensa de productos para el hogar, desde electrodomésticos hasta pequeños accesorios, en diferentes precios y con distintas opciones de pago." Buen diseño de contenido: "Compra electrodomésticos y accesorios para el hogar con precios accesibles y pagos flexibles."

¿Cómo afecta el exceso de texto a la experiencia del usuario?

Principios del Diseño de Contenidos

Para que los contenidos sean efectivos, deben cumplir con los siguientes principios:

2. Escaneabilidad y Jerarquía Visual

• La mayoría de los usuarios no leen palabra por palabra, sino que escanean la información.
• Se debe usar títulos, subtítulos, listas y negritas para destacar la información clave.

Ejemplo de contenido bien estructurado: Beneficios de nuestro servicio: 🚀 Entrega en 24 horas 💳 Pago en cuotas sin intereses 🔄 Devoluciones gratuitas Un mal ejemplo: "Nuestro servicio tiene varias características que podrían interesarle. Ofrecemos entregas rápidas, tenemos la opción de pagar en cuotas, y si no está satisfecho con el producto, puede devolverlo sin ningún problema. También contamos con un sistema de atención al cliente disponible todo el día."

Principios del Diseño de Contenidos

Para que los contenidos sean efectivos, deben cumplir con los siguientes principios:

3. Relevancia y Personalización

• El contenido debe estar enfocado en el usuario objetivo (target).
• Se deben evitar textos genéricos y usar lenguaje adecuado para la audiencia.

Ejemplos:Correcto: "Descubre los últimos smartphones con procesadores Snapdragon 8 Gen 2 para un rendimiento sin igual." Incorrecto: "Echa un vistazo a los nuevos teléfonos móviles disponibles en el mercado." Otro ejemplo: Para un sitio de noticias tecnológicas, es mejor usar términos como "procesadores de última generación" en lugar de "computadoras modernas".

Principios del Diseño de Contenidos

Para que los contenidos sean efectivos, deben cumplir con los siguientes principios:

4. Consistencia en el Lenguaje y el Estilo

• La voz y el tono deben ser consistentes en todo el sitio o aplicación.
• Si un sitio es formal, debe mantenerse ese tono en todas sus páginas.
• Si es una aplicación juvenil, el lenguaje puede ser más relajado.

Ejemplos:📌 Página institucional: "En nuestra empresa, nos comprometemos con la innovación y la excelencia en cada uno de nuestros servicios." 📌 App para jóvenes: "¡Explora las mejores opciones y encuentra justo lo que necesitas! 🚀"

Principios del Diseño de Contenidos

Para que los contenidos sean efectivos, deben cumplir con los siguientes principios:

5. Inclusión y Accesibilidad

• Usar lenguaje claro y evitar jergas o términos difíciles de entender.
• Evitar solo imágenes como contenido principal, ya que los lectores de pantalla no pueden interpretarlas.
• Utilizar contraste adecuado entre texto y fondo para personas con baja visión.

Ejemplo de contenido accesible:

• Botón con texto: "Iniciar sesión" en lugar de solo un icono de usuario.
• Alternativas de audio o texto para contenido multimedia.

Herramientas para Diseñar Contenidos Eficaces

Hemingway App: Evalúa la claridad del texto y su nivel de lectura. Grammarly: Corrige gramática y estilo en inglés. Figma / Adobe XD: Para organizar contenido visualmente antes de desarrollarlo. Google Trends: Para encontrar términos relevantes y mejorar la optimización del contenido.

Ejercicio 1

Analiza el siguiente texto:"Si estás buscando un teléfono, tenemos varios modelos que podrían gustarte. Algunos tienen buena cámara, otros son rápidos, y algunos vienen con muchos gigabytes de almacenamiento. A lo mejor quieres uno con pantalla grande o tal vez prefieras uno pequeño y compacto. Los teléfonos tienen diferentes características como procesadores rápidos o buena duración de batería. También hay opciones con pantallas de alta resolución. Nosotros ofrecemos muchas opciones con diferentes capacidades y tamaños, para que encuentres el mejor para ti."

1. Reescribe el texto aplicando los siguientes principios:

• Claridad: Asegúrate de que la información esté organizada y sea fácil de entender.
• Escaneabilidad: Utiliza títulos, subtítulos y listas para hacer el contenido más accesible.
• Relevancia: Personaliza el texto para que se adapte mejor al público objetivo, usando un lenguaje más específico y técnico si es necesario.

2. Expón tu versión final al grupo y explica las mejoras realizadas.

Ejercicio 2

Objetivo: Evaluar la efectividad del diseño de contenido en páginas web populares. Instrucciones:

• De forma individual o en equipos de 2 personas eligen un sitio web (Amazon, Netflix, un banco, etc.).
• Analizan cómo presentan la información en sus páginas principales.
• Identifican fortalezas y debilidades, y proponen mejoras.

2.2 Arquitectura de la Información.

2.1 Diseño de contenidos

2.3 Mapa del sitio web o app.

2.5 Componentes de una interfaz.

2.4 Wireframes y Mockups

Herramientas para Diseñar Contenidos Eficaces

Card Sorting: (Optimal Workshop, UXPin) para organizar contenido según la percepción de los usuarios. Draw.io / Figma: Para crear esquemas de arquitectura de la información. Google Analytics: Para analizar el comportamiento de navegación de los usuarios. XML Sitemaps Generator: Para generar mapas de sitio y mejorar el SEO.

2.2 Arquitectura de la información (AI)

Disciplina encargada del análisis, organización, disposición y estructuración de la información en los espacios de la información.

Está relacionada con: usuarios, contenido y contexto.

1. Facilita la indexación para los buscadores
2. Permite localizar la información de manera fácil e intuitiva.
3. Se pueden añadir contenidos nuevos de forma lógica.
4. Más amigable para los motores de búsqueda.

Beneficios

2.2 Arquitectura de la información (AI)

Ejemplo de diseño de arquitectura de información

Elegir un tema: "Tienda en línea de ropa sostenible" Nombre del sitio: EcoModa Se determinan las páginas clave del sitio web: Inicio – Presentación de la tienda y ofertas destacadas. Catálogo – Lista de productos organizados en categorías. Sobre Nosotros – Historia de la marca y su misión ecológica. Blog – Artículos sobre moda sostenible. Contacto – Formulario y datos de contacto. Carrito – Página de compras y pago.

Ejemplo de diseño de arquitectura de información

Crear subcategorías dentro de cada sección Inicio

• Banner promocional
• Productos destacados
• Opiniones de clientes

Catálogo

• Ropa de mujer
• Ropa de hombre
• Accesorios
• Nuevas colecciones

Sobre Nosotros

• Nuestra historia
• Compromiso ecológico
• Testimonios

Blog

• Consejos de moda sostenible
• Entrevistas con diseñadores
• Materiales ecológicos

Contacto

• Formulario de contacto
• Redes sociales
• Dirección y teléfono

Carrito

• Lista de productos seleccionados
• Métodos de pago
• Envío y seguimiento

Ejemplo de diseño de arquitectura de información

Ejercicio 3

1. Formen equipos de 2 integrantes.
2. Elijan un tema para su sitio web. Puede ser una biblioteca digital, una tienda en línea, un blog de tecnología, una red social educativa, entre otros.
3. Definan las secciones principales del sitio web. Estas deben representar las páginas clave que tendrá la plataforma (Ejemplo: Inicio, Catálogo, Contacto).
4. Creen subcategorías dentro de cada sección, organizando la información de manera lógica y fácil de navegar.
5. Diseñen un diagrama que represente la estructura del sitio web. Pueden hacerlo en papel, en una pizarra o utilizando herramientas digitales como, Figma o PowerPoint.
6. Presenten su estructura al grupo, explicando por qué organizaron la información de esa manera y cómo facilitará la experiencia del usuario.

Ejercicio 4

1. Los estudiantes de forma individual o en equipos de 2 personas seleccionan un sitio web popular (Amazon, Netflix, un banco, etc.).
2. Evalúan su organización, navegación y búsqueda.
3. Identifican problemas y proponen mejoras.

Ejercicio

Genera un documento donde contenga los siguientes puntos: 1. Una introducción al tipo de sitio web 2. Un encabezado claro y atractivo que capte la atención del visitante de inmediato. Ejemplo: Un eslogan conciso y motivador que destaque el valor único de tu producto o servicio. 3. Logo de tu empresa (https://www.jimdo.com/es/pagina-web/logo-creator/) 4. Usuarios posibles del sitio web (personalidades, necesidades, perfiles, etc.) 5. Secciones posibles de tu sitio 6. Elabora un diagrama como el que se muestra a continuación para presentar el plan inicial de tu sitio.

Ve a plataforma a la lección: Planificación de tu página web, ahi sube la evidencia

Next

2.2 Arquitectura de la Información.

2.1 Diseño de contenidos

2.3 Mapa del sitio web o app.

2.5 Componentes de una interfaz.

2.4 Wireframes y Mockups

Mapa de sitio

Un mapa de sitio enumera las páginas, videos y otros archivos de tu sitio web y describe las relaciones que hay entre ellos.

Texto

Visual

Pasos para crear un mapa de sitio

Definir el propósito del sitio: Identifica claramente el propósito y los objetivos de tu sitio web. ¿Es un sitio informativo, de comercio electrónico, blog, etc.? Listar las páginas principales: Enumera las páginas principales que necesitarás en tu sitio. Estas pueden incluir la página de inicio, páginas de productos, servicios, contacto, sobre nosotros, etc. Jerarquizar la información: Establece la jerarquía de información. Coloca las páginas más importantes o fundamentales en la parte superior y las páginas secundarias o de apoyo debajo. Identificar relaciones y enlaces: Define las relaciones entre las diferentes páginas. Indica cómo se conectan entre sí y si hay enlaces directos entre determinadas secciones. Agregar secciones y categorías: Si tu sitio tiene varias secciones o categorías, agrupa las páginas relacionadas bajo encabezados claros. Esto ayuda a organizar y simplificar la estructura.

Ejemplos simples:

Ejercicio

1. Crea 2 mapas de sitio de los sitios relacionados a tu proyecto de la materia. 2. Crea un tercer mapa de tu proyecto que has planeado hasta el momento, enumera las páginas y las relaciones que hay entre ellos. Utiliza una herramienta online donde te permita realizar el diagrama de forma fácil y rápida.

Next

Ve a plataforma a la lección: 2.1 Mapas de sitio

2.2 Arquitectura de la Información.

2.1 Diseño de contenidos

2.3 Mapa del sitio web o app.

2.5 Componentes de una interfaz.

2.4 Wireframes y Mockups

2.4 Wireframe y Mockup

El diseño conceptual de una web está formado por representaciones de las páginas y secciones que van a componer el sitio. El uso de prototipos nos ayuda a involucrar al cliente en la fase previa al desarrollo y así adecuar el proyecto a sus necesidades. Las diferentes fases del prototipado web son: boceto (sketch), esquema de página (wireframe), maqueta (mockup) y prototipo (prototype).

2.4 Wireframe y Mockup

WireFrame

Mockup

Es una representación de baja fidelidad (lo-fi) de un diseño. ¿Cuál es su objetivo? Comunicar la estructura de la solución de diseño que estamos pensando: ¿Dónde estarán los menús? ¿El logo? ¿Los Call To Action principales? ¿Qué jerarquía tendrán los distintos grupos de contenido?

La representación de una solución de diseño en alta fidelidad (hi-fi). ¿Cuál es su objetivo? Comunicar y representar, de manera estática, la estructura, el contenido, las funcionalidades básicas y las decisiones gráficas de una solución de diseño.

2.2 Arquitectura de la Información.

2.1 Diseño de contenidos

2.3 Mapa del sitio web o app.

2.5 Componentes de una interfaz.

2.4 Wireframes y Mockups

2.5 Componentes de una interfaz

Elementos de identifiació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.

2.5 Componentes de una interfaz

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 pie de página o footer.

2.5 Componentes de una interfaz

Elementos de navegación

El usuario siempre debe saber donde se encuentra, para ello el sitio puede incluir:

• 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.

2.5 Componentes de una interfaz

Elementos de contenido

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.

2.5 Componentes de una interfaz

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 boletín informativo o newsletter.

Ejercicio

Crea el diseño de interfaces de tu sitio utilizando la herramienta Figma. No olvides tomar la información analizada y recabada previamente como: 1. La planificacion del sitio. 2. Considera tu mapa de sitio. 3. Los elementos que debe tener una interfaz analizados previamente para el diseño de tus interfaces.

Ve a plataforma a la lección: Tarea 2.2 Reporte de prácticas Diseño de Interfaces

Next

Referencias

Metodología para la construcción de Interfaces Gráficas Centradas en el Usuario Sebastián Sastoque Universidad Militar Nueva Granada Bogotá, Colombia sebsasto@gmail.com http://www.guiawebmaster.com/diseno-web/navegabilidad.php https://www.publisuites.com/blog/arquitectura-de-la-informacion/

Info

Gracias por su atención!!!

Esto es un párrafo listo para contener creatividad, experiencias e historias geniales.

Ejemplos de sitios novedosos

Hay muchos ejemplos de diseño web novedosos que puedes encontrar en línea. Algunos sitios que agrupan a los profesionales del desarrollo web y sirven de escaparate de las últimas tendencias en el diseño de interfaz de usuario y desarrollo web son Behance ( https://www.behance.net/), Dribbble (https://dribbble.com/) y Awwwards (https://www.awwwards.com/).

Ejemplos de diseño web novedosos

• Librería de experiencias de realidad aumentada y virtual (https://www.onirix.com/es/libreria-de-experiencias/)

• Ejemplo de Scroll (https://pixelvivo.es/)
• Ejemplo de página solo con CSS (https://codepen.io/ivorjetski/pen/xMJoYO)
• An experiment in creating 3D environments using CSS and HTML and JavaScript (https://keithclark.co.uk/labs/css-fps/desktop/)
• Simulación de fluidos (https://paveldogreat.github.io/WebGL-Fluid-Simulation/)

Sitios de inspiración para el diseño web

• Webdesign-inspiration.com
• Dribbble.com
• Jimdo.com
• Siteinspire.com
• Thebestdesigns.com
• Awwwards.com
• Themeforest.net
• Behance.net
• Canva.com

Blogs para estar al día en las tendencias de diseño web

• Enfoquegaussiano.com
• Abduzeedo.com
• Brandemia.org
• Graffica.info
• Eniun.com/blog/

Sitios web de interes

Pinterest https://www.pinterest.es/eniun_es/curiosidades-y-herramientas-web/ https://www.pinterest.es/eniun_es/tipos-de-letra/ https://www.pinterest.es/eniun_es/guias-de-estilo/ https://www.pinterest.es/eniun_es/elementos-de-una-interfaz-web/ https://www.pinterest.es/eniun_es/marcas-y-colores/ https://www.pinterest.es/eniun_es/evolucion-de-los-logotipos/

Tendencias enfocadas al diseño, y normalmente enfocadas en una experiencia centrada en el usuario.

https://www.offpixel.co/

https://www.onirix.com/es/libreria-de-experiencias/

https://vert.diesel.com/#/en/2

Realidad aumentada y virtual con WebXR

Fuentes

Gráficos vectoriales

Scrolling design

Títulos e imágenes de gran tamaño

Degradados eléctricos y vibrantes

Neoformismo

https://dvein.com/

https://y-n10.com/