Archivo IxD Biblioteca estandarizada de módulos de interacción para el trabajo con wireframes. Equipo de Arquitectura de Información

Transcripción

1 Equipo de Arquitectura de Información Canvas Grillas Títulos Inputs Wysiwyg Comentarios Pasos Login Menús Breadcrumbs Botones Sidebars Redes sociales Pestañas Acordeón Paginadores Videos Imágenes Galerías Destacados Listas Tablas Lightbox Personas Archivo IxD Biblioteca estandarizada de módulos de interacción para el trabajo con wireframes El siguiente documento presenta a modo de archivo las unidades de trabajo estandarizadas o módulos de interacción web con los que trabajamos en IDA. El Archivo IxD corresponde a un repositorio siempre creciente de elementos de interfaz que pueden ser aplicados en diferentes situaciones y proyectos, por las áreas de Arquitectura de Información y Diseño de Interacción. Si bien en cada caso se podrán ajustar tamaños y otros atributos, el objetivo es promover la reutilización de estos patrones para agilizar los procesos de trabajo, dejando plena libertad al diseño de interfaz de proponer las caracterísitcas diferenciadoras en cada proyecto, en base a las normas gráficas y el tipo de propuesta requerida.

2 Archivo IxD Intro Escritorio: 1280 px Total with 1200 Offset columnas 82 px Gutter 20 px Tablet horizontal: 1024 px Total with columnas 62 px Gutter 20 px

3 Archivo IxD Intro Tablet ver*cal: 768 px Total with columnas 46 px Gutter 16 px Móvil: 320 px Total with columnas 20 px Gutter 20 px

4 Archivo IxD Intro Encabezados Corresponde a recomendaciones de tamaños tipográficos y sus variaciones al transformarse el tamaño de la pantalla. Cada proyecto puede variar estas características pero el comportamiento y las jerarquías de los títulos y elementos de texto deberán ser consecuentes transversalmente en el sitio o software. Escritorio 1280 y Tablet horizontal 1024 Tablet vertical 768 Móvil 320 H1 Lorem ipsum Helvética Neue 50 Medium Character 0, Line 61 #4A4A4A H2 Lorem ipsum H2 Helvética Neue 40 Regular Character 0, Line 48 #4A4A4A H3 Lorem ipsum Helvética Neue 30 Regular Character 0, Line 35 #4A4A4A H4 Lorem ipsum Helvética Neue 22 Regular Character 0, Line 27 #4A4A4A Extracto Lorem ipsum Helvética Neue 26 Light Character 0, Line 35 #4A4A4A P Párrafo regular Lorem ipsum Helvética Neue 16 Light Character 0, Line 25, Paragraph 20 #4A4A4A H1 Lorem ipsum Helvética Neue 40 Medium Character 0, Line 49 #4A4A4A H2 Lorem ipsum H2 Helvética Neue 35 Regular Character 0, Line 40 #4A4A4A H3 Lorem ipsum H3 Helvética Neue 30 Regular Character 0, Line 35 # H4 Lorem ipsum Helvética Neue 22 Regular Character 0, Line 27 #4A4A4A Extracto Lorem ipsum Helvética Neue 26 Light Character 0, Line 35 4A4A4A P Párrafo regular Lorem ipsum Helvética Neue 16 Light Character 0, Line 25, Paragraph 15 #4A4A4A H1 Lorem ipsum H1 Helvética Neue 24 Medium Character 0, Line 35 #4A4A4A o #FFFFFF (de acuerdo al fondo) H2 Lorem ipsum Helvética Neue 22 Medium Character 0, Line 28 #4A4A4A H3 Lorem ipsum Helvética Neue 20 Bold Character 0, Line 26 #4A4A4A H4 Lorem ipsum Helvética Neue 18 Bold Character 0, Line 24 #4A4A4A Extracto Lorem ipsum Helvética Neue 18 Light Character 0, Line 24 4A4A4A P Párrafo regular Lorem ipsum Helvética Neue 15 Light Character 0, Line 25, Paragraph 13 #4A4A4A

5 Formulario Inputs Wysiwyg Comentarios Pasos Login Etc

6 Archivo IxD Formulario Tipos de campos Esta sección presenta tipos de inputs mediante los cuales el usuario puede ingresar información al sistema. En general estos se encuentran dentro de formularios complejos, con varios campos de diferente índole. Campos de texto Escritorio 1280 px Móvil 320 px Nombre del input * Ingrese... Nombre del input * Ingrese... Ejemplo mitad de ancho * Ingrese una ciudad Text area * Escriba su comentario Ejemplo mitad de ancho * Ingrese su teléfono Ejemplo mitad de ancho * Ingrese una ciudad Ejemplo mitad de ancho * Ingrese su teléfono Text area * Máx. 500 caracteres. Escriba su comentario Máx. 500 caracteres. Seleccione lorem ipsum Dropdown Lorem ipsum * Seleccione lorem ipsum Lorem ipsum Filtrar + Agregar lorem ipsum - Eliminar lorem ipsum Lorem ipsum Dolor sit Mostrar Lorem ipsum Filtrar Amet consectetur Lorem ipsum Dolor sit Amet consecte Adipiscing Buscar Adipiscing Buscar Celular * -

