Wireframes escuela

Page 1

WireFrames Arquitectura de la Informaci贸n Desarrollo Portal Web Escuela de Dise帽o DuocUC Jorge Barrera

2.0


I Homepage e Items generales relativos a la Escuela

Elementos 0

Menú general Escuela: Item vertical superior que se encuentra presente en todo el portal. Este es recurrente ya que contiene la información transversal de la escuela

8

Pie: El pie contendrá Links institucionales más las reseñas legales correpondiente a la autoría de los contenidos más sus usos permitidos

1

Descripción Escuela: párrafo de texto sintético que describe brevemente la misión de la escuela junto a las funciones que esta cumple

9

Contenido Interior: Para el Desarrollo contínuo de titulares, párrafos y elementos mediales como fotografía y video

2

Menú Usuarios: describe tipología de usuario. Se dirige a páginas con información peinente a cada usuario con respecto a la escuela.

3

Menú Carreras: Acceso al nivel de Carreas a través de un bloque visual que configura un elemento importante para accesar los distintos aspectos de los programas de la escuela

4

Noticias: En el homepage tiene una alimentación híbrida. Por una parte tiene noticias independientes de la escuela y por otra se nutre de algunas noticias de cada Carrera

5

Galería: Conjunto de imágenes extractadas de los Showcases de las Carreras. Estas se seleccionarán en el homepage por un llamado a las que estén seleccionadas de cada galería

6

7

Weblog: El blog es una herramienta que contiene contenido editorial. El Director de la escuela seleccionará a una persona por una determinada cantidad de tiempo opara que desarrolle temáticas relativas a temas de escuela y de las disciplinas Menú Carreras: Acceso al nivel de Carreas a través de un bloque visual que configura un elemento importante para accesar los distintos aspectos de los programas de la escuela

10

Contenido Interior (área expandida): Para el Desarrollo contínuo de titulares, párrafos y elementos mediales como fotografía y video


Homepage Portal 0

Logo Escuela Acerca de

Historia

Proyectos Escuela

Organigrama

Usuarios

Admisión

Alumnos

Docentes

Exalumnos

Carreras

Diseño Ambientes

Diseño Gráfico

Diseño Industrial

Diseño de Vestuario

Contacto

Mapa del sitio

Empresa

1 2

3

Técnico en Diseño Gráfico

Ilustración Digital

Diseño en Duoc

Noticias This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section.

This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section.

Galería

This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section. This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section.

4

This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section.

MIcrositios ! CONCURSOS ! MOVILIDAD ESTUDIANTIL ! PRÁCTICAS ! EXALUMNOS

6

! PROYECTO PAÍS

5 This is where the section help text would go. should be brief but informative and ver galeria

Eventos -This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section. -This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section. -This is where the section help text would go. It should be brief but informative and describe the fields that are in the following section.

! ASUNTOS ESTUDIANTILES

8

Pie

links Institucionales

legal escuela

7


0

Interiores Escuela Logo Escuela Acerca de Usuarios

Carreras

Admisión

Diseño Ambientes

Home

Historia

Proyectos Escuela

Alumnos

Diseño Gráfico

Docentes

Diseño Industrial

Organigrama Exalumnos

Diseño de Vestuario

Contacto

Mapa del sitio

Empresa

Técnico en Diseño Gráfico

Ilustración Digital

Acerca de

Opción menú contextual

Acerca de

La opción del menú lateral con el

Palabras del Director Misión Convenios Proyeccción

contexto del Menú escuela tiene como ventajas el acceso a información específica dentro de un ambiente muy

Historia

relacionado.

Fundación Primera Etapa Formación de Carreras Profesionales

Proyectos Escuela Proyecto Educación a Distancia Centro de Transferencia Tecnológica Proyectos Académicos ICSID

Organigrama Directorio Directores de Carrera Profesores Adjuntos Profesores Instructores

Area de Contenidos Escuela: Se plantea un espacio amplio para el desarrollo de planos textuales, de imagen y de elementos mediales.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Fusce at urna et est dictum sollicitudin. Nulla porta molestie justo. Pellentesque ante leo, volutpat ac, malesuada at, luctus id, nunc. In magna magna, sollicitudin ac, eleifend sed, auctor vel, purus. Nullam magna. Etiam augue. Aenean at leo sed ipsum dignissim bibendum. Aliquam et augue faucibus leo scelerisque sagittis. Aenean ultricies sem in ipsum. Pellentesque convallis massa vel est. Nulla adipiscing commodo est. Donec sapien sapien, ultrices nec, placerat dignissim, cursus auctor, est. Nulla ullamcorper, ante ac posuere adipiscing, neque nunc laoreet nibh, a interdum dui arcu at odio. Suspendisse imperdiet, leo at lobortis

