# data[].attributes.body
Paleta de colores utilizada

# data[].attributes.attachment_caption
Como se podemos observar, la diagramación utiliza una buena jerarquía visual colocando texto y una ilustración, creando un balance que provoca la atención del cliente. usando como equilibrio figuras extra de distinto color, para no desgastar la vista con el color predominante.

# data[].attributes.attachment_caption
La estructura de sus contenido consiste principalmente en colocar la ilustración vectorial de un tamaño considerablemente visible para apreciar los detalles, colocando una breve descripción del lado contrario al del vector; de igual forma en la parte baja observamos distintas imágenes como apoyo visual más colorido distinto a la paleta de colores del portafolio.

# data[].attributes.attachment_caption
Colocar un video como apoyo y resumen de lo visto en el portafolio, añade una dinámica distinta al portafolio tradicional.

# data[].attributes.body
Este concepto nace de la idea de que cada integrante representará un universo creativo con diversos estilos y formas de diseño. Tal como un multiverso cada universo es único pero coeexisten en el mismo espacio.

El enfoque visual se inspira en el cómic y el diseño pop, mostrando una diversidad de pensamiento, energía juvenil y una riqueza visual que surge del trabajo en equipo. Cada proyecto es una “realidad alterna” con su propia identidad, pero conectada por una misma vibra: la pasión por crear.

Se usarían colores intensos, formas dinámicas y referencias visuales tipo viñetas o paneles gráficos que transmitan movimiento, emoción y personalidad. Este multiverso no es caótico: es una explosión controlada de ideas, donde cada voz suma y brilla con luz propia.

# data[].attributes.body
@Violeta Hiriart

# data[].attributes.body
Se puede notar que es una maquetación sin retícula, se observa que hay solamente una columna que organiza dos imágenes del contenido. Pero, por otro lado, los módulos no mantienen un mismo orden ni estructura; aunque se respeta el margen establecido, ningún elemento del contenido sale fuera del área planteada. Escogí esta diagramación ya que a pesar de no poseer una retícula hay una fluidez a la hora de leer, asimismo, posee una buena jerarquía visual facilitando la lectura del contenido. También esta maquetación ha creado un espacio para cada elemento evitando sobrecargar la composición brindando una manera sencilla de visualizar todos los componentes de la página.

# data[].attributes.body
@Amarel García

# data[].attributes.body
En esta página podemos observar que se utilizó una maquetación de retícula de columnas, de esta manera se la logrado crear un orden con los elementos de la composición. Se ha respetado el margen manteniendo los elementos dentro de éste, los módulos poseen una estructura organizada apoyándose en la misma columna.

Elegí esta diagramación ya que me parece muy ordenada y simple, pero pese su sencillez logra facilitar la lectura del contenido, permitiendo apreciar tanto la información como los elementos gráficos.

# data[].attributes.body
En esta sección de presentación de información esta acompañada de una fotografia, la página cuenta con las 5 filas y 2 columnas, buscando asi un aspecto más organizado al momento de distribuir los datos o imagenes.

Las filas nos comparte los siguiente contenidos:

El titulo u datos de suma importancia como el nombre de la persona.

Datos más especificos y secundarios de quien o que se habla

Información sobre lo que se aborda siendo una descripción breve y concisa, respecto a la persona.

Por medio de una descripción grafica nos proporcionan una manera más atractiva y práctica para interpretar la información.

Finalizando con las referencias personales de lado izquierdo

Las columnas de lado izquierdo presenta textos y de lado derecho en la parte superior cuenta con la fotografia de la persona que esta

presentando el portafolio completando el resto de la columna con textos.

# data[].attributes.attachment_caption
Los créditos se puede incluir las redes sociales del diseñador/a, en las cuales los clientes pueden contactarle y ver un poco más de sus trabajos; este mismo va acompañado de un logo más simplificado del diseñador/a con un agradecimiento hacia el lector.

# data[].attributes.body
Mantiene un toque minimalista al presentar eb su fondo una fotografia, se divide en 2 filas

La fila de arriba esta despejada de lo que es el texto