7 Archivo IxD Formulario Radio button y checkbox consectetur adipiscing Activar recordatorio Aliquam id libero Desactivar recordatorio consectetur adipiscing Aliquam id libero consectetur adipiscing Aliquam id libero consectetur adipiscing Aliquam id libero Caja de texto editable B I ABC Campos especiales Valoración Adjunte documento Adjunte documento C:Loremipsum/dolorsit/ametconsectetur/adipiscin... Me gusta Seleccionar archivo Eliminar archivo seleccionado Formatos Doc, Docx, Xls, Xlsx, Ppt, Pptx, Pdf, Jpg, Gif Tamaño máximo 5Mb. GW W v rr Código de Verificación * Ingrese el código de verificación

8 Archivo IxD Formulario Comentaros Las cajas de comentarios permiten a los usuarios interactuar con los sistemas, dejando una ventana abierta para ingresar información y expresar sus opiniones. Se suelen usar en páginas dinámicas como noticas, eventos y posts (artículos) de blogs. Deje su comentario Nombre * Ingrese su nombre * (no será publicado) Ingrese su Comentario * Comentar Comentarios Nombre Apellido , consectetur adipiscing elit. Donec tempor mi non efficitur euismod. Cras in consectetur mauris. Duis mauris felis, molestie semper condimentum ut, congue eget felis. Nunc ac dui tortor. Integer eleifend massa at pellentesque porta. Integer condimentum nec tellus sit amet scelerisque. Responder Luis Rodríguez Duis mauris felis, molestie semper condimentum ut, congue eget felis. Nunc ac dui tortor. Integer eleifend massa at pellentesque porta. Integer condimentum nec tellus sit amet scelerisque. Responder Jorge Silva Duis mauris felis, molestie semper condimentum ut, congue eget felis. Nunc ac dui tortor. Integer eleifend massa at pellentesque porta. Integer condimentum nec tellus sit amet scelerisque. Responder

9 Archivo IxD Formulario Pasos o explicaciones Corresponden a divisiones en los procesos o formularios complejos, que ayudan a separar en etapas el desarrollo completo de una actividad. En ocasiones sólo basta con una indicación visual de cuántos pasos hay y en cuál estoy, mientas que a veces será necesario crear un módulo o caja con los pasos encapsulados. Nombre del proceso Lorem ipsum dolor sit amet consectetur RUT * Ej: X Nombre(s) * Celular * Teléfono fijo - 2 Lorem ipsum dolor sit amet consectetur Ingresa tu(s) nombre(s) Apellido paterno * Ingresa tu apellido paterno - Mail * Ingresa tu mail 3 Lorem ipsum dolor sit amet consectetur Apellido materno Ingresa tu apellido materno Confirmar mail * Confirma tu mail Siguiente

10 Archivo IxD Formulario Login Ejemplos de pasos estándar para procesos de autenticación. Ingresar a la lorem ipsum Para acceder a la documentación debe ingresar el nombre de usuario y contraseña. Nombre de usuario Ingrese el nombre de usuario Contraseña Ingrese la contraseña Ha olvidado sus datos? Lo invitamos a recuperar su contraseña Ingresar Recuperar contraseña Ingrese el correo electrónico asociado a esta cuenta para recibir las instructiones para recuperar su contraseña Correo electrónico Ingrese su correo electrónico No ha perdido su contraseña? Vuelva a la página de inicio Confirmar Hemos enviado intrucciones al correo electrónico lorem.ipsum@gmail.com Para continuar, revise su correo electrónico y restablezca su contraseña.

11 Navegación Menús Breadcrumbs Botones Paginadores Pestañas Etc

12 Archivo IxD Navegación Menús Los menús de navegación suelen ubicarse en el header o encabezado de página. Pueden tener diferentes jerarquías de contenido. A continuación algunos ejemplos. Menú desplegable Link destacado Link auxiliar 1 Link auxiliar 2 Link auxiliar 3 Link auxiliar 4 Link auxiliar 5 El menú top permite agregar enlaces de 2º o 3º nivel de relevancia con información principalmente auxiliar, como contacto, redes sociales, preguntas frecuentes y otros contenidos que ayudan en la navegación pero no representan la información central del sitio o software. Nombre del servicio Menú 1 Menú 2 Menú nombre largo Menú nombre largo 2 Menú sin páginas hijas Nombre del servicio Acceso destacado Otro Menú 1 Menú 2 Menú nombre largo Menú nombre largo 2 Menú sin páginas hijas Menú secundadio 1 Menú sescundario 2 Link externo Nombre o logo del servicio Opción menú 1 Opción menú 2 Opción menú 3 Opción menú 4 Opción menú 5 La parte central del header contendrá información sobre la identidad del servicio (nombre y logo) además de los accesos a contenidos centrales mendiante el menú primario y secundario y otros accesos posibles en casos de sitios muy grandes o complejos. Comportamiento de header en otros formatos Nombre del servicio Menú 1 Menú 2 Menú nombre largo Menú nombre largo 2 Menú sin páginas hijas En pantallas intermedias (tablet horizontal 1024 px) el header tiende a privilegiar el contenido principal del menú (jerarquía 1), escondiendo los menús secundarios y otros enlaces destacados dentro del botón de menú para móviles. En pantallas menores como tablet vertical y teléfono móvil (768 px y 320 px respectivamente) se mantiene solamente la imagen corporativa del servicio mediante su logo, el acceso a la búsqueda (cuando es pertinente) y el botón de menú que ahora aloja todos los links del header.

