Paula Mancilla: Diseño Sección Alumnos

De Casiopea

Proyecto Diseño Sección Alumnos

Antecedentes

Al estudiar el mapa de navegación del sitio Escuela, se observó la falta de un espacio para el alumno, el cual pudiera interactuar e informarse de lo que sucede a su alrededor, tanto dentro de la escuela como afuera.

  • Hay una ausencia de interacciones en la comunicación del sitio.
  • El sitio presenta un diseño no muy representativo. Es más bien frío y poco cercano al público.
  • El portal presenta espacios vacíos importantes en cuanto a la percepción visual.
  • Falta un grado de cercanía con el alumno, así los porcentajes de visitas subirían y el sitio sería más activo.


Mapa de navegación del sitio Ead


Archivo:Mapa de navegación general ead pmancilla.cmap.pdf


Audiencias

De acuerdo al estudio del archivo Analytics, se refleja la gran cantidad de visitas que posee el sitio de la escuela contando con distintos países, a pesar de la ausencia de idiomas. Las mayores audiencias se muestran dentro del país y en países de habla hispana, sobre todo en Sudamérica. La mayor parte de las visitas se realizan a través de Firefox con un 33,24%, siguiéndolo Explorer con un 29,64% del total de audiencia. El sitio más visitado es el portal de la Escuela

El sitio es visitado por gente que está interesada en las áreas de Arquitectura y Diseño, ya sean estudiantes y docentes de la propia escuela, como gente externa que desea informarse.


Problemáticas

Dentro de esta audiencia están los alumnos y personas interesadas en ingresar o acceder a información acerca de la escuela y de sus carreras. Esta audiencia (una audiencia más joven por lo general) requiere de un espacio en el que se pueda sentir identificado de acuerdo a las propias temáticas que necesita saber o participar de ellas en comunidad.


Perfil del Usuario

El usuario es una persona que tiene las siguientes cualidades:

  • Puede ser estudiante.
  • Puede ser estudiante de Arquitectura y Diseño de la ead o de otras universidades.
  • La edad del usuario varía entre los 17 y 25 años aprox.
  • También extiste un rango de participación de parte de los docentes, pero en su mayoría la comunidad es formada principalmente por el estudiante de la escuela.


Otros sitios de Arte

Abstract del Proyecto

Este proyecto trata de construir un espacio para los alumnos de la escuela, quienes cumplen un rol fundamental dentro de la formación de la ead. Este espacio buscaría satisfacer necesidades de manera informativa y colectiva-constructiva acerca de lo que ocurre dentro y fuera de la escuela. Llamaría a la participación de cada alumno dentro de este nuevo sitio, creando secciones de interés colectivo y personal.

Se trataría de la construcción de un sitio que tenga enlace con la ead, Amereida, Travesías y la PUCV. Este sitio se manejaría de manera independiente.


Índice de Contenidos

  1. Eventos
    1. Académicos
    2. Sociales
    3. Culturales
  2. Noticias
  3. Avisos Económicos
  4. Talleres
    1. Diseño Gráfico
      1. Enlace Wiki
      2. Proyectos
        1. Año
          1. Etapa
    2. Arquitectura
      1. Enlace Wiki
      2. Proyectos
        1. Año
          1. Etapa
    3. Diseño Industrial
      1. Enlace Wiki
      2. Proyectos
        1. Año
          1. Etapa
  5. Revista
  6. Foros
  7. Enlaces
    1. Ead
    2. Travesías
    3. Amereida
      1. Corporación Amereida
      2. Clases
    4. Wiki Casiopea
  8. Equipo
    1. Cuco
    2. Docentes

Card Sorting

De acuerdo con entrevistas a algunos alumnos, se llegó a la conclusión de que en un sitio de alumnos lo que más se buscaría serían los eventos.

card sorting

Propuestas Mapa de Navegación

1

mapa de navegación del sitio Alumnos


2

Archivo:Mapa de navegación alumnos 2.png
segundo mapa de navegación del sitio Alumnos

Wireframes

Primer Wireframe

Wireframe de la portada del sitio ead Alumnos
  • El sitio ead alumnos estará enlazado en el sitio ead, en el menú principal, lo que será un parent de la página.

El sitio constaría de:

  • Un menú principal
    • Inicio
    • CUCO
    • Talleres
    • Amereida
    • Otros Sitios
  • Sección de resgistro del usuario
  • Sección de Noticias y eventos
  • Sección de avisos económicos
    • Ventas (de cualquier índole)
    • Trabajos
    • Hospedaje (dirigido especialmente para alumnos de primer año)



  • Sección Informativa (lado derecho superior) acerca de:
    • Calendario
    • Procesos Administrativos de interés
    • Biblioteca
    • Servicios
  • Sección Foros (Hablemos en Comunidad)

En esta sección se abre el espacio de comunicación en la escuela como una red social, en los que se tocarán temas de interés de esta comunidad.

Segundo Avance Wireframes