en la fila inferior logramos apreciar el titulo y autor en un juego de tamaño en la fuente utilizada.

De esta manera mantiene la seriedad y conserva la tematica del portafolio.

# data[].attributes.body
La contraportada del portafolio no esta acompañada de texto alguno, solamente la fotografia que apreciamos en lo que es la portada.

# data[].attributes.body
En la sección de créditos mantiene la simplicidad en su estructura, conformado por 2 columnas las cuales en su parte superior estan vacias, en la zona inferior encontramos una pequeña cita de lado izquierdo con su respectivo autor y créditos con una tipografia palo seco a lado derecho.

# data[].attributes.body
Compuesta por 2 filas y 4 columnas que se dividen entre las cahas de texto asi como marcos de imagen.

En cada texto se acompaña de una fotografia que muestra sobre lo que se aboradara.

Tomando un estilo dinamico por la manera en la que se encuentra la composición.

# data[].attributes.body
La diamagración de este contenido encontramos de lado izquierdo 1 columna dividida en 2 filas, una contiene texto titular y la otra un marco de imagen para la representación gráfica.

A la derecha en la parte superior se encuentra la maquetación o croquis de como se verian los planos internos de las viviendas.

En la parte inferior se encuentran 2 columnas a la izquierda datos del entorno y a la derecha descripción del proyecto

# data[].attributes.attachment_caption
La portada, tiene una jerarquía visual simple pero llamativa donde observamos el texto alineado y dando mayor protagonismo al "portafolio" acompañada de una animación donde el lápiz para la tableta da brillo a la palabra "portafolio".

# data[].attributes.attachment_caption
El índice, se encuentra distribuido al estilo de selección de personaje en videojuegos, eso otorga dinamismo y una jerarquía visual atractiva.

# data[].attributes.attachment_caption
Observamos que el contenido posee sus textos en la parte inferior del portafolio, dando como resultado mayor espacio visual para el arte de la ilustración y poder apreciar sus detalles.

# data[].attributes.attachment_caption
Contraportada con collage de artes y trabajos extra.

# data[].attributes.attachment_caption
La jerarquía visual, que posee el portafolio otorga un buen descanso, ya que, contiene un agradecimiento al lector, un arte del diseñador/a en versión cartoon acompañado de las redes sociales y un numero de contacto, con el cual el cliente podría ponerse en contacto.

# data[].attributes.body
Este concepto nos habla de un lenguaje visual individual, pero también colectivo. A través del diseño cada uno de nosotros expresa su identidad, la cual se refleja en la diversidad de estilos, enfoques y decisiones gráficas de nuestros trabajos anteriores.

Elegimos el "kitsch" como estilo visual, por ser una estética que nace de la contradicción, mezclando elementos que comúnmente no convivirían entre sí: lo elegante con lo vulgar, lo clásico con la innovación, lo real con lo ilustrativo. Pero es en esta mezcla donde encontramos autenticidad.

El kitsch, entendido como una forma de collage visual, nos permite combinar texturas, formas, colores y estilos que representan a cada uno de nosotros. Construyendo a partir de la desorganización una nueva armonía, donde cada integrante pueda expresarse libremente.

Así como nuestras voces son diferentes, nuestra forma de diseñar también lo es. Este portafolio, es entonces, un espacio donde lo diversidad no solo convive, sino que se celebra, se complementa y se potencia.

# data[].attributes.headline
Jiménez Michelle - Publicación de Productos Multimedia

# data[].attributes.subject
Jiménez Michelle - Publicación de Productos Multimedia

# data[].attributes.headline
Flores Denisse - Tipografía y Contraportada

# data[].attributes.subject
Flores Denisse - Tipografía y Contraportada

# data[].attributes.headline
Parada Norma - Sistema de Lenguaje Visual y Créditos

# data[].attributes.subject
Parada Norma - Sistema de Lenguaje Visual y Créditos

# data[].attributes.headline
Huezo Ariel - Técnicas Fotográficas e Indice

# data[].attributes.subject
Huezo Ariel - Técnicas Fotográficas e Indice

# data[].attributes.headline
Castillo Héctor - Técnicas de Composición Visual y Portada

