Memoria descriptiva aplicada el rediseño del sitio web Canaima GNU/Linux

REDISEÑO SITIO WEB CANAIMA GNU/LINUXMEMORIA DESCRIPTIVA

PLANTEAMIENTO DEL PROBLEMASe requiere mejorar drásticamente este recurso para que sea más intuitivo, fácil de navegar, con un criterio de diseño definido e unificado, que contenga información practica y pertinente al publico en general.

Esquematizar y jerarquizar el lenguaje de publicación de mayor a menor importancia.

Diseñar un concepto gráfico unificado estableciendo reglas para el uso de colores, tipografía e imágenes.

Diseñar un lenguaje pictográfico y relacionarlo directamente con términos específicos.

Implementar la usabilidad como herramienta de navegación.

OBJETIVOS

Determinar tamaños adaptables para cualquier dispositivo para una óptima legibilidad.

El diseño debe ser limpio y directo.

Dirigido a técnicos desarrolladores, usuariosde sistema, estudiantes y comunidades en general.

Aplicar normas de usabilidad web.

DETERMINANTES DE DISEÑO

En este caso para el diseño del sitio se ha determinado mezclar la parte artística y comunicacional de forma ornamental de todas las poblaciones indígenas de nuestro país, resaltando a las poblaciones Pemón (habitantes del Parque Nacional Canaima), Ye'kuana (Makiritare), Wayuu y Yanomami; con la parte minimalista y moderna que se refleja actualmente en la tendencia de diseño referente a la tecnología.

Para ello se ha partido desde los elementos gráficos presentes en la artesanía, vestimenta y petroglifos de comunicación presentes en estas etnias indígenas para tomar de ellos signos comunicacionales que permitan informar sobre las diferentes secciones y publicaciones de este portal.

CONCEPTO GRÁFICO

CONCEPTO GRÁFICO

Extraído de la serie de libros Vive la Historia de Venezuela, tomo 1, Las Culturas Originarias, página 71, Año 2008, editorial Santillana. Fuente: Ministerio del Poder Popular para los Pueblos Indígenas, República Bolivariana de Venezuela.

Mapa con todas las etnias indígenas de Venezuela

CONCEPTO GRÁFICO

Esterilla y una wopao bandeja de cestería Pemón.

ELEMENTOS GRÁFICOS Casos de estudio

Fuentes: Atlas de Tradiciones Venezolanas, 3ra edición, Editado por: Fundación Bigott y El Nacional. / www.Google.com

Medallas talladas por artistas Pemón

Tirite Guapa panareCultura E´ñepá

Toro ToroCultura Warao

Cestas de carga Yanomami con Choto

CONCEPTO GRÁFICO ELEMENTOS GRÁFICOS Casos de estudio

Cesta de carga Yanomami con Choto


Signos gráficos Yanomami

Pintura YanomamiSobre fique

Sellos E´ñepa


Fuentes: Atlas de Tradiciones Venezolanas, 3ra edición, Editado por: Fundación Bigott y El Nacional.

Objetos producidos para decorar el cuerpo, con madera de jobo, utilizando la técnica de tallado

de grafismos geométricos y figuras de animales


Cestas tejidas por artesanos Ye'kuanas.

Cestas Ye'kuanas hechas con fibra de mamure

Petacas Ye'kuanas

Banco zoomórfico Ye'kuana hecho de madera dura

Bastón chamánico Ye'kuana



Mochilas tejidas por artesanos Wayuu,

hechos con lana acrílica.


Capotera Wayuu. Faja masculina Wayuu

Tapiz Wayuu.

Telar, alpargatas y capelladas wayuu.

Corona Wayuu.

Como primer paso se procede a realizar el esquema principal de navegación del sitio, jerarquizando las portadas principales, sub-portadas y secciones informativas, de manera muy esquematizada y fácil de identificar.

PROCESO DE DISEÑO

El rediseño comienza a plasmarse en las portadas principales como punto de partida para luego aplicarse en el resto de las secciones informativas.

Portadas principales:

Inicio, Canaima, Soluciones, Soporte/aprendizaje, Descargas, Comunidad y Novedades.

Fuente: http://goo.gl/9Jby0P

Como punto de partida se ha tomado predominar el color verde de fondo, resaltando ornamentos de la etnia Ye'kuana.

Fue descartada ya que se hace poco adaptable a la usabilidad de todos los navegadores; de igual manera por no reflejar y resaltar al resto de las culturas indígenas del país.