Mapa de Navegación Escueleros ead

Archivo:Mapa de navegación Escueleros ead.png
mapa de navegación del sitio Escueleros ead

Tercer Avance Wireframes

Propuesta de Grilla del sitio Escueleros ead

El espacio se divide en 8 columnas con 20 pixeles de espacio de margen horizontal y 12 px de margen superior vertical.


Wireframe Portal Escueleros ead
  1. En el header se ubica el registro de la persona y la opción para llegar al home.
  2. El menú principal, conformado por 4 ítems.
  3. La fotografía con sus respectivos títulos relacionados con la barra superior de cada uno. Cada fotografía va cambiando cada cierto tiempo.
  4. Enlaces a otro sitios relacionados con la escuela


Wireframe Portal Escueleros ead
  1. Cada ítem del menú despliega sus subsecciones, en máximo cuatro cuadrados.
  2. Mientras la sección es escogida, la fotografía correspondiente mantiene su tamaño y el resto del contenido fotográfico disminuye en un 90%.


Sección Noticias


Interfaz

Interfaz Portal Escueleros ead
Interfaz sección escuela


Avance Interfaces

Grilla definida por 8 columnas de 100 px
Interfaz Portal Sitio Alumnos, Propuesta COES (avance)
Interfaz de la subsección CEAD, en el equipo.
Interfaz subsección CEAD, misión. Por cada subsección del CEAD, el contenido partirá en la ubicación y la subsección respectiva, a diferencia de la última subsección, la que ocupará su columna y la columna izquierda


Mapa de divs

Mapa de divs del Portal alumnos ead
Mapa de divs de la Subsección CEAD y su equipo

Personas y Escenarios

Primer Caso

Rodrigo salgado fotowiki.jpg


Nombre: Rodrigo Salgado Escanilla

Edad: 24

Ocupación: Ingeniero Informático




Descripción: Es de Santiago, siempre le ha gustado el diseño,la programación y las artes visuales. Está constantemente trabajando en su pequeña empresa de diseño creando sitios webs y navegando en internet acerca de lo que ocurre a su alrededor.


Escenario: Rodrigo necesita un diseñador o estudiante de diseño gráfico para su mini empresa, puesto que su negocio está creciendo. Decide ingresar a los espacios de diseño de distintas universidades y entre ellos accede al Portal alumnos por medio del sitio ead.

Necesita encontrar un espacio donde poder comunicar su oferta, mediante un espacio que utilice el público al cual dirigirse.

Segundo Caso

Camilamartin fotowiki.jpg


Nombre: Camila Martin Mancilla

Edad: 17 años

Ocupación: Estudiante





Descripción: Es estudiante de Cuarto Medio, posee su propio notebook y espacio para trabajar en sus quehaceres. Se mantiene siempre conectada a las redes sociales más utilizadas. Le interesan los temas artísticos y sobretodo la Arquitectura.

Escenario: Camila desea ingresar a la escuela y necesita información acerca de lo que ocurre en la escuela, y sobretodo en el ámbito de alumnos. Necesita de un lenguaje que sea amigable y cercano, el cual encuentra en el sitio Alumnos y éste le proporcionaría toda la información acerca de las carreras, el ambiente de la escuela y las actividades que normalmente realiza, hablando en un lenguaje juvenil.

Tercer Caso

Gabriela zamorano fotowiki.jpg

Nombre: Gabriela Zamorano Araya

Edad: 22 años

Ocupación: Estudiante de Diseño Industrial en la e[ad]






Descripción: Gabriela se encuentra cursando el Cuarto Año de la carrera de Diseño Industrial. Posee su propio notebook y es activa en el mundo digital.

Escenario: Actualmente está iniciando su propio negocio de accesorios y tejidos junto a dos integrantes más y desea dar a conocer sus productos. Es por esto que ella necesita encontrar un espacio donde pueda publicar y subir imágenes de lo que desea vender al público.

Nueva versión Sitio Alumnos

La nueva propuesta de diseño del sitio Alumnos se llamará Estorninos, debido a la necesidad de darle una identidad al sitio y a la comunidad que se quiere formar. El sitio va dirigido a los alumnos de la escuela, quienes somos una voz importante en la e[ad] y se tiene la necesidad de un espacio para nuestras opiniones, temas y actividades dentro y fuera de la escuela.

Argumento

Se quiere llegar a la formación de una comunidad que colabore colectivamente, de manera que vaya formando el contenido del sitio y lo haga un medio activo para su comunicación. Es por esto que llamamos al sitio "Estorninos", puesto que este tipo de aves tienen la particularidad de formar en bandadas o en comunidad, distintas figuras en su vuelo, las cuales generan un espectáculo para quien tiene el privilegio de observar.

Nuevo Mapa de Navegación

Archivo:Mapa navegación estorninos.png
Nueva versión Mapa de navegación del sitio Alumnos


Nueva Propuesta Wireframes

Wireframe del nuevo diseño del Portal Alumnos
Wireframe de actividades de la Sección Escuela