13 Archivo IxD Navegación Despliegues de menú Menú 1 Menú 2 Menú nombre largo Menú nombre largo 2 Menú sin páginas hijas Acceso destacado Otro Menú secundario 1 Menú secundario 2 Link externo Menú desplegable (top) Menú 1 Menú 2 Menú nombre largo Menú nombre largo 2 Menú sin páginas hijas Menú top desplegable Link destacado Link auxiliar 1 Link auxiliar 2 Link auxiliar 3 Link auxiliar 4 Link auxiliar 5 Menú 1 Menú 2 Menú nombre largo Menú nombre largo 2 Menú sin páginas hijas Link destacado Link auxiliar 1 Link auxiliar 2 Link auxiliar 3 Presenta caso simple con menú de primera jerarquía, un link destacado y 3 links auxiliares. Link auxiliar 1 Link auxiliar 2 Link auxiliar 3 Link auxiliar 4 Link auxiliar 5 Presenta caso intermedio con menú de primera jerarquía, menú desplegable (en el top del header), link destacado y links auxiliares. Presenta caso extremo con menú de primera jerarquía, accesos destacados, menú secundario, menú desplegable (en el top del header) y links auxiliares.

14 Archivo IxD Navegación Despliegues de menú Link a servicio con ícono grande Link a servicio con nombre largo Otro servicio Link a servicio con Otro servicio Otro servicio nombre largo Menú desplegable Link destacado Link auxiliar 1 Link auxiliar 2 Link auxiliar 3 Link auxiliar 4 Link auxiliar 5 Lorem ipsum texto introductorio a los Sitio enlaces 1 presentados a continuación consectetur adiìscing elit. Integrer eleifend. Link a categoría mayor 1 Sublink Sitio 2 Sublink Sitio 3 Sublink Sublink Sublink consectetur adiìscing elit. Sublink consectetur adiìscing elit. Integrer Integrer eleifend. eleifend. Lorem ipsum dolor sit Sublink más largo Sublink más largo amet consectetur. Sublink más largo Sublink más largo Link a categoría mayor 2 Sublink Sitio 4 Sublink Sublink Sublink Lorem ipsum Sublink dolor más sit amet largo Sublink consectetur adiìscing elit. Sublink Integrer consectetur Sublink adiìscing más elit. largo Integrer eleifend. Lorem ipsum dolor sit eleifend. Sublink amet consectetur. más largo Sublink más largo Sublink más largo Sublink más largo Sitio 5 Sublink Menú desplegable Link destacado Link auxiliar 1 Link auxiliar 2 Link auxiliar 3 Link auxiliar 4 Link auxiliar 5 Nombre del servicio Menú 1 Menú 2 Menú nombre largo Menú nombre largo 2 Menú sin páginas hijas Lorem ipsum Dolor sit amet consectetur Adipiscing Elit dolor lorem Ipsum sit amet Consectetur Nombre o logo del servicio Opción menú 1 Opción menú 2 Opción menú 3 Opción menú 4 Opción menú 5 Lorem ipsum Dolor sit amet conse Adipiscing Elit dolor lorem Ipsum sit amet Ipsum sit amet consectetur adipiscing elit. Dolor sit amet consectetur adipiscing elit integrer eleifend sim non. Adipiscing elit integrer eleifend sim non. Lorem ipsum. Elit dolor lorem integrer eleifend sit amet consectetur adipiscing elit lorem. consectetur adipiscing elit. Dolor sit amet consectetur adipiscing elit integrer eleifend sim non. Consectetur

15 Archivo IxD Navegación Botones y complementos de la navegación Además de los elementos de navegación transversales, también se apoya la navegación con botones y breadcrumbs que dan libertad de desplazamiento por el sitio y dentro de la página. Breadcrumbs Inicio > Nivel 1 > Nivel 2 > Nivel 3 > Página actual El breadcrumb (o miga de pan) permite volver atrás y visualizar la ubicación actual en el sitio mediante la contextualización de los niveles de navegación. Sus atributos tipográficas son: Helvética Neue Regular 11 pt #9B9B9B Line 16 Botones Volver Continuar Subir Bajar Volver al inicio Enviar Publicar Finalizar Comentar Buscar Volver Siguiente Continuar Los botones asociados a finalización de procesos son negros, mientras que las acciones de continuidad son grises. Sidebar Nombre de página Nombre de página más larga Nombre de página más larga con doble línea Otro nombre de página Nombre de página Nombre de página más larga con doble línea Título de la sección 1. Nombre de página 2. Nombre de página más larga 3. Otro nombre de página 4. Nombre de página Ejemplo de contenido visitado Ejemplo de contenido activo Ejemplo de contenido por visitar Contenido por visitar Título de la sección Subcontenido 1 Otro ejemplo de contenido hijo Subcontenido 2 Ejemplo de contenido hijo Otro ejemplo de contenido hijo Subcontenido 3 Subcontenido 4 5. Nombre de página más larga 6. Otro nombre de página larga Contenido por visitar 7. Otro nombre Ejemplo de contenido por visitar 8. Nombre de página 9. Otro ejemplo de nombre