Al hacer esta propuesta se pasaron por alto las etapas de desarrollo, siguiendo con errores de navegación sin justificar Un concepto gráfico global.

PROCESO DE DISEÑO.Primera propuesta

Para optimizar aún más la diagramación y permitir una mejor adaptabilidad a medios de usabilidad se procede a plantear unos nuevos (Sketch) o bocetos a mano alzada donde la información se sigue planteando de forma jerarquizada, con pictogramas que identifican los puntos resaltantes de cada sección, destacando menús de usabilidad, imágenes y texto.

PROCESO DE DISEÑO. (Sketch)

Una vez establecida esta jerarquía y disposición de información, se procede a desarrollar el diseño ahora con (Wireframes) para corregir errores de usabilidad y navegación.

PROCESO DE DISEÑO. (Wireframes)

Basado en el concepto gráfico anterior,que refleja “tecnología” pero contrastado con el “diseño artesanal”, “ecológico” característico de nuestros aborígenes, se procede a la construcción semiótica de los signos gráficos detonantes de la navegación del sitio, basados en sus patrones artísticos de comunicación.

PROCESO DE DISEÑO. (Pictogramas)

Una vez establecida la maquetación final, junto con la pictografía a utilizar, se procede a establecer reglas de color, tipografías e imágenes a través del (Mockup) para el desarrollo final de la propuesta.

PROCESO DE DISEÑO. (Mockup)

Fuente: https://canaimagnulinux.mybalsamiq.com/projects/sitiowebprincipal/

¿Cual es el flujo de trabajo?

Bocetos(Sketch) wireframes mock-up Prototype

ESQUEMA DE COLOR

ANÁLISISCOMPOSITIVO

ANÁLISIS COMPOSITIVO

Se establece esta paleta de colores partiendo de las fotografías ubicadas en la parte superior, sin descartar los tonos marrones para implementarlos en la usabilidad.

ESQUEMA DE COLOR

ANÁLISIS COMPOSITIVOESQUEMA DE COLOR

Para manifestar el concepto gráfico se cumple el objetivo de aplicar como colores predominantes los tonos verde, para reflejar el verdadero colorido del parque.

Existen timbres tonales de tonos tierra, como el marrón y el beige para diferenciar la identidad de cada pantalla.

ANÁLISIS

ESQUEMA DE COLORCOMPOSITIVO

ANÁLISIS

ESQUEMA DE COLOR

Caso contrario a la hora de implementar la usabilidad para facilitar la navegación en caso de discapacidad, se presenta como predominante el color marrón.

Existen timbres tonales de color verde para no perder la identidad y respetar la manifestación del concepto gráfico.

COMPOSITIVO

PORTADAS APLICANDO EL VALIDADOR DE USABILIDAD DE COLORFuente: http://juicystudio.com/

ANÁLISIS

PALETA DE COLORCOMPOSITIVO

ANÁLISIS

ELEMENTOS COMPOSITIVOS APLICADOS AL COLOR:

COMPOSITIVO

Armonía por contraste entre colores fríos entre sí y de igual

manera entre colores fríos con neutros para una mayor legibilidad

de textos y para resaltar cada figura de su fondo respectivo.

Fríos / fríos

Fríos / Neutros

ANÁLISIS

PALETA DE COLORCOMPOSITIVO

TIPOGRAFÍA

ANÁLISIS COMPOSITIVOTIPOGRAFÍA

Se ha establecido para el diseño de este portal el uso de 2 fuentes tipográficas.

Titillium WebPara títulos, subtítulos, notas importantes y pigtografía.

QWERTYUIOASDFGHJKLÑZXCVBNM