Palabras del Director Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Fusce at urna et est dictum sollicitudin. Nulla porta molestie justo. Pellentesque ante leo, volutpat ac, malesuada at, luctus id, nunc. In magna magna, sollicitudin ac, eleifend sed, auctor vel, purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Fusce at urna et est dictum sollicitudin. Nulla porta molestie justo. Pellentesque ante leo, volutpat ac, malesuada at, luctus id, nunc. In magna magna, sollicitudin ac, eleifend sed, auctor vel, purus.

Presenta como desventaja no tener comunicación con otros módulos del sitio por lo que hay que volver al home para crear las conexiones.


6

Weblog 0

Acerca de

Historia

Proyectos Escuela

Organigrama

Contacto

Mapa del sitio

Logo Escuela Home 0

9

WebLog

Archivo ULTIMAS ENTRADAS

El interior del blog muestra las últimas

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

contener en su visualización un necesario un click más para su visualización completa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Fusce at urna et est dictum sollicitudin. Nulla porta molestie justo. Pellentesque ante leo, volutpat ac, malesuada at, luctus id, nunc. In magna magna, sollicitudin ac, eleifend sed, auctor vel, purus. Nullam magna. Etiam augue. Aenean at leo sed ipsum dignissim bibendum. Aliquam et augue faucibus leo scelerisque sagittis. Aenean ultricies sem in ipsum. Pellentesque convallis massa vel est. Nulla adipiscing commodo est. Donec sapien sapien, ultrices nec, placerat dignissim, cursus auctor, est. Nulla ullamcorper, ante ac posuere adipiscing, neque nunc laoreet nibh, a interdum dui arcu at odio. Suspendisse imperdiet, leo at lobortis

2 Comentarios| Escrito por Lorem Ipsum

Lorem ipsum dolor sit amet

ARCHIVO POR MES ARCHIVO POR AÑO

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Fusce at urna et est dictum sollicitudin. Nulla porta molestie justo. Pellentesque ante leo, volutpat ac, malesuada at, luctus id, nunc. In magna magna, sollicitudin ac, eleifend sed, auctor vel, purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Fusce at urna et est dictum sollicitudin. Nulla porta molestie justo. Pellentesque ante leo, .

2 Comentarios| Escrito por Lorem Ipsum

8

10 entradas o artículos que pueden estracto definido, lo que hace

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Weblog con archivo en menú lateral

Pie links Institucionales

legal escuela

Dentro de este se agrega un formulario de contacto para el feedback usual en este tipo de herramientas. El sistema de comentarios debe ser moderado por el administrador.


4

7

Noticias y Eventos 0

Acerca de

Historia

Proyectos Escuela

Organigrama

Contacto

Mapa del sitio

Logo Escuela 10

Noticias

Archivo de Noticias

Las noticias son recuperadas de

Lorem ipsum

ingresos propios y generales de la

29 Julio del 2008

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Fusce at urna et est dictum sollicitudin. Nulla porta molestie justo. Pellentesque ante leo, volutpat ac, malesuada at, luctus id, nunc. In magna magna, sollicitudin ac, origen noticia

Lorem ipsum

29 Julio del 2008

29 Julio del 2008

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Fusce at urna et est dictum sollicitudin. Nulla porta molestie justo. Pellentesque ante leo, volutpat ac, malesuada at, luctus id, nunc. In magna magna, sollicitudin ac,origen noticia

Lorem ipsum

29 Julio del 2008

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Fusce at urna et est dictum sollicitudin. Nulla porta molestie justo. Pellentesque ante leo, volutpat ac, malesuada at, luctus id, nunc. In magna magna, sollicitudin ac,origen noticia 1 2 3 4 5

8

Pie links Institucionales

En esta pรกgina que deriva del homepage se resume cada una de las origen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Fusce at urna et est dictum sollicitudin. Nulla porta molestie justo. Pellentesque ante leo, volutpat ac, malesuada at, luctus id, nunc. In magna magna, sollicitudin ac,origen noticia

Lorem ipsum

producidas al interior de las escuela.

noticias y se vincula a la fuente de

29 Julio del 2008

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Fusce at urna et est dictum sollicitudin. Nulla porta molestie justo. Pellentesque ante leo, volutpat ac, malesuada at, luctus id, nunc. In magna magna, sollicitudin ac, origen noticia

Lorem ipsum

escuela como de las noticias

legal escuela