16 Archivo IxD Navegación Navegación contextual Módulos de navegación usualmente ubicados en las barras laterales de páginas interiores. Encabezado con invitación consectetur adipìscing elit. Integrer eleifend sem non pulvinar sagittis. Seleccione lorem ipsum Comparte en Contáctanos Nombre publicación CATEGORÍA Nombre de la edición destacada lorem ipsum dolor sit amet consectetur adipiscing. Intergrer eleifend sei non Por Nombre Autor el 20/01/2015 Tienes dudas? Te llamamos Quieres saber más? consectetur adipiscing elit. Integrer eleifend, sem non pulvinar sagittis. Horarios de atención Contáctanos Conversemos en Facebook Conversemos en Twitter Haz click para leer Visita el sitio lorem ipsum Ver todas las ediciones > ISSUU Recomendamos visitar Lorem ipsum dolor sit Amet consectetur adipiscing Ipsum dolor sit amet consectetur adipiscing elit interpret. Newsletter Suscríbete a nuestro newsletter y recibe semanalmente en tu todas las novedades de Lorem Ipsum Dolor. Ingrese su nombre Lorem ipsum dolor sit amet consectetur adipiscing. Integrer eleifen asim non lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipiscing. Integrer eleifen asim Lorem ipsum dolor sit amet consectetur adipiscing. Integrer eleifen asim non lorem ipsum dolor sit amet consectetur Eventos 23 DIC 05 ENE Exposición fotográfica "Amor y Libertad" 23/12/2014 al 20/01/2015 Lugar: IP/CFT Chillán 3 temporada de Conciertos de Verano de la Orquesta Filarmónica de Temporada /01/2015 Lugar: Teatro Municipal de Arica Ver todas los eventos > Ingrese su Suscribirme ahora Descarga lorem ipsum dolor sit amet consectetur Síguenos en Facebook Síguenos en Twitter Síguenos en Youtube Noticias relacionadas VINCULACIÓN CON EL MEDIO Clínica Kinésica de la UST realiza atención a domicilio a pacientes postrados de Valdivia Por DEC Valdivia el 03/09/2015 Dato relevante Breve detalle del dato destacado para entregar más información Nombre de página 844 Me gusta Me gusta esta página Sé el primero de tus amigos en indicar que te gusta esto Nombre de página 3 de febrero a las 17:!5 Compartir consectetur MUNDO SANTO TOMÁS Primera jornada de células madre en Unviersidad Santo Tomás Por DEC UST Santiago el 28/08/2015 Ver todas las noticias >

17 Archivo IxD Navegación Navegación al interior del contenido Elementos que permiten agrupar grandes cantidades de información y navegarla dentro de una página. Tab o Pestañas Lorem isum Dolor sit Amet consectetur Adipiscing Lorem ipsum Solor sit, consectetur adipiscing elit. Integer sodales libero quis nisi ultricies suscipit. Donec tortor metus, consectetur id rhoncus sed, mollis eget orci. Nunc blandit vel justo ut fringilla. Nulla quis tortor quis nisi ultrices mollis. Ut efficitur bibendum turpis, at accumsan tortor cursus elementum. Praesent porttitor dui vitae eleifend vulputate. Aenean at ligula in eros dignissim dapibus eu vitae augue. Fusce accumsan elit ut turpis lacinia vehicula. Morbi nec pellentesque turpis. In eleifend ante tellus, in pharetra elit rhoncus ac. Morbi vitae interdum ante, non convallis turpis. Amet consectetur Adipìscing, consectetur adipiscing elit. Integer sodales libero quis nisi ultricies suscipit. Donec tortor metus, consectetur id rhoncus sed, mollis eget orci. Nunc blandit vel justo ut fringilla. Nulla quis tortor quis nisi ultrices mollis. Ut efficitur bibendum turpis, at accumsan tortor... Acordeón Lorem ipsum dolot Sit amet consectetur adipiscing Elit integrer Lorem ipsum dolor Sit amet consectetur adipiscing Elit integrer consectetur adipiscing elit Integer sodales libero quis nisi ultricies suscipit. Donec tortor metus, consectetur id rhoncus sed, mollis eget orci. Nunc blandit vel justo ut fringilla. Nulla quis tortor quis nisi ultrices mollis. Ut efficitur bibendum turpis, at accumsan tortor cursus elementum. Praesent porttitor dui vitae eleifend vulputate. Aenean at ligula in eros dignissim dapibus eu vitae augue. Fusce accumsan elit ut turpis lacinia vehicula. Morbi nec pellentesque turpis. In eleifend ante tellus, in pharetra elit rhoncus ac. Morbi vitae interdum ante. Descargar el programa de la asignatura Eleinfend sem non Lorem ipsum dolor sit consectetur adipiscing elit Integer sodales libero quis nisi ultricies suscipit. Donec tortor metus, consectetur id rhoncus sed, mollis eget orci. Nunc blandit vel justo ut fringilla. Nulla quis tortor quis nisi ultrices mollis. Ut efficitur bibendum turpis, at accumsan tortor cursus elementum. Praesent porttitor dui vitae eleifend vulputate. Aenean at ligula in eros dignissim dapibus eu vitae augue. Fusce accumsan elit ut turpis lacinia vehicula. Morbi nec pellentesque turpis. In eleifend ante tellus, in pharetra elit rhoncus ac. Morbi vitae interdum ante. Descargar el programa de la asignatura Eleinfed sem non Lorem ipsum dolor sit

