Título	Aura: Skin wiki Casiopea
Tipo de Proyecto	Proyecto de Titulación
Palabras Clave	skin
Período	2024-2024
Asignatura	Taller de Titulación de Diseño
Del Curso	Taller Casiopea
Carreras	Diseño
Alumno(s)	Francisca Ortega
Profesor	Herbert Spencer
URL	https://panchyortega.github.io/mockups-aurora/

Semestre 2

Aura: Skin wiki Casiopea/Semestre 2 - Registro Componentes

Tareas Generales

Proyecciones Segundo Semestre

Carta Gantt

Mes	Agosto				Septiembre				Octubre					Noviembre				Dic
Semana	01	02	03	04	05	06	07	08	09	10	11	12	13	14	15	16	17	18	19
Lunes	05	12	19	26	02	09	16	23	30	07	14	21	28	04	11	18	25	02	09
Organización - Inicio del proyecto
Sistema de Diseño: Átomos
Sistema de Diseño: Moléculas y Organismos
Sistema de Diseño: Publicar en Figma Community
Código: Realizar un Estudio de Distintas Skins
Código: Construir los Átomos, Moléculas y Organísmos
Código: Implementación del Código
Distintos Procesos de Validación
Proceso de Publicación del Proyecto*
Documentación (escrita y visual) y Entrega de Título

Semestre 1

Introducción

Este proyecto se enmarca dentro del Taller de Titulación de Diseño 2024, Taller Casiopea, y tiene como objetivo principal la creación de una nueva skin para la Wiki Casiopea.

Objetivos

Objetivo general

Mejorar la imagen y experiencia de la wiki Casiopea, mediante el diseño, desarrollo e implementación de una nueva skin.

Objetivos específicos

Establecer una nueva imagen que, a través de un lenguaje gráfico consistente, refleje los valores de la Escuela de Arquitectura y Diseño y de Casiopea, que evoque un sentido de pertenencia y modernidad a la wiki.
Analizar patrones de diseño que aseguren la accesibilidad para todas las personas.
Diseñar un sistema de diseño en Figma, tomando en cuenta todos los componentes necesarios y sus microinteracciones correspondientes, que vaya acorde a la nueva imagen.
Publicar el sistema de diseño en Figma Community con la documentación necesaria para hacerlo accesible a todas las personas.
Familiarizarse con los lenguajes de programación y el proceso de implementación de una skin en MediaWiki para el desarrollo de la skin

Investigación

Páginas relacionadas

Insights que se rescataron de la investigación

Se realizaron encuestas y entrevistas tanto a docentes o estudiantes de la e[ad], de las cuales se rescatan los siguientes resultados pertinentes para el proyecto.

Apariencia como barrera para el uso

Se le preguntó a 60 estudiantes de la E[ad] sobre su opinión ante la afirmación “la apariencia de la wiki facilita su uso”, a lo que 25 de ellos respondieron en desacuerdo, y 13 se mantuvieron neutrales al respecto.

Página de inicio

En una entrevista, un profesor afirmó lo siguiente: “...como que no entiendo a qué contenido puedo acceder mediante la Wiki (...) la página de portada es como un listado eterno de cosas que tú puedes acceder”.

Mientras que otro docente nos contaba “...la siento como un mundo aparte (...) Como que me da una falsa sensación como de comunidad” refiriéndose a la wiki y página de inicio.

Diagramación de las páginas

Al preguntar cuál creía que fuese el problema con el diseño de Casiopea, una estudiante nos contó que “tiene que ver con el diseño. (...) más que el diseño color, el diseño de la manera en que está emplazada la página”.

Navegación

Un estudiante nos expresó su problema al navegar y encontrar las páginas que busca en la wiki. Nos decía que “Que sea más fácil encontrar las cosas, (...) Quizás que esté dividido por años, (...) que esté todo direccionado más sencillo”.

Imagen de la wiki

Al preguntarle a los alumnos qué opinaban sobre la imagen de la wiki, las opiniones fueron variadas. Algunos afirmaban que les gustaba la imagen que tenía, que la hace ver “clásica y elegante”, refiriéndose al uso de las tipografías. Aunque otros opinaban que, por esto mismo, se veía desactualizada.

Hipótesis e implicancias para el diseño en base a la investigación realizada

Hipótesis sobre la legibilidad

Se cree que al mejorar la legibilidad de los textos, los usuarios serán más propoensos a leer instrucciones y navegar por la página con mayor claridad, pudiendo aprender o solucionar problemas más fácilmente, disminuyendo las frustraciones que puedan surgir.