2

Usuarios 0

Acerca de

Historia

Proyectos Escuela

Organigrama

Contacto

Mapa del sitio

Logo Escuela Home 0

9

Alumnos

Alumnos Recursos Duoc Preguntas Frecuentes Vínculos Utiles Carreras

Recursos Duoc Lipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus

Lipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus

Lipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus

Docentes Recursos Duoc Preguntas Frecuentes Vínculos Utiles Carreras

Administrativos Recursos Duoc Preguntas Frecuentes Vínculos Utiles Carreras

Lipsum

Opción menú contextual

Los contenidos de los usuarios serán principalmente recursos e información

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus

relevante a los cuales pueden acceder desde solo una página. En el menú lateral se podrá accesar directamente al contenido requerido

Preguntas Frecuentes

9 La empresa tendrá una estructura por

¿Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus? Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit,

¿Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus? Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit,

¿Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus? Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, Archivo preguntas frecuentes

8

Pie links Institucionales

legal escuela

separado


II Carreras

Elementos 11

Título de Sección: Se estructura en cada Carrera y también localiza la carrera en la sede. Tiene un menú de atajo para ir a otras carreras.

13

Descripción de Carrera: Elemento párrafo de texto que se centra en la visión y alcances de cada Carrera

12

Menú opcional: Presenta tanto en la Carrera como en la Carrera-Sede

14

Noticias de la Carrera

15

Galería


Homepage Carreras 0

Acerca de

Historia

Proyectos Escuela

Organigrama

Contacto

Mapa del sitio

Logo Escuela 11

Diseño Gráfico

12

Malla Curricular

13

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis.

Extensión

Carreras que Imparte la Escuela Proyectos

Sedes

Titular de sección Carrera. Cambia cuando esta esta ubicada en Sede. Contiene un menú opcional para cambiar de Carrera

Menú de Carrera

Párrafo descriptivo de la Carrera

Noticias Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis.

Noticias extractadas de las Carreras. Contiene un menú para ir a una página que ordena las noticias por Sede

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at

Ver Noticias por Sede

Galería Online

15 Galería extractadas de las Carreras

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus

la Página puede seguir abajo si es que es importante colocar más ítems. Si no se ubicaría el Pie abajo de esta galería.


Homepage Carreras 0

Acerca de

Historia

Proyectos Escuela

Organigrama

Contacto

Mapa del sitio

Logo Escuela 11

Diseño Gráfico San Carlos de Apoquindo

12

Dirección

13

Cuerpo Docente

Proyectos

Sedes que imparten Diseño Gráfico Galería

Eventos

Noticias Admisión

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis.

Foto Sede

Noticias Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis.

14

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at leo adipiscing sagittis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi laoreet suscipit nisi. Phasellus id elit at

Ver Noticias por Sede

Galería Online

15

la Página puede seguir abajo si es que es importante colocar más ítems. Si no se ubicaría el Pie abajo de esta galería.


Galería Sede 0

Acerca de

Historia

Proyectos Escuela

Organigrama

Contacto

Mapa del sitio

Logo Escuela Diseño Gráfico San Carlos de Apoquindo Dirección

Cuerpo Docente

Proyectos

Sedes que imparten Diseño Gráfico Galería

Galería Online

15

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus

Eventos

Noticias Admisión


III Prototipos Mockup El prototipo previo o Mockup se refiere al primer acercamiento producto del trabajo de organización de los WireFrames. Rescata también el análisis de colores corporativos y da tamaño y posición a elementos expresados en las maquetas esquemáticas.


Propuesta Institucional

! Estandarización de la retícula. ! Uso de las Normas Gráficas asociadas a la Escuela. ! Uso y aplicación del estudio de referentes. ! Aplicación de las observaciones de la encuesta a Directores de Carrera


http://hy.cl/mockup/v1.html

http://hy.cl/mockup/v2.html


Propuesta Institucional

! Estandarización de la retícula. ! Uso de las Normas Gráficas asociadas a la Escuela. ! Uso y aplicación del estudio de referentes. ! Aplicación de las observaciones de la encuesta a Directores de Carrera


Propuesta Institucional

! Estandarización de la retícula. ! Uso de las Normas Gráficas asociadas a la Escuela. ! Uso y aplicación del estudio de referentes. ! Aplicación de las observaciones de la encuesta a Directores de Carrera


Propuesta Institucional

! Estandarización de la retícula. ! Uso de las Normas Gráficas asociadas a la Escuela. ! Uso y aplicación del estudio de referentes. ! Aplicación de las observaciones de la encuesta a Directores de Carrera


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.