18 Archivo IxD Navegación Paginador < > < > < anterior siguiente > Para dividir un contenido muy extenso, se recomienda el uso de paginador o de carga de contenidos parciales (al hacer scroll). Para móviles es preferible cargar el contenido. cargando cargando Buscador Ingresa tu búsqueda aquí Ingresa tu búsqueda aquí Búsqueda avanzada Búsqueda avanzada consectetur adipiscing consectetur adipiscing consectetur adipiscing Buscar Aliquam id libero Aliquam id libero Buscar Ingresa tu búsqueda aquí Búsqueda avanzada Resultado de búsqueda Todo consectetur adipiscing Aliquam id libero Resultados de búsqueda: Trabajos de verano (4 de 12 resultados) El Sistema Binominal Chileno y sus posibles modificaciones El sistema binominal chileno, por lo tanto, corresponde a un sistema proporcional para las elecciones parlamentarias en Chile, de acuerdo a la Ley Orgánica Constitucional de votaciones y escrutinios populares, de 1988, que refiere a la elección del Senado. consectetur adipiscing Aliquam id libero consectetur adipiscing Estudiantes ovallinos de Santo Tomás participan en trabajos voluntarios de Verano Buscar Un grupo de estudiantes de la sede de Ovalle de la Universidad Santo Tomás, participaron en trabajos voluntarios de verano, como una forma reforzar sus vínculos con la comunidad y conocer de cerca la realidad de la zona. Revista Conexión (ex Nexos) La Revista Conexión le informará sobre las instituciones Santo Tomás Viña del Mar, Universidad, Instituto Profesional y Centro de Formación Técnica < >

19 Contenidos Videos Imágenes Galerías Tablas Listas Lightbox

20 Archivo IxD Contenidos Imágenes y videos Video y/o foto Los elementos de imagen y video se adaptan dependiendo del ancho de la pantalla donde serán presentados. Cuando se representa un video, se debe incorporar el ícono y botón de Play al centro de la imagen, como se muestra en el caso desktop. Este botón no varía su tamaño al usarse en tablet o mobile. Desktop 1280: 690 x 410 px Video y/o foto Tablet 1024: 550 x 325 px Video y/o foto Tablet 768: 545 x 320 px Video y/o foto Mobile 320: 300 x 178 px

21 Archivo IxD Contenidos Imágenes o videos con descripción Video y/o foto Video y/o y/o foto Título de la imagen Texto de la caja, como máximo tiene una extensión de 140 caracteres Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elemen Video y/o foto Título de la imagen Texto de la caja, como máximo tiene una extensión de 140 caracteres Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elemen Título largo de la imagen de dos líneas en mobile Video y/o y/o foto Mobile Título: Helvética bold 16, Line 20 Texto: Helvética light 15, Line 20, Paragraph 15 Desktop Título: Helvética bold 17, Line 20 Texto: Helvética light 16, Line 20, Paragraph 15 Título largo de la imagen de dos líneas Video y/o foto i x i Descripción de la imagen desplegada lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elemen

22 Archivo IxD Contenidos Galerías de imágenes Video y/o foto consectetur Por autor el 27/01/2015 i consectetur Por autor el 27/01/ / 15 En esta foto, el Rector de la sede, Héctor López, junto a la Directora académica, Marcela Castillo Rojas, entregaron un galvano de reconocimiento a los colaboradores destacados.

23 Archivo IxD Contenidos Galerías de imágenes mobile i ix Descripción de la imagen desplegada lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elemen 1 / 15 1 / 15 Deslice para ver otras imágenes x i En esta foto, el Rector de la sede, Héctor López, junto a la Directora académica, Marcela Castillo Rojas, entregaron un galvano de reconocimiento a los colaboradores destacados.

24 Archivo IxD Contenidos Destacados Imagen Lorem ipsum dolor sit amet Texto de la caja, como máximo tiene una extensión de 140 caracteres Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elemen Lorem ipsum dolor sit Desktop 1280 Imagen: 790 x 440 px Caja: 410 x 440 px Título: Helvética regular 35, Line 35 Texto: Helvética light 18, Line 25, Paragraph 15, máximo 140 caracteres Botón: 320 x 60 px Imagen Lorem ipsum dolor sit amet Texto de la caja, como máximo tiene una extensión de 140 caracteres Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elemen Lorem ipsum dolor sit Tablet 1024 Imagen: 630 x 350 px Caja: 330 x 350 px Título: Helvética regular 35, Line 35 Texto: Helvética light 18, Line 25, Paragraph 15, máximo 140 caracteres Botón: 260 x 60 px

25 Archivo IxD Contenidos Imagen Imagen Lorem ipsum dolor sit amet Texto de la caja, como máximo tiene una extensión de 140 caracteres, consectetur adipiscing elit. Lorem ipsum dolor sit Texto de la caja, como máximo tiene una extensión de 140 caracteres, consectetur adipiscing elit. Lorem ipsum dolor sit Tablet 768 Imagen: 734 x 410 px (main amplio sin sidebar) Caja: 180 px (alto variable) Mobile 320 Imagen: 300 x 172 px Caja: 250 px (alto variable) Título: Helvética regular 25, Line 25 Texto: Helvética light 16, Line 20, Paragraph 15, máximo 140 caracteres Botón: 270 x 60 px Título: Helvética regular 25, Line 25 Texto: Helvética light 16, Line 20, Paragraph 15, máximo 140 caracteres Botón: 260 x 60 px Imagen Texto de la caja, como máximo tiene una extensión de 140 caracteres, consectetur adipiscing elit. Lorem ipsum dolor sit Tablet 768 Imagen: 484 x 270 px Caja: 200 px (alto variable) Título: Helvética regular 25, Line 25 Texto: Helvética light 16, Line 20, Paragraph 15, máximo 140 caracteres Botón: 260 x 60 px