Mapa de Divs

Nuevo Mapa de divs del Portal alumnos ead


Definición de identidad

De lo estético y característico

Existen ciertos elementos que deben considerarse en cuanto a la visualización del perfil de un estudiante de la escuela. ¿Con qué elementos se siente identificado un estudiante de la e[ad]?, ¿Que caracteriza al cuerpo de la escuela?

  • El Cuerpo: Lo que surge de la unidad discreta que es dispuesta una y otra vez en un espacio, tiene vida y un movimiento fluido.
  • La Observación: Refleja el oficio en su máxima expresión. Se relaciona con el trazo y el dibujo característico de un estudiante.
  • La Palabra Poética: La póyesis, el encuentro de la acción (oficio) y la palabra.
  • Las Arenas: La levedad que refleja la unidad discreta en reunión. Trae a presencia los terrenos de la Ciudad Abierta.
  • La Fiesta: La celebración y el juego.

Estorninos

Por medio de estas aves y su particular vuelo recordamos el sentido de la unidad discreta. Las diferentes figuras que forman estas aves al volar representan el movimiento de un cuerpo, en este caso, nuestra voluntad de estudiantes en unidad.

Vuelo de estorninos

Color

Para definir los colores a utilizar en la interfaz del sitio se realiza una encuesta acerca de la imagen que se tiene de la escuela ¿Qué colores crees tú que definen a la escuela?


Resultados

El 90% de los encuestados relacionó a la escuela con el muestrario 1
El 40% de los encuestados relacionó a la escuela con el muestrario 2


A partir de esto surge la pregunta acerca de la identidad ¿Qué se quiere reflejar a través del diseño? ¿Cómo podemos unir una visión existente de la escuela con lo nuevo?. Si utilizamos la visión ya instaurada en los alumnos (basada principalmente en el sitio e[ad]) no estaríamos innovando en nuestra paleta de colores. Es por ello que a partir del segundo muestrario se trabaja en la paleta de colores.


Paleta de colores
Tonos

Interfaz

Home sitio estorninos

Avance Código

http://www.randomstudio.com/estornino/

Home Sitio


<?php get_header(); ?>
<div id="cuerpo">
<table width="282" border="0" cellspacing="4" cellpadding="5" id="tablita">
<?php if (have_posts()) : ?>

<?php $i = 0; ?>
<?php while (have_posts()) : the_post(); $i++;
	if($i%2==0) { ?>
  <tr>
    <td width="125" class="foto">FOTO</td>
    <td><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link
to <?php the_title_attribute(); ?>"><?php the_title() ?></a></td>
  </tr>
<?php } else { ?>
  <tr>
    <td width="125"><a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title() ?
></a></td>
    <td class="foto">FOTO</td>
  </tr>
<?php }
endwhile; ?>
<?php endif; ?>
</table>

</div>
<?php get_footer(); ?>


Header


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Archive
 <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> 
<!-- leave this for stats -->
<!-- Styles  -->
<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name');
 ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- Javascripts  -->
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?
>/js/jquery-1.2.6.min.js"></script>
<?php if (is_front_page()) { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.innerfade.js"></script>
<?php } ?>

<?php if (is_front_page()) { ?>
<!-- Begin slideshow scripts -->
<script type="text/javascript">
	   $(document).ready(
				function(){

					$('ul#portfolio').innerfade({
						speed: 1000,
						timeout: 5000,
						type: 'sequence',
						containerheight: '435px'
					});
			});
  	</script>
<?php } ?>
<?php wp_head(); ?>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="350" valign="top"><h1 id="logo">estorninos</h1></td>
    <td>
        <div id="menu">
        	<ul id="menu_ul">
            	<li class="menu_item"><a href="#"><span>Menu 1</span></a></li>
                <li class="menu_item"><a href="#"><span>Menu 2</span></a></li>
                <li class="menu_item"><a href="#"><span>Menu 3</span></a></li>
            </ul>
        </div>



css



body {color:#222;background:#fff url("images/fondo01.png") no-repeat fixed 
bottom left;font-family:"helvetica", Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {color:#000;font-family:"helvetica", Arial, sans-serif;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color:#ff0000;}
a {color:#ff0000;text-decoration:none;}
a:hover, a:focus {color:#222222;}

/************************* LOGO ************************************/
#logo{
	padding-left:100px;
}
/************************* MENU ************************************/
#menu{
	clear:both;
}
#menu_ul{
	list-style:none;
}
.menu_item{
	float:left;
}
.menu_item a{
	width:115px;
	height:115px;
	background-color:#ABE2EF;
	display:block;
	margin:2px;
	padding:10px;
	vertical-align:bottom;
}
.menu_item a span{
	display:block;
}

/************************* CUERPO ************************************/
#cuerpo{
	clear:both;
}
#tablita{
	margin-left:38px;
}
.foto{
	background-color:#FF9F41;
}
#tablita tr{
	height:125px;
}