1234567890`+´Ç,.-_<>{}!”·$%&/()=?¿/*-+

qwertyuiopasdfghjklñzxcvbnm

AnaheimPara párrafos de textos informativos y de contenido.

QWERTYUIOASDFGHJKLÑZXCVBNM

1234567890`+´Ç,.-_<>{}!”·$%&/()=?¿/*-+

qwertyuiopasdfghjklñzxcvbnm

Por sus similitudes entre ellas y con la pigtografía propuesta gracias a sus trazos rectos y curvos, refuerzan al concepto gráfico establecido (fusionar la parte artesanal con la tecnología).

Fuente: http://www.google.com/fonts

ANÁLISIS COMPOSITIVOTIPOGRAFÍA

35 puntos

Para los títulos se ha establecido un tamaño de

15 puntos

Para los párrafos se ha establecido un tamaño de


DISEÑO DE PIGTOGRAMAS

ANÁLISIS COMPOSITIVODISEÑO DE PIGTOGRAMASInspirados en los sellos y artesanías indígenas anteriormente mencionadas y explicadas se diseñan los diferentes pictogramas identificadores de los servicios informativos presentes en el sitio web.

ANÁLISIS COMPOSITIVOPIGTOGRAFÍA PROPUESTA


APLICADO A LA FORMA

ANÁLISIS

APLICADO A LA FORMAFIGURA - FONDO

COMPOSITIVO

Para resaltar la información más importante de cada portada se ha

implementado el uso de una figura principal donde se resalte

la presencia de elementos indígenas directamente

relacionado con el contenido de cada una de ellas, para ello se

estable el criterio de figura fondo.

FONDOS

FIGURAS

Para resaltar la información más importante de cada contenido se ha implementado el uso de una

figura pictórica donde se resalte la presencia de elementos

indígenas directamente relacionado con el contenido de cada una de ellas, para ello se

estable el criterio de figura fondo.


APLICADO A LA PERCEPCIÓN

ANÁLISIS

ELEMENTOS DE PERCEPCIÓN EQUILIBRIO

COMPOSITIVO

Según el orden jerárquico que posee la información de cada pantalla se establece un equilibro axial, donde se distribuye la información de mayor a menor importancia en forma descendente.

ANÁLISIS

ELEMENTOS DE PERCEPCIÓN ASIMETRÍA

COMPOSITIVO

En todas las pantallas está presente la asimetría al dividirlas verticalmente, para crear dinamismo pero manteniendo el orden y la modulación.

AsimetríaAsimetría

Asimetría


APLICADO A LOS CRITERIOS DE COMPOSICIÓN

ANÁLISIS

ELEMENTOS COMPOSITIVOSTEXTURA

COMPOSITIVO

Para crear dinamismo en el fondo de las imágenes principales de cada portada se ha creado una textura inspirada en los signos indígenas anteriormente señalados.

ANÁLISIS

ELEMENTOS COMPOSITIVOSRITMO ASCENDENTE

COMPOSITIVO

Para crear dinamismo en la composición se denota ritmo ascendente de izquierda a derecha, para reflejar eficiencia y progresividad, manifestando el concepto gráfico, antes descrito.

ANÁLISIS

MODULACIÓN

COMPOSITIVO

La modulación consiste en mantener una retícula de

rectángulos equitativamente iguales para distribuir la

información en 1, 2 y 3 centros de interés dentro de cada pantalla.

Modulación

ELEMENTOS COMPOSITIVOS


CONCLUSIONES

CONCLUSIONES

Se ha esquematizado la información de mayor a menor importancia, distribuyendo los pesos visuales de forma equitativa mediante la modulación.

Se ha establecido un concepto gráfico integral, donde se mezcla el factor humano junto a la tecnología como herramientas de comunicación de forma simple y directa. Manifestado en criterios compositivos claros y de fácil implementación, accesible a todo publico.

Se ha determinado diseñar un lenguaje pictográfico tomado de los signos comunicaciones indígenas, para esquematizar y resaltar los contenidos dentro del sitio web.

Se ha tomado y comprobado un esquema de navegación, textos y colores óptimos para la correcta usabilidad de todos los usuarios.

RECOMENDACIONES

De respetar todos los criterios de diseño establecidos, el proyecto cuenta con una identidad unificada, sustentada y comprobada.

Por lo que se recomienda mantener la aplicación de los mismos para todos los proyectos relacionados.

Lcdo. Maximiliano [email protected]/maximilianovilchez

LICENCIA

Memoria descriptiva para el rediseño del sitio web Canaima GNU/linux by Maximiliano Vilchez is licensed under a Creative Commons Reconocimiento-CompartirIgual 3.0 Venezuela License. Creado a partir de la obra en @maxudes.Para ver una copia de esta licencia, visite http://creativecommons.org/licenses/by-sa/3.0/ve/deed.es_ES

RECONOCIMIENTO-COMPARTIR IGUAL 3.0 VENEZUELA

Memoria descriptiva aplicada el rediseño del sitio web Canaima GNU/Linux

Design

Transcript of Memoria descriptiva aplicada el rediseño del sitio web Canaima GNU/Linux