Está en la página 1de 9

Sandra Ramiro Padilla

4CA


DISEO DE LA INTERFAZ
Para comenzar con la explicacin del diseo de la interfaz de mi proyecto comenzar
dando una serie de pinceladas a las caractersticas primordiales para luego describirlo.
En primer lugar se trata de un sitio web intuitivo y sencillo de manejar, de este modo se
observa como desde la pgina principal se indica que es el sitio web, que contiene y
como navegar por l. De modo que si viramos la web de dicho proyecto observaramos
como se trata de una pgina con cinco imgenes en el centro, cinco enlaces que te llevan
a otro lugar. Y un men extensible que sale y se esconde de la parte superior izquierda
de

la

pantalla,

segn

las

indicaciones

del

usuario.

Esta imagen que estamos observando podra ser la interfaz principal del proyecto. En
sta los usuarios podran introducirse con un solo click tanto a las diferentes ofertas de
lugares para crear su viaje (las cinco imgenes) que irn cambiando mensualmente,
como a cualquier apartado de los que podemos observar en el men, que como ya he
explicado anteriormente desaparece si el usuario no le presta atencin dejando la

4CA

Sandra Ramiro Padilla

pantalla

de

la

siguiente

forma:

Con ello se pretende que la parte visual tenga una importancia mayor en la web que los
dems aspectos, utilizando en su pgina principal el menor texto posible, puesto que se
trata de una agencia de viajes y es positivo que los lugares llamen la atencin. De este
modo, creo que tambin consigues que el usuario alargue su permanencia en la web y
adems la ubicacin de los contenidos favorece una forma de navegacin rpida y
cmoda.
Dicho esto y teniendo claro, como es el funcionamiento y diseo para la accesibilidad
de los usuarios a los lugares principales, dado que se trata de uno de los aspectos
primordiales debido a que es el primer modo de interaccin con el usuario y posible
cliente, vamos a introducirnos ms de lleno en el diseo visual del lugar.
Como ya hemos observado en las pginas anteriores la web cuenta con un imagotipo,
compuesto por una imagen, que hace referencia a dos huellas de pisadas descalzas de
color verde. Aqu las pisadas aparecen en un marco blanco, en el logo real no existira.
Esta imagen ira adjunta a a las letras que componen el nombre del sitio web,

Sandra Ramiro Padilla

4CA

Ecologeando. Este nombre lo encontraremos compuesto de dos tonos, en el mismo


color verde que las huellas del logo aparecern las letras ecologe y en color naranja
ando. stas se encontraran en la parte derecha mientras que a su izquierda estara el
logo o imagen.

La empresa contar con dos tipos de imagotipos para toda su web, teniendo en cuenta el
fondo.
Podemos observar como los verdes y naranjas son los colores corporativos de
Ecologeando. Esto se debe a que los tonos verdes transmiten relajacin, paz interior, a
la par que nos une con la naturaleza y nos hace empatizar con los dems.
Efectos que la empresa busca en sus usuarios activos y en sus clientes. Puesto que son
esos valores los que ella persigue para sus viajes, estos tonos verdes son apagados para
el fondo pero van iluminndose primero con las letras y luego an ms en las huellas.
Es debido a que los tonos oscurecidos aportan ms seriedad a la empresa y sta necesita
transmitir confianza a sus clientes. Sin embargo, tambin debe aportar amabilidad y
diversin lo que se consigue iluminando ese verde y componiendo el nombre del sitio
con dos colores. De este modo observamos ahora el tono naranja de las letras ando.
Este color aporta seguridad, liberacin de los pensamientos negativos, estimulacin de
la mente e ilusin. As pues lo que se consigue es la parte de actividad que el verde no
tiene, creando felicidad y diversin.
Este imagotipo, se encuentra ubicado en la parte superior derecha de la interfaz
plasmado en un fondo verde oscuro. Debajo del imagotipo se encuentra el men, que
como hemos observado antes, se esconde si el usuario no se centra en l. Es de un tono
naranja apagado, que representa el color tierra. En su interior, encontramos los distintos
apartados a los que se puede acceder desde la pgina principal; ofertas, ecoturismo,
contacto, quienes somos, blog y lugar del cliente. Todos estos, compuestos por las
letras del mismo color que el del fondo y maysculas.
Este men junto al imagotipo de la web, sern accesibles en todos los apartados del
sitio, facilitando la navegacin del usuario que con un solo click podr dejar la ventana
en la que se encuentra para ir hacia atrs o hacia delante.

Sandra Ramiro Padilla

4CA

