PROYECTO DE GRADUACIÓN Trabajo Final de...
43
1 PROYECTO DE GRADUACIÓN Trabajo Final de Grado Llika WS: Web creativa Rediseño de interfaz gráfica Web con nuevas formas de navegación Pablo Jara Entrega 1era. Etapa 25 % 2015-07-27 Licenciatura Compacta en Diseño Proyecto Profesional Diseño y producción de objetos, espacios e imágenes
Transcript of PROYECTO DE GRADUACIÓN Trabajo Final de...
1
PROYECTO DE GRADUACIÓN Trabajo Final de Grado
Llika WS: Web creativa Rediseño de interfaz gráfica Web con nuevas formas de navegación
Pablo Jara Entrega 1era. Etapa 25 %
2015-07-27 Licenciatura Compacta en Diseño
Proyecto Profesional Diseño y producción de objetos, espacios e imágenes
2
Índice 2 Introducción 3 Capítulo 1. Incorporación del diseño gráfico en el diseño Web 10
1.1. Vinculación del diseño gráfico al diseño Web en el medio actual 10 1.2. Importancia de la propuesta gráfica en la Web móvil 13 1.3. Uso de CMS y el diseño gráfico 16 1.4. Ventajas de partir de una propuesta gráfica 17
Capítulo 2. Creatividad aplicada a la tecnología 2.1. La creatividad en sitios Web de estudios de diseño 2.2. Creatividad como valor agregado de un sitio 2.3. Navegación que evoca creatividad
Capítulo 3. Navegabilidad en un sitio web 3.1. La navegación y el usuario 3.2. Navegación aplicada a tiempos modernos
3.2.1. Diseño responsivo 3.2.2. Mockup´s y la adaptabilidad del sitio 3.2.3. El diseño gráfico a partir de Mockup´s
3.3 Maquetación, tecnología y tendencias 3.3.1. HTML, CSS, JavaScript y PHP 3.3.2. Media queries 3.3.3. Plugins y librerías JavaScript
Capítulo 4. Desarrollo de concepto a comunicar
4.1 Antecedentes de la empresa 4.1.1. ¿A quién se dirige? 4.1.2. ¿De qué forma se dirige?
4.2 Concepto a comunicar 4.3 Experiencia de usuario (GUI)
Capítulo 5. Rediseño de sitio
5.1 Brief 5.2 Navegación
5.2.1. Mapa de navegación 5.2.2. Mockup´s para Interfaz de usuario (GUI)
5.3 Diseño Gráfico 5.3.1. Diseño de Interfaz gráfica (GUI)
5.4 Diseño Web 5.4.1. Maquetación: Esqueleto, estilos y funcionamiento 5.4.1. Media queries: CSS para cada resolución
Conclusiones Lista de referencias bibliográficas Bibliografía
3
Introducción
El tema de este Proyecto de Investigación y Desarrollo (PID) es Diseño de interfaz gráfica
Web, se inscribe dentro de la categoría de Proyecto Profesional y de la línea temática
Diseño de producción de objetos, espacios e imágenes. Asimismo el trabajo se puede
sumar a la materia de diseño gráfico porque hace énfasis en la propuesta gráfica previa
al desarrollo de un sitio Web. Este tema surgió a partir del interés del autor del PID en
desarrollar la creatividad en los sitios Web, para dar un valor agregado al producto.
La pertinencia del tema está dada a partir de que permite una relevación de datos la cual
a su vez aporta nuevos conocimientos al desarrollo efectivo de un sitio web empleando la
creatividad e innovación. Asimismo es relevante porque permite generar un conocimiento
y un estandar diferente, también quiere cubrir una necesidad y una carencia del diseño
Web en Quito.
Tiene como finalidad proponer una idea de navegación Web diferente, plasmar el diseño
y maquetar el sitio. A su vez beneficia al autor del PID en el sentido que se puede mostrar
o vender un producto nuevo y difierente, además de un beneficio al conocimiento que se
enfoca en la investigación, descrubrimiento y aplicación de nuevas formas de navegación
en un proyecto, teniendo así la capacidad de evolucionar y mejorar.
Se considera como el núcleo del problema planteado que la mayoria de sitios mantiene
una diagramación clásica, segura y común, apartada de la funcionalidad que pueda tener,
no expresa un trabajo creativo en la gráfica. Para resolver el problema se ha enunciado
una pregunta problema que plantea de qué manera el desarrollo de interfaz Web creativa
puede contribuir a un mayor valor agregado a un sitio Web. Así se busca dar importancia
al diseño creativo en los sitios web, que se estime más aquellos sitios que tienen este
valor agregado.
Por lo tanto, el objetivo general es rediseñar la interfaz gráfica Web con formas de
navegación no tradicionales para estudio Llika WS con el fin de agregar un valor al sitio
para que se diferencie de la competencia en Quito.
4
Asimismo, los objetivos específicos se centran en aportar nuevas formas de navegación
en el panorama Web de Quito, con el fin de innovar y diferenciarse del resto de sitios y
competencia. Además utilizar una idea creativa como base de la navegación del sitio,
para que refleje un concepto y exprese los servicios del estudio. Todo lo mencionado
desemboca en dar relevancia al diseño gráfico en el desarrollo del sitio Web enfocándose
en la diagramación del sitio para varias resoluciones dejando establecido el diseño, y por
último en beneficio de la empresa se quiere despertar interés por parte del usuario en el
producto del estudio de diseño.
Para confeccionar el estado del conocimiento o del arte se realiza un relevamiento de
antecedentes entre los Proyectos de Graduación (PG) de los alumnos y artículos de
profesores, de la Facultad de Diseño y Comunicación, de la Universidad de Palermo.
Haymans, J. (2013) Tus pixeles, Diseño de aplicación web para diseñadores
latinoamericanos Proyecto de Graduación Maestría. Facultad de Diseño y Comunicación.
Buenos Aires: Universidad de Palermo. Este PG tiene como objetivo crear una aplicación
integradora para diseñadores gráficos latinoamericanos. y se vincula a este trabajo
porque pone énfasis en la importancia de la evolución que ha tenido el diseño gráfico
editorial y hace énfasis en su primer capítulo en la relación que tiene directamente con el
diseño Web.
Luzardo, A. (2009). Diseño de la interfaz grafica web en función de los dispositivos
móviles. Proyecto de Graduación. Facultad de Diseño y Comunicación. Buenos Aires:
Universidad de Palermo. Este PG tiene como objetivo diseñar una interfaz web enfocada
en la importancia de la navegación de medios digitales y por ende en el uso de
dispositivos móviles con interfaz adaptable y se vincula a este trabajo porque propone
una metodología para diseñar la interfaz grafíca web y adaptabilidad a móviles que el
proyecto engloba.
Lasso, J. (2013). Ergonomía en el diseño web: Usabilidad de sitios web dedicados al
comercio electrónico en Buenos Aires. Proyecto de Graduación. Facultad de Diseño y
5
Comunicación. Buenos Aires: Universidad de Palermo. Este PG tiene como objetivo
mejorar la navegación del usuario en sitios web especializados en un tema y se vincula a
este trabajo porque da un punto de vista de cómo se puede mejorar la experiencia del
usuario en un sitio, enfocandose en la funcionalidad.
Echaguë, C. (2014). Las agencias de publicidad en el escenario digital. Facultad de
Diseño y Comunicación. Buenos Aires: Universidad de Palermo. Este PG tiene como
objetivo brindar un mejor enfoque desde la óptica de las agencias de publicidad a nuevas
formas de comunicación digital y se vincula a este trabajo porque estudia un grupo
objetivo más digital que maneja medios de comunicación diferentes.
Siciliano, C. (2015). La importancia de la comunicación en la web 2.0 para el desarrollo
de una empresa. Buenos Aires: Universidad de Palermo. Este PG tiene como objetivo
impulsar a pymes a través de nuevas formas de comunicación masiva y se vincula a este
trabajo porque ofrece modernas alternativas para impulsar un negocio pymes.
Planzola, C. (2010). Publicidad en Web 2.0, Relevamiento de Insights. Buenos Aires:
Universidad de Palermo. Este PG tiene como objetivo por medio de la publicidad dar a
conocer una idea para dejarla clara en la mente del usuario de Web 2.0 y se vincula a
este trabajo porque muestra un medio para concretar una idea publicitaria y aterrizarla en
un proyecto real.
Méndez, S. (2011). Web 2.0: un nuevo medio de comunicación entre las empresas y sus
públicos. Buenos Aires: Universidad de Palermo. Este PG tiene como objetivo analizar el
impacto que producen en la comunicación corporativa las Tecnologías de la Información
y la Comunicación (TICs) y se vincula a este trabajo porque deja en evidencia la
evolución de la comunicación que debe tener una empresa en la actualidad.
Bagnardi, M. (2011). Nuevas formas de comunicación publicitaria. Buenos Aires:
Universidad de Palermo. Este PG tiene como objetivo proponer el estudio de diversas
herramientas para lograr un buen plan de comunicación, obteniendo una publicidad
6
online eficiente y a gusto para el usuario. Se vincula a este trabajo al aportar un proceso
eficaz en el desarrollo de un plan de comunicación a través del diseño.
Ordoñez, A. (2012). Propuesta estratégica para ampliar las competencias laborales.
Buenos Aires: Universidad de Palermo. Este PG tiene como objetivo mejorar el vínculo
entre el cliente y el diseñador de manera que el trabajo se desempeñe de forma eficaz y
se vincula con este trabajo al analizar de manera diferente la metodología y procesos de
comunicación con el cliente de forma que el mensaje sea claro y efectivo.
Salgado, J. (2011). Emprendimiento profesional Web 2.0 para beneficio de las pymes.
Buenos Aires: Universidad de Palermo. Este PG tiene como objetivo definir la estructura
de una página web y, qué pasos involucran crear una página para tener un contacto
adecuado con el usuario y se vincula con este trabajo ya que permite conocer la
perspectiva del usuario y la forma adecuado de mostrar la información web en la
actualidad.
Hayman aporta la idea de la vinculacion del diseño gráfico y el diseño editorial en la
diagramación de los sitios Web, el autor del proyecto releva la evolución que ha tenido el
diseño gráfico y cómo se ha ido adaptando en los medios actuales, que se desarrolla en
el primer capítulo para explicar y entender el objeto de la investigación. A su vez, la idea
relacionada con la de Luzardo (2009) sirve para describir mejor la influencia de los
dispositivos móviles en el diseño web porque describe la importancia y tendencias del
usuario moderno, tratado que se aborda continuamente en el resto de capítulos.
Para resolver el problema se recurre directamente a la investigación, análisis y
descripción de la información, en libros especializados de diseño Web además de
consultar bibliografía en medios de información digitales reconocidos ya sea por su
importancia o reconocimiento en el medio del diseño gráfico.
Existen sitios que recopilan a manera de galería algunos de los sitios que cumplan con
estandares elevados en desarrollo como en diseño tales como: awwwards y codepen,
entre otros.
7
El autor del PID considera importante tener el punto de vista de profesional sobre la
evolución del diseño gráfico en el ambiente digital, por lo que se propone también el uso
de la entrevista como aporte a la investigación exploratoria.
En este último tramo de la introducción al PID, y antes de profundizar en el trabajo, es
necesario destacar que el autor considera que el texto realiza un destacado aporte a la
disciplina ya que se centra en generar nuevas formas de desarrollo de sitios Web en
Quito pues el diseño en dicha ciudad es plano y se centra en la funcionalidad,
descuidando el diseño y la navegación creativa, todo aquello en base a bibliografías
especializadas de diseño Web para dar a conocerlas de forma visual y práctica.
Es un aporte válido para estudiantes y docentes porque da importancia al diseño gráfico
previo al desarrollo Web, de esta forma brinda una visión para una mejor organización e
implica una mejora en la valoración del trabajo y la forma en que se presenta el producto
ante un medio de competencia, lo cual sirve a educadores como referencia para la
innovación en el diseño y el replanteamiento de tendencias obsoletas en la educación.
También permite un aporte a la temática porque revaloriza el trabajo de diseño gráfico y
renueva al concepto y su importancia como punto de partida en el desarrollo de sitios
Web además de registrar la evolución que ha tenido esta carrera a través del tiempo, las
formas de comunicar y medios contemporáneos.
La metodología para desarrollar el PID será exploración bibliográfica, la cual permite
analizar la situación actual en el campo del diseño web así como del panorama actual en
el diseño gráfico. En seguida se propone explicar los procesos para desarrollar un
proyecto digital y la definición de conceptos técnicos que aportan al conocimiento y a una
efectiva comunicación con el usuario.
En la investigación se va a tomar en cuenta a autores de todo el mundo con el fin de que
sirva de aporte cultural y visual para el PID, sumado a esto se quiere hacer uso de la
encuesta como método para conocer el proceso creativo en la creación de un sitio
innovador en Quito.
8
Con respecto a la relación con el campo disciplinar del diseño gráfico, se va relacionar
con la diagramación ya que es un pilar primordial en el diseño de una estructura base en
la cual se va a organizar la información. Además se vincula con la comunicación ya que
también se pretende relevar criterios para fundamentar una estrategia de comunicación
efectiva .
Por último, la etapa del desarrollo se enfoca en explicar el proceso profesional para
desarrollar el sitio web.
Por ser un PID de la categoría Diseño y producción de objetos, espacios e imágenes, la
información se organiza de la siguiente manera, en el primer capítulo del PID el objetivo
principal es introducir al lector en el entorno y la problemática que se va a investigar, se
define ciertos esquemas y conceptos del diseño web asi como la estructura, los objetivos
son: en primer lugar, definir las nociones básicas en el desarrollo web, lenguajes de
programación; segundo, explorar la vinculación del diseño gráfico con el diseño web y por
último determinar su importancia.
En el capítulo dos, Creatividad aplicada a la tecnología, el objetivo general es resaltar la
importancia de la creatividad en los sitios web, es decir mostrar a la creatividad como un
valor agregado, los objetivos son: primero, recopilar fuentes que sirvan de inspiración,
que además, cumplan las características de un diseño creativo, segundo, relevar los
conceptos de un diseño innovador a traves de una encuesta a profesionales del diseño y
finalmente, determinar los elementos para un aporte creativo en el sitio.
En el capítulo tres, Navegabilidad en un sitio web, el objetivo general es identificar los
elementos que generan una buena navegación web, es decir, a través de la revisión de
sitios, valorar aquellos elementos que benefician a la navegación, para lo cual los
objetivos son: primero, nombrar los lenguajes y tendencias de programación en la web,
segundo, explicar la importancia del diseño responsive en un sitio innovador y finalmente,
dar importancia a los mockups como punto de partida para el diseño del sitio.
9
En el capítulo cuatro, Desarrollo de concepto a comunicar, el objetivo general es generar
un mensaje claro para transmitir al usuario, del cual se desprenden tres objetivos, el
primero es aclarar los antecedentes y objetivos de la empresa, el segundo, definir un
target al que debe apuntar el sitio y en tercer lugar desarrollar un plan de comunicación
digital.
El capítulo cinco tiene como objetivo principal rediseñar el sitio de la empresa Llika WS y
tiene como objetivos, en primer lugar, diseñar a partir de una navegación innovadora,
segundo, mejorar la interfaz de usuario y la navegación, finalmente, aplicar un plan de
comunicación adecuado.
10
Capítulo 1. Incorporación del diseño gráfico en el diseño Web
En este capítulo enfatizarán los patrones que nacen en el diseño gráfico, que se
mantienen y evolucionan en el diseño Web, así como el trabajo en una propuesta gráfica
previa a la maquetación con el fin de crear pregnancia entre la propuesta y el producto
final, sembrando además confianza y proyección en el cliente.
Se recalca también la vinculación con la adaptabilidad de los sitios a un ambiente de
dispositivos móviles, todo esto partiendo del valor que se debe adjudicar al trabajo gráfico
que desarrolla el diseñador y su evolución hacia un sitio web. Así dejar en claro la
importancia de partir de una propuesta gráfica previamente imaginada y conceptualizada
por el diseñador y luego transferida al ambiente web en el que termina cumpliendo un
objetivo y cuyo valor agregado es la creatividad e ingenio.
1.1. Vinculación del diseño gráfico al diseño Web en el medio actual
Pipes (2011) señala: “…hay páginas de internet programadas de manera impecable pero
que carecen de imaginación, no cuentan una historia y son rematadamente aburridas”. Si
bien el diseñador tradicionalmente no esta obligado a familiarizarse con lenguajes de
programación y gestores de contenido, dispone actualmente de herramientas que facilitan
la incorporación de su diseño en el ambiente web, cuya interfaz permite mayor manejo
del contenido gráfico previamente diseñado, y como muchos software requieren un
conocimiento básico del codigo HTML y CSS.
La línea que divide entre el diseño web y el diseño gráfico está entonces marcada por el
interés del mismo diseñador, quien busca que su trabajo sea apreciado generando una
experiencia diferente para que el mensaje quede establecido en la mente de quién lo vea.
En el caso del diseño en la web, llega a ser un vínculo que permite mayor interacción con
el usuario que con el diseño gráfico en sí, pues se representa una idea no solo a través
de imágenes sino de animaciones, interacciones y elementos multimedia.
11
La pedagogía del diseño gráfico se adentra cada vez más en la proyección hacia las
nuevas formas de comunicación social, esto lleva a una evolución en muchas ramas que
devienen de la carrera como es el caso de la editorial en tanto revistas y diarios que
ultimamente se han visto transformadas en digitales y en interactivas que se pueden
adquirir en tiendas virtuales. No solo en universidades e institutos ya es parte del pensum
una clase de diseño web o gráfica digital, el diseñador está en capadidad de aprovechar
la información gratuita que se encuentra colgada en la misma web para satisfacer sus
necesidades de conocimiento e innovación. El diseñador gráfico puede desilusionarse al
manipular software para desarrollo web, es cierto que requiere tiempo y práctica, a más
de conocer un poco de código tiene que aprender a subirlo a la web, adquirir un dominio
y servidor entre otras cosas (Pipes, 2011). Lo que llega a ser alentador es que todos los
antes mencionados son temas técnicos que el diseñador es capaz de hacerse cargo, la
estructura del sitio es lo que realmente cuesta trabajo. Para ello no solo se necesita el
conocimiento técnico sino mucha cultura visual de sitios innovadores que permitan
florecer la creatividad y lo que puede alentar mucho más a un diseñador es que cuando
maneja estos requisitos, su capacidad de representar el diseño en la web se multiplica de
sobremanera.
Actualmente hay un vínculo especial entre el diseño gráfico y la web, que se explora de
tantas formas como la creatividad lo permite en: revistas digitales, landing pages,
boletines de mailing, entre otras, son ejemplos de formas en que se hace uso de las
facultades del diseño editorial y gráfico llevándolos a otros campos para que aporten
desde una gráfica ordenada, textos jerarquizados hasta incluso una experiencia de
usuario innovadora. El diseño en estos tiempos no solo se desenvuelve en el área
impresa sino que pasa al área digital casi obligatoriamente, es entonces que el diseñador
se vuelve cada vez más importante en agencias de publicidad digital, de esta forma y casi
a mediano plazo se genera una evolución en la calidad del arte y mensaje; es indudable
12
que el trabajo del diseñador en el medio digital es un avance no solo para él sino para el
diseño en general.
Ultimamente, se comparten ilustraciones, campañas y proyectos mejor presentados por
lo que el trabajo de diseño detrás de un sitio web le da una identidad y es cada vez más
requerido. En Ecuador y en Quito puntualmente se llega a encontrar plazas de trabajo
para diseñadores gráficos, se puede decir que hay cierta demanda de graduados en
tecnología e ingeniería en diseño, si bien para ocupar puestos de alto nivel se requiere
también experiencia y un título avanzado, es practicamente común encontrar un puesto
en donde saber de campañas digitales, diseño digital o afines no sea un requisito. Incluso
dentro de áreas que no se despegan del diseño gráfico tradicional como la animación o la
ilustración se benefician de muchas características de los medios digitales, en cuanto a la
ilustración se puede decir que ya no se necesita comprar costosos materiales de dibujo
para realizarlo, sino con la compra de un software se tiene una gran variedad de pinceles
y colores para elegir. Pipes enuncia (2011) que el diseñador web es un profesional que
conoce tendencias de diseño y arte, sabe apreciar la simetría, simbología y el estilo visual
de los elementos que usa, sin duda tiene una cultura visual muy elevada, adicional a esto
tiene conocimientos del entorno digital actual, los mismos valores de apreciación se
aplican a su visión del panorama web, en algunos casos maneja algunos lenguajes de
programación y está al tanto de las nuevas formas de comunicación digital.
Al hablar de un diseñador web se está hablando de un potencial empleado para cualquier
agencia de publicidad, empresa de productos u (Organización no gubernamental) ONG
que se base en interacción con personas en el medio digital. En algunos casos el
diseñador web llega a un nivel tan avanzado se encarga de la interfaz de usuario de
aplicaciones móviles, trabajo que requiere un manejo distinto tanto de gráfica como de
conocimientos de programación (Marcotte, 2011).
En breves rasgos, se puede decir que los diseñadores gráficos acostumbrados a la
imprenta notan diferencias al pasarse al diseño web. Cuando se diseña una pieza
13
impresa, por ejemplo, se sabe que todos los ejemplares tendrán el mismo aspecto y no
hay margen para el error, las fuentes tipográficas y sus tamaños serán los que se hayan
elegido y todos los elementos permancen inmutables. Weber (2010) aclara que en el
diseño web la disposición puede cambiar según la pantalla, el navegador, o si el
ordenador es un Mac o un PC.
1.2. Importancia de la propuesta gráfica en la Web móvil
El diseño web tiene muchas ventajas sobre la imprenta, como es el caso de la
publicación del trabajo, cuanto está terminado es instantánea. En el caso de la existencia
de un error, no se paga un nuevo tiraje de impresión, las correcciones se pueden subir a
la web en cualquier momento. Todas las imágenes están en RGB, que tiene una gama
más amplia que el CMYK, y serán más fieles a la idea base; los archivos a 72 (dots per
inch) dpi son mucho más pequeños que los de alta resolución que exige la imprenta. Y lo
que se puede considerar un gran punto a favor es que los textos son interactivos, con
vínculos, sonido y video.
En el caso del trato con el cliente cambia la forma en que se recibe el feedback, ya sea
directamente por email o entradas en un blog. Se puede vender y distribuir nuestros
productos a través de una tienda de internet y no hay que alquilar ni comprar equipos
costosos (Robbins, 2007).
Weber (2010) analiza que muchos diseñadores de sitios web suelen recurrir a trucos y
rodeos para obtener los resultados deseados. Se debe tomar en cuenta que internet fue
creada por científicos para compartir conocimientos académicos, entre otros objetivos y la
presentación no era prioritaria. Sin embargo con la aparición de las (Cascading Style
Sheets) CSS los diseñadores disponen de una gran herramienta. Se puede comparar con
la situación en el siglo pasado en el que para controlar las fuentes tipográficas se
convertía el texto en imágenes, lo que aumentaba el tamaño de los archivos y, además,
hacía el texto invisible a los motores de búsqueda.
14
Marcotte (2011) y Pipes (2011) exponen que a composición también fue un desafío.
Incluso de la estrategia de convertir páginas maquetadas en grandes archivos de imagen
con el texto y las ilustraciones, las limitaciones del diseño web se combatían empleando
marcos o tablas espaciadas mediante imágenes GIF transparentes. Programas como
Dreamweaver funcionaban de esa forma hasta que las últimas versiones recogieron las
(Cascade Style Sheets) CSS.
Según la experiencia del autor de este Proyecto de Graduación se puede decir que la
penacea del diseño en internet es crear un sitio web tan atractivo y emocionante que los
usuarios deseen volver a visitarlo una y otra vez. El contenido que corresponde imágenes
y texto es fundamental, pero la presentación también lo és.
La forma de lograr una armonía de contenido y presentación tiene que ver con:
composición, esquemas de color, tipografía y usabilidad (Stocks, 2009).
Los libros de teoría del diseño hablan de la importancia de la proporción aurea y de la
regla de tercios para disponer los materiales de manera armoniosa. Hilderman (2016)
sostiene que en el diseño web eso no es fácil; se trabaja en un lienzo que viene dictado
por las formas y tamaños de las pantallas de los ordenadores de los usuarios o sus
teléfonos móviles y si el diseño es fluido los tamaños y posiciones relativos cambiarán
cada vez que el usuario manipule la ventana del navegador redimensionando cada
elemento.
Weber (2010, p.67) declara: “¡No me hagas pensar!”. El autor afirma que la prueba de
fuego de un buen sitio web es que sea evidente, obvia, que explique a sí misma: “Tendría
que poder ´captarla´ sin esforzarme en pensar en ello”, concluye.
Una navegación simple y clara, con nombres obvios en los vínculos, cabeceras y textos
concisos que vayan al grano: se puede decir que son argumentos lógicos, pero muchos
diseñadores divagan demasiado oscureciendo los contenidos y ocultando los menús. En
muchos casos la mayoría de usuarios acude a internet en busca de información rápida y
15
quiza no capte sutilezas, sin embargo colegas del área web pueden agradecer los
pequeños detalles.
La sutileza es necesaria y va de la mano de el tipo de usuario al que va dirigida. Weber
(2010, p.32) destaca: “¿Qué voy a venderle al espectador? ¿Debería gritar para llamar su
atención?¿O el mensaje necesita un enfoque más sutil?” La mayoría de diseñadores
intentan hacerce estas preguntas con el fin de ponerse en los zapatos del cliente y
usuario.
Como se ha enunciado anteriormente la importancia del diseño gráfico no abarca solo el
desarrollo de un sitio web sino sus variantes también, es el caso de las versiones
móviles, concretamente en smartphones que cada vez aumentan y permiten acceder a
internet desde cualquier lugar. Pipes (2011) afirma que aparte del Ipad y aparatos
similares que emplean el sistema operativo Android de Google, la mayoría tienen
pantallas pequeñas entre (128 x 160 px y 320 x 480 px) y usan un elemento de
navegación que es el dedo humano.
En consecuencia, los sitios web específicos para móviles deben ser claros y legibles
además de tener una navegación simple, por ello si se ha diseñado un sitio con CSS se
puede aplicar Media Queries y de esta manera añadir una nueva hoja de estilos con
comandos que escondan, muestren y modifiquen los elementos ya diseñados de acuerdo
a cada resolución (Hilderman, 2016).
Esto permite que se retroceda varios pasos hasta el punto de partida en el que el sitio
web es básico, de una columna y con los valores por defecto del navegador, según
Weber (2010), el diseño para dispositivos móviles va a tener un papel fundamental en el
futuro e incluso va de la mano con el diseño de interfaz de usuario para apps.
Esta nueva forma de comunicar que permite estar conectados la mayoría del tiempo a
través del teléfono, ha provocado que cada vez se maqueten más sitios con la capacidad
de ser adaptables y en términos conocidos en el medio se puede llamar Responsive
Design, por lo que es básico en todo sitio que esté prevista y prediseñada para ser
16
adaptable a dispositivos de bolsillo. Esto también se aplica al área del diseño de Mockups
es decir maquetas del sitio, en el que se preveen todos los detalles de navegacion,
cambios de tamaño y se adaptan en el papel graficamente los elementos de un sitio.
Para ello existen aplicaciones especializadas que exportan las maquetas de forma tal que
el maquetador pueda entender cada aspecto y elemento así como la variación que va a
tener en cada resolución, pero sin embargo muchos profesionales no se despegan del
papel cuando nace una buena idea de navegación y adaptabilidad. Florentin (2015)
enuncia que la experiencia de usuario tiene que producir una experiencia única en
cualquier dispositivo de forma que se impulse a volver y recargar la pantalla esperando
algo nuevo, mejor y sobretodo más llamativo.
1.3. Uso de CMS y el diseño gráfico
Uno de los usos del PHP es la gestión de contenidos, o (Content management system)
CMS. Es utilizado en el sentido de que si el cliente desea realizar un cambio del
contenido que se ha realizado, pero al no saber de HTML no lo sabe hacer, se procede a
configurar un CMS para permitir la entrada de datos y modificación del sitio web a través
de un formulario. Es aquí donde se utiliza Wordpress, Drupal, Joomla, Blogger, siendo
Wordpress uno de los más populares (Pipes, 2011).
Una de las bondades de utilizar un CMS es que el diseñador crea una plantilla y el cliente
entra desde su navegador a un formulario protegido por contraseña para añadir o
actualizar el contenido, además pueden instalarse extensiones y plugins que amplían la
funcionalidad del sitio. Estas herramientas son dedicadas para programadores, pero
saber un tanto de HTML es de enorme utilidad para los diseñadores.
En general, el uso de un CMS no afecta al aspecto y estilo del sitio, que el diseñador
define en las CSS. Además,como lo enuncia Polance (2011), es posible tener acceso a
temas y plantillas descargables, algunas se encuentran gratuitas mientras que otras son
17
pagadas y oscilan precios cuantiosos de acuerdo al nivel de complejidad y efectos que
maneje como lo enuncia.
Si bien el uso de un CMS es relativamente fácil tanto para el cliente como para el
diseñador, también tiene ciertos puntos en contra en el tema de la seguridad. La
seguridad del sitio desarrollado en CMS depende de un usuario y contraseña, estos dos
requisitos deben cumplir ciertas normas básicas de complejidad para evitar que el
contenido se vea comprometido por usuarios indeseables. Han existido muchos casos de
sitios en Quito que son desarrollados con estas facultades por motivos de rapidez, precio,
etc, que terminan siendo arrasados por piratas informáticos, que cuyo objetivo primordial
es detectar este tipo de páginas y sin mucha dificultad rompen su seguridad.
Otro punto en contra que suelen tener diseñadores es justamente la existencia de una
limitación en la edición de ciertos elementos de una plantilla o tema predescargado, si
bien al empezar a desarrollar el sitio se tiene una maqueta y diseño de cómo se va a
presentar, al instalar una plantilla se limita mucho la capacidad de edición y por otro lado
obliga al diseñador a adaptar un diseño ajeno al propio, este puede ser un detalle sin
mucha importancia para algunos diseñadores sin embargo este proceso depende del
tiempo y proyecto en el que se este trabajando (Pipes, 2011).
La forma en que varias agencias adoptan el desarrollo de un sitio o web app es variada,
sin embargo se suele coincidir en que la mejor forma de trabajo es con un equipo de
desarrollo digital, dividido por partes, por un lado la parte gráfica y por otra la parte de
programación, Croll y Power (2009) afirman que este modelo es la forma más segura y
confiable en el desarrollo de un sitio pues a través de un framework es posible desarrollar
un CMS propio cuya función sea solventar las necesidades particulares del proyecto.
Por medio de esta forma de trabajo el diseñador se enfoca en dar soluciones de
navegacion, adaptar elementos para la vista en dispositivos y un diseño innovador
deferenciador, mientras que el programador utiliza estos elementos y los hace propios
uniendo cada pieza, haciendo funcional la página de manera que ambas partes tengan
18
un trabajo especializado. Pipes (2011) expresa que, por supuesto que existen casos en
que el diseño y la programación son realizados por el mismo diseñador web, y esto
resulta particularmente siempre que el tiempo no sea un factor en contra, de otro modo
se suele usar un CMS.
1.4. Ventajas de partir de una propuesta gráfica
Internet se encuentra actualmente en lo que se ha denominado la version 2.0 y nunca
había sido tan fácil tener presencia en la web, gracias a apps, dispositivos móviles, y
webs adaptables. Marcotte (2011) enuncia que red forma parte de la vida de casi todos;
para los diseñadores gráficos es una herramienta y una fuente potencial de ingresos, es
entonces que nace la pregunta: ¿cuál es la mejor manera de diseñar páginas web?.
Todos los diseñadores deberían tener su página web. Y tarde o temprano, en especial si
desean crear sitios web para sus clientes, tienen que aprender un poco de programación
de código. Pipes (2011) asegura que el diseñador al aprender un programa concreto, es
probable que se limite a usar dicho progama y excluya todos los demás, pero si aprende
diseño web en general, podrá elegir las herramientas a emplear.
Para hablar de la importancia del diseño y la porpuesta gráfica se debe hablar de la
tipografía y los cambios en cuanto a posibilidades de elección y edición. En los últimos
años, los diseñadores gráficos del sector de la imprenta han usado a placer las
posibilidades de elegir fuentes en cantidad y variedad, aunque no siempre había sido así
pues en los viejos tiempos de las cajas de plomo y la fotocomposición, solo se disponía
de unas cuantas fuentes clásicas. Los diseñadores de páginas web se encontraban en la
misma situación pues si el usuario no llevaba instalada la fuente esta no se podrá ver en
la página diseñada. Wrobleski (2008) expresa que actualmente existe más libertad y una
gran cantidad de fuentes de dominio público o con licencias opentype, que se adjuntan y
vinculan al CSS, permiten hacer uso de gran cantidad de formas, serifas y variaciones
que vuelven atractiva a una página.
19
Por otro lado también se debe hablar de la forma en que se debe presentar una página
web de acuerdo a las tendencias. Es bastante conocida la hipótesis de que las personas
conciben mejor un mensaje si este proviene de un gráfico o fotografía, es decir que se
puede afirmar que suelen ser más sensibles a una estimulación visual en los últimos
tiempos. Por ello las ventajas de un diseño previo son enormes, pues si la pagína
funciona en todos los aspectos estéticos que el diseño gráfico permite abastecer en el
proceso de maquetación, es más probable que el sitio funcione correctamente y transmita
el mensaje deseado. Es la mejor forma de trabajar cuando se trata con un cliente pues
este exige una muestra del trabajo para aprobarlo y en el caso del diseño web no se
puede presentar una propuesta maquetada sin una base previa y en corto tiempo. De ahí
la importancia beneficiosa de la propuesta gráfica, Pipes (2011) confirma que no solo da
valor al diseño gráfico sino que permite una previa visualizacion del sitio y es perfecta
para corregir errores además de experimentar con la navegación.
20
Capítulo 2. Creatividad aplicada a la tecnología
La creatividad es una herramienta importante para el diseñador de cualquier rama, no
solo es espontánea sino que nace a partir de un proceso de investigación, relevamiento y
selección de información, muchas veces el nivel de un proyecto se mide por la
originalidad que este lleva para resolver un problema, talvez se desarrolla a partir de un
descubrimiento de algo nuevo que siempre estuvo allí pero nadie más lo vió, la
creatividad puede nacer el momento menos pensado en compañía de una taza de café y
un disco de rock, pero es seguro que siempre será alimentada por la cultura visual y la
curiosidad de quién la busque.
Según los diseñadores creativos Barth y Hirscfield, “probando y mirando algo inesperado.
Dejar el ordenador, visitar una exposición. Ver una película, o dar un paseo” (2010,
p.167), son formas de entrenar la creatividad.
Actualmente los desarrolladores web crean sitios que cumplen funciones determinadas
sin embargo también se pone énfasis en el diseño pues muchas veces de eso depende
que el usuario se sienta cómodo y a más de tener una funcionalidad, lograr que el sitio se
vea agradable y sea ergonómico con respecto a los dispositivos en donde se muestra.
El diseñador tiene un campo infinitamente abierto para volar su creatividad, pues
practicamente puede proponer un sinfín de opciones de navegación Zander expresa que:
“El diseño tanto gráfico como de otro tipo es meramente lo contrario a la casualidad”
(2010, p.194), una de las formas en la que llega a hacer esto puede ser la investigación
ya que es capaz de recopilar aquellos elementos que cree útiles para mejorar el sitio y
compilarlos en una propuesta, de este modo se propone un diseño creativo en un
ambiente web funcional.
Existen tantas páginas web de referencia como nuevas ideas que permiten y facilitan el
trabajo del diseñador. De ahí la importancia del diseño gráfico que brinda un aporte
creativo sustancial al sitio web y de esta forma se convierte en un valor agregado en un
21
ambiente monótono especialmente en casos en el que el cliente es nuevo en el mercado
y requiere innovación dando un mensaje diferente a un público objetivo segmentado.
2.1. La creatividad en sitios Web de estudios de diseño
La creatividad es un factor importante en la publicidad, el buen uso de los elementos
puede hacer la diferencia entre una campaña común y una exitosa, es por eso que
muchas empresas de publicidad buscan un cambio mediante propuestas innovadoras,
tanto tecnológicamente como en funcionamiento. En muchos casos los proyectos más
exitosos son aquellos que logran comunicar adecuadamente un mensaje y llegan a
entusiasmar al usuario con algún elemento novedoso.
Al hablar de diseño web se habla de un panorama sin limitaciones, al que mucha gente
está conectada, forma parte y alimenta constantemente, esta es una ventaja en términos
de creatividad pues no solo se obtiene una gran fuente de información sino que se puede
proponer y experimentar con nuevas tecnologías que avanzan día tras día. La calidad de
diseño para Bolton es: “una idea bien pensada y bien llevada a cabo, el modo en que se
puede ver la pasión del diseñador en el producto final y que me deje la sensación,
¡maldita sea ojalá se me hubiera ocurrido a mi!”. (2007, p.190).
El concepto de estudio es diferente al de agencia en el sentido de que la experimentación
y la investigación son limitadas a causa del cliente y el tiempo. Para desarrollar un sitio
creativo no solo es necesario serlo o bien tener conocimientos teóricos unicamente, sino
que el entorno permita liberar esa creatividad, esto se logra a través de la investigación,
prueba y en una sola palabra, libertad.
Es preciso que un sitio web creativo que pertence a un estudio de diseño refleje aquellos
valores que predica para que sirva de muestra no solo visualmente sino en
funcionamiento y orden. Además es conveniente que las propuestas web sean dirijidas a
clientes tan innovadores como el producto web, muchas startups buscan diferenciarse en
22
el medio digital, por ello son un target importante y en este caso se ofrece creatividad en
la interacción que brinda la distinción, que empresas grandes de Quito han descuidado.
Es complicado definir la creatividad, Chaves (2008) enuncia que es un predominio de la
intuición sobre la racionalidad y de la inspiración sobre el trabajo que además es
asociada a una producción sin antecedentes o la respuesta a requisitos previos.
Definir la creatividad es tedioso pues todo depende de la situación, tal vez para empezar
se puede nombrar a los enemigos de la creatividad entre ellos la paranoia, el sentimiento
de que alguien acosa, persigue, acorrala y limita. Por otro lado no se debe entender que
poner condiciones al proyecto llega a cortar la creatividad, la creatividad esta siempre
coartada pues lo propio del diseño es dar respuesta a necesidades en condiciones que
no se modifican. Los condicionantes y limitaciones de todo tipo son su propio punto de
partida. Chaves (2008) expresa que la naturaleza del diseño es estar coartado, hay
factores que plantean condicionamientos que el diseñador debe asumir no cómo frenos
sino como desafíos.
El cliente es muy importante ya que sin él no hay diseño y sin diseño no nace la
creatividad, sin embargo si el cliente prefiere una respuesta convencional, poco creativa,
el diseño debe asumir ese dato como condición. En este sentido se puede afirmar que
asociar creatividad exclusivamente con la innovación es un error en algunos casos lo más
creativo es desistir audazmente y dejar todo como está.
Por otro lado y desde la óptica del diseñador, el objetivo de un proyecto no es satisfacer
las necesidades de auto expresión de este sino las necesidades de comunicación del
cliente, el diseño es un servicio. En la gran mayoría de agencias de publicidad se
establece relación con clientes que están equivocados pero quienes corren el riesgo son
ellos mismo, con esta condicionante el diseñador debe lograr una alta calidad diseño,
además de brindar asesoramiento para que no vuelva a caer en el error, sin embargo y
como Chaves (2008) lo enuncia la última palabra es de quien paga.
23
En el panorama de agencia la eficacia no puede descansar en la simple racionalidad
informativa, la solución del problema pasa, en gran parte, por la capacidad de imaginar
salidas inesperadas, en muchos casos la voz la lleva la oferta y para penetrar en un
mercado medianamente saturado, como lo es el del diseño de Quito, se debe recurrir a
todo tipo de fuentes de motivación.
Se ha mantenido la concepción de que el diseño creativo es la respuesta a una
necesidad no resuelta, esta concepción puede sintetizarse con la expresión problem
solving. El problema en sí no ha tenido solución, pues es difícil. Y esa dificultad sólo la
vence la capacidad de ciertas personas entrenadas para combinar todo tipo de recurso a
fin de hallar la salida (Chaves, 2008).
Para definir creatividad se puede decir que es la capacidad que no es azar sino una
compleja combinatoria de recursos mentales, para Chaves es:
La habilidad para encontrar soluciones insospechadas para problemas aparentemente insolubles. Carece de toques mágicos o misteriosos: creatividad no es más que inteligencia, una inteligencia en cierta medida cultivable y desarrollable, que medio de una gran cantidad de información aparentemente desconectada y caótica puede descubrir semejanzas que otros no descubren, ver opciones que otros no ven, establecer conexiones que otros no establecen y, consecuentemente, puede producir síntesis nuevas y sorprendentes (Chaves, 2008).
En muchos casos el diseñador tiende a guardar el trabajo generado como desperdicio y
de momento logra descubrir que tras todo ese trabajo que se considera como basura,
aparece de la nada una solución al problema, de esta forma hay un vínculo de similitud
entre las palabras guardar y filtrar, entonces que un criterio insatisfactorio se sustituye por
otro más satisfactorio y de eso se trata la creatividad de obtener resultados más
satisfactorios.
Por otro lado, se puede afirmar que el producto creativo no existe sino hasta que este es
aceptado por la sociedad, de otra forma, sólo es potencialmente creativo. Del otro lado
de la balanza se encuentran quienes afirman que la creatividad simplemente no existe.
Ambos puntos de vista son totalmente radicales. En este punto es difícil afirmar que la
24
creatividad es simple y unidimensional de la persona. Según Carlo (2014) la creatividad
es un constructo multidimensional.
El ser creativo no es un requisito en el diseño. Chaves (2008) enuncia que es un mito que
se debe romper y que los programas diseño presentan una gama amplia de grados de
dificultad, por lo tanto, demandan grados proporcionales de creatividad además uno de
los indicadores de calidad del diseño es, precisamente la proporcionalidad en que el
exceso de imaginación es tan grave como su ausencia.
Desde un punto de vista operativo la creatividad es una capacidad compleja del ser
humano asi como una cualidad.
La expresión creativa se asocia a la forma de responder a sentimientos de angustia,
confusión y frustración de la persona el nacimiento de creatividad está hecho a partir de
la forma en la que se encauza.
Después de definir la creatividad bajo la tutela de autores importantes, es importante
distinguir la verdadera función el diseñador gráfico dentro de la sociedad actual, en la
que el diseño es una herramienta de comunicación más que una intención inspiradora,
no siempre creativa.
Es entonces que el creativo profesional debe fomentar la preservación de ideas nuevas y
motivarse prestando atención a sus ocurrencias como a ampliar su área de conocimiento,
con el objeto encontrar nuevas aplicaciones siempre útiles en el campo del diseño.
De igual forma un diseñador creativo debe ser capaz de gestionar los recursos, los
entornos y los equipos de trabajo para estimular una mayor expresión creativa además
algo que es imprescindible en el diseñador es que sea un receptor abierto a la
alimentación y al reconocimiento tanto de sí mismo como del resto de personas,
procurando una mayor generación de ideas innovadoras (Shedroff, 2009).
En este siglo la función del diseño ha evolucionado a partir de la transformación social y
el impacto de una industria creciente. Actualmente permite potencializar una propuesta
en términos comunicativos. No se aparta de ninguna manera de la naturaleza misma de
25
comunicar, su propósito es el de crear el lenguaje apropiado para cada situación con la
mayor profesionalidad posible, satisfaciendo al máximo las necesidades de su cliente.
Para Carlo (2014), no se trata de manipular el mensaje que le fue entregado sino de
multiplicar sus capacidades comunicativas.
En este sentido, un buen diseñador, no puede darse lujo de aislar su visión en las cosas,
sino que debe ser crítico y reflexivo en función de sus proyectos.
Este oficio se encuentra en una de sus mayores áreas de aplicación en el terreno de la
publicidad, a través de la elaboración de anuncios, sitios web y artes para redes sociales.
Ello exige un desarrollo creativo tanto en la propuesta como en la multiplicación del acto
comunicativo.
2.2. Creatividad como valor agregado de un sitio.
El pensamiento creativo parece no existir hasta que se presenta la oportunidad y que la
consigna de este es crear cosas simples oportunamente para facilitar el futuro cercano.
Algo que se debe tomar en cuenta es el perfeccionamiento, es decir que al tener un sitio
web diseñado es posible tomarse la libertad de agregar o eliminar elementos además de
funciones que mediante un análisis se puede determinar si son o no necesarias.
Por lo tanto es muy importante conocer a dónde se quiere llegar y definir si el cambio que
se va realizar es realmente una mejora, pues se pueden añadir características basándose
en la experiencia, las nuevas tecnologías, la nueva información, el análisis y la lógica
(Krug, 2006).
La resolución de problemas es un área importante en la generación del pensamiento
creativo. Si los procedimientos estándar no ofrecen soluciones, se deben hacer cosas
diferentes. Y aunque el procedimiento corriente pueda brindar esa solución, siempre tiene
sentido aplicar el pensamiento creativo con el propósito de encontrar otra mejor.
26
En el desarrollo de sitios web la resolución de problemas es inevitable, esto lleva al
diseñador a buscar nuevas alternativas y caminos que puedan adaptarse a cada
situación, lo imperativo es no perder el rumbo.
En el entorno web se puede determinar previamente la estructura del sitio además de
especificar qué tipo de interacción va a tener con el usuario, el uso de colores, tipografías
e imágenes. A medida que se aumenta la competitividad, el éxito y la supervivencia
pasan a depender de lo que se pueda hacer con los bienes fundamentales que cada uno
posee. Según Carlo (2014), en el caso del diseñador web, la creatividad es la una forma
de generar valor agregado a cualquier proyecto.
En este particular, la generación de oportunidades requiere un pensamiento creativo. La
creación de nuevos valores exige nuevos conceptos. Este proyecto se desarrolla en base
de dar importancia al futuro, es decir armar una estrategia puede ser beneficioso y
creativo, el mismo hecho de diseñar un sitio y que sea funcional para un cliente, es
proyectar estratégicamente los elementos que se van a utilizar para hacer de ese sitio
web único e irrepetible.
Un factor indispensable es la motivación porque logra que la gente se interese por lo que
se está haciendo. Velasco afirma: “La creatividad brinda a todos la posibilidad de
alcanzar logros, de hacer la vida más divertida y más interesante. Proporciona un marco
para el trabajo en equipo con otras personas”. (2014, p.12).
27
Capítulo 3. Navegabilidad en un sitio web
El objetivo de este capítulo es analizar los aspectos que generan una buena navegación
web. Se pretende enumerar los lenguajes y tendencias de programación más comunes y
definirlos aclarando su utilidad.
En cuanto a la metodología se quiere analizar los datos tomando en cuenta las
cualidades, aportes y ventajas de cada tendencia.
Para su abordaje se pretende hacer una descripción sobre las herramientas que permiten
desarrollar un sitio adaptable que cumpla con los estándares actuales y a través de
argumentos, definir sus aportes a la navegación.
3.1. La navegación y el usuario
En el inicio de este siglo la tecnología de los sitios web se ha visto modificada por la
apertura que se ha dado a través de los dispositivos móviles. En un principio era muy
común ver una página completa en una pantalla muy pequeña, con el paso del tiempo
esto se ha modificado para beneficio del usuario.
Según Wroblewski (2011) en la primera década de este siglo los teléfonos y los
dispositivos móviles en general, fueron evolucionando de tal manera que para las
personas se volveron indispensables, además se fueron acoplando nuevas tecnologías,
así como una evolución en el manejo de datos y la forma en que se presentan. Las
pantallas de estos dispositivos aumentaron su resolución, su velocidad y sus
capacidades, con ello fue necesario un cambio en la estructura de los sitios web, fueron
apareciendo nuevas herramientas que ayudaban a transformar un sitio estático, en un
sitio adaptable. Con ello también una nueva tendencia que ampliaba el panorama del
diseño y acompañado con el acceso casi ilimitado al Internet de los últimos tiempos, se
fueron desarrollando formas de adaptar sitios enteros en las pantallas de los dispositivos
móviles a través de estilos CSS. Aparecieron nuevas líneas de código que permitían el
desarrollador elegir y cambiar los estilos de un sitio, se puede decir que el lenguaje de
28
Javascript tuvo y ha tenido hasta ahora una gran relevancia ya que se fueron compilando
muchas líneas de código que funcionan como plugin, permitiendo facilitar y ahorrar
tiempo el momento que programar. Con este avance se empieza a estilizar cada detalle y
además se suaviza la interacción con los elementos, es decir que se vuelve más
amigable visualmente con el fin de que el usuario se sienta cómodo.
En síntesis es correcto decir que los últimos años con el aumento de dispositivos, las
personas se han vuelto muy visuales y es por eso que la interfaz de usuario es muy
importante, esto involucra la selección de colores, tipografías, íconos, etc.
Los factores mencionados no han sido las únicas razones por las que actualmente se
usan los dispositivos móviles con más frecuencia, los avances tecnológicos y la rapidez
de las redes aún formado parte del cambio también. Es por eso que los sitios de ventas
online estuvieron obligados a usar plataformas móviles, pues la gente ya no veía las
ofertas desde su computador de escritorio, sino que lo hacía a través de su celular. Si
bien se diseña un sitio para móviles también se debe tomar en cuenta la velocidad y el
poco uso de recursos que debe generar pues si se usan imágenes de muy alta calidad se
corre el riesgo de que se demoren codificar y así también el código que de alguna forma
debe ser de tamaño reducido. La velocidad no es todo lo que importa en un móvil pero
puede definir si un usuario se queda en el sitio o cierra el navegador por el largo tiempo
de carga. Por este motivo Griffiths (2015) explica que últimamente se puede encontrar
sitios usando una tendencia muy común llamada One Page, esta tendencia consiste en
que la navegación es determinada por un simple movimiento de dedo ya sea en la
pantalla del dispositivo móvil o en el movimiento del escalón del ratón, generalmente se la
usa para hacer sitios simples que sirven de información o de landing pages, son bastante
efectivos y su movimiento suavizado es atractivo al ojo del usuario, es un gran ejemplo de
navegación simple y efectiva. Funciona bien en proyectos con objetivos informativos y
hasta coorporativos que se enfocan en dar a conocer datos rapidos a manera de tarjeta
de presentación.
29
La ventaja más grande de usar esta tendencia es que en temas de maquetación, es más
fácil adaptar a dispositivos móviles pues usa una grilla de una sola columna y en pocas
líneas de código se puede apreciar en un celular.
Existen tendencias más avanzadas que mezclan el One Page con otro tipo de
navegación más animada, cabe recalcar que mediante CSS, es posible crear animación
de botones, menús, desplazamiento de elementos entre otras cosas. Una característica
que se mezcla muy bien con esta tendencia es el Parallax, que consiste en un
movimiento adornado por capas con contenido diferente, que se mueve en un
contenedor, generando así la idea de traslado, dando bastante importancia al contenido
que allí se muestre.
Si bien el sitio muestra bastante información, es necesario que en la versión móvil de
este, mantenga un diseño simple de manera que el usuario se sienta cómodo
interactuando, así como un menú completo que permita acceder a todo el sitio web desde
un solo botón.
Es importante ubicar los elementos de forma correcta para evitar la confusión al momento
de buscar una información específica, es decir que debe existir una cabecera, un cuerpo,
y un pie, deben ser simples pero deben estar presentes.
Pequeños detalles como los efectos que muestran y esconden el menú, carruseles en las
fotografías, un botón para volver a la cabecera, pueden hacer la diferencia en la
navegación, el objetivo principal de esta es que sea fácil de entender por el usuario, no
sea estática y que cumpla una función (Griffiths, 2015).
Hilderman (2016) cree que para diseñar un sitio responsive hay que hacerlo pensando en
el usuario limitado ese es el usuario que no tiene una pantalla grande, un teclado
ergonómico, una intensa señal de Wi-Fi ni un escritorio en un cuarto tranquilo con todas
esas cosas. Debe desarrollar para gente con una tecnología de 4G en las manos y cuyo
transporte público pasa por un túnel.
30
Es importante mantener en mente, que los usuarios no sólo están los teléfonos. Una vez
que el diseñador se pone en los zapatos de alguien que mira en una pequeña pantalla
mientras sube al transporte público, tiene que recordar que la gente estará consumiendo
su contenido en más lugares que en escritorios y en más dispositivos que solo teléfonos
inteligentes. Ese es el punto del Internet, que es universal.
3.2. Navegación aplicada a tiempos modernos
Para entender cómo los usuarios usan un sitio es importante definir y entender las
fuerzas que conducen el comportamiento del usuario sus acciones. Últimamente la
mayoría de la información usada por el usuario para entender proviene de lo que ve. Para
ello es importante conocer cómo funcionan los ojos del usuario y principalmente que
detectan primero al ver un sitio web.
Según Florentin (2016) hay dos fuerzas importantes que conducen el movimiento
mientras el usuario revisa el sitio: desde arriba abajo y de izquierda derecha. Ambas
fuerzas son muy importantes en el diseño impreso como por ejemplo los periódicos,
ebooks y ads.
Del mismo modo son importantes en la plantilla digital, de sitios web, landing pages y
aplicaciones móviles.
La primera fuerza es la vertical, de arriba abajo, permite escanear la información visual
desde la parte superior hasta la inferior. Se hace esto para colocar la información
principal y más importante en la parte superior, de forma que se pueda asegurar que el
usuario la vea primero.
La segunda fuerza es la que influye en la lectura horizontal de izquierda a derecha. Esta
fuerza está basada en la dirección de lectura de lenguaje del contenido. Generalmente,
ambas fuerzas tienen igual magnitud y generan una gráfica que cruza la pantalla desde la
parte superior izquierda hasta la parte inferior derecha. Es decir que la lectura del usuario
31
va desde la esquina superior izquierda de la pantalla. Las dos fuerzas dirigirán sus ojos a
través hasta la esquina inferior derecha de la misma (Florentin, 2014).
Es aquí entonces donde empieza el trabajo del diseñador. En llenar ese espacio entre las
dos esquinas usando los elementos adecuados para captar la atención del usuario y
hacer que su mirada se centre en lo que se quiere mostrar.
Para llenar este espacio se requiere dividir la pantalla en cuatro: superior izquierda,
superior derecha, inferior izquierda e inferior derecha.
El primer cuadrante, en la superior izquierda, es llamado Área óptica primaria. Es el lugar
donde el ojo registra por primera vez la página. Esta área captura la atención inicial, por
esta razón, es el lugar adecuado para dar la bienvenida al usuario a la página, esto
puede ser a través de la colocación de un logotipo o brindando información.
La segunda área es llamada Seguimiento fuerte y es la que sigue a el Área óptica
primaria. La visión del usuario es horizontal y, naturalmente, seguirá esta dirección
permitiendole ser descubierta por el ojo. Para validar esta idea, la meta del diseñador es
colocar elementos qué provoquen al ojo moverse horizontalmente.
La cuarta área de la pantalla es la que se denomina Área terminal. Es aquí donde el
fluido visual termina, en este lugar sería correcto poner botones de acción y la explicación
para que el usuario continúe su navegación en la página.
La tercer área se la denomina de Seguimiento débil. En esta área se debe evitar colocar
cualquier información importante pues no conducirá a la atención del usuario.
La idea general descrita está construida bajo un camino correcto de pensamiento. Obviar
un cuarto de la pantalla es un privilegio que no siempre se tiene. Trabajar de esta forma
permite efectividad en el desarrollo de Landing pages y sitios web de contenido.
Anderson (2012) define la esperiencia de usuario como la experiencia que tiene un
usuario al interactuar con un software. En muchos casos el diseñador web se llega a
preguntar sobre los factores que permiten desarrollar con éxito una interfaz de usuario
(UI) efectiva, construida con un moderno uso estandarizado de experiencia de usuario de
32
alta calidad (UX), puede pensar diseño de vanguardia, innovación e inspiración, además
del uso de las mejores tecnicas prácticas. Estos son componentes importantes pero
Anderson (2012) cree que la entrega de un equipo a la causa de una buena experiencia
de usuario (UX) es parcialmente dependiente de su creatividad y competencia técnica. El
resto depende en la creación de clima adecuado para el equipo y la compañía que
permita al grupo ser efectivo y esto aporte a que el éxito llegue de forma segura
constante.
Además explica que a causa de un clima desfavorable, muchos proyectos se vuelven
dificiles y desepcionantes. Sin embargo se pregunta como asistir a la gente para tener
éxito en la construcción de una experiencia de usuario genial, y propone una situacion
inesperada: enfocarse en menos en entrenar gente en como diseñar apropiadamente
sino enfocarse más en cómo crear un escenario donde una buen producto de diseño
puede existir y tener éxito.
Según este autor la forma más fácil , intuitiva y obvia de vinculación con el usuario es la
experiencia que aporta un buen videojuego. Los juegos de video de primera persona
(FPS) particularmente impulsan la inmersión de un gran número de jugadores.
Explica además que la inmersión profunda ocurre cuando el jugador se vuelve menos y
menos al tanto de su entorno, especialmente cuando la percepción del espacio que lo
separa de la pantalla empieza a desaparecer. Anderson afirma que: “la creación de esta
inmersión profunda es una forma de arte”. (2012,p.6).
Si el diseñador entiende que un engagement positivo puede llevar a que el usuario
experimente un gran placer y efectividad de mensaje al visitar el sitio web y, que por el
contrario si esto no se cumple puede llevar a usuario a sentir dificultad, sensación de
tiempo perdido. Es fácil imaginar porque el engagement y un buen UX son importantes en
el consumidor.
Los elementos que permiten una UI efectiva se listan empezando por la familiaridad,
Anderson (2012) explica que es más fácil manejar una herramienta siempre y cuando
33
esta sea reconocilble, que sea de uso común. Este autor nombra tambien la capacidad
responsiva y el feedback como elementos para confirmar si la acción que se esta
tomando esa siendo efectiva además del desempeño, la capacidad intuitiva y la eficiencia
como determinantes en el diseño de un sitio web y en general de cualquier tipo de
interacción digital.
3.2.4. Diseño Responsivo
El diseño responsivo actualmente forma parte de los elementos básicos de un sitio web
pues, como se ha desarrollado anteriormente, el mundo digital ha pasado por un periodo
de transición por algún tiempo en el que las grandes pantallas alargadas no son la única
forma de visualizar la información sino simultáneamente a través de pantallas de
dispositivos más pequeños.
Los dispositivos con pantallas pequeñas se estima, van a convertirse en la forma
dominante en la que se accede a la web, se ha visto esta transición durante los últimos
años en la que poderosas laptop han sido reemplazadas por ligeras tablets. Sin embargo
en términos de diseño se debe encontrar un punto medio en el que se pueda acceder a la
información por diferentes medios.
Marcotte (2011) afirma que existen formas y elementos para crear un diseño responsivo,
hablando en términos de front-end se puede mencionar: la creación de una grilla flexible,
imágenes y contenido flexibles además del uso de módulos específicos del CSS3
llamados media quieres. Los mencionados son solo algunas formas de obtener un sitio
adaptable. Muchos diseñadores prefieren empezar a diseñar basándose en el
funcionamiento desde un móvil para después adaptar pantallas más grandes, esto marca
una diferencia muy grande en la que se da preferencia al funcionamiento de los sitios en
dispositivos móviles quien equipos de escritorio, esto se debe aquí estadísticamente las
personas acceden a la información cada vez más desde estos dispositivos.
34
La forma más recomendable de hacer responsivo un sitio web es mediante media
queries, pues permiten definir resoluciones y trabajar con estilos específicos en cada una
de ellas, de esta forma se reemplazan los estilos y automáticamente el sitio se vuelve
adaptable.
El diseñador web puede optar por usar métodos creativos en el proceso de adaptabilidad
de un sitio web, generando así un valor agregado a su producto, de esta formano sólo
trabaja con lo establecido sino que lo modifica para obtener resultados diferentes.
En Quito se puede decir que no se da mucha importancia el diseño responsivo, debido a
que el término en sí genera un desconocimiento profundo, es por esta razón que las
ventajas de un diseño adaptable son desconocidas por muchos emprendedores y
empresas que mantienen un modelo antiguo cerrándose así a los beneficios que esta
tendencia trae.
Un sitio adaptable no sólo debe mejorar la funcionalidad en dispositivos móviles sino que
debe permitir que el diseño obedezca a una plantilla o guía principal de manera que no se
desdibuje el mensaje a transmitir ni se pierda el concepto del sitio. Por ello el trabajo del
diseñador parte de la creación de una interfaz de usuario para móviles así como para
usuarios de escritorio.
Wroblewski (2011) señala que por años, muchos equipos web han diseñado productos
para el escritorio y computadoras laptop. Para estos equipos los dispositivos móviles
estuvieron en segundo plano. La razón era que, navegar en la web a través de teléfonos
celulares era muy dolorosa; en el sentido que la navegación era controlada por empresas
monopolizadoras y las velocidades de conexión era muy bajas. Muy poca gente usaba
sus dispositivos para navegar en la web, generalmente era una experiencia poco
placentera. Pero las cosas han cambiado dramáticamente en los últimos años,
empezando con que los equipos de escritorio han tenido un retroceso en la forma en que
se presenta la web como producto. Diseñar priorizando en los dispositivos móviles no
35
sólo abre grandes oportunidades de crecimiento, sino que puede ser toda un experiencia
para un sitio web una aplicación.
3.1. La navegación y el usuario 3.2. Navegación aplicada a tiempos modernos
3.2.4. Diseño responsivo 3.2.5. Mockup´s y la adaptabilidad del sitio 3.2.6. El diseño gráfico a partir de Mockup´s
3.3 Maquetación, tecnología y tendencias 3.3.4. HTML, CSS, JavaScript y PHP 3.3.5. Media queries 3.3.6. Plugins y librerías JavaScript
36
Capítulo 4. Desarrollo de concepto a comunicar
El objetivo de este capítulo es generar un mensaje claro para transmitir a través de
técnicas de comunicación, empezando por definir antecedentes y objetivos de la
empresa, un grupo objetivo y un plan de comunicación estratégico.
Para ello se va a hacer un análisis cualitativo definiendo un mensaje a través de una
estrategia de comunicación eficaz, tomando en cuenta el target y oportunidades que tiene
la marca en el entorno de Quito.
Se pretende hacer una descripción del target al que se dirige para que beneficie al
lenguaje gráfico que se va a utilizar en el proceso de diseño.
Se va a utilizar a Fisher pues hace una gran descripción del proceso de diseño y de
vinculación con proyectos y clientes, a demás juntar las ideas de Ogrady sobre la
búsqueda de información y las necesidades del cliente.
Objetivo general:
Generar un mensaje claro para transmitir a través de técnicas para sintetizar la
comunicación.
Objetivo específico: (3-5 objetivos)
Definir antecedentes y objetivos de la empresa.
Definir un grupo objetivo a quien debe apuntar el sitio.
Desarrollar un plan de comunicación digital.
Metodología:
Análisis cualitativo – Se busca analizar los objetivos de la empresa para establecer un
mensaje a través de una estrategia de comunicación eficaz, tomando en cuenta el target
y oportunidades que tiene la marca en el entorno de Quito.
Estructura del texto:
Se pretende hacer una descripción de los objetivos de la empresa y el target al que se
dirige para terminar definiendo un plan de comunicación estratégico y que beneficie al
lenguaje gráfico que se va a utilizar en el proceso de diseño.
37
Fuentes:
O´Grady, J. y. (2009). A designers research manual, succeed in designado by knowing
your clientes and what they really need. Massachusetts
Pipes, A. (2011). How to design web sites. Londres: Laurence king Publishing Ltd.
Polace, J. (2011). What is responsive design. Retrieved from johnpolacek.github.io:
http://johnpolacek.github.io/WhatTheHeckIsResponsiveWebDesign-impressjs
Wrobleski, L. (2008). Web form design: Filling in the blanks. Brooklyn: Rosenfeld Media.
Fisher, C. Manual del diseñador freelance, no empieces a trabajar sin el. .
Morvile, P y Rosenfeld, L. (2007). Information Architecture for the World Wide Web. EE.UU.; O´Reilly Media.
Safko, L & Brake, D. (2009). The social Media Bible. Hoboken, New Jersey; Wiley &
Sons. Sethi, Maneesh. (2009). Twitter up your business. Stanford; Rockable Press.
38
Capítulo 5. Rediseño de sitio
Lo que se propone como objetivo es generar un rediseño funcional con respecto al
anterior, que se beneficie de una navegación y comunicación adecuadas para que el
mensaje vaya acorde con los objetivos del proyecto aportando a su funcionalidad.
Para ello se busca detectar aquellos elementos que no beneficien al sitio o que su valor
agregado sea mínimo y de esta forma relevar los elementos sobrantes rescatando
aquellos que aporten o puedan mejorar la interfaz y la navegación.
Se pretende hacer un análisis descriptivo de los elementos actuales de la página y
aclarar los motivos por los que se cambia cada elemento o reemplazan por otros nuevos
o mejores.
Se va a utilizar a Pipes y Polace pues en sus recopilaciones dan pautas para rescatar un
sitio web, señalando aquellos elementos que aportan y describiendo la forma en que se
tienen que aplicar esos cambios según cada proyecto de forma que se cada elección
proyecte un resultado positivo ante el usuario del sitio.
Objetivo general:
Rediseñar el sitio de Llika WS
Objetivo específico: (3-5 objetivos)
Diseñar el sitio de Llika WS en base a una nueva estructura de navegación
Mejorar la interfaz de usuario y la navegación.
Aplicar un plan de comunicación adecuado para cumplir los objetivos del sitio
Metodología:
Análisis cualitativo y cuantitativo – Se busca detectar aquellos elementos que no
beneficien al sitio o que su valor agregado sea mínimo y de esta forma relevar los
elementos sobrantes rescatando aquellos que aporten y puedan mejorar la interfaz y la
navegación.
Estructura del texto:
39
Se pretende hacer un análisis descriptivo de los elementos actuales de la página y de
esta forma ir nombrando aquellos que se pueden rescatar y aclarar los motivos por los
que se cambia cada elemento o reemplazan por otros nuevos o mejores.
Fuentes:
Pipes, A. (2011). How to design web sites. Londres: Laurence king Publishing Ltd.
Polace, J. (2011). What is responsive design. From johnpolacek.github.io:
http://johnpolacek.github.io/WhatTheHeckIsResponsiveWebDesign-impressjs
Wrobleski, L. (2008). Web form design: Filling in the blanks. Brooklyn: Rosenfeld Media.
Fisher, C. Manual del diseñador freelance, no empieces a trabajar sin el.
Awwwards.com. (2013). Trends Web and mobile. Equipo de Awwwards. Wroblewski, L. (2008). Web Form Design. NY; Rosenefeld Media. Krug, S. (2001). Usability guidelines for accesible web design. Berkeley; Nielsen Norman
Group.
Conclusiones
Los sitios en Quito son poco innovadores si bien pueden ser funcionales no cumplen con
los estándares básicos de diseño.
Se desprecia el trabajo del diseñador gráfico en el desarrollo de un sitio web.
Se minimiza el diseño del sitio responsive, y su importancia en el medio actual, por
desconocimiento o des interés.
Se debe empezar mediante un boceto dibujado del sitio para continuar con una propuesta
gráfica de diseño y funcionalidad.
Se puede hacer un análisis de la navegación y las tendencias del usuario.
Todos los sitios deben incluir una versión para dispositivos definida por media queries.
Usar nuevas formas para mostrar la información en diagramación enfocándose en la
creatividad como valor agregado.
40
Lista de referencias bibliográficas Awwwards.com. (2013). Trends Web and mobile. Equipo de Awwwards. Carlo, J. (2014). Creatividad Aplicada al Diseño. Londres. Fishel, C. (1 Ed.) (2011). Manual del diseñador freelance, no empieces a trabajar sin él.
Barcelona: Parramón ediciones. Florentin, T. (2015). Design for a perfect screen. EE.UU.; UXVision. Garrett, J. (2011). The elements o user Experience: User Centered Design for the web
and Beyond. Berkeley; Jesse James. Krug, S. (2001). Usability guidelines for accesible web design. Berkeley; Nielsen Norman
Group. Krug, S. (2006). Don´t make me think. Berkeley; Nielsen Norman Group. Morvile, P y Rosenfeld, L. (2007). Information Architecture for the World Wide Web.
EE.UU.; O´Reilly Media. Robbins, J. (2007). Learning web design (3 ed.). Estados Unidos: O’Reilly Media. Safko, L & Brake, D. (2009). The social Media Bible. New Jersey; Wiley & Sons. Sethi, Maneesh. (2009). Twitter up your business. Stanford; Rockable Press. Velasco, Lucía. (2014). Desarrollo del pensamiento creativo. Londres. Visocky O'grady, J. y Visocky O'grady, K. (3 Ed.) (2009). A designers research manual,
succeed in designado by knowing your clientes and what they really need. Massachusetts: Quayside Publishing Group.
Weber, M. (1 Ed.) (2010). Nuevas tendencias en maquetación y diseño editorial.
Barcelona: Mao Mao publicaciones. Wroblewski, L. (2008). Web Form Design. NY; Rosenefeld Media.
41
Bibliografía Adobe. (2000). Typhography Primer. EE.UU.; Adobe Corp. Anderson, J. (2012). Effective UI. Sabastopol; O´reilly. Awwwards.com. (2013). Trends Web and mobile. Equipo de Awwwards. Battro, A. y Denham, P. (2005). Hacia una inteligencia digital. Buenos Aires; Estudio
Sigma. Bearid, J. (2010). The principles of beatiful web design. (2 ed.). Sitepoint, EEUU. Bolt, N., y Tulathimutte, T. (2009). Remote Research. NY; Rosenefeld Media. Brunborg, E. (2012). CSS Baseline: The good, the bad and the ugly. Disponible en:
http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-andthe-ugly/
Carlo, J. (2014). Creatividad Aplicada al Diseño. Londres. Cederholm, D. (2008). Bulletproof web design : improving flexibility and protecting against
worst-case scenarios with XHTML and CSS. (2 ed.). Berkeley, California, EEUU. Centro de investigación de la Web. (2008). Cómo funciona la web. Santiago de Chile;
Gráfica LOM. Clarke, A. (2007). Transcending CSS: the fine art of web design. (1 ed.). Berkeley,
California, EEUU. Croll, A. y Power, S. (2009). Complete Web Monitoring. EE.UU.; O´reilly. Estes, J., Schade, A., y Nielsen, J. (2009). Social media user experience. California;
Nielsen Norman Group. Florentin, T. (2015). Design for a perfect screen. EE.UU.; UXVision. Garrett, J. (2011). The elements o user Experience: User Centered Design for the web
and Beyond. Berkeley; Jesse James. Giannasttasio, T. (2010). Mastering Photoshop for Web Design. Freiburg; Smashing
Magazine. Griffiths, S. (2015). Mobile App UX Principles. California; Google. Hagen, Rebecca. (2013). White space is not your enemy : a beginner´s guide to
communicating visually through graphic, web & multimedia design.(2 ed.). NY, EEUU. Hartson, R. , y Pyla, P. (2012). The Ux Book. Masachussetts; Elsevier. Hilderman, B. (2016). Building Responsive Data Visualization for the Web. Indiana; Willey
& sons.
42
Krug, S. (2001). Usability guidelines for accesible web design. Berkeley; Nielsen Norman Group.
Krug, S. (2006). Don´t make me think. Berkeley; Nielsen Norman Group. Krug, S. (2006). Rocket surgery made easy. Berkeley; Nielsen Norman Group. Lennartz, S.,Friedman, V.,Müller, M. (2010). Successfull Freelancing for Web Designers.
Freiburg; Smashing Magazine. MacLees, N. (2012). Jquery for Designers Beginner´s Guide. Birmingham; Packt
Publishing. Marcotte, Ethan. (2011). Responsive Web Design. New York; Jeffrey Zeidman. McNeil, P. (2010). The web designer's idea book (Vol. 2). Cincinnati, Ohio: How Books. Morvile, P y Rosenfeld, L. (2007). Information Architecture for the World Wide Web.
EE.UU.; O´Reilly Media. Nielsen, J. Y Budiu, Raluca. (2009). Mobile Usability. Berkeley; Nielsen Norman Group. Norton, S. y Quesenbery, W. (2011). A web for everyone. Brooklyn, NY; Rosenefeld
Media. Pernice, K., Loranger, H. y Nielsen, J. (2009). Pr on websites. California; Nielsen Norman
Group. Pipes, A. (2011). How to design web sites, Londres: Laurence King Publishing Ltd. Polace, J. (2011). What is responsive design. Disponible en:
http://johnpolacek.github.io/WhatTheHeckIsResponsiveWebDesign-impressjs Quesenbery, W. , Brooks, K. (2010). Storytelling for User Experience. Brooklyn, NY;
Rosenefeld Media. Robbins, J. (2007). Learning web design (3 ed.). Estados Unidos: O’Reilly Media. Safko, L & Brake, D. (2009). The social Media Bible. Hoboken, New Jersey; Wiley &
Sons. Santa Maria, J. (2014). On web typography. NY; Jeffrey Zeidman. Sethi, Maneesh. (2009). Twitter up your business. Stanford; Rockable Press. Shedroff, N. (2009). Design is te problem, the future os design must be sustainable.
Brooklyn, NY; Rosenfeld Media. Silva, C. (2010). Del diseño editorial al desarrollo web. Disponible en:
http://www.hipertextos.com.ar/?p=329 Spencer, D. (2009). Card Sorting. Brooklyn. NY; Rosenefeld Media. Stocks, E. (2009). Sexy web design. Australia: Sitepoint.
43
Tedesco, D., Schade, A., Pernice, K., Nielsen, J. (2008). Site map Usability. California;
Nielsen Norman Group. Ulrich, K. (2013). Diseño y desarrollo de productos. México DF; McGrawHill. Velasco, Lucía. (2014). Desarrollo del pensamiento creativo. Londres. Weber, M. (2007). The layout look book: guia visualde diseño & maquetación. (1 ed.).
Barcelona, España. Wroblewski, L. (2008). Web form design: Filling in the blanks. Brooklyn, New York:
Rosenfeld Media, LLC. Wroblewski, L. (2011). Mobile First. NY; Zeldman. Young, I. (2008). Mental Models. Brooklyn, NY; Rosenfeld Media. Zaki, T. (2009). Prototyping. Brooklyn. NY; Rosenefeld Media.
