Este documento describe el proceso de rediseño del sitio web de Canaima GNU/Linux. Se propone mejorar la usabilidad y navegabilidad del sitio mediante un diseño intuitivo e intuitivo basado en elementos culturales indígenas venezolanos. El proceso incluye desarrollar pictogramas inspirados en las artesanías indígenas, establecer una paleta de colores y tipografías coherentes, y aplicar principios de diseño como el equilibrio y la modulación para organizar la información. El objetivo es crear una ident

1. REDISEÑO SITIO WEB CANAIMA GNU/LINUX
MEMORIA DESCRIPTIVA

2. PLANTEAMIENTO
DEL PROBLEMA
Se 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.

3. OBJETIVOS
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.

4. DETERMINANTES DE DISEÑO
Determinar tamaños adaptables para cualquier dispositivo
para una óptima legibilidad.
El diseño debe ser limpio y directo.
Dirigido a técnicos desarrolladores, usuarios
de sistema, estudiantes y comunidades en general.
Aplicar normas de usabilidad web.

5. CONCEPTO GRÁFICO
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.

6. CONCEPTO GRÁFICO
Mapa con todas las etnias indígenas de Venezuela
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.

7. CONCEPTO GRÁFICO
ELEMENTOS GRÁFICOS
Casos de estudio
Medallas talladas
por artistas Pemón
Esterilla y una wopa
o bandeja de cestería Pemón.
Tirite Guapa panare
Cultura E´ñepá
Toro Toro
Cultura Warao
Fuentes: Atlas de Tradiciones Venezolanas, 3ra edición, Editado por: Fundación Bigott y El Nacional. / www.Google.com

8. CONCEPTO GRÁFICO
Pintura
Yanomami
Sobre fique
Cestas de carga Yanomami con Choto
ELEMENTOS GRÁFICOS
Casos de estudio
Signos
gráficos
Yanomami
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

9. CONCEPTO GRÁFICO
ELEMENTOS GRÁFICOS
Objetos producidos para decorar
el cuerpo, con madera de jobo,
utilizando la técnica de tallado
de grafismos geométricos
y figuras de animales
Sellos E´ñepa
Fuentes: Atlas de Tradiciones Venezolanas, 3ra edición, Editado por: Fundación Bigott y El Nacional.
Casos de estudio

10. CONCEPTO GRÁFICO
ELEMENTOS GRÁFICOS
Casos de estudio
Petacas Ye'kuanas
Bastón chamánico Ye'kuana
Cestas Ye'kuanas hechas con fibra de mamure
Cestas tejidas por artesanos Ye'kuanas.
Banco zoomórfico Ye'kuana hecho de madera dura
Fuentes: Atlas de Tradiciones Venezolanas, 3ra edición, Editado por: Fundación Bigott y El Nacional. / www.Google.com

11. CONCEPTO GRÁFICO
ELEMENTOS GRÁFICOS
Capotera Wayuu.
Casos de estudio
Faja masculina Wayuu
Mochilas tejidas
por artesanos Wayuu,
hechos con lana acrílica.
Telar, alpargatas
y capelladas wayuu.
Tapiz Wayuu.
Corona Wayuu.
Fuentes: Atlas de Tradiciones Venezolanas, 3ra edición, Editado por: Fundación Bigott y El Nacional. / www.Google.com

12. PROCESO DE DISEÑO
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.
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

13. PROCESO DE DISEÑO.
Primera propuesta
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.

14. PROCESO DE DISEÑO. (Sketch)
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.

15. PROCESO DE DISEÑO.
(Wireframes)
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.

16. PROCESO DE DISEÑO.
(Pictogramas)
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.

17. PROCESO DE DISEÑO.
(Mockup)
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.

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

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

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

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

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

23. ¿Cual es el flujo de trabajo?
Bocetos
(Sketch)
wireframes
mock-up
Prototype

24. ANÁLISIS
COMPOSITIVO
ESQUEMA DE COLOR

