Analisis sitio web UPLA
| Título | Analisis y rediseño sitio web UPLA |
|---|---|
| Tipo de Proyecto | Proyecto de Curso |
| Palabras Clave | sitio web universidad |
| Período | 2014-2014 |
| Asignatura | Construcción de Diseño Gráfico 4, |
| Del Curso | Construcción 4º DG 2014 |
| Carreras | Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | Javiera Escudero, Mauro Villena |
| Profesor | Katherine Exss |
| URL | http://www.upla.cl/inicio/ |
La Universidad de Playa Ancha
La Universidad de Playa Ancha es una corporación de derecho público, autónoma, laica, con personalidad jurídica y patrimonio propio, ubicada en la ciudad de Valparaíso, desarrollando actividades en esta ciudad y San Felipe. Realiza su misión en los ámbitos propios de su competencia de conformidad con su Plan de Desarrollo Estratégico Institucional, en formación de postgrado, profesionales y técnicos de nivel universitario, la investigación y vinculación con el medio, comprometida con el desarrollo social, económico y cultural de la región de Valparaíso y el país.
Archivo:Mapa de navegación UPLA1.pdf
Card Sorting
El objetivo principal de la técnica del Card Sorting (Ordenación de tarjetas) es generar un árbol de categorías del sitio web que estamos analisando. Se le pide a los usuarios que las ordenen en grupos que tengan algún sentido para ellos y etiqueten o pongan nombre a estos grupos.
.JPG)
.JPG)
.JPG)
Para poder ver de mejor manera el proceso del Card Sorting quisimos hacer un video que muestra la interaccion de las personas con los contenidos que se fueron mostrando
Observacion
1. Se observo que a ratos resultaba confuso el orden de los contenidos ya que algunos se desconocia su significado ademas de la gran cantidad de contenidos que debian ordenar.
2. Gran parte de los conceptos fuerone eliminados por los participantes ya que consideraban que no aportaban en nada al sitio web.
3. Se solia confundir conceptos como "Acreditacion" con los beneficios o modalidades de pago que pueda entregar la Universidad a sus alumnos.
4. Al finalizar la Actividad nos dimos cuenta que en los grupos que habian propuesto habia una mezcla de conceptos y en algunos no existia una buena jerarquizacion.
Resultado del Card Sorting
De 131 trajetas, 25 fueron no agrupadas
- Home
- Acreditación
- Admisión
- Rectoría
- Nuestra universidad
- Vías de admisión
- Nosotros
- Video promocional
- Programa
- Nuestra misión
- Universidad y transparencia
- Conócenos
- Estados financieros
- Contacto
- Carreras
- Postulaciones online
- Calendario académico 2014
- Admisión especial
- Acceso a convenio UPLA
- Principales oficinas
- Egresados
- Nuevo egresado
- Ceremonias
- Unidad de mejoramiento docente
- Vínculos e intercambios
- Portal de acceso
- Acciones
- Relaciones internacionales
- Acreditación de carreras
- Convenios
- Aranceles y créditos
- Acreditación institucional
- Becas y créditos
- Beneficios
- Becas Concursos Pasantías
- Recursos en línea
- Adquisición bibliográfica
- Calendario académico
- Biblioteca
- Verificación de certificados
- E - Aula
- Portal del estudiante
- Activar cuenta
- Correo del estudiante
- Correo institucional
- Educación virtual
- Biblioteca virtual
- Pregrado
- Pregrado campus Valparaíso
- Posgrado primer semestre
- Vice rectoría administración
- Coordinadores de pregrado
- Programa Postgrado
- Investgación y postgrado
- Carreras profesionales
- Escuela postgrado
- Carreras vespertinas
- Programa postgrado
- Facultades y departamentos
- Cursos y carreras
- Equipo
- Titulación y graduación
- Carreras técnicas
- Campus San Felipe
- Dirección general de postgrado
- Docencia de pregrado
- Directorio Campus San Felipe
- Doctorado
- El Campus
- Centro de estudios avanzados
- Estudios innovación curricular y desarrollo docente
- Postgrado primer semestre
- Diplomados y post-título
- Magister
- Pregrado campus San Felipe
- Títulos y grados
- Extras
- Actas del consejo
- Emplazamiento
- Servicios
- Gestión institucional
- Organigrama
- Filosofía corporativa
- Objetivos
- Espacios universitarios
- Experiencia
- Junta directiva
- Coordinadores docentes
- Vice rectoría académica
- Personal
- Planificación, desarrollo y calidad
- Reseña histórica
- Vice rectoría de investigación
Al ver el resultado y la observacion del Card Sorting se penso en la nueva propuesta de navegacion del sitio web con una reduccion considerable del contenido y una nueva propuesta de jerarquisacion.
Rediseño sitio web UPLA
Arquitectura de la informacion
La Arquitectura de la Informacion la utilizamos para organizar, disponer, estructurar y jerarquizar la información. Es un proceso transversal, que se da a lo largo de todo el diseño del sitio para asegurarse de que los objetivos de su producción y del desarrollo de la interfaz se cumplan de manera efectiva.
Para poder rediseñar la interfaz del sitio web de la UPLA fue necesario realizar el suguiente Mapa que permitiera a los Usuarios poder encontrar mejor los contenidos.
Wireframes
Los wireframes son guias visuales que representa la estructura de un sitio web. El wireframe esquematiza el diseño de página y ordenamiento del contenido, incluyendo elementos de la interfaz y sistemas de navegación pa ver en relacion y saber como funcionan en conjunto.
A continuacion se presentan las distintas propuestas de Wireframes de las secciones que se escogieron para rediseñar, estas son.
- Home
- Admision
- Biblioteca
- Carreras pagina de Inicio
- Carreras pagina Interior
Home
Primer Wireframes del rediseño del Home
Maqueta final del Home
.png)
Admision
- Admisión.png
Primera maqueta de la seccion Admision del sitio web UPLA
Segunda maqueta de la seccion Admision del sitio web UPLA
Carreras pagina Inicio
Primer wireframe de la seccion Carreras
Wireframe final del Inicio de Carreras
Carreras pagina Interior
Primera version de wireframe
Version final de wireframe
.png)
Biblioteca
Primera Maqueta de la seccion Biblioteca del sitio web UPLA
Maqueta final de Biblioteca
Rediseño de Interfaz
Datos Tecnicos
El rediseño de interfaz del sitio web es la ultima etapa de este proceso, es el diseño visual de una reorganizacion de contenidos y la propuesta grafica a esta nueva disposicion de los contenidos. En el caso del sitio de la Universidad de Playa Ancha se modifico gran parte de los elementos graficos, ya sea, paleta de colores, tipografica, titulos, imagenes, etc.
Paleta de colores
La Paleta de colores se escogio segun los colores del logotipo de la Universidad, en base a esto se escogieron los demas colores.
Los colores usados fueron 5 los cuales se repiten en la Home tanto como en las demas paginas rediseñadas.
- Blanco: #FFFFFF
- Gris: #DDDDDD
- Azul claro: #0099CC
- Azul oscuro: #0079A2
- Negro: #000000
Tipografia
Proponemos tambien una nueva Familia tipografica para el sitio web, la utilizada para el rediseño es Titillium
En sus expresiones Regular, Book y Semi Bold
Book
Regular
Semi bold
Jerarquias de Titulo y texto
Dentro de las pasginas escogidas se puede apreciar los distintos tips de Titulos que existen y los distintos textos
Titulos h1: 40 pt
Unico titulo de 40pt, en la parte de Biblioteca
Titulos h2: 24 pt
Titulo de las Noticias del Home
Titulo en altas de la seccion Agenda del home
Titulos h3: 20 pt
Titulo en la pagina de Admision
Titulo en la pagina Biblioteca
Titulos en la pagina de Inicio de Carreras
Titulos h4: 16 pt
Menu del Home
Menu de la pagina Biblioteca
Titulo en la pagina Biblioteca
Texto 1: 15 pt
Texto del home de la seccion Servicios en linea
Texto de la seccion Biblioteca Quienes Somos
Texto descriptivo del perfil de las Carreras
Texto 2: 14 pt
Footer de todas las paginas del sitio
Texto 3: 13 pt
Texto de menor jerarquia, descripcion de direccion
Texto mas pequeño, definicion de Horarios seccion Biblioteca
Iconografia
Para poder mostrar la categoria de Servicios en Linea decidimos hacer iconos para representar cada seccion, estas son Biblioteca, E-Aula, Portal de Estudiante y Portal del Egresado.
Icono Biblioeca
Icono E-Aula
Icono Portal de Estudiante
Icono Portal de Egresado
Diseño de Interfaz
Despues de la eleccion de la paleta de colore y de Tipografia, la interfaz de la Home y del resto de las paginas empezaron a tomar forma y caracter grafico para terminar su estapa visual.
Home
Primera Interfaz del Home
Interfaz modificada
.png){kind=small}
Admision
Primer Diseño de la interfaz de la seccion Admision
Diseño Final de la interfaz
.png){kind=small}
Biblioteca
Primera Interfaz de la pagina interior Biblioteca del sitio web UPLA
Interfaz final
.png)
Carreras Inicio
Primera Interfaz de la pagina de Inicio de Carreras
Interfaz final
.png)
Carreras Interior
Interfaz de la pagina de Interior de Carreras
Interfaz final
.png)
