No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Arquitectura de la información

11/20
Recursos

Aportes 73

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

Arquitectura de la Información:

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

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

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.

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

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

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

Pinterest

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

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)
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/>
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 ```

Instagram![](

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.

![]()comparto mi actividad