En esta presentación se expone el origen y justificación para el lenguaje comunicacional del sitio web, planteando un nuevo esquema informativo a través del lenguaje pictorico originado por los indígenas venezolanos.

1. REDISEÑO DEL SITIO WEB CANAIMA
POR: Lcdo. Maximiliano Vilchez
Antes Ahora

2. Agenda
➔Concepto Gráfico
➔Proceso de diseño
➔Nueva propuesta
➔Identidad

3. Concepto gráfico actual
➔No posee concepto gráfico establecido
● Carece de identidad visual definida
➔Los colores están mal implementados
➔Se imita un diseño de interfaz con conceptos exitosos
pero universalizados carentes de idiosincrasia cultural
venezolana

4. Concepto gráfico actual
● Etnia yanomami: denominan también la nación yanomami. Habitan principalmente
en el estado Amazonas de Venezuela y, además, en los estados brasileños de Amazonas
y Roraima.
● Parque Nacional Canaima es un parque nacional ubicado en el Estado Bolívar,
Venezuela. Fue instaurado el 12 de junio de 1962 y declarado Patrimonio de la
Humanidad por la Unesco en el año 1994.
Se extiende sobre 30.000 km² hasta la frontera con Guyana y Brasil, por su tamaño
es considerado el sexto parque nacional más grande del mundo.
Denotación de marca actual

5. Concepto gráfico actual
Se entiende que los colores actuales vienen dados por la alusión que existe entre los tonos
marrones relacionados con nuestra tierra y el color de piel de nuestros aborígenes.
Pero existe una connotación negativa al implementarlo en este caso de única manera, ya
que el nombre (Canaima) es referido a un parque nacional protegido y declarado reservorio
natural para la humanidad.
Denotación de marca actual
Colores Actuales:
c 52 m28 y53 k0
c 27 m28 y53 k0

6. Concepto gráfico actual
Esta negatividad se refiere a que estos tonos de color son alusivos a la deforestación,
erosión y explotación de los recursos naturales de dicha zona, haciendo que la marca sea
muy pesada visualmente y poco fresca denotando desgaste.
Denotación de marca actual
Muestras fotográficas

7. Concepto gráfico actual
Aqua es el nombre comercial de la apariencia de la interfaz gráfica de usuario del sistema
operativo Mac OS X de Apple.
El tema Aqua y la interfaz de usuario se introdujo por primera vez en la Macworld
Conference & Expo en enero del 2000 en San Francisco.
Los elementos del diseño hacen uniforme el aspecto de la mayoría de las aplicaciones del
Mac OS X. Su meta es "incorporar el color, profundidad, translucido, y texturas complejas
visualmente atractivas" en aplicaciones del Mac OS X. Aunque Aqua es la interfaz de usuario
completa, dos características notables de Aqua son botones tipo gel (como los de color rojo,
amarillo y verde que controlan la ventana), y un Dock, el cual facilita el lanzamiento y
navegación entre aplicaciones.
Aqua es el sucesor de Platinum, que fue usado en Mac OS 8 y 9.
Interfaces universalizadas

8. Concepto gráfico actual
Ejemplos de diseño aqua aplicados al sitio web
Interfaces universalizadas

9. Soluciones
Gráficas
➔Concepto Gráfico
➔Nueva Propuesta
➔Proceso de diseño
➔Identidad

10. Soluciones
Gráficas
➔Concepto Gráfico

11. Concepto Propuesto
Para poder crear e nuevo concepto primero se propone implementar la marca actual pero
utilizando el color verde como predominador.
La presencia y predominación del color verde se basa en que en este Parque Nacional
predomina la vegetación, visto desde el aire todo es verde, por lo tanto significa
preservación y protección de las especies que habitan esa zona de nuestro país, además de
este color denota progreso, desarrollo y frescura.
Pantone 7496 C Pantone Black 5 C Pantone 7503 C

12. Concepto Propuesto
Paleta de colores definida

13. Concepto Propuesto
Este cambio de color no afectaría
a esta marca ya que en la mayor inversión hecha
por el gobierno que son las (Canaimitas) la
misma aparece sin color, es decir en tono blanco.
Muestras fotográficas

14. Concepto Propuesto
Una vez modificada la marca con sus nuevos colores se procede a crear un nuevo concepto
gráfico que consiste en utilizar elementos ornamentales (curvos) como los creados por los
aborígenes venezolanos, con elementos rectos y minimalistas como los utilizados en recursos
tecnológicos implementando así una innovación visual.

15. Concepto Propuesto
En este concepto se trata de utilizar elementos gráficos
de las tribus yekuana y pemón como los predominantes
(ya que ellas habitan en la zona canaimera), sin
descartar a todas las demás tribus nativas de nuestra
nación para resaltar el recurso humano valioso en el
desarrollo de estas herramientas.

