Rediseño para el sitio web Canaima GNU/Linux

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


● 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


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.


Colores Actuales:

c 52 m28 y53 k0

c 27 m28 y53 k0


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.


Muestras fotográficas


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


➔Nueva Propuesta


➔Identidad

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.

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


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.


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


➔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

Propuesta de Marca

➔Fin

Rediseño para el sitio web Canaima GNU/Linux

Design

Transcript of Rediseño para el sitio web Canaima GNU/Linux