Bajo el men, se encuentran las imgenes de las diferentes ofertas de lugares para
viajar, es el lugar que ms llama la atencin de la web y donde primero mirarn los
clientes. Las imgenes cambiarn cada mes en funcin de las ofertas. stas estarn
siempre dispuestas de la misma forma, tal y como se muestra en la fotografa. Todas de
forma horizontal, tres en la parte superior y dos en la parte inferior de la pantalla. Todas
ellas con las mismas dimensiones y con un titulo en el centro de su parte superior, con
el nombre del lugar que ofrecen del mismo tono naranja que las letras del nombre de la
web. Todas las letras de los ttulos de esta web, sern de la fuente Georgia. Se ha
utilizado este tipografa, porque es asociada por el publico con adjetivos realistas,
impactantes, respetables, autoritarios y tradicionales. Aspectos que vienen bien para
transmitir confianza al cliente.
Si nos centramos ahora en introducirnos en una de las fotografas que ofrecen un lugar,
observamos como se abre una pgina nueva desde donde se te da la opcin de conocer
el lugar por medio de un articulo, saber que es lo que incluye el viaje, hacer las reservas
y las ofertas de vuelos.
El verde continua siendo el color de fondo, que junto al naranja son los colores
corporativos, en el centro de la pantalla tendremos la imagen del sitio en cuestin y en
la parte superior de sta encontraremos el nombre del lugar a visitar a modo de titulo de
color naranja. En la parte superior derecha de la planilla observaremos el imagotipo de
la empresa y el men desplegable debajo de ste. Mientras que en la parte superior
izquierda de la planilla aparecer un mapa sealando el lugar al que se pretende viajar.
Si ahora continuamos analizando el lugar debajo de la imagen central, encontraremos el
men con las opciones que anteriormente he expuesto. Estas opciones aparecern en
una barra de tono naranja apagado, como la barra de la pgina principal. Las letras de
cada apartado sern verde oscuro.
Aqu podis observarlo, por medio de un ejemplo:

Sandra Ramiro Padilla

4CA

Tanto el articulo como la opcin de ver que incluye aparecern en la parte inferior de la
pantalla, debajo de la barra del men. Sin embargo para las otras dos opciones (reserva
y vuelos) se abrirn nuevas pginas.
La pgina de reservas es una de las ms complicadas puesto que cuenta con dos
pantallas interiores, las cuales los usuarios debern ir pasando conforme rellenen los
campos oportunos para construir su viaje.
As pues, nos introduciramos en el apartado de reservas e inmediatamente se habra una
pgina que nos llevara al apartado cuestionario para viaje, esta pgina seguira el
mismo diseo que las plantillas anteriores.
El verde oscuro de fondo, con el imagotipo y el men principal en la parte superior
izquierda de la pantalla. En estas pginas la funcin conductora del color naranja se
acrecienta.

Sandra Ramiro Padilla

4CA

De modo, que observamos como los apartados en naranja son los que muestran al
visitante donde est y donde debe ir. Si continuamos observando la plantilla vemos
como en la parte superior derecha est la fotografa del lugar al que se va a viajar
acompaada de un mapa. Si continuamos bajando, justo debajo de la barra del men
principal, que se encuentra plegada, esta situada la barra que nos indica en que apartado
estamos; Reservas y donde nos encontramos dentro de ste; cuestionario para viaje.
Debajo de la barra, se ubicar el cuestionario para poder crear la primera parte de la
personalizacin del viaje, en la fotografa se puede ver sealado con un cuadrado verde
claro. En la parte inferior derecha observamos el rectngulo naranja que nos lleva al
siguiente apartado.

Sandra Ramiro Padilla

4CA

En esta pgina, como en las anteriores observamos como los colores tendrn la misma
labor, naranjas labor informativa y de seguimiento y verdes para transmitir seriedad en
el fondo. Las fotografas continuarn teniendo un peso relevante, puesto que ordenan el
centro de la pgina introduciendo las diferentes actividades para desarrollar itinerarios,
la enumeracin de cada una de las acciones relacionadas con estas actividades aparecer
bajo estas imgenes. Por lo dems, se continuar defendiendo el diseo original de las
plantillas, teniendo en la parte derecha superior la fotografa del lugar junto un mapa y
en su parte superior contraria el men con el imagotipo de la empresa. En la parte
inferior derecha un botn que nos lleva al siguiente apartado, sera el apartado de la
reserva en s, donde se tendrn que poner los datos de la reserva y que tendr la misma
dinmica visual que todo lo explicado con anterioridad.
De este modo, podemos decir que las plantillas cuentan con un diseo visual claro y
atractivo,

con colores y textos bien complementados. Los iconos que aparecen

representan con claridad su propsito y los colores estn elegidos ms que


