Post on 03-Jul-2015
description
REDISEÑO DEL SITIO WEB CANAIMAPOR: 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 mal implementados
➔Se imita un diseño de interfaz con conceptos exitosos pero universalizados carentes de idiosincrasia cultural venezolana
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
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
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
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
Concepto gráfico actualEjemplos 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 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
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 son las (Canaimitas) la misma aparece sin color, es decir en tono blanco.
Muestras fotográficas
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.
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.
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, 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
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.
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
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.
Diseñode bocetos(Wireframes)
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.
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.
¿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
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
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.
Diseño deinterfaces
(Mockup)gráficasinterfaces
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.
Versión inicial
Versión alternativa
Modo normal Alto contraste
Normas de accesibilidad web
Tipografías utilizadas
Titillium WebQWERTYUIOPASDFGHJKLÑZXCVBNM,.-qwertyuiopsdfghjklñzxcvbnm
Anaheim
QWERTYUIOPASDFGHJKLÑZXCVBNM,.-qwertyuiopsdfghjklñzxcvbnm
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.
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.
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 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.
Propuestas para Marcas
Propuestas para Marcas
Propuestas para Marcas
Propuesta de Marca
Propuesta de Marca
Propuesta de Marca
➔Fin