Wireframes escuela
-
Upload
jorge-barrera -
Category
Documents
-
view
257 -
download
4
description
Transcript of Wireframes escuela
WireFramesArquitectura de la Información
Desarrollo Portal Web Escuela de Diseño DuocUC
2.0Jorge Barrera
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
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.
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.
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.
-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.
! 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.
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
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
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, 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
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
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
6
Acerca de Historia Proyectos Escuela Organigrama
Logo Escuela
Noticias y Eventos
Contacto Mapa del sitio0
Pielinks Institucionales legal escuela
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 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
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 29 Julio del 2008
1 2 3 4 5
4 7
Acerca de Historia Proyectos Escuela Organigrama
Logo Escuela
Usuarios
Contacto Mapa del sitio0
Pielinks Institucionales legal escuela
8
Home
AlumnosRecursos Duoc
Preguntas Frecuentes
Vínculos Utiles
Carreras
DocentesRecursos Duoc
Preguntas Frecuentes
Vínculos Utiles
Carreras
AdministrativosRecursos Duoc
Preguntas Frecuentes
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
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
Preguntas Frecuentes
¿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,
¿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,
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
Acerca de Historia Proyectos Escuela Organigrama
Logo Escuela
Homepage Carreras
Contacto Mapa del sitio0
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
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.
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 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
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.
Acerca de Historia Proyectos Escuela Organigrama
Logo Escuela
Homepage Carreras
Contacto Mapa del sitio0
Diseño Gráfico San Carlos de Apoquindo
Sedes que imparten Diseño Gráfico
Cuerpo Docente Proyectos
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.
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 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.
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
Acerca de Historia Proyectos Escuela Organigrama
Logo Escuela
Galería Sede
Contacto Mapa del sitio0
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
! 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
Propuesta Institucional