16. Soluciones
Gráficas
➔Proceso de diseño

17. Realizar y organizar la información real para proceder con el diseño de
wireframes (para corregir la navegación, usabilidad y accesibilidad).
Proceder con el diseño de sketch, wireframes, mockup y prototipos de
todas las secciones.
Esquema metodológico: Caso Sitio web Canaima

18. Esquema metodológico: Caso Sitio web Canaima
Comenzar con el proceso de diseño:
a) Realizar corrección de color a la actual marca gráfica del proyecto
basada en sensaciones connotativas, justificadas y desglosadas en una
memoria descriptiva.
b) Basado en el punto anterior, generar un concepto gráfico, basado
“tecnología” pero contrastado con el “diseño rudimentario”, “ecologismo”
y la identidad de los aborígenes que habitan la zona actual de Canaima,
denotando de esta manera la esencia del proyecto en todo su esplendor
y su entono visual.

19. d) Una vez concluida la etapa anterior continúa la construcción gráfica de
la información a publicar, utilizando como medias la imagen y el texto
para su elaboración.
e) Se procede con la elaboración del diseño del sitio, basado en la
navegación propuesta en los (Sketch) jerarquizando la información desde
lo más destacado a lo menos destacado para una mejor eficiencia del
sitio.
Esquema metodológico: Caso Sitio web Canaima

20. Bocetos manuales (Sketch)
Se dibujan a mano alzada.
No está diseñado como una obra terminada.
Forma rápida de grabar una idea para después
Le permite probar diferentes ideas.
Le permite establecer una composición.

21. Diseño
de bocetos
(Wireframes)

22. Diseño de bocetos (Wireframe)
Su objeto es la funcionalidad y diagramación.
Define aspectos funcionales.
Notas acerca de la funcionalidad prevista.
Sistemas de navegaciones.
Como los elementos de la GUI trabajan juntos.
Carece de estilo tipográfico, color o imágenes.

23. Diseño de bocetos (Wireframe)
Inspirados en los hombros de los grandes.
Herramientas: Pencil, Inkscape y Balsamiq.
Recursos: Pagina web de Canaima, Debian, Ubuntu, Fedora,
LinuxMint, Suse, Drupal, Python, Gobierno de Buenos Aires,
Kendoui y Plone.
Duración: aproximadamente 2 semanas.

24. ¿Por qué hacer wireframes?
http://wiki.canaima.softwarelibre.gob.ve/wiki/BSP/galería
Yo odio los colores
No me
gusta la
redacción
¿Por qué dice
ediciones en
ves de
Sabores?
No me
convencen tus
argumentos

25. Cuando “usar” Wireframes
● En proyectos complejos, con muchas interacciones o clasificación de información
● En fases tempranas del diseño, antes de la fase de desarrollo

26. Cuando “no usar” Wireframes
● El grupo de revisor(es) tiene expectativas del mockup (diseño visual).
● Los usuarios no están involucrados en el proceso de diseño del sitio web.
● En pequeños proyectos.

27. Diseño de
interfaces
(Mockup)
gráficas
interfaces

28. Diseño visual (Mockup)
● Su objeto es el look and feel.
● Se construyen con base a los wireframes.
● Aplicando color, gráficos y muy pulido.
● El diseño se ajusta un poco, mas mantiene la orientación general
del wireframe.

29. Versión inicial

30. Versión alternativa

32. Modo normal Alto contraste
Normas de accesibilidad web

36. Tipografías utilizadas
Titillium Web
QWERTYUIOPASDFGHJKLÑZXCVBNM,.-
qwertyuiopsdfghjklñzxcvbnm
Anaheim
QWERTYUIOPASDFGHJKLÑZXCVBNM,.-
qwertyuiopsdfghjklñzxcvbnm

37. Diseño y prototipo
Inspírate con los grandes de medio.
Innova en tu medio.
Diseño de nuevas interfaces Web.
Mejorar la usabilidad y funcionalidad.

38. Diseño de prototipo (Prototype)
● Simular el diseño final, la estética, los materiales y la funcionalidad
prevista.
● Mejora la usabilidad
● Las funcionalidades trabajan en conjunto.

39. Diseño de prototipo (Prototype)

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

41. Soluciones
Gráficas
➔identidad

44. Propuesta de Marca
Una vez centrados en la zona de canaima se propone un nuevo diseño de marca inspirado
en el salto el sapo, una de las prinicipales atracciones de Canaima, mezclada con elementos
de tejidos yekuana y penón, para enriquecer al recurso humano resaltado en la marca actual
de manera denotativa.

45. Propuestas para Marcas

46. Propuestas para Marcas

47. Propuestas para Marcas

48. Propuesta de Marca

49. Propuesta de Marca

50. Propuesta de Marca

51. ➔Fin