26 Archivo IxD Contenidos Listas Numeradas Listas mobile 1., consectetur adipiscing elit 2. Ut laoreet quam id pretium auctor. Sed nisl turpis, ultrices vitae pretium dapibus, dapibus ac orci. In lorem metus, commodo vestibulum scelerisque vitae, placerat nec nunc 3. Morbi sem nisl, fringilla ut scelerisque et, hendrerit a velit. Etiam euismod nec lectus non aliquet. Duis sodales lectus sed est molestie, vitae laoreet urna rhoncus. Ut interdum massa est, ut posuere nulla facilisis vitae 4. Pellentesque non accumsan tortor. Quisque ut justo dictum, aliquet orci id, interdum urna. Integer blandit orci nec posuere sagittis. Vestibulum consequat porttitor molestie. Pellentesque in diam sed nibh scelerisque venenatis. Donec feugiat venenatis dolor, eget cursus quam aliquam vel 5. Proin in quam tortor. Sed semper, mauris ut scelerisque vestibulum, quam turpis gravida dui, et condimentum sapien mi et lacus. Vivamus vel viverra urna. 1., consectetur adipiscing elit 2. Ut laoreet quam id pretium auctor. Sed nisl turpis, ultrices vitae pretium dapibus, dapibus ac orci. In lorem metus, commodo vestibulum scelerisque vitae, placerat nec nunc 3. Morbi sem nisl, fringilla ut scelerisque et, hendrerit a velit. Etiam euismod nec lectus non aliquet. Duis sodales lectus sed est molestie, vitae laoreet urna rhoncus. Ut interdum massa est, ut posuere nulla facilisis vitae No numeradas Morbi sem nisl, fringilla ut scelerisque et, hendrerit a velit. Etiam euismod nec lectus non aliquet. Duis sodales lectus sed est molestie, vitae laoreet urna rhoncus. Ut interdum massa est, ut posuere nulla facilisis vitae Pellentesque non accumsan tortor. Quisque ut justo dictum, aliquet orci id, interdum urna. Integer blandit orci nec posuere sagittis. Vestibulum consequat porttitor molestie. Pellentesque in diam sed nibh scelerisque venenatis. Donec feugiat venenatis dolor, eget cursus quam aliquam vel Proin in quam tortor. Sed semper, mauris ut scelerisque vestibulum, quam turpis gravida dui, et condimentum sapien mi et lacus. Vivamus vel viverra urna. Las listas mantienen los atributos del textos, con las siguientes características: Helvética Neue Light 16 pt #4A4A4A Line 25 Paragraph 15 Morbi sem nisl, fringilla ut scelerisque et, hendrerit a velit. Etiam euismod nec lectus non aliquet. Duis sodales lectus sed est molestie, vitae laoreet urna rhoncus. Ut interdum massa est, ut posuere nulla facilisis vitae Pellentesque non accumsan tortor. Quisque ut justo dictum, aliquet orci id, interdum urna. Integer blandit orci nec posuere sagittis. Vestibulum consequat porttitor molestie. Pellentesque in diam sed nibh scelerisque venenatis. Donec feugiat venenatis dolor, eget cursus quam aliquam vel Las listas en mobile tienen las siguientes características: Helvética Neue Light 15 pt #4A4A4A Line 20 Paragraph 10

27 Archivo IxD Contenidos Tablas Datos cortos Opción A Opción B Opción C Opción D Opción E Contenido 1A Contenido 1B Contenido 1C Contenido 1D Contenido 1E Contenido 2A Contenido 2B Contenido 2C Contenido 2D Contenido 2E Contenido 3A Contenido 3B Contenido 3C Contenido 3D Contenido 3E Contenido 4A Contenido 4B Contenido 4C Contenido 4D Contenido 4E Contenido 5A Contenido 5B Contenido 5C Contenido 5D Contenido 5E Contenido XA Contenido XB Contenido XC Contenido XD Contenido XE Desktop 1280 Ancho máximo: 890 px Encabezado: Helvética medium 16 #FFF Texto: Helvética light 16 # Opción A Opción B Opción C Opción D Opción E Contenido 1A Contenido 1B Contenido 1C Contenido 1D Contenido 1E Contenido 2A Contenido 2B Contenido 2C Contenido 2D Contenido 2E Contenido 3A Contenido 3B Contenido 3C Contenido 3D Contenido 3E Contenido 4A Contenido 4B Contenido 4C Contenido 4D Contenido 4E Contenido 5A Contenido 5B Contenido 5C Contenido 5D Contenido 5E Contenido XA Contenido XB Contenido XC Contenido XD Contenido XE Tablet 1024 Ancho máximo: 715 px Encabezado: Helvética medium 16 #FFF Texto: Helvética light 16 #484848

28 Archivo IxD Contenidos Datos cortos mobile Opción A Contenido 1A Opción A Opción B Opción C Opción D Opción E Opción B Opción C Contenido 1B Contenido 1C Contenido 1A Contenido 1B Contenido 1C Contenido 1D Contenido 1E Opción D Opción E Contenido 1D Contenido 1E Contenido 2A Contenido 2B Contenido 2C Contenido 2D Contenido 2E Contenido 3A Contenido 3B Contenido 3C Contenido 3D Contenido 3E Opción A Contenido 2A Opción B Contenido 2B Contenido 4A Contenido 4B Contenido 4C Contenido 4D Contenido 4E Opción C Opción D Contenido 2C Contenido 2D Contenido 5A Contenido 5B Contenido 5C Contenido 5D Contenido 5E Opción E Contenido 2E Contenido XA Contenido XB Contenido XC Contenido XD Contenido XE Opción A Contenido 3A Tablet 768 Opción B Opción C Opción D Opción E Contenido 3B Contenido 3C Contenido 3D Contenido 3E Ancho máximo: 734 px (main amplio sin sidebar) Encabezado: Helvética medium 15 #FFF Texto: Helvética light 15 # Opción A Opción B Opción C Opción D Opción E Contenido 4A Contenido 4B Contenido 4C Contenido 4D Contenido 4E Opción A Opción B Opción C Opción D Opción E Opción A Opción B Opción C Opción D Opción E Contenido 5A Contenido 5B Contenido 5C Contenido 5D Contenido 5E Contenido XA Contenido XB Contenido XC Contenido XD Contenido XE Mobile 320 Ancho máximo: 300 px Encabezado: Helvética medium 15 #FFF Texto: Helvética light 15 # Para versión móvil, una alternativa para tablas sencillas de datos cortos es repetir el encabezado y desglosar la tabla en sus filas, donde cada fila, será un módulo de la tabla, desplegando los datos de forma vertical.

