Diseño Sitio Alumnos Estorninos

De Casiopea
Revisión del 21:55 27 ago 2010 de Paulamancilla (discusión | contribuciones) (Personas y Escenarios)
(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)




Título
Palabras ClaveProyecto, Diseño Gráfico, Alumnos, Estorninos, Taller de Construcción, 2010
Período2010-2010
CarrerasDiseño Gráfico
Alumno(s)Javiera Burgos, Paula Mancilla
ProfesorHerbert Spencer

Estorninos en vuelo

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.


Mapa de Navegación

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


Wireframes

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
Nueva versión home sitio estorninos
Espacio publicación en el Muro

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;
}



Personas y Escenarios Primera Versión

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.

Personas y Escenarios Segunda Versión

Introducción

  • Estorninos en vuelo, sitio para alumnos e[ad]


  • Pruebas de Usuario

Bienvenido, este es un espacio de pruebas del proyecto “Estorninos en vuelo” que pretende evaluar la navegación del sitio pensado para los alumnos de la escuela e[ad].

Hemos dispuesto tareas especificas para realizar. Cada tarea presenta un escenario y persona ficticia, por esto necesitamos que se sitúe en el lugar de la persona con las necesidades que ésta podría presentar.

Es importante resaltar que las fichas son maquetas en escala de grises y no representan necesariamente el diseño final del sitio.

Si tiene dudas acerca de la tarea a realizar o comentarios en cada página tiene la posibilidad de comentar en las páginas siguientes.

Agradecemos su colaboración.


  • Tarea uno:Buscar información para proceso de intercambio.
  • Tarea dos:Publicar en el muro una venta de productos.
  • Tarea tres:Comentar un tema de arquitectura en foro.

Tarea uno

Buscar información para proceso de intercambio

  1. Nombre: Camila Martin Mancilla
  2. Edad: 20 años
  3. Ocupación: Estudiante de Diseño Industrial en Curitiba, Brazil
  4. Email: cami.88@gmail.com
  5. Sitio web: www.cmartin.br
  6. Tipo de Usuario: Usuario externo del sitio


  • Escenario

Camila es estudiante de diseño industrial de la PUCPR en Curitiba, Brazil y quiere irse de intercambio a Chile. Ha estado buscando información para este proceso en distintos sitios de universidades chilenas y se ha encontrado con el sitio de alumnos de la e[ad] “estorninos”.

  • Tarea

Encontrar la sección de intercambio en el sitio y enviar un email para hacer una consulta acerca del proceso.


  • Wireframes de la Tarea uno


  • Observaciones realizadas por el público

El menú en "infórmate de" es poco visible y como no se encuentra a primera vista, tiende a relacionarse la sección de "intercambio" con "mundo".


El contacto de la sección de "intercambio" podría ser más accesible y no encontrarse al final del sitio.

Tarea dos

Comentar un tema de arquitectura en foro

  1. Nombre: Alejandra San Martín
  2. Edad: 18 años
  3. Ocupación: Estudiante de arquitectura en la e[ad]
  4. Email: ale.sm@gmail.com
  5. Tipo de Usuario: Usuario nuevo en el sitio
  6. Nombre de usuario: Alejandra.sm
  7. Contraseña: 1234


  • Escenario

Alejandra es alumna de primer año de arquitectura de la e[ad]. Se ha informado de que existe un foro en el sitio “Estorninos” para los alumnos y quiere comentar una publicación de su curso.

  • Tarea

Acceder con la cuenta de usuario y comentar en el foro, en la sección de arquitectura en el curso de primer año de arquitectura 2010.

  • Wireframes Tarea dos


  • Observaciones realizadas por el público

Las etiquetas de la sección "foro" no son muy claras, alguien que no conozca las abreviaciones (ARQ, DI, DG, etc) podría confundirse.

El botón "responder en este tema" podría estar en la parte superior del sitio, no sólo al final de los posts.

Tarea tres

Publicar en el muro una venta de productos

  1. Nombre: Gabriela Zamorano Araya
  2. Edad: 22 años
  3. Ocupación: Estudiante de Diseño Industrial en la e[ad]
  4. Teléfono: 8 - 3072148
  5. Email: gaby.zam@gmail.com
  6. Tipo de Usuario: Usuario regular del sitio


  • Escenario

Gabriela se encuentra cursando cuarto año de la carrera de diseño industrial en la e[ad]. Actualmente está iniciando su propio negocio de accesorios y tejidos junto a dos compañeras 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.

  • Tarea

En la sección “muro” del sitio publicar un aviso que contenga fotografía y una breve descripción de los productos, colocando información de contacto como email y teléfono.

  • Wireframes de la Tarea tres
  • Observaciones realizadas por el público

Ver qué campos son y no son obligatorios para publicar en el muro. Además las categorías de las publicaciones podrían ir creciendo de acuerdo a cómo se vaya modelando la página en el tiempo. ¿Sería posible que los usuarios pudiesen proponer más categorías?.