Wireframes escuela

WireFramesArquitectura de la Información

Desarrollo Portal Web Escuela de Diseño DuocUC

2.0Jorge Barrera

http://creativecommons.org/

Homepage e Items generales relativos a la Escuela

1

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

8

Elementos

Menú Usuarios: describe tipología de usuario. Se dirige a páginas

con información peinente a cada usuario con respecto a la escuela.2

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

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

3

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

4

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

5

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

6

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

7

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

0

Contenido Interior: Para el Desarrollo contínuo de titulares,

párrafos y elementos mediales como fotografía y video9

10Contenido Interior (área expandida): Para el Desarrollo

contínuo de titulares, párrafos y elementos mediales como

fotografía y video

I

Homepage Portal

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.

Noticias

Galería

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

Eventos

0

1

2

3

4 5

6 7

Pie links Institucionales legal escuela8

Logo Escuela

Acerca de Historia Proyectos Escuela Organigrama Contacto Mapa del sitio

Diseño

Ambientes

Diseño Gráfico Diseño

Industrial

Diseño de

Vestuario

Ilustración

Digital

Técnico en

Diseño Gráfico

Admisión Alumnos Docentes Exalumnos EmpresaUsuarios

Carreras





Diseño en Duoc

ver galeria

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



! CONCURSOS

! MOVILIDAD ESTUDIANTIL

! PRÁCTICAS

! EXALUMNOS

! PROYECTO PAÍS

! ASUNTOS ESTUDIANTILES

MIcrositios

Interiores Escuela

Home

Acerca de Palabras del Director

Misión

Convenios

Proyeccción

HistoriaFundación

Primera Etapa

Formación de

Carreras Profesionales

Proyectos EscuelaProyecto Educación a

Distancia

Centro de Transferencia

Tecnológica

Proyectos Académicos

ICSID

OrganigramaDirectorio

Directores de Carrera

Profesores Adjuntos

Profesores

Instructores

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

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.


Acerca de

Palabras del Director

Opción menú contextual

La opción del menú lateral con el

contexto del Menú escuela tiene como

ventajas el acceso a información

específica dentro de un ambiente muy

relacionado.

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.

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

0

Logo Escuela

Acerca de Historia Proyectos Escuela Organigrama Contacto Mapa del sitio

Diseño

Ambientes

Diseño Gráfico Diseño

Industrial

Diseño de

Vestuario

Ilustración

Digital

Técnico en

Diseño Gráfico

Admisión Alumnos Docentes Exalumnos EmpresaUsuarios

Carreras

Acerca de Historia Proyectos Escuela Organigrama

Logo Escuela

Weblog

Contacto Mapa del sitio0

Pielinks Institucionales legal escuela

8

Home

Archivo

ULTIMAS ENTRADAS

Lorem ipsum dolor sit amet








ARCHIVO POR MESARCHIVO 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. 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, 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

WebLog Weblog con archivo en menú lateral

El interior del blog muestra las últimas

10 entradas o artículos que pueden

contener en su visualización un

estracto definido, lo que hace

necesario un click más para su

visualización completa.

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.

0

9



6


Logo Escuela

Noticias y Eventos



8

Noticias Archivo de Noticias

Las noticias son recuperadas de

ingresos propios y generales de la

escuela como de las noticias

producidas al interior de las escuela.

En esta página que deriva del

homepage se resume cada una de las

noticias y se vincula a la fuente de

origen

10

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


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

4 7


Logo Escuela

Usuarios



8

Home

AlumnosRecursos Duoc

Preguntas Frecuentes

Vínculos Utiles

Carreras

DocentesRecursos Duoc


Vínculos Utiles

Carreras

AdministrativosRecursos Duoc


Vínculos Utiles

Carreras

Alumnos

Opción menú contextual

Los contenidos de los usuarios serán

principalmente recursos e información

relevante a los cuales pueden acceder

desde solo una página.

En el menú lateral se podrá accesar

directamente al contenido requerido

La empresa tendrá una estructura por

separado

0

9

2

Recursos Duoc

Lipsum 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, congue non, luctus et, volutpat vel, nulla. Praesent tempus rhoncus?

9

Archivo preguntas frecuentes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis eros velit,





Carreras ElementosTí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.

11

II

13

Descripción de Carrera: Elemento párrafo de texto que se

centra en la visión y alcances de cada Carrera

12Menú opcional: Presenta tanto en la Carrera como en la

Carrera-Sede

14Noticias de la Carrera

15 Galería


Logo Escuela

Homepage Carreras


Diseño Gráfico Carreras que Imparte la Escuela

Malla Curricular Extensió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.

Noticias


Galería Online

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

Proyectos Sedes


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

11

12

13

15

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 extractadas de las Carreras. Contiene un menú para ir a una página que ordena las noticias por Sede

Galería extractadas de las Carreras

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.


Logo Escuela

Homepage Carreras


Diseño Gráfico San Carlos de Apoquindo

Sedes que imparten Diseño Gráfico

Cuerpo Docente Proyectos


EventosGalería NoticiasDirección

Foto Sede

Admisión

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

Ver Noticias por Sede

Galería Online

11

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.

12

13

14

15


Logo Escuela

Galería Sede


Diseño Gráfico San Carlos de Apoquindo

Sedes que imparten Diseño Gráfico

Cuerpo Docente Proyectos EventosGalería NoticiasDirección Admisión

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

Galería Online

15

PrototiposMockup

III

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.

! 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

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

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




! 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

Wireframes escuela

Documents

Transcript of Wireframes escuela