25. ANÁLISIS COMPOSITIVO
ESQUEMA DE COLOR
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.

26. ANÁLISIS COMPOSITIVO
ESQUEMA DE COLOR

27. ANÁLISIS
COMPOSITIVO
ESQUEMA 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.

28. ANÁLISIS
COMPOSITIVO
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.

29. ANÁLISIS
COMPOSITIVO
PALETA DE COLOR
PORTADAS APLICANDO
EL VALIDADOR DE USABILIDAD DE COLOR
Fuente: http:/
/juicystudio.com/

31. ANÁLISIS
COMPOSITIVO
ELEMENTOS COMPOSITIVOS
APLICADOS AL COLOR:
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

32. ANÁLISIS
COMPOSITIVO
PALETA DE COLOR
TIPOGRAFÍA

33. ANÁLISIS COMPOSITIVO
TIPOGRAFÍA
Se ha establecido para el diseño
de este portal el uso de 2 fuentes tipográficas.
Titillium Web
Para títulos, subtítulos,
notas importantes y pigtografía.
Anaheim
Para párrafos de textos
informativos y de contenido.
Fuente: http://www.google.com/fonts
QWERTYUIO
1234567890
qwertyuiop
ASDFGHJKLÑ
`+´Ç,.-_<>{}!”
asdfghjklñ
ZXCVBNM
·$%&/()=?¿/*-+
zxcvbnm
QWERTYUIOAS
DFGHJKLÑ
ZXCVBNM
1234567890
`+´Ç,.-_<>{}!”
·$%&/()=?¿/*-+
qwertyuiop
asdfghjklñ
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).

34. ANÁLISIS COMPOSITIVO
TIPOGRAFÍA
Para los títulos se ha
establecido un tamaño de
35 puntos
Para los párrafos se ha
establecido un tamaño de
15 puntos

35. ANÁLISIS
COMPOSITIVO
DISEÑO DE PIGTOGRAMAS

36. ANÁLISIS COMPOSITIVO
DISEÑO DE PIGTOGRAMAS
Inspirados 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.

37. ANÁLISIS COMPOSITIVO
PIGTOGRAFÍA PROPUESTA

38. ANÁLISIS
COMPOSITIVO
APLICADO A LA FORMA

39. ANÁLISIS
COMPOSITIVO
APLICADO A LA FORMA
FIGURA - FONDO
FIGURAS
FONDOS
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.
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.

40. ANÁLISIS
COMPOSITIVO
APLICADO A LA PERCEPCIÓN

41. ANÁLISIS
COMPOSITIVO
ELEMENTOS DE PERCEPCIÓN
EQUILIBRIO
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.

42. ANÁLISIS
COMPOSITIVO
ELEMENTOS DE PERCEPCIÓN
ASIMETRÍA
Asimetría
En todas las pantallas está
presente la asimetría al dividirlas
verticalmente, para crear
dinamismo pero manteniendo
el orden y la modulación.
Asimetría
Asimetría

43. ANÁLISIS
COMPOSITIVO
APLICADO A LOS CRITERIOS DE COMPOSICIÓN

44. ANÁLISIS
COMPOSITIVO
ELEMENTOS COMPOSITIVOS
TEXTURA
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.

45. ANÁLISIS
COMPOSITIVO
ELEMENTOS COMPOSITIVOS
RITMO ASCENDENTE
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.

46. ANÁLISIS
COMPOSITIVO
ELEMENTOS COMPOSITIVOS
MODULACIÓN
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

47. ANÁLISIS
COMPOSITIVO
CONCLUSIONES

48. 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.

49. 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.

50. Lcdo. Maximiliano Vilchez
@maxudes
Facebook.com/maximilianovilchez

51. LICENCIA
RECONOCIMIENTO-COMPARTIR IGUAL 3.0
VENEZUELA
Memoria descriptiva para el rediseño del sitio web Canaima GNU/linux by
Maximiliano Vilchez is licensed under a Creative Commons ReconocimientoCompartirIgual 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