Hipótesis sobre la navegación

Se plantea que mejorar la diagramación de las páginas y la presentación de los listados incrementará la facilidad de navegación del sitio web. Esto se debe a que una estructura más clara y organizada permitirá a los usuarios encontrar información de manera más rápida y eficiente.

Hipótesis sobre la imagen de la página

Se plantea que la percepción de la imagen de Casiopea afecta la experiencia de los nuevos usuarios. Si la interfaz se percibe como desactualizada, es probable que los usuarios experimenten ansiedad debido a preconcepciones negativas, lo cual dificultará el aprendizaje y generará emociones adversas antes de familiarizarse con el uso del sitio. Por tanto, es crucial que la nueva imagen transmita modernidad para atraer a los usuarios y reducir su resistencia al uso del sitio.

Fundamento

Necesidad de una nueva skin

La creación de una nueva skin para la wiki Casiopea presenta una necesidad para la escuela y su cultura. En primer lugar, al desarrollar una skin propia, ganamos autonomía respecto a skins preexistentes, lo que nos permite mayor libertad de establecer una imagen que refleje la identidad y valores de nuestra escuela, y poder modificarla si en un futuro es requerido. Esto no solo fortalece el sentido de pertenencia de los usuarios de la e[ad] a través de la relación visual que se establece, sino que también crea un vínculo emocional más sólido con la plataforma.

Además, la Wiki Casiopea es un repositorio de la historia de nuestra escuela. Es crucial no sólo preservarla, sino también continuar documentando las actividades para las generaciones que vienen. Para lograr esto, es esencial que los nuevos usuarios tengan una percepción positiva de la wiki, lo que fomentará una actitud favorable hacia su uso. Una imagen moderna y más atractiva haría que los usuarios estén más dispuestos a interactuar con la plataforma, mejorando, a su vez, la calidad de la documentación realizada. Esto asegura que las actividades y logros de nuestra escuela se preserven de manera abierta y accesible para todos.

Aura

El aura es una cualidad intangible que rodea a los seres, y en el arte se entiende como aquello que confiere a una obra su carácter único. A través del diseño de la nueva skin, se busca otorgar un sentido distintivo a la wiki mediante el diseño visual. Además, podemos relacionarlo con el nombre "Aurora" debido a su similitud fonética y su origen griego, que significa "amanecer". Se propone que la nueva skin se presente como un cambio, una nueva luz para la wiki. Asimismo, se asocia con la aurora en un contexto astrológico, vinculándola con Casiopea como constelación.

Desarrollo del proyecto en Título 1

Registro de los avances

Archivos

Entrega Título 1

Proyecciones para Título 2

Etapas del proyecto

Diseño

La realización de este proyecto consta de distintas fases. En primer lugar, se debe asegurar un diseño legible, que cumpla con las normas de accesibilidad. Es fundamental tener cuidado al definir los distintos colores, estilos de texto y al estructurar la página para asegurar una buena lectura y presentación del contenido.

A continuación, se diseñarán los componentes y el sistema de diseño en Figma y se subirán a Figma Community para asegurar que todos los usuarios tengan acceso y puedan colaborar o utilizarlo como referencia.

Cosas a trabajar en esta etapa:

Estructura de la página
Legibilidad
1. Estilos de texto
2. Escalas y jerarquía
3. Tablas
4. Listas
Imágenes
1. Fotos grandes, galerías, etc
Componentes
1. Imágenes
  1. Galerías
  2. Miniaturas
  3. Imágenes en grande
  4. Etc.
2. Textos
  1. Botones
  2. Checklists
  3. Chips
  4. Selección múltiple
  5. Text fields
  6. Etc.
3. Otros componentes
Wireframing (en conjunto con Fauve y Scarleth)
Microinteracciones

Desarrollo

Posteriormente, el código se desarrollará en Visual Studio Code, utilizando LESS y Mustache. Este código se mantendrá en un repositorio en GitHub, permitiendo que el proyecto sea open source. Esta decisión facilita que cualquier alumno o profesor pueda continuar el trabajo en el futuro, promoviendo la sostenibilidad y evolución del proyecto.

Documentación

Ambas fases implican una documentación precisa en Figma, GitHub y la propia wiki. Esta documentación permite que futuros colaboradores comprendan el sistema y puedan contribuir al proyecto fácilmente.

Cronograma segundo semestre