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
Fuentes: Atlas de Tradiciones Venezolanas, 3ra edición, Editado por: Fundación Bigott y El Nacional. / www.Google.com
Signos gráficos Yanomami
Pintura YanomamiSobre fique
Sellos E´ñepa
CONCEPTO GRÁFICO ELEMENTOS GRÁFICOS Casos de estudio
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
CONCEPTO GRÁFICO ELEMENTOS GRÁFICOS Casos de estudio
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
Fuentes: Atlas de Tradiciones Venezolanas, 3ra edición, Editado por: Fundación Bigott y El Nacional. / www.Google.com
CONCEPTO GRÁFICO ELEMENTOS GRÁFICOS Casos de estudio
Mochilas tejidas por artesanos Wayuu,
hechos con lana acrílica.
Fuentes: Atlas de Tradiciones Venezolanas, 3ra edición, Editado por: Fundación Bigott y El Nacional. / www.Google.com
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/
Fuente: https://canaimagnulinux.mybalsamiq.com/projects/sitiowebprincipal/
Fuente: https://canaimagnulinux.mybalsamiq.com/projects/sitiowebprincipal/
Fuente: https://canaimagnulinux.mybalsamiq.com/projects/sitiowebprincipal/
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
ANÁLISISCOMPOSITIVO
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
ANÁLISISCOMPOSITIVO
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.
ANÁLISISCOMPOSITIVO
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
ANÁLISISCOMPOSITIVO
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
ANÁLISISCOMPOSITIVO
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