29 Archivo IxD Contenidos Datos largos Nombre Apellidos Rut Cargo Comentario Fernando Ricardo Valenzuela Reyes Asistente de medicina Veterinaria Adriana Margarita Académica de Universidad, consectetur adipiscing elit. Maecenas elementum, ligula a malesuada vehicula, erat lectus porta ex, id tincidunt justo elit a nisl. Nam interdum congue orci vitae venenatis. Sergio Esteban Rubio Echeverría Supervisor de obras, consectetur adipiscing elit. Maecenas elementum María Eugenia Ossandón Jorquera Académica de Universidad, consectetur adipiscing elit. Maecenas elementum, ligula a malesuada vehicula, erat lectus porta ex, id tincidunt justo elit a nisl. Nam interdum congue orci vitae venenatis. Aenean at tempor mi, a semper sem. Fusce pharetra quam vel interdum interdum. Desktop 1280 Ancho máximo: 890 px La altura de cada fila se ajusta al alto máximo de cada elemento que contenga. Nombre Apellidos Rut Cargo Comentario Fernando Ricardo Valenzuela Reyes Asistente de medicina Veterinaria Adriana Margarita Académica de Universidad, consectetur adipiscing elit. Maecenas elementum, ligula a malesuada vehicula, erat lectus porta ex, id tincidunt justo elit a nisl. Nam interdum congue orci vitae venenatis. Sergio Esteban Rubio Echeverría Supervisor de obras, consectetur adipiscing elit. Maecenas elementum María Eugenia Ossandón Jorquera Académica de Universidad, consectetur adipiscing elit. Maecenas elementum, ligula a malesuada vehicula, erat lectus porta ex, id tincidunt justo elit a nisl. Nam interdum congue orci vitae venenatis. Aenean at tempor mi, a semper sem. Fusce pharetra quam vel interdum interdum. Tablet 1024 y 768 Ancho máximo: 715 px El ancho total de la tabla se ajusta y se comprime cada columna proporcionalmente.

30 Archivo IxD Contenidos Datos largos en mobile Nombre Fernando Ricardo DESLIZAR PARA VER TABLA DESLIZAR PARA VER TABLA Apellidos Valenzuela Reyes Nombre Fernando Ricardo Nombre Sergio Esteban María Eugenia Rut Apellidos Valenzuela Reyes Apellidos Rubio Echeverría Ossandón Jorquera Cargo Comentario Asistente de medicina Veterinaria Rut Cargo Asistente de medicina Veterinaria Rut Cargo Supervisor de obras Académica de Universidad Nombre Apellidos Rut Cargo Comentario Adriana Margarita Académica de Universidad Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum, ligula a malesuada vehicula, erat lectus porta ex, id tincidunt justo elit a nisl. Nam interdum congue orci vitae venenatis. Comentario Mobile 320 Otra alternativa es dejar el encabezado fijo en una capa Comentario Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum, ligula a malesuada vehicula, erat lectus porta ex, id tincidunt justo elit a nisl. Nam interdum congue orci vitae venenatis. Aenean at tempor mi, a semper sem. Fusce pharetra quam vel interdum interdum. Nombre Sergio Esteban superior al lado izquierdo, y delizar los otros elementos de la tabla de forma horizontal. Esta alternativa funciona Apellidos Rubio Echeverría bien si el total de altura de la tabla no excede la altura del Rut teléfono móvil, ya que sino simultáneamente se debería Cargo Comentario Supervisor de obras Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum hacer slide de izquierda a derecha y scroll de arriba a abajo, caso que no es recomendado. Nombre María Eugenia Apellidos Ossandón Jorquera Rut Cargo Académica de Universidad Comentario Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum, ligula a malesuada vehicula, erat lectus porta ex, id tincidunt justo elit a nisl. Nam interdum congue orci vitae venenatis. Aenean at tempor mi, a semper sem. Fusce pharetra quam vel interdum interdum. Mobile 320 Ancho máximo: 300 px En tablas con contenidos extensos, existe más de un modo de visualizar en pantallas móviles. En el caso superior, sigue la primera estructura presentada, donde se desarma la tabla en sus filas y el encabezado se repite a cada vez.

31 Archivo IxD Contenidos Doble encabezado Aspecto 2014 Género Femenino Masculino 27,7% Rango de edad y más Año de egreso enseñanza media 2010 o antes ,7% 2012 Tipo de dependencia 2013 Municipalizado Particular-Subvencionado Particular pagado Corporación privada 27,7% Desktop 1280 Ancho máximo: 890 px La altura de cada fila se ajusta al alto máximo de cada elemento que contenga. Aspecto 2014 Género Femenino Masculino 27,7% Rango de edad y más Año de egreso enseñanza media 2010 o antes ,7% Tipo de dependencia Municipalizado Tablet 1024 y 768 Particular-Subvencionado Particular pagado Corporación privada 27,7% Ancho máximo: 715 px El ancho total de la tabla se ajusta y se comprime cada columna proporcionalmente.