# data[].attributes.subject
Castillo Héctor - Técnicas de Composición Visual y Portada

# data[].attributes.attachment_caption
Esta diagramación es dinámica y bien equilibrada para una portada. Permite combinar elementos ilustrativos, con información relevante para el lector, ubicada en segmentos más pequeños sin perderse dentro de la composición.

# data[].attributes.body
El indice se presenta segmentado de una forma simple pero efectiva. Mantiene la composición equilibrada, y la atención del lector se dirige hacia el centro.

# data[].attributes.attachment_caption
En esta diagramación la jerarquía visual es clara, en una composición que reune varios elementos a la vez. Está segmentada para que cada imagen tenga su lugar, y la información sea legible. Considerando las propuestas de concepto, es necesaria una diagramación que permita explorar combinaciones mientras se mantiene el orden del documento.

# data[].attributes.attachment_caption
Los amplios espacios en blanco hace que el diseño se vea limpio y moderno. El título “port folio” ocupa la parte central con una tipografía geométrica y delgada, lo que lo hace destacar bastante. El “2025” y el índice de bajo equilibra el peso visual del título. Abajo están los datos de contacto organizados de forma discreta pero clara. Tiene una buena jerarquía, mucho aire y se siente profesional pero con personalidad. 

# data[].attributes.attachment_caption
La diagramación está bien segmentada. Hay un elemento ilustrativo principal que recibe el protagonismo necesario para captar la atención sin opacar el resto de elementos. Y buena jerarquía visual en el acomodo de la información.

# data[].attributes.attachment_caption
Buena diagramación. El contenido se centra sobretodo en la parte baja de la composición, y mantiene orden y legibilidad. No está centrado, eso crea un espacio negativo que puede aprovecharse para explorar la expresión de ambos conceptos.

# data[].attributes.attachment_caption
Diagramación equilibrada, con buena jerarquía visual. El contenido puede segmentarse en elementos principales y secundarios con facilidad, mientras mantiene orden y coherencia.

# data[].attributes.attachment_caption
La retícula modular divide la página en el título grande en la parte superior y el listado en cuatro columnas iguales en la parte inferior. El título se coloca de forma asimétrica para darle dinamismo, mientras que la parte inferior mantiene una estructura ordenada y clara para cada sección. La ilustración rompe la rigidez y añade personalidad sin afectar la organización general.

# data[].attributes.attachment_caption
La página está dividida en tres bloques. Una franja superior con imágenes de trabajos, el mensaje central con la tipografía grande y llamativa, y la sección de contacto abajo organizada en dos columnas. El uso de jerarquía tipográfica hace que primero se lea el mensaje principal y luego los datos.

# data[].attributes.body
La contraportada muestra cinco vistas del proyecto en forma de mockups. La diagramación es limpia y simétrica, con cada pantalla enfocada en una sección distinta. Se usa una retícula consistente y buena jerarquía visual para destacar el contenido sin sobrecargar.

# data[].attributes.attachment_caption
Boceteria, Tipografías y Paleta de color

# data[].attributes.body
Se mejoro la diagramación de cada pagina; se realizo el fondo Kitsch con la técnica de módulos vista en la materia Sistema de Lenguaje Visual, ya que, se adapta para una mejor comprensión y visualización a detalle de cada vector diseñado.

Cada pagina lleva la presentación del alumno para conocer sobre el o ella, y comprendiendo así los estilos gráficos de cada pieza presentada.

Interactividad:

Botón "ir a pagina" en índice, cada imagen lleva un botón de acción para la redirección a la pagina indicada

Botón "ir a siguiente o anterior pagina", este botón fue colocado en los íconos de flechas realizados previamente en Adobe Illustrator.

Hipervínculos:

Interacción colocada en piezas gráficas que han sido expuestas en plataformas externas, como lo son: Behance

# data[].attributes.attachment_caption
Retículas y líneas guías/panel de páginas

# data[].attributes.body
En la captura se observa la página del diseñador mostrando las líneas guías y retículas de columna para la diagramación, también se observa el apartado de páginas; y los iconos que se utilizarán para regresar/pasar al siguiente apartado del portafolio.

