Download - Rediseño para el sitio web Canaima GNU/Linux
![Page 1: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/1.jpg)
REDISEÑO DEL SITIO WEB CANAIMAPOR: Lcdo. Maximiliano Vilchez
Antes Ahora
![Page 2: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/2.jpg)
Agenda
➔Concepto Gráfico
➔Proceso de diseño
➔Nueva propuesta
➔Identidad
![Page 3: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/3.jpg)
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
![Page 4: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/4.jpg)
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
![Page 5: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/5.jpg)
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
![Page 6: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/6.jpg)
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
![Page 7: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/7.jpg)
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
![Page 8: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/8.jpg)
Concepto gráfico actualEjemplos de diseño aqua aplicados al sitio web
Interfaces universalizadas
![Page 9: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/9.jpg)
Soluciones Gráficas
➔Concepto Gráfico
➔Nueva Propuesta
➔Proceso de diseño
➔Identidad
![Page 10: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/10.jpg)
Soluciones Gráficas
➔Concepto Gráfico
![Page 11: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/11.jpg)
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
![Page 12: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/12.jpg)
Concepto Propuesto
Paleta de colores definida
![Page 13: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/13.jpg)
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
![Page 14: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/14.jpg)
Concepto PropuestoUna 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.
![Page 15: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/15.jpg)
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.
![Page 16: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/16.jpg)
Soluciones Gráficas
➔Proceso de diseño
![Page 17: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/17.jpg)
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
![Page 18: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/18.jpg)
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.
![Page 19: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/19.jpg)
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
![Page 20: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/20.jpg)
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.
![Page 21: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/21.jpg)
Diseñode bocetos(Wireframes)
![Page 22: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/22.jpg)
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.
![Page 23: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/23.jpg)
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.
![Page 24: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/24.jpg)
¿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
![Page 25: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/25.jpg)
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
![Page 26: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/26.jpg)
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.
![Page 27: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/27.jpg)
Diseño deinterfaces
(Mockup)gráficasinterfaces
![Page 28: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/28.jpg)
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.
![Page 29: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/29.jpg)
Versión inicial
![Page 30: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/30.jpg)
Versión alternativa
![Page 31: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/31.jpg)
![Page 32: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/32.jpg)
Modo normal Alto contraste
Normas de accesibilidad web
![Page 33: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/33.jpg)
![Page 34: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/34.jpg)
![Page 35: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/35.jpg)
![Page 36: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/36.jpg)
Tipografías utilizadas
Titillium WebQWERTYUIOPASDFGHJKLÑZXCVBNM,.-qwertyuiopsdfghjklñzxcvbnm
Anaheim
QWERTYUIOPASDFGHJKLÑZXCVBNM,.-qwertyuiopsdfghjklñzxcvbnm
![Page 37: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/37.jpg)
Diseño y prototipoInspírate con los grandes de medio.
Innova en tu medio.
Diseño de nuevas interfaces Web.
Mejorar la usabilidad y funcionalidad.
![Page 38: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/38.jpg)
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.
![Page 39: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/39.jpg)
Diseño de prototipo (Prototype)
![Page 40: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/40.jpg)
¿Cual es el flujo de trabajo?
Bocetos(Sketch) wireframes mock-up Prototype
![Page 41: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/41.jpg)
Soluciones Gráficas
➔identidad
![Page 42: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/42.jpg)
![Page 43: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/43.jpg)
![Page 44: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/44.jpg)
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.
![Page 45: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/45.jpg)
Propuestas para Marcas
![Page 46: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/46.jpg)
Propuestas para Marcas
![Page 47: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/47.jpg)
Propuestas para Marcas
![Page 48: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/48.jpg)
Propuesta de Marca
![Page 49: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/49.jpg)
Propuesta de Marca
![Page 50: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/50.jpg)
Propuesta de Marca
![Page 51: Rediseño para el sitio web Canaima GNU/Linux](https://reader034.vdocumento.com/reader034/viewer/2022051212/5595a17c1a28ab14448b474a/html5/thumbnails/51.jpg)
➔Fin