32 Archivo IxD Contenidos Doble encabezado en mobile Aspecto 2014 Aspecto: Género Género Femenino Femenino Masculino 27,7% 2014 Rango de edad Masculino 27,7% Aspecto: Rango de edad 25 y más 18 Año de egreso enseñanza media 2010 o antes ,7% Tipo de dependencia Municipalizado Particular- Subvencionado 27,7% Particular pagado Corporación privada 25 y más 2014 Aspecto: Año de egreso enseñanza media Mobile 320 Ancho máximo: 300 px En los casos donde las tablas tienen información precisa con pocas columnas, se puede comprimir el ancho hasta el máximo de móvil 300 px en la medida que no afecte la legibilidad o antes ,7% Aspecto: Año Tipo de egreso dependencia enseñanza o antes Particular-Subvencionado 27,7% Particular pagado Corporación privada Mobile 320 Ancho máximo: 300 px Con encabezados dobles (primera fila y primera columna de la tabla) también se sugiere dividir la tabla en base a cada fila mayor, en este caso Aspecto, donde cada contenido interior de cada Aspecto se vuelve una tabla pequeña separada.

33 Archivo IxD Contenidos Mensajes emergentes Mensajes de texto Título del lightbox, consectetur adipiscing elit. Etiam lobortis euismod est, non hendrerit arcu fermentum eu. Donec ac sodales quam est, non hendrerit arcu fermentum eu. Lightbox 1280 Ancho máximo: 560 px Encabezado H3 Helvética Regular 30 Párrafo regular Helvética Light 16, Line 25, Paragraph 15 Título del lightbox, consectetur adipiscing elit. Etiam lobortis euismod est, non hendrerit arcu fermentum eu. Donec ac sodales quam est, non hendrerit arcu fermentum eu. Lightbox 1024 Ancho máximo: 460 px Encabezado H3 Helvética Regular 30 Párrafo regular Helvética Light 16, Line 25, Paragraph 15 Título del lightbox, consectetur adipiscing elit. Etiam lobortis euismod est, non hendrerit arcu fermentum eu. Donec ac sodales quam est, non hendrerit arcu fermentum eu. Lightbox 768 Ancho máximo: 460 px Encabezado H3 (mobile) Helvética Bold 19 Párrafo regular Helvética Light 15, Line 25, Paragraph 13 Título del lightbox, consectetur adipiscing elit. Etiam lobortis euismod est, non hendrerit arcu fermentum eu. Donec ac sodales quam est, non hendrerit arcu fermentum eu. Lightbox 320 Ancho máximo: 285 px Encabezado H3 (mobile) Helvética Bold 19 Párrafo regular Helvética Light 15, Line 25, Paragraph 13

34 Archivo IxD Contenidos Mensajes con imagen y texto (lightbox) Video y/o foto Lightbox imagen 1280 y 1024 Título del lightbox, consectetur adipiscing elit. Etiam lobortis euismod est, non hendrerit arcu fermentum eu. Donec ac sodales quam est, non hendrerit arcu fermentum eu. Ancho máximo: 800 px Tamaño imagen: 762 x 448 px Encabezado H3 Helvética Regular 30 Párrafo regular Helvética Light 16, Line 25, Paragraph 20 Video y/o foto Video y/o foto Título del lightbox, consectetur adipiscing elit. Etiam lobortis euismod est, non hendrerit arcu fermentum eu. Donec ac sodales quam est, non hendrerit arcu fermentum eu. Título del lightbox, consectetur adipiscing elit. Etiam lobortis euismod est, non hendrerit arcu fermentum eu. Donec ac sodales quam est, non hendrerit arcu fermentum eu. Lightbox imagen 320 Ancho máximo: 280 px Tamaño imagen: 260 x 150 px Lightbox imagen 768 Ancho máximo: 640 px Encabezado H3 (mobile) Helvética Bold 19 Párrafo regular Helvética Light 15, Line 25, Paragraph 13 Tamaño imagen: 605 x 355 px Encabezado H3 (mobile) Helvética Bold 19 Párrafo regular Helvética Light 15, Line 25, Paragraph 13

35 Archivo IxD Contenidos Personas Los siguientes módulos presentan a personas en diferentes contextos. Cada proyecto puede requerir información variada de las personas, por lo tanto las cajas deben ser ajustadas y personalizadas. Sebastián Rodríguez Rivera Vicerrector de Investigación y Postgrado Ver curriculum Magdalena Hermann Directora Nacional de Comunicaciones. Dra en Lenguaje y expresión escrita PUC. Ver curriculum Alejandro Valdivia Subdirector de Comunicaciones. Ver curriculum Sebastián Rodríguez Rivera Vicerrector de Investigación y Postgrado Ver curriculum Magdalena Hermann Directora Nacional de Comunicaciones. Dra en Lenguaje y expresión escrita PUC. Ver curriculum Alejandro Valdivia Subdirector de Comunicaciones. Ver curriculum Magdalena Hermann Directora Nacional de Comunicaciones (2) Av. Andrés Bello 277, edificio La Industria piso 31, Santiago Alejandro Valdivia Subdirector de Comunicaciones (2) lorem@ipsum.cl Av. Andrés Bello 277, edificio La Industria piso 31, Santiago x Copiapó Willie Carvajal Encargado de Extensión y Comunicaciones i (2) (52) Copiapó Willie Carvajal lorem@ipsum.cl Río Copiapó Sur 2351, Copiapó