# data[].attributes.body
En la captura se ve la página maestra diagramada con 4 columnas para mantener un mejor orden para el diseño final.

# data[].attributes.body
En esta captura se observa el apartado para la materia Diseño de Contenido Multimedia, se ve el panel de vínculos de cada imagen utilizada para mostrar el trabajo realizado en dicha materia.

Y se logra observar la retícula de 4 columnas para seguir con el orden adecuado para cada elemento del apartado. Además, en la imagen de publicidad al dar clic se puede direccionar al sitio web Behance donde se expone el trabajo realizado.

# data[].attributes.body
Lineas guía, páginas y reticula

En este apartado de lado izquierdo el nombre de la diseñadora junto una fotografia con una pequeña descripción de la diseñadora.

Notando las lineas del documento acompañada de la reticula para organizar de manera adecuada la foto, la información y todo lo necesario.

# data[].attributes.body
Página de contenido final, estilo de párrafo, vínculos, manteniendo una jerarquia

Se muestra el contenido del proyecto el cual consiste en rediseño de portada, se adjuntaron el proceso de boceteria y contenido relevante para la explicación

Tambien se añadieron botones para avanzar o retroceder las paginas del portafolio.

# data[].attributes.body
Página de la materia Tipografía, esta posee botones de ir a siguiente y anterior página, el titulo posee un botón para regresar al marcador de índice.

En la captura se puede observar la pagina maestra, la cual posee 7 columnas y sus respectivas líneas guía para la distribución correcta para la pagina final.

# data[].attributes.body
La pagina de índice, presenta botones con dirección a las paginas de las materias indicadas y estas viñetas poseen una animación al cargar dicha pagina.

En la captura se puede observar la pagina maestra, la cual posee 7 columnas y sus respectivas líneas guía para la distribución correcta para la pagina final.

# data[].attributes.body
Pagina del diseñador. esta se encuentra antes de la pagina de la materia, ya que, mostrara el perfil de el o la diseñador que realizo dicho trabajo.

Posee un botón para pasar a la pagina siguiente y en el nombre se añade un hipervínculo redirigiendo al lector al perfil en redes sociales del mismo.

En la captura se puede observar la pagina maestra, la cual posee 4 columnas y sus respectivas líneas guía para la distribución correcta para la pagina final.

# data[].attributes.body
Página de la materia SLV, esta posee botones de ir a siguiente y anterior página, el titulo posee un botón para regresar al marcador de índice.

En la captura se puede observar la pagina maestra, la cual posee 5 columnas y sus respectivas líneas guía para la distribución correcta para la pagina final.

# data[].attributes.body
Retícula, líneas guía, panel de páginas y vínculos

# data[].attributes.body
Pagina de contenido final, líneas guía, retícula, panel de paginas, capas.

# data[].attributes.body
La retícula utilizada es la misma en todos los perfiles: conformada por 4 columnas, con un medianil de división entre ellas.

La fotografía del diseñador destaca como elemento principal de la composición, pero no opaca a la descripción del mismo.

# data[].attributes.attachment_caption
Página de contenido: Técnicas de Composición Visual 

# data[].attributes.body
Para el manual de marca se utilizo una retícula de 5 columnas:

El punto focal de la composición se encuentra a la izquierda, en las primeras dos columnas, con el logotipo y sus variaciones, acompañadas de una descripción breve de la asignación.

En el resto de columnas, podemos observar el proceso de diseño: boceteria, paleta de color, tipografías; y el resultado de un souvenir creado para la marca.

# data[].attributes.body
La portada utiliza una retícula de 6 columnas. La Jerarquía del texto destaca la palabra "Portafolio" en el centro de la composición, seguido de información secundaria en las columnas de los extremos, como el año de publicación.

# data[].attributes.attachment_caption
Edgard Huezo - Sistema de lenguaje visual

# data[].attributes.attachment_caption
Héctor Castillo - Técnicas de composición visual

# data[].attributes.attachment_caption
Michelle Jiménez - Publicación de productos multimedia

# data[].attributes.attachment_caption
Paola Flores - Diseño de contenidos multimedia