You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
11 Hrs
33 Min
24 Seg

Arquitectura de la información

11/20
Resources

What is information architecture?

Information architecture is a key concept in the design of digital products. It refers to the content structure that is generated for such products. This structure helps to organize information effectively, resulting in elements such as site maps, hierarchies, categorizations, navigation and metadata. Delving into the world of information architecture will allow you to create more intuitive and effective platforms, thus facilitating user interaction with the product.

How does information architecture navigation work?

The first aspect to consider within information architecture is navigation. Navigation is composed of the user interface elements that facilitate user access to your digital product's information. This includes:

  • Menus: Designed to orient the user within the site.
  • Footer links: Crucial elements that often contain important links such as terms and conditions, privacy policies or direct links to other sections of the site.

Well-structured navigation is essential for a smooth and positive user experience.

How is prototyping used in information architecture?

Prototyping is an essential tool for evaluating the effectiveness of your information architecture before implementing it. It allows designers to define and communicate their ideas through visual representations called wireframes. They can be developed at different levels of fidelity, from basic sketches to high-fidelity wireframes with lots of detail. Here are some considerations about prototyping:

  • Sketches: Initial sketches on paper that help visualize early ideas.
  • High-fidelity wireframes: More structured designs that anticipate how the information architecture will be integrated into the final visual design.

Using prototypes throughout the design process ensures that ideas are clearly understood and validated before implementation.

What are the mobile navigation patterns in iOS and Android?

Mobile navigation patterns are critical when designing user interfaces for applications on mobile devices. Two of the major operating systems, iOS and Android, have specific guidelines for designers to follow.

  1. iOS: Use Apple's Human Interface Guidelines, which are recommendations aimed at improving the user experience. These guidelines ensure that interfaces on iOS devices are more intuitive, consistent and easy to learn.

  2. Android: It implements Material Design, a system created by Google that covers not only the visualization on Android, but also its implementation on the web and other platforms. This system is fundamental when designing for Android, as it promotes consistency and visual appeal in the user interface.

Knowing and applying these guidelines ensures that your app will be intuitive and consistent with user expectations on each platform.

How can you apply this information to your projects?

Here are some tips for applying information architecture principles to your projects:

  • Invite your design teams to create navigation models that prioritize simplicity and intuitiveness, benefiting from the guidelines offered by iOS and Android.
  • Prioritize the use of prototypes at various stages of development to communicate and adjust design ideas with clarity.
  • Analyze the information architecture of your favorite or competing apps to identify opportunities for improvement or innovation.

By mastering these elements, you can design user experiences that not only meet current expectations, but also pave the way for creative new forms of digital interaction. Keep learning and experimenting!

Contributions 81

Questions 3

Sort by:

Want to see more contributions, questions and answers from the community?

ARQUITECTURA DE LA INFORMACIÓN

La Arquitectura de la Información trata sobre el diseño de: sitios web, interfaces de dispositivos móviles o gadgets. Su principal objetivo es facilitar al máximo los procesos de comprensión y asimilación de la información, así como las tareas que ejecutan los usuarios en un espacio de información definido.

Formas en la que se puede desarrollar la arquitectura de la información:

  • Navegación: Esta formada por los elementos de la interfaz del usuario, que ayuda a los usuarios a navegar a través de la arquitectura de información de tu producto. Ejemplo: Los diferentes menús que puede tener, como organizas la información, todos los enlaces en el pie de la página.

  • Prototipado: En esta fase es donde vamos a testear si todo lo que estamos haciendo en cuanto a la arquitectura de la información previa en cuanto a estructura nos va a funcionar. Esta herramienta nos ayuda a definir y a comunicar nuestras ideas.

  • Patrones de Navegación para móvil. (IOs, Material Design ): Es un punto importante, uno de los principales factores que define el diseño de interfaz para aplicaciones móviles es el sistema operativo.

Les comparto mi ejercicio sobre arquitectura de la información de la app de banca Bancolombia

Pinterest es una app que me encanta para tomar informacion rapida que pueda usar como referencia

Arquitectura de la Información:

  • Navegación
  • Prototipado
  • Patrones de Navegación para móvil. (IOs, Material Design )

Comparto el mapa del sitio de un proyecto que realicé para un cliente. Un blog de fútbol peruano La Caprichosa Perú

Los subtítulos están adelantados con respecto al audio. Revisar Por Favor.

Aquí mi tarea: Mapa de sitio de una app llamada Yape.

