Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
REDISEÑO DEL SITIO WEB CANAIMA
POR: Lcdo. Maximiliano Vilchez
Antes Ahora
Agenda
➔Concepto Gráfico
➔Proceso de diseño
➔Nueva propuesta
➔Identidad
Concepto gráfico actual
➔No posee concepto gráfico establecido
● Carece de identidad visual definida
➔Los colores están ma...
Concepto gráfico actual
● Etnia yanomami: denominan también la nación yanomami. Habitan principalmente
en el estado Amazon...
Concepto gráfico actual
Se entiende que los colores actuales vienen dados por la alusión que existe entre los tonos
marron...
Concepto gráfico actual
Esta negatividad se refiere a que estos tonos de color son alusivos a la deforestación,
erosión y ...
Concepto gráfico actual
Aqua es el nombre comercial de la apariencia de la interfaz gráfica de usuario del sistema
operati...
Concepto gráfico actual
Ejemplos de diseño aqua aplicados al sitio web
Interfaces universalizadas
Soluciones
Gráficas
➔Concepto Gráfico
➔Nueva Propuesta
➔Proceso de diseño
➔Identidad
Soluciones
Gráficas
➔Concepto Gráfico
Concepto Propuesto
Para poder crear e nuevo concepto primero se propone implementar la marca actual pero
utilizando el col...
Concepto Propuesto
Paleta de colores definida
Concepto Propuesto
Este cambio de color no afectaría
a esta marca ya que en la mayor inversión hecha
por el gobierno que s...
Concepto Propuesto
Una vez modificada la marca con sus nuevos colores se procede a crear un nuevo concepto
gráfico que con...
Concepto Propuesto
En este concepto se trata de utilizar elementos gráficos
de las tribus yekuana y pemón como los predomi...
Soluciones
Gráficas
➔Proceso de diseño
Realizar y organizar la información real para proceder con el diseño de
wireframes (para corregir la navegación, usabilida...
Esquema metodológico: Caso Sitio web Canaima
Comenzar con el proceso de diseño:
a) Realizar corrección de color a la actua...
d) Una vez concluida la etapa anterior continúa la construcción gráfica de
la información a publicar, utilizando como medi...
Bocetos manuales (Sketch)
Se dibujan a mano alzada.
No está diseñado como una obra terminada.
Forma rápida de grabar una i...
Diseño
de bocetos
(Wireframes)
Diseño de bocetos (Wireframe)
Su objeto es la funcionalidad y diagramación.
Define aspectos funcionales.
Notas acerca de l...
Diseño de bocetos (Wireframe)
Inspirados en los hombros de los grandes.
Herramientas: Pencil, Inkscape y Balsamiq.
Recurso...
¿Por qué hacer wireframes?
http://wiki.canaima.softwarelibre.gob.ve/wiki/BSP/galería
Yo odio los colores
No me
gusta la
re...
Cuando “usar” Wireframes
● En proyectos complejos, con muchas interacciones o clasificación de información
● En fases temp...
Cuando “no usar” Wireframes
● El grupo de revisor(es) tiene expectativas del mockup (diseño visual).
● Los usuarios no est...
Diseño de
interfaces
(Mockup)
gráficas
interfaces
Diseño visual (Mockup)
● Su objeto es el look and feel.
● Se construyen con base a los wireframes.
● Aplicando color, gráf...
Versión inicial
Versión alternativa
Modo normal Alto contraste
Normas de accesibilidad web
Tipografías utilizadas
Titillium Web
QWERTYUIOPASDFGHJKLÑZXCVBNM,.-
qwertyuiopsdfghjklñzxcvbnm
Anaheim
QWERTYUIOPASDFGHJKL...
Diseño y prototipo
Inspírate con los grandes de medio.
Innova en tu medio.
Diseño de nuevas interfaces Web.
Mejorar la usa...
Diseño de prototipo (Prototype)
● Simular el diseño final, la estética, los materiales y la funcionalidad
prevista.
● Mejo...
Diseño de prototipo (Prototype)
¿Cual es el flujo de trabajo?
Bocetos
(Sketch)
wireframes mock-up Prototype
Soluciones
Gráficas
➔identidad
Propuesta de Marca
Una vez centrados en la zona de canaima se propone un nuevo diseño de marca inspirado
en el salto el sa...
Propuestas para Marcas
Propuestas para Marcas
Propuestas para Marcas
Propuesta de Marca
Propuesta de Marca
Propuesta de Marca
➔Fin
Rediseño para el sitio web Canaima GNU/Linux
Rediseño para el sitio web Canaima GNU/Linux
Rediseño para el sitio web Canaima GNU/Linux
Rediseño para el sitio web Canaima GNU/Linux
Rediseño para el sitio web Canaima GNU/Linux
Rediseño para el sitio web Canaima GNU/Linux
Upcoming SlideShare
Loading in …5
×

Rediseño para el sitio web Canaima GNU/Linux

1,798 views

Published on

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.

Published in: Design

Rediseño para el sitio web Canaima GNU/Linux

  1. 1. REDISEÑO DEL SITIO WEB CANAIMA POR: Lcdo. Maximiliano Vilchez Antes Ahora
  2. 2. Agenda ➔Concepto Gráfico ➔Proceso de diseño ➔Nueva propuesta ➔Identidad
  3. 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. 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. 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. 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. 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. 8. Concepto gráfico actual Ejemplos de diseño aqua aplicados al sitio web Interfaces universalizadas
  9. 9. Soluciones Gráficas ➔Concepto Gráfico ➔Nueva Propuesta ➔Proceso de diseño ➔Identidad
  10. 10. Soluciones Gráficas ➔Concepto Gráfico
  11. 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. 12. Concepto Propuesto Paleta de colores definida
  13. 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. 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. 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. 16. Soluciones Gráficas ➔Proceso de diseño
  17. 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. 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. 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. 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. 21. Diseño de bocetos (Wireframes)
  22. 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. 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. 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. 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. 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. 27. Diseño de interfaces (Mockup) gráficas interfaces
  28. 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. 29. Versión inicial
  30. 30. Versión alternativa
  31. 31. Modo normal Alto contraste Normas de accesibilidad web
  32. 32. Tipografías utilizadas Titillium Web QWERTYUIOPASDFGHJKLÑZXCVBNM,.- qwertyuiopsdfghjklñzxcvbnm Anaheim QWERTYUIOPASDFGHJKLÑZXCVBNM,.- qwertyuiopsdfghjklñzxcvbnm
  33. 33. 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.
  34. 34. 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.
  35. 35. Diseño de prototipo (Prototype)
  36. 36. ¿Cual es el flujo de trabajo? Bocetos (Sketch) wireframes mock-up Prototype
  37. 37. Soluciones Gráficas ➔identidad
  38. 38. 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.
  39. 39. Propuestas para Marcas
  40. 40. Propuestas para Marcas
  41. 41. Propuestas para Marcas
  42. 42. Propuesta de Marca
  43. 43. Propuesta de Marca
  44. 44. Propuesta de Marca
  45. 45. ➔Fin

×