justificadamente. Pues todos los elementos que componen la web estn construidos
teniendo en cuenta los objetivos estratgicos de venta, al igual que los de transmitir
ciertos valores a sus clientes.
Con todo lo explicado con anterioridad es sencillo saber como estar desarrollado el
diseo de la informacin y su estructuracin dentro de la web. Como hemos podido
observar a lo largo de la explicacin del diseo visual de la interfaz, en el que he hecho
alguna que otra alusin al diseo de la informacin y como sta se estructura, se trata de
un diseo natural, rpido de comprender y claro, puesto que desde la pgina principal el
usuario tiene todos los apartados que se pueden visitar disponibles y visibles. La
informacin que se ofrece, por tanto, estar expuesta de forma clara y sencilla.
Asimismo la estructura de navegacin para el usuario no es compleja, pero si que se ha
intentado disear mediante incentivos como los colores, la tipografa y las imgenes, de
forma atractiva y bien organizada.
Por lo que se refiere a los contenidos, se tratar de crear contenidos creados
especficamente para usuarios concienciados con el ecoturismo en todas su vertientes y
actividades. Personas que se definan as mismas como viajeras, concienciadas con la
conservacin del patrimonio natural y cultural de los pueblos y lugares que visitan y que
se esfuerzan por desarrollar, por medio de su turismo, la econmica de esos sitios. Estas

Sandra Ramiro Padilla

4CA

personas contarn con un nivel adquisitivo medio/alto y una etapa vital activa, centrada
de entre los 25 a 50 aos.
Para que sea fcil navegar por la web, la pgina web principal como todos sus
subsistemas, tiene ttulos y encabezados claros, adecuados y descriptivos sobre todo
aquello que nos ofrece la web.
Desde esta misma pgina principal y durante la navegacin por todo el sitio, tenemos
pie a introducirnos en los subsistemas desarrollados en la web. Como he expuesto en el
apartado anterior, estos son por una parte, ofertas, ecoturismo, contacto, quienes somos,
blog y lugar del cliente. Estos apartados abriran su propia ventana y explicarn:

Ofertas: los ltimos viajes ya creados para grupos con huecos para apuntar,
recomendados y vuelos de ultima hora.

Ecoturismo: conceptos sobre el ecoturismo.

Contacto: Informacin de contacto.

Quienes somos: Informacin sobre el equipo de la empresa y la empresa.

Blog: lugar donde se promocionar la empresa, se hablar de los viajes que se


desarrollen, artculos sobre lugares donde viajar, acciones de ecomarketing, etc.

Lugar del cliente: lugar donde el cliente podr dar su opinin, hacer preguntas
sobre los viajes e intercambiar opiniones, creando feedback entre usuarios y
entre los usuarios y la empresa.

Los propsitos se ven claros en estos apartados, que adems, en su gran mayora,
cuentan con distintos subsistemas con ms contenido.
Por otra parte, desde la pagina principal podemos acceder a las diferentes lugares de
viajes que se ofrecen y a la creacin de sus itinerarios.
Por todo ello, se observa como el propsito de cada uno de los apartados de la web esta
descrito y la utilidad de cada uno de sus apartados para el usuario es clara. El origen de
su contenido se basar en hechos exactos y comprobables que los propios usuarios,
podrn corroborar, dado que ellos mismos, como clientes, sern los encargados de dar
las opiniones acerca de los viajes y por tanto de la informacin que en la web se
ofertar, creando informacin segura y de confianza.

Sandra Ramiro Padilla

4CA

Como contenido, tambin debemos nombrar las imgenes, que como ya he mencionado
con anterioridad se trabajarn para que tengan peso en la web.

Por lo que se refiere a la interaccin que le sitio ofrecer a los usuarios, podemos
observar como las necesidades, deseos y viajes que se espera que los usuarios puedan
tener respecto a una empresa de viajes como sta estn cubiertos, con las diferentes
herramientas de reserva de viajes, creacin de itinerario, dar opiniones, leer sobre los
viajes y opiniones de otros clientes y poder resolver sus dudas contactando con la
empresa o incluso pedir ms informacin sobre los viajes.
Adems de esto, la empresa contar con un sitio en diferentes redes sociales, como
Facebook, twitter y pinterest, redes a las que se podr acceder por medio de la web
principal y que facilitan la interaccin con el usuario.
Otros de los aspectos que se debern aadir al sitio web conforme la empresa vaya
creciendo y ocupando nuevos territorios ser el hecho de poder elegir diferentes idiomas
para visitar la pgina, y un buscador de viajes de ultima hora que se encontrarn en el
apartado oferta acumulados.