Arquitectura de informacion: ayudar al usuario a encontrar lo que esta buscando de manera clara y con el menor esfuero posble para mejorar la eficiencia dependiendo del contexto en el que se desarrolla la misma y alineado al objetivo principal

Una buena Arquitectura de la Información hará que nuestra app o website sea mucho más intuitivo, consistente, agradable y amigable con el usuario, además de sencillo de utilizar, lo cual incidirá directamente en el número de visitas, compras, afiliaciones y retención de clientes.

La verdad es que Nequi me parece una plataforma muy interesante, mas allá de sus fallos esta muy bien diseñada y el equipo de experiencia del UI lo hace excelente

![](https://static.platzi.com/media/user_upload/Iy97YHz-143a2717-a592-4b19-ac6e-272210352c2f.jpg)
Hola a todos! aquí dejo los links de las guias de diseño para IOs y Android Human Interface Guidelines: <https://developer.apple.com/design/human-interface-guidelines> Material Design: <https://m3.material.io/>
**Clase 11 - Arquitectura de la información** * **¿Qué es la arquitectura de la información?** * Es la estructura de contenido que generamos para nuestro producto digital. * **¿Qué elementos obtenemos de la arquitectura de la información?** * Mapas del sitio. * Jerarquías. * Categorizaciones * Navegación. * Metadatos. * **¿En qué elementos está separada la arquitectura de la información?** * Navegación. * Prototipado. * Patrones de navegación para móvil. * **¿Por qué está formada la navegación?** * Por los elementos de la interfaz del usuario. * **¿En qué ayudan los elementos de la interfaz a los usuarios?** * A navegar por toda la arquitectura  de información de un producto digital.  * **¿Qué debemos hacer y por qué en el prototipado?** * Debemos empezar a testear y analizar si lo que estamos haciendo con la arquitectura de la información funciona de manera correcta. * **¿Para qué nos sirve el prototipado?** * Nos ayuda a definir y comunicar nuestras ideas. * **¿Podemos tener diferentes niveles de fidelidad en los sketches del diseño?** * Sí. * **¿Qué es lo más importante que debemos de tener en cuenta en el diseño digital de interfaces móviles?** * El sistema operativo. * **¿Qué sistemas operativos encontramos en los dispositivos móviles?** * iOS (Apple). * Android (Google). * **¿Cómo se llama la guía de diseño que tiene iOS?** * Human Interface Guidelines (Pautas de Interfaz Humana). * **¿Qué son las Human Interface Guidelines?** * Son una serie de documentos que ofrece Apple a los diseñadores, los cuales cuentan con una serie de recomendaciones para mejorar la experiencia de usuario en su sistema operativo. * **¿Qué busca Apple con las Human Interfaces Guidelines?** * Crear interfaces de usuario más intuitivas, aprendibles y constantes. * **¿Cómo se llama la guía de diseño que usa Android?** * Material Design. * **¿En qué se basa Material Design?** * En una normativa de diseño del sistema Android. * **¿En dónde podemos ver implementado Material Design?** * En la web o cualquier plataforma que estemos usando desde un dispositivo móvil. * **¿Qué debemos hacer si queremos usar Material Design en nuestras interfaces de usuario?** * Investigar sobre el mundo del diseño de Google.

Pinterest

Platzi tiene esta maravillosa clase y un curso donde explican la arquitectura de la información🌱

ARQUITECTURA DE LA INFORMACIÓN La arquitectura de la información: Es el fundamento de la estructura de contenido diseñada para generar información del producto digital donde vamos a encontrar como resultado, Jerarquías mapas del sitio categorizaciones navegación, meta datos etc Dentro de la arquitectura encontramos tres partes fundamentales: * Navegación: Elementos de la interfaz del producto, que ayudan a navegar al usuario atreves de la arquitectura del producto. * Prototipado: Testeo que permite verificar si la arquitectura propuesta va a funcionar * Patrones de navegación para móvil: Análisis minucioso de los patrones que interfieren en los sistemas operativos Ios – Android![](https://drive.google.com/file/d/1ZhdbdO-WuGzdJRdu8-pl6JiPDvm0NYHj/view?usp=sharing)
![](https://drive.google.com/file/d/1ZhdbdO-WuGzdJRdu8-pl6JiPDvm0NYHj/view?usp=sharing)
![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202025-03-05%20a%20las%2009.36.07_1eb1ac55-98c05e89-dcb5-4872-80bd-0f1ba3b32156.jpg)
Arquitectura de la información \*La arquitectura de la información es la creación de una estructura para un sitio web 3 partes: 1- NAVEGACION FORMADA por los elementos de la interfaz del usuario Elementos ayuda al usuario a navegar en la pagina 2-PROTOTIPADO DEFINE LA IDEA WIREFRAME 3-PATRONES DE NAVEGACION PARA MOVIL SISTEMA OPERATIVO FACTORES: IOS -PAUTAS DE INTERFAZ HUMANA- INTUITIVAS ANDROID- MATERIAL DESIGN NORMATIVA DE DISEÑO ENFOCADO EN ANDROID
![](https://static.platzi.com/media/user_upload/image-967d1436-42ff-4385-9b26-95ac88ecea24.jpg)Decidí hacer el reto sobre la Home Page Mobile de Notion ya que es la herramienta que más uso para los cursos de Platzi. Utilicé Figma para la maquetación, ya que soy bastante malo con el lápiz y papel 😅
Aqui va un ejemplo sencillo (a grandes rasgos). Es la app de un gimnasio. ![](https://static.platzi.com/media/user_upload/Arq%20infor-9142d5f6-06d2-4820-82da-a2894e55db51.jpg)
Mi pequeña arquitectura a una de mis paginas favorites, siento Que YouTube tiene una arquitectura mug grande 😂 pero pies Que esta es la idea tratar siempre de organizar todo para el usuario, acepto feedbacks.
Añado la asignación designada teniendo como objetivo mostrar la arquitectura de la información en forma de prototipado que nos ayuda a definir y a comunicar las ideas de manera eficiente. ![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-11-08%20a%20las%2018.49.20_13d84abf-f940fcfa-67ba-4fd6-a644-ac78ef92ffd1.jpg)
### **Puntos importantes de la clase:** 1. **Definición de Arquitectura de la Información**: Estructura del contenido para productos digitales, incluyendo mapas del sitio, jerarquía, categorizaciones, navegación y metadatos. 2. **Componentes de la Navegación**: * Elementos de la interfaz que facilitan la navegación del usuario. * Importancia de la organización de menús y enlaces. 3. **Prototipado**: * Fase de prueba de la arquitectura de información. * Uso de wireframes de diferentes fidelidades para definir y comunicar ideas. 4. **Patrones de Navegación para Móviles**: * **iOS**: Human Interface Guidelines para crear interfaces intuitivas y homogéneas. * **Android**: Material Design, directrices que establecen normas visuales y funcionales para aplicaciones en Android.
La arquitectura de información que elaboré para Apple. He organizado las opciones en categorías y subcategorías. Como categorías principales, utilizan los nombres de los productos que ofrecen, y dentro de cada categoría, hay subcategorías que permiten ver todos los modelos de un producto o explorarlos de manera individual. ![](https://static.platzi.com/media/user_upload/image-25d955c7-db76-4ce3-bfb6-b7170b203121.jpg)
Hola, ¿cómo están? Quiero compartir con ustedes la arquitectura de información que elaboré para Apple. He organizado las opciones en categorías y subcategorías. Como categorías principales, utilizan los nombres de los productos que ofrecen, y dentro de cada categoría, hay subcategorías que permiten ver todos los modelos de un producto o explorarlos de manera individual. Esta estructura se repite en todas las categorías. Me gustaría conocer su opinión sobre este análisis y la organización que propuse. ¡Gracias! ![](https://static.platzi.com/media/user_upload/RtPoVG2%20-%20Imgur-9a266528-ddf1-4994-b7fc-c5818d7d3d36.jpg)
![](https://static.platzi.com/media/user_upload/image-6d386d80-ddec-4ebf-a51c-40413b2ea07b.jpg)
![]()![](IMG_5313.JPG)App de crecimiento personal (Stoic)
Wireframe de Pinterest![](file:///D:/Descargas/01bf1ddb-de4c-46d6-8657-12f0805cd010.jfif)
![](blob:https://web.whatsapp.com/01bf1ddb-de4c-46d6-8657-12f0805cd010)Wireframe de Pinterest
Comparto mi actividad: ![](https://static.platzi.com/media/user_upload/image-667f1890-64bf-4de8-b9a1-6eceb5c5eaf5.jpg)
```js ``` ```js ``` ```txt ```
![](<C:\Users\karen\Downloads\WhatsApp Image 2024-06-20 at 4.16.47 PM>)
No me di cuenta de lo complejo que es instagram hasta que la analicé ![](https://static.platzi.com/media/user_upload/f9b9b86e-dfac-46bb-9383-a35d28b73e98-bb27c681-5300-412d-982a-6e6e566a4b67.jpg)
![](https://static.platzi.com/media/user_upload/image-721af735-9890-48db-86bc-b25de13aa7d4.jpg)
“the presentation of information can be more important than the information itself.” Gary Woolf
Para material design 3, Google nos ha dejado un plugin o UI Kit para Figma, por si quieren explorar un poco: <https://www.figma.com/community/file/1035203688168086460>
Material Design se ha actualizado mucho en comparación al ejemplo mostrado, hoy en día estamos en la versión 3, les dejo el link de las nuevas guías de diseño para Android, que el SO con mayor mercado en Latam. <https://m3.material.io/>
![](https://static.platzi.com/media/user_upload/image-11d9e976-2810-4eef-a985-a092092d5909.jpg)
Mis notas: ![](https://static.platzi.com/media/user_upload/Imagen9-0a4501a3-e567-43d0-9895-d160cc1cbb85.jpg)

** Reto **
App de Spotify en desktop.

Arquitectura de la información Es la forma en la que creamos una estructura para un site. Consiste en 3 partes: Navegación Prototipado Navegación para móvil. Navegación: Ayuda a navegar al usuario por los diferentes puntos del producto digital. Prototipado: Ayuda a definir y comunicar ideas. Patrones de móvil: Los principales factores son los sistema operativos: iOS: Utiliza Human Interface Gatelines, son documentos que se ofrecen mediante recomendaciones para mejorar la experiencia de usuario. Android: Material Design, establece una normativa enfocada en el sistema operativo de android.
Les comparto el ejercicio de mi aplicación favorita😊![](https://static.platzi.com/media/user_upload/NRC%20Sitemap-38b675e3-8b0b-4293-b401-f50b8aefb1f9.jpg)
Spotify ![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-03-29%20a%20las%2011.35.00_ecf0aabd-101f98d6-009b-46d5-8f67-b57caf1efaa9.jpg)
Una app bancaria
![]()![]()![]()![]()![](IMG_6981.HEIC)Spotify ejemplo \--------------- ![](IMG_6981.HEIC)
Este es mi aporte de la interfaz de la pantalla de inicio de un juego que me gusta mucho, si me pongo a desglosar toooodas me acabo un cuaderno hehe.![](https://static.platzi.com/media/user_upload/image-1c9c6ce2-b00e-4c50-808d-5c08ed2d000c.jpg)![](blob:https://web.whatsapp.com/13cd9900-a62a-459e-ba54-0dbde28161ab)
Teams, una aplicación que se ha popularizado con el trabajo remoto o home office: ![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-03-09%20a%20las%2020.26.38_6e1f0543-9d13f9da-0f16-4e1a-a3bd-eb58a6ba33cf.jpg)
![](https://static.platzi.com/media/user_upload/image-0917d580-20c6-470f-87ec-2986bf51beae.jpg)
![](https://static.platzi.com/media/user_upload/Imagen%20de%20WhatsApp%202024-02-29%20a%20las%2017.52.05_f4c60858-bac814d9-dcb7-4f0d-9fd3-c68993e2128f.jpg)
![](https://static.platzi.com/media/user_upload/image-e5268b48-4582-4e5f-a172-920ee941d957.jpg)AIRBNB
Aqui unos recursos si quieren ampliar más en Human Interface Guidelines (iOS) <https://developer.apple.com/design/human-interface-guidelines> y Material Design <https://m3.material.io/>
![](file:///C:/Users/EliBere/Desktop/ARQUITECTURA.png) ```js ```
Usé de referencia la arquitectura de la información de IG. ![](https://static.platzi.com/media/user_upload/ai-890fe3bf-1976-4d0c-a6f9-9904f6b9b545.jpg)
![](https://static.platzi.com/media/user_upload/image-42252b68-1a9f-4769-91ed-93b14428e75c.jpg)app para leer manhuas, webtoon,
Acá mi tarea, mi app es Paris. Si bien está bastante sobre cargada de información, cumple el objetivo de que varias opciones te lleven la mismo sitio y a su finalidad que es vender (principio de redundancia) ![]()![]()![]()![]()![]()![]()![]()![]()![]()![]()![](file:///C:/Users/Tami%20designer/Downloads/WhatsApp%20Image%202024-01-12%20at%2010.55.18%20AM.jpeg)
Por aquí comparto mi app favorita del momento: Pinterest ![](https://static.platzi.com/media/user_upload/1000219475-bd99e324-ac08-4ebe-9f10-68a17a6d1599.jpg)![](https://static.platzi.com/media/user_upload/1000219473-16decaa0-58c4-4ed0-a772-f4621bf4ef0d.jpg)
* La arquitectura de la información es la creación de una estructura para un sitio web. * Es la estructura de contenido que voy a crear para mi producto digital y como resultado vamos a tener mapas de el sitio, jerarquías, categorizaciones, navegación y mega datos. * Dentro de esta arquitectura podemos separar 3 partes: * **Navegación:** Formada por los elementos dla interfaz de el usuario, que ayuda a estos a navegar a través de la arquitectura de información de mi producto, los diferentes medios que puede tener, cómo se organiza la información, todos los elementos de la página, esto va a ayudar a los usuarios a navegar a través de mi producto digital.  * Prototipado: Testear si lo que hemos formado va a funcionar, herramienta que nos ayuda a definir nuestras ideas, usando wireframes, sketches, o la mejor herramienta que se nos facilite la producción. * Patrones de navegación para móvil: El sistema operativo iOS o Android, utilizarlos intuitivamente sin perder la identidad de mi marca. * iOS: human the face guidelines, son las partes de interfaz humana de apple, son documentos que ofrece a los diseñadores  y un conjunto de recomendaciones para ser utilizadas,  * Android: Utiliza material design, este guideline interviene la web, se tiene que investigar.

App para leer Webtoons

App de un Banco ![]()![](https://static.platzi.com/media/user_upload/image-65e217f7-9c80-4079-814f-fccd105ac6dc.jpg)
Arquitectura de la información para la pantalla de inicio de la app de chess.com: <https://www.figma.com/file/N1OjRLCLMinqIRYHvoQaAU/Study-%26-Practice?type=design&node-id=0-1&mode=design&t=o0p1OgFtZp628peJ-0>
Lo que era anteriormente twitter :(![](https://static.platzi.com/media/user_upload/image-b1f588ce-8673-4f18-aaa2-c1557eaf93d3.jpg)

Mi aplicación favorita es YouTube, pero no puedo pagar la imagen

Este es mi resumen de la clase y adicional una arquitectura de la informacion correspondiente a la app de Disney o almenos de la forma en la que la recuerdo.

App de platzi: ![]()![](https://i.imgur.com/QpqjZGR.jpg)

App Notion

Los wireframes tiene la finalidad de ayudarnos a validar, de manera rápida, si la arquitectura de información es cumpliendo el objetivo.

Gracias

https://photos.app.goo.gl/Hd9H8YTX6ZtY7tuP9 :3 Interpretación visual de app favorita 😬

ARQUITECTURA DE LA INFORMACIÓN (AI)
Es la organización y estructuración de la información con el objetivo de facilitar la navegación, recuperación y comprensión de la información por parte de los usuarios.
.
Al momento de diseñar la AI de nuestro producto debemos tener en cuenta los patrones de diseño propios de cada sistema operativo para el cual estemos diseñando:
Human Interface Guidelines
Material Design
Seguir las pautas de estos lenguajes de diseño reducen la complejidad de usabilidad de nuestro producto.

Pinterest

Arquitectura de la infromación

La arquitectura de la información es la estructura de contenido que vas a generar para un producto digital y como resultado tendremos:

  • Mapas
  • Jerarquias
  • Categorizaciones
  • Navegación
  • Metadatos

La arquitectura de la infromación puede ser dividida en 3 partes:

  • Navegación: Esta formada por los elementos de la interfaz del usuario.
  • Prototipado: Testeo de que si todo lo que estamos haciendo va a funcionar, la definición o detallado de un prototipado se define a través de la fidelidad, baja fidelidad refiriendose a simples sketches o ideas y alta fidelidad podiendo ser con bastante detalles
  • Patrones de móvil:
    • iOS: Human guidelines
    • Android: Material design

Arquitectura de la información de Tiktok, una app que ha incrementado su usabilidad en los últimos tiempos.

Usé la app Naranja X como referencia para el ejercicio: 1. **Inicio**: Resumen general (saldo, movimientos recientes, accesos rápidos). 2. **Pagos**: Pago de servicios, transferencias, recargas de saldo. 3. **Tarjetas**: Gestión de tarjetas (saldo, límites, bloqueo/desbloqueo). 4. **Inversiones**: Opciones para ahorrar o invertir. 5. **Perfil**: Configuración de cuenta, seguridad, notificaciones.
![]()comparto mi actividad