universidad centroamericana facultad de ciencia …repositorio.uca.edu.ni/2518/1/ucani3856.pdf · a...
TRANSCRIPT
UNIVERSIDAD CENTROAMERICANA
FACULTAD DE CIENCIA TECNOLOGÍA Y AMBIENTE
Diseño del sitio web y artes publicitarios de la campaña de
lanzamiento en redes sociales para la empresa nicaragüense
Estudio Creativo
Producto Creativo para obtener el Título de Licenciada en
Diseño Gráfico
Autora:
Bra. Katherine del Carmen Kauffman Gómez
Tutora:
Msc. Nadia Gutiérrez
Managua, Nicaragua
Marzo, 2015
2
Dedicatoria
A la autora del producto final. Igualmente a futuros investigadores que deseen
utilizar los resultados obtenidos para la realización de proyectos con el fin de
generar nuevos conocimientos o como guía de referencia para el diseño de un
sitio web.
Finalmente, a todos los diseñadores gráficos-creativos que les apasione el diseño
web.
3
Agradecimiento
A los eternos personajes de mi vida Mamá y Papá.
A Dios por darme la guía de instrucciones que me llevaron a cumplir las metas
trazadas durante esta etapa; a todas aquellas personas que encontré y ahora
puedo llamar hermanos, amigos y maestros a los que les digo gracias por sus
enseñanzas, comprensión y apoyo.
4
ÍNDICE
I. INTRODUCCIÓN………………………………………………………………..
II. GLOSARIO………………………………………………………………………...
III. OBJETIVOS……………………………………………………………………..
IV. MARCO TEÓRICO……………………………………………………………….
4.1. Diseño gráfico………………………………………………………………
4.2. Diseño web…………………………………………………………………
4.3. El diseño de un sitio web…………………………………………………
Arquitectura de la información…………………………………………………
Interfaz de usuario……………………………………………………………….
Elementos del diseño ……………………………………………………………
El sistema de navegación………………………………………………………
Usabilidad………………………………………………………………………….
4.4. Publicidad en redes sociales…………………………………………
Estrategias publicitarias……………………………………………………
V. DISEÑO METODOLÓGICO…………………………………………………….
5.1. Tipo de investigación……………………………………………………..
Instrumentos de recolección de datos…………………………………………
Proceso de diseño según Jorge Frascara……………………………………
VI. DESARROLLO…………………………………………………………………
6.1. Aplicación del proceso de diseño………………………………………..
6.2. Arte final……………………………………………………………………
Presentación del sitio web………………………………………………………
Presentación de artes publicitarios………………………………………………
VII. CONCLUSIONES…………………………………………………………………
VIII. RECOMENDACIONES………………………………………………………..
IX. BIBLIOGRAFÍA…………………………………………………………………
X. ANEXOS…………………………………………………………………………
8
9
12
13
28
28
30
13
46 16
46 19
19
46 21
22
26
27
30
35
35
36
65
69
37
38
38
46 46
47
58
63
64
5
Índice de Figura
Figura 1. Promoted Post………………………………………………………..
Figura 2. Logout Experience…………………………………………………..
Figura 3. Promoted Tweets…………………………………………………….
Figura 4. Trending Topic……………………………………………………….
Figura 5. Promoted post size……………………………………………………
Figura 6. Promoted tweet size……………………………………………….
Figura 7. Vista página inicio……………………………………….……….
Figura 8. Vista del menú principal….……………………..………………
Figura 9. Vista pagina menú……….………………….………….……….
Figura 10. Vista pagina menú……..……………….………….…………….
Figura 11. Vista sección Bodas…………..…………………….…………….
Figura 12. Vista sección Modelaje………………………………………..........
Figura 13. Vista sección Momentos…………………………………............
Figura 14. Detalles del sitio web…………………………………...............
Figura 15. Detalles del sitio web……..…………………………................
Figura 16. Promoted Post 1……..…………………………………….................
Figura 17. Promoted Post 2…..………………………………......................
Figura 18. Promoted Post 3…..……………………………….....................
Figura 19. Promoted Post y Tweet…..………………………………..........
32
32
33
33
53
54
55
34
34
47
48
49
50
51
52
59
60
61
62
6
Índice de Ilustración
Ilustración 1. Clasificación de anuncios según su objetivo………………
Ilustración 2. Proceso del diseño según Jorge Frascara…………………
Ilustración 3. Estructura del sitio web……………………..…………………
31
7 37
45
7
Índice de tablas
Tabla 1. Costo de los servicios……………………………………………………
Tabla 2. Principales competidores……………………………………………….
Tabla 3. Servicios de la competencia……………………………………………
Tabla 4. La competencia en la web y redes sociales.......................................
Tabla 5. Comportamiento de la competencia en la web y redes …..…..
Tabla 6. Análisis, interpretación y organización de la información………….
Tabla 7. Alcance, contexto y mensaje…………………………………………
39
39
40
40
40
42
43
8
I. INTRODUCCIÓN
El presente Proyecto de Culminación de Estudios expone los instrumentos y
técnicas aplicadas durante el proceso de diseño del sitio web y artes publicitarios
de la campaña de lanzamiento en las redes sociales para la empresa Estudio
Creativo.
Fundada en el año 2009, Estudio Creativo es una empresa nicaragüense que
ofrece servicios de fotografía profesional, por lo que el diseño del sitio web da
respuesta a la necesidad de contar con una herramienta que ponga al alcance del
público el portafolio de trabajo de la empresa, dirigido principalmente a un
segmento A y B.
Señalando que antes de que se identificara la necesidad de contar con un sitio
web, la única presencia de la marca en la web era en las redes sociales de
Facebook y Twitter. Por lo que estos antecedentes aportan y fortalecen la nueva
estrategia publicitaria, convirtiéndose en el escenario para el lanzamiento del sitio
web a través del diseño de artes publicitarios adaptados para ambas redes
sociales. Además, que son medios que poseen herramientas que permiten a la
empresa hacer llegar el mensaje directamente al público objetivo.
Finalmente, el sitio web y los artes publicitarios para las redes sociales actúan
como punto de fuga hacia donde todos los servicios que ofrece Estudio Creativo
pueden ser enlazados, fomentando la comunicación directa en tiempo real al igual
que aportar al desarrollo tecnológico y económico del país.
9
II. GLOSARIO
Bitmap: Bit Map (mapa de bits- BitMap). Formato de archivos gráficos de
windows. Pueden guardar imágenes de hasta 24 bits (16,7 millones de colores).
Caracteres: nombre que reciben las letras en medios digitales. Conjunto de
símbolos que sirven para representar un lenguaje.
Creativo: segunda palabra que conforma el nombre propio de la empresa
nicaragüense Estudio Creativo. Persona que posee la capacidad de crear y
transformar ideas que logren impactar en los demás.
CSS: acrónimo de Cascading Style Sheets, lenguaje de programación que
describe el estilo gráfico de un documento web (colores, tipografías y
composición).
Diseño: actividad creativa que tiene por fin proyectar y crear ideas que sean útiles
y estéticas ante los consumidores. Estructura visual de una idea.
Dominio: un dominio de internet (por ejemplo “codigosur.org”) es un nombre de
equipo que proporciona nombres más fácilmente recordados en lugar de la IP. El
dominio representa nuestro nombre en internet y es la forma por el cual las
personas llegarán a nuestro sitio.
Estudio: primera palabra que corresponde al nombre propio de la empresa
Estudio Creativo. 2. Conjunto de temas que se estudian para cumplir un propósito.
Estudio Creativo: empresa nicaragüense que ofrece servicios de fotografía y
video profesional para las personas que lo necesiten.
10
Followers: nombre que reciben los seguidores de una cuenta en twitter, es decir
las personas interesadas en conocer lo que hace a diario otro usuario dentro de la
red.
HTML: acrónimo de Hypertext Markup Language; lenguaje en el que se
programan las páginas web que consiste en introducir etiquetas entre los
contenidos, estas no son visibles para el usuario porque son códigos que tienen
como función indicar al navegador web sobre los diferentes elementos y cómo
debe mostrarlos.
Interfaz: es la representación gráfica de una aplicación interactiva, es lo que
media y facilita la comunicación e interacción entre el individuo y la máquina, ella
es lo que el usuario ve en la pantalla y con la que interactúa finalmente.
Jerarquía: orden de los elementos de acuerdo a su valor.
Masas: la gente en general, los consumidores. Agrupación numerosa e
indiferenciada de las personas.
Navegante (s): persona o usuario que explora la web.
Página Web: o solamente página. Es una unidad de información individual a la
que se accede a través de la WWW, en ella se presentan texto, imágenes,
sonidos, vídeos y enlaces, y su extensión puede ser más larga que una pantalla
de computador.
Post: publicación o anuncio en el muro de un usuario para ser visto en la página
inicial de Facebook por los demás usuarios.
Redes sociales: o programas informáticos sociales, son un tipo de programa o
servicio Web que permite a las personas comunicarse.
RGB: es un modelo de color utilizado normalmente para presentar color en los
monitores de ordenadores.
11
Sitio: lugar que sirve para algo o un espacio ocupado (o que puede llegar a serlo).
Para este caso, es el espacio virtual en Internet.
Sitio Web: conjunto de páginas web que son accesibles desde un mismo dominio
o subdominio de la World Wide Web (WWW).
Subdominio: es una forma de tener un sitio (web) relacionado, como anexo, a
una web principal. Varias páginas Web compartiendo un nombre común.
Tweet: publicación que aparece en la cuenta de un usuario de twitter y puede ser
vista por sus seguidores (Followers).
Twitter: red social microblogging es decir, compartir ideas en 140 caracteres, toda
la información y archivos que se desee con una red de contactos.
Trending Topic: tendencia o tema del momento. La frase se utiliza en la red
social de twitter.
Usabilidad: capacidad de uso, es la medida de la facilidad de uso y navegabilidad
de una determinada web.
Usuario(s): hace referencia al consumidor/cliente.
.
Web: vocablo inglés que significa “red”, “telaraña”, “malla”” red informática.
World Wide Web: sistema de documentos de hipertexto que se encuentran
enlazados entre si y a los que se accede por medio de Internet.
12
III. OBJETIVOS
Objetivo general:
Diseñar el sitio web y artes publicitarios de la campaña de lanzamiento en
redes sociales para dar a conocer al público el portafolio y los servicios de la
empresa nicaragüense Estudio Creativo.
Objetivos específicos:
Compilar la información de la empresa para seleccionar las imágenes,
colores, tipografía y el diseño eficaz que deberá tener el sitio web y los artes a
publicarse en las redes sociales seleccionadas.
Determinar la importancia y relación jerárquica de las secciones del sitio web
y de las redes sociales a utilizar para el lanzamiento.
Diseñar material gráfico publicitario digital que sea de interés para que el
público de las redes sociales seleccionadas visite el sitio web y encuentre una
respuesta a su necesidad.
13
IV. MARCO TEÓRICO
4.1 DISEÑO GRÁFICO
Morfológicamente, el vocablo Diseño está compuesto, en primer lugar, por el
prefijo “de”, del cual puede extraerse un significado genérico referido a
“determinación” de algo; y en segundo lugar, este término está constituido por el
sustantivo “signum”, desde el que puede reconocerse el concepto de “signo”.
Algunos autores coinciden con que no puede existir un concepto universal de
diseño, para Morín (1993):
El paradigma perdido afirma que el diseño como entidad en estado puro, no
existe, es una actividad casi exclusivamente humana y que al igual que la
técnica, no se conoce en el resto de las manifestaciones de la naturaleza,
con la excepción de algunas especies de primates avanzados.
Por otra parte, Frascara (2004) señala que “el diseño es una actividad humana
evolutiva, una actividad abstracta que implica programar, proyectar, coordinar una
larga lista de factores materiales y humanos, traducir lo invisible en visible, en
definitiva comunicar.”
Por su parte, Parera (2004) resalta que “el diseño tiene una aplicación bastante
global: todo es diseño. Y si añadimos al diseño el calificativo de gráfico, está en
globalidad se cierra, pero aun así la concreción de su campo de estudio o área de
trabajo es enorme e imprecisa.
14
Por lo que la expresión diseño grafico es acompañada en su mayoría de casos por
el vocablo diseñador gráfico, este término se adopto de manera más amplia
durante las décadas de 1960 y 1970 sustituyendo el termino artista comercial. De
acuerdo con Herrera y Fernández (2007):
El diseñador tiene que buscar y hallar soluciones a problemas estéticos y
funcionales, de equilibrio y sostén mutuo de la forma —signo físico— y del
contenido —signo mental—. Por lo tanto, su indagación es intelectual; sus
opciones, a través de la elección de elementos —signos iconográficos,
signos tipográficos, signos cromáticos— y las disposiciones estructurales y
relacionales de los elementos tienen que ser cerebrales y controladas.
Así, el Diseño podría ser definido como aquel acto de determinación de una
realidad existente destinada a convertirse en signo representativo de unas
acordadas intenciones comunicativas. Por lo que Diseñar es una actividad
orientada a determinados fines para la solución de problemas.
4.1.1 Elementos del diseño
Composición: se define como la distribución o disposición perfecta y equilibrada
de todos los elementos que se incluyen en un diseño. Combinándolos de tal forma
que todos ellos sean capaces de poder aportar un significado para transmitir un
mensaje claro a los receptores.
Tipografía: según Parramon, la tipografía es el medio por el cual una idea o
concepto adopta una forma visual. La forma de la tipografía influye notablemente
en la accesibilidad de la idea y el modo en que el lector reacciona ante esta.
A. Elementos Conceptuales
Los elementos conceptuales son aquellos que están presentes en el diseño, pero
que no son visibles a la vista. Se dividen en 4 elementos:
Punto: Indica posición, no tiene ni largo ni ancho, es el principio y fin de una línea.
15
Línea: Es una sucesión de puntos, tiene largo, pero no ancho, tiene una posición y
una dirección.
Plano: Un plano tiene largo y ancho, tiene posición y dirección y además está
limitado por líneas.
Volumen: El recorrido de un plano en movimiento se convierte en volumen, tiene
posición en el espacio, está limitado por planos y obviamente en un diseño
bidimensional el volumen es ilusorio.
B. Elementos Visuales
Forma: Es la representación gráfica de un objeto.
Medida: Todas las formas tienen un tamaño.
Color: Es el resultado del modo como un objeto absorbe o refleja la luz del
espectro visible. Los diseñadores utilizan el color para resaltar ciertos elementos.
Textura: Tiene que ver con el tipo de superficie resultante de la utilización del
material. Puede atraer tanto al sentido del tacto como al visual.
C. Elementos de Relación
Se refiere a la ubicación y a la interrelación de las formas en un diseño.
Dirección: La dirección de una forma depende de cómo está relacionada con el
observador, con el marco que la contiene o con otras formas cercanas.
Posición: La posición de una forma depende del elemento o estructura que la
contenga.
Espacio: Todas las formas por más pequeñas que sean ocupan un espacio, el
espacio así mismo puede ser visible o ilusorio (para dar una sensación de
profundidad).
16
D. Elementos Prácticos
Los elementos prácticos van más allá del diseño en sí y como es de esperar son
conceptos abstractos.
Representación: Se refiere a la forma de realizar el diseño, puede ser una
representación realista, estilizada o semi-abstracta.
Significado: Todo diseño conlleva consiente o subconscientemente un significado
o mensaje.
Función: Para lo que esta creado dicho diseño.
4.2 DISEÑO WEB
El diseño web es una disciplina del diseño gráfico y podría considerarse como la
más reciente; Para Flores (2012) el diseño web “reúne todas las enseñanzas y
algunas técnicas de las demás disciplinas del diseño” es decir, engloba
conocimientos generales sobre el diseño publicitario, diseño editorial, diseño de
identidad corporativa y diseño tipográfico.
Por otra parte a pesar que la palabra web incluye conceptos que pueden llegar
hacer referencia únicamente a los elementos que la conforman según Erlhoff &
Marshall (2008) definen que “web design is concerned with the conception, design
and structure of web sites and the navigation, user guidance and interface design
of information services and applications on the world wide web” (el diseño web se
refiere a la concepción, el diseño y la estructura de sitios web y la navegación,
orientación y diseño de la interfaz de usuario de los servicios de información y
aplicaciones de la world wide web) (p.433). Lo que busca el diseño web es
inventar una manera simple, efectiva y atractiva de presentar al usuario la
información.
17
El diseño web ha venido revolucionando la forma en que se diseña debido a
algunas limitaciones del medio y a sus grandes alcances que contribuyen al
desarrollo del ser humano. Por lo que los autores citados en esta investigación son
especialistas que trabajan en esta disciplina del diseño gráfico y que comparten
sus conocimientos basados en la experiencia obtenida en el transcurso de los
años como profesionales del diseño web.
4.2.1 Conceptos básicos sobre el diseño web
Imaginar un mundo sin comunicación viene a ser algo imposible para nuestras
mentes, es por ello que a lo largo de los años el ser humano ha venido
evolucionando, mejorando su estilo de vida para su supervivencia y su manera de
comunicación entre masas.
Actualmente, el mundo digital es parte de la rutina cotidiana del hombre. Gutiérrez
et al. (2008) señalan que es común que los términos Web, Red e Internet se usen
intercambiablemente, aunque desde el punto de vista técnico son objetos
completamente diferentes.
El internet hace referencia a la red física que conecta diferentes computadores y
lugares, su objetivo era construir una inter-red (una red de redes) y se ha
convertido en un fenómeno global de gran importancia e influencia en la sociedad
ya que permite al ser humano una comunicación sin barreras, por lo que según
Mariño (2005) explica que “es un medio de comunicación que cuenta también con
los elementos básicos de comunicación como lo son; emisor, receptor, canal,
código, mensaje y situación o contexto” en donde “el canal es el medio físico por el
que se transmiten los mensajes; por lo tanto, cuanto mejor conozcamos como
funciona, cuáles son sus ventajas, sus limitaciones y las tecnologías que se
pueden emplear, mayor provecho le podemos sacar” (pp. 2-3).
Además, señala que el internet se alimenta de fuentes como el diseño gráfico, las
artes visuales, el diseño de interfaces, la redacción de contenidos, la publicidad, el
marketing, entre otras.
18
Es por ello que si se habla de diseñar se debe tomar en cuenta que es un proceso
que combina arte, tecnología y sobre todo creatividad para comunicar ideas claras
capaces de ser comprendidas por el receptor y como prueba de esto está el
diseño web.
Para Gutiérrez et al. (2008) la palabra web hace referencia a la arquitectura lógica
de la información que ha sido posible construir sobre esa red física (llamada
internet). En palabras de su creador Tim Berners-lee, quien pensó que la Web
tenía que incluir toda la información de cualquier tipo en cualquier sistema,
logrando de esta manera hacer que hoy en día la web sea un gran espacio de
información universal, una vitrina de acceso a casi toda la información existente en
el mundo.
Sin embargo, existen factores que se deben de considerar como es el lenguaje de
programación para la web, Pérez (2007) afirma que “estos han ido surgiendo
debido a las tendencias y necesidades de las plataformas.” Con el paso del
tiempo, las tecnologías han venido desarrollándose y adaptándose al
comportamiento de los usuarios, por lo que estos cambios también dieron lugar a
desarrollar lenguajes de programación para la web dinámicos, que permitieran
interactuar con los usuarios”.
Uno de los lenguajes más influyentes en los diseños web es el lenguaje HTML
(Hipertext Markup Language). Para Pérez (2007) “Es un lenguaje estático para el
desarrollo de sitios web”. Por otro lado Lamarca (2013) destaca que:
Su entorno se basa en comandos concretos que han sido sometidos a
constantes cambios y a un crecimiento vertiginoso y la tarea de
determinar la sintaxis de estos comandos recae en primer lugar en el
Consorcio World Wide Web (W3C). Que tiene como objetivo la creación de
documentos que puedan difundirse sin problemas por la red y que puedan
ser interpretados por los diferentes navegadores o "browsers".
19
A esto se debe agregar que hoy en día existen algunos editores visuales de
HTML, como Adobe Dreamweaver, MS FrontPage, entre otros que permiten al
diseñador concentrarse en el diseño del documento sin necesidad de aprender
HTML (aunque sí aconsejable).
4. 3 DISEÑO DE UN SITIO WEB
En algunas ocasiones los usuarios de la web se encuentran con un conjunto de
páginas web que suelen formar parte del mismo dominio o subdominio, a este
conjunto de páginas se les conoce como sitio web. El cual antes de formar parte
de la biblioteca virtual de la world wide web, debe de cumplir con un procedimiento
que facilita su construcción.
4.3.1 Arquitectura de la información
Es común que la expresión arquitectura de la información forme parte del proceso
para diseñar sitios web y cualquier otra cosa que esté ligada a la web. Montoro,
M. (2010) nos dice que “aunque no exista una única definición consensuada y
compartida, la mayoría de las propuestas recogen una serie de conceptos
(estructura, organización, acceso, etc.) que se repiten en casi todas las
definiciones” (p. 24).
Se puede definir a la arquitectura de la información como una disciplina encargada
de estructurar, organizar y etiquetar los elementos que conforman los entornos
informacionales para facilitar la localización de la información contenida en ellos y,
mejorar así su utilidad y su aprovechamiento por parte de los usuarios.
Por lo que la arquitectura de un sitio web es la forma en cómo se estructura la
información de acuerdo a los servicios o productos que una empresa ofrece
ajustándola a la forma en que la perciben los usuarios. Según McIntire (2008) “es
el pegamento que une todos los componentes del sitio”. Permite que la búsqueda
de información sea más fácil para el usuario.
20
Considerando que si un sitio es puesto en la web sin antes haber organizado y
estructurado toda su información el emisor deberá atenerse a las consecuencias lo
cual McIntire (2008) afirma que si esto sucede “nuestros visitantes no podrían
encontrar lo que buscan si nuestro sitio web no está ordenado en base a unos
principios de organización subyacente” (p. 39).
Un sitio bien estructurado ofrece a los usuarios lo que quieren y cuando lo quieran;
Una arquitectura de la información apropiada hace que la gente se sienta cómoda
para explorar y con la confianza de que podrá volver fácilmente al sitio. Según
Krug (2005) “muchas veces las personas abandonan rápidamente los sitios
porque les frustra, ya que se encuentran con problemas y tienden a culparse a sí
mismas y no al sitio” (p.23). Esto evidencia la mala estructura y falta de análisis
previo por parte de los creadores del sitio web.
Sin embargo, se debe considerar que uno de los mejores métodos para que las
paginas retengan la atención del usuario según Krug (2005) “es asegurándose que
el aspecto de las cosas de dicha página representen claramente y de forma
adecuada la relación entre todas ellas, en pocas palabras todas las paginas deben
tener una jerarquía visual clara.” Luego señala tres características sobre la
jerarquía visual:
1. Lo más importante ha de ser lo más prominente, por ejemplo, los
encabezamientos más importantes serán más grandes, aparecerán en
negrita, en un color distintivo rodeados por más espacio o en la parte
superior de la página.
2. Lo que está relacionado lógicamente, también lo está visualmente, por
ejemplo agrupar las cosas similares bajo un mismo título.
3. Todo se engloba visualmente bien para que queden delimitadas las
partes que pertenecen a cada bloque. (pp. 31-32).
21
4.3.2 Interfaz de usuario
El diseño web está inclinado a la construcción de la interfaz, por lo que
actualmente el diseño de un sitio debe de adaptarse a las herramientas que utiliza
el usuario para encontrar lo que busca, es decir, hacer llegar el mensaje a la
pantalla del ordenador de manera que el usuario logre captarlo sin alguna
complicación. Para Fernández (1998) “la interfaz es el instrumento para facilitar al
usuario una interacción con los elementos de su entorno” (p. 144). El diseño de la
interfaces de usuario debe tenerse en cuenta las habilidades cognitivas y
de percepción de las personas.
Esto ha llevado a considerar una posible clasificación sobre el tipo de diseño web
a seleccionar según el público meta. De manera que Anónimo (2014) presenta los
tres tipos de diseño web más importantes según el público objetivo:
Diseño Web avanzado
Es el tipo de diseño Web orientado a profesionales, aquellos que quieren
contar con las nuevas tecnologías en el diseño de sus páginas Web. El
diseño Web avanzado es demandado principalmente por empresas
tecnológicas o clientes relacionados con el mundo audiovisual.
Diseño Web clásico
Es el diseño Web tradicional, utilizando los elementos básicos: texto e
imágenes. Este diseño Web prescinde de elementos como flash, video
streaming o cualquier tecnología avanzada.
Diseño Web industrial
El diseño Web industrial se encarga de las páginas Web para industrias,
presentando unas Webs corporativas cuyo objetivo es representar la
imagen de la empresa.
Si bien podría considerase de gran ayuda lo mencionado anteriormente al
momento de seleccionar el diseño de un sitio, para Fernández (1998) “un buen
diseño de interfaz se ve rápido, es simple, duro y directo” (p. 146).
22
4.3.3 Elementos visuales
Fuente o carácter
La tipografía es el reflejo de una época, por ello la evolución del diseño de las
mismas responde a proyecciones tecnológicas y artísticas. En el diseño gráfico la
tipografía es el arte o técnica de reproducir la comunicación, transmitir con cierta
habilidad, elegancia y eficacia, las palabras.
Una buena tipografía permite que el texto sea legible, ayuda a la comprensión del
mensaje y logra un resultado estéticamente bello. En medios digitales son un
conjunto de dibujos vectoriales llamados caracteres y que tienen una necesidad y
tratamiento diferente que en medios impresos por lo que no siempre se adaptan
bien a un monitor.
Todos los tipos en pantallas tienen por definición, forma de bitmaps. Según Pring
(2000) “las instrucciones HTML estándar, pueden ordenar que un carácter en
forma de bitmap (si este está instalado) aparezca en la pantalla del observador.”
De no ser así la fuente aparecerá por defecto del navegador o será sustituida por
alguna de preferencia del usuario.
A pesar que según Mariño (2005) “la tipografía en la web y en documentos
impresos comparten muchos principios, varía sobre todo en dos cuestiones
fundamentales: la variedad de tipografías y la resolución a la que se muestra la
tipografía.” (p.13). Por lo que al momento de seleccionar una fuente determinada
para acompañar el diseño de una página web se debe considerar que esta sea
legible y se adapte a la resolución de la pantalla.
De los diferentes tipos de letras que se pueden emplear y que están
especialmente pensados para ser vistos en el monitor de un ordenador, se trata de
la colección de fuentes como la Verdana, Tahoma, Trebuchet y Georgia. Para
Nielsen y Loranger (2006) las tipografías a seleccionar para una página web
“deberán ser legibles y reflejar el carácter y el tono de su sitio web.” (p. 212).
23
A pesar que no existe ningún tipo de letra o tamaño único del texto que guste a
todos los públicos, Nielsen recomienda que el cuerpo del texto tenga como mínimo
diez puntos y no exceda los catorce puntos, a excepción de casos especiales en
los que de verdad se desee llamar la atención del visitante. De igual manera
menciona que “la variación en las fuentes y sus atributos puede ayudar al usuario
a diferenciar la importancia relativa de los encabezados y la información.” (p. 229).
No se debe utilizar más de tres tipos de letras y evitar las palabras innecesarias
que puedan causar ruido, para Krug (2005) algunas páginas web “contienen una
cantidad de palabras que simplemente ocupan espacio y que no se van a leer”
(p.45). Los usuarios buscan ir directo al grano y carecen de tiempo para leer
grandes bloques de texto que no facilitan o aportan a lo que buscan.
El color
El color durante siglos ha sido una herramienta de comunicación efectiva; según
Sir Isaac Newton el color es una sensación que se produce en respuesta a una
estimulación nerviosa del ojo, causada por una longitud de onda luminosa,
produciendo muchas sensaciones, sentimientos, diferentes estados de ánimo,
transmite mensajes, expresa valores y situaciones. En el área del diseño gráfico
para Ambrose, G., & Harris, P. (2008) el color en muchas ocasiones es “el primer
elemento que registramos cuando vemos algo por primera vez.”
Por lo que utilizar el color en la web sigue siendo un reto para los diseñadores ya
que se debe identificar cuáles son los más apropiados para el sitio web de la
empresa. No se puede negar que el color influye en el modo en que reaccionan
los usuarios y crear una paleta de colores con opciones limitadas puede ser
frustrante pero para McIntire (2008) un diseñador web debe de comprender que
“los monitores de ordenador y los medios impresos presentan los colores de forma
completamente distinta”.
Los colores seguros para la web fueron seleccionados matemáticamente, no
porque fuesen los colores favoritos para diseñar una web, McIntire (2008) señala
24
que “existe una paleta formada por 216 colores” y estos colores son denominados
“paleta de colores seguros para Internet, ya que son reconocidos universalmente
por todos los navegadores y sistemas (excepto por los sistemas realmente
antiguos)” (p.185). Pero los colores seguros para la web son los del código RGB y
están formados por el digito cero y el resto de dígitos hexadecimales múltiplos de
3, 6, 9, C (12) y F (15).
Es por ello que en diseño web se recomienda ser cauteloso en la selección de la
paleta de color, Nielsen & Loranger (2006) recomiendan “no utilizar más de cuatro
colores” (p.228) debido a que el color juega un papel importante para que un sitio
web produzca una buena impresión. Por lo que, en el diseño de un sitio web de
una empresa se debe conocer los colores corporativos y definir cuáles son los que
mejor funcionan para la web para que no se transmita la sensación de un sitio
desestructurado y poco profesional.
A pesar de las restricciones a las que se debe atener el diseñador web, para
Nielsen y Loranger (2006) “existe una herramienta que facilita la selección de los
colores y es la paleta hexagonal.” en donde los códigos de color aparecen
abreviados de modo que un solo digito representa cada par de dígitos iguales,
muestra las tonalidades para cada color y su estructura hace que la selección de
los colores aptos para la web sea menos complicada.
Finalmente, no cabe duda que el color es un elemento clave en el diseño gráfico,
para Ambrose, G., & Harris, P. (2008) es “una herramienta que puede emplearse
para llamar la atención, orientar y dirigir al observador, además de informarle del
tipo de reacción que debe tener ante la información presentada”.
Las imágenes
El diseñador web debe de tomar en cuenta que en el proceso de elaboración de
un sitio la selección de imágenes juega un papel muy importante principalmente si
se trata de un sitio en donde el mayor porcentaje del contenido serán imágenes.
25
Las imágenes de una página web tienen que estar optimizadas para Internet, esto
permite según anónimo (2014) que además de tener un diseño web atractivo “las
pantallas se carguen rápido y permitan una navegación cómoda y eficaz.”
Por otra parte para garantizar que los colores de una imagen se reproducirán
como se pretende Ambrose, G., & Harris, P. (2008) señalan que para el diseño de
una página web “se deja en el sistema RBG”; definiéndolo como el “sistema
cromático que suele usarse para la edición digital y el diseño inicial”.
La fotografía
La fotografía es el procedimiento y arte que permite fijar y reproducir, a través de
reacciones químicas y en superficies preparadas para ello, las imágenes que se
recogen en el fondo de una cámara oscura. Y que a diferencia de una imagen, una
fotografía es el reflejo de algo real.
En el diseño de una página web la selección de fotografías debe responder a las
actividades de la empresa, además Trigueros (2014) señala que “Las imágenes
grandes tienen una potencia visual como ninguna otra” y que si el cliente quiere
aportar las imágenes “el diseñador tendrá que comunicarle los requisitos mínimos
que las imágenes deberán tener” esto para que el diseño de la pagina funcione.
Otro de los puntos a tener en cuenta cuando se utilizan fotografías en alta
resolución es que esta tiene que tener el contraste adecuado para que el usuario
pueda leer los contenidos sin tener que hacer demasiados esfuerzos. Por lo que
Trigueros (2014) también afirma que “tienes que jugar con las zonas claras y las
zonas oscuras dependiendo del color de tu tipografía, usando sombras o efectos
translucidos para facilitar la lectura de los contenidos de nuestra web.” Se puede
tener una fotografía muy potente de fondo pero necesitamos que el usuario pueda
leer lo que le queremos contar.
26
4.3.4 El sistema de navegación
Los sistemas de navegación son los elementos de una interfaz que permiten la
navegación por las diferentes secciones y páginas que componen el sitio web.
Generalmente se presentan como menús formados por diferentes opciones, con
las que el usuario puede interaccionar. Para Anónimo (2014) “Los sistemas de
navegación son una pieza de vital importancia para la experiencia del usuario de
nuestro sitio web. Su aparente sencillez es lo que hace que a menudo olvidemos
su importancia y descuidemos su elaboración”.
Wodket (2002) citado por McIntire (2008, p. 83) nos dice que “la navegación es la
arquitectura de la información que se ha hecho visible”. De igual manera asegura
que el sistema de navegación debe de satisfacer lo siguiente:
- Establecer un modo de ir de un sitio a otro dentro de la web. El visitante
debe ser capaz de hacerse un modelo mental de la estructura del sitio.
-Proporcionar información sobre la ubicación actual. El usuario debe saber
en todo momento dónde se encuentra, hacia donde puede ir desde este
punto y que partes del sitio ya ha visitado.
-Ayudar al usuario a encontrar lo que busca. Una jerarquía lógicamente
estructurada permite que la búsqueda del usuario sea menos ardua. Y
destacar los contenidos interesantes del sitio
Por lo tanto, la navegación debe ser clara, concisa, consistente y fácilmente
identificable dentro de la página.
Diseño de la navegación de un sitio
Uno de los cumplidos más satisfactorios que un sitio web puede recibir, es que los
usuarios no comenten su estructura mientras navegan en sus páginas. Es por ello
que los sitios más efectivos son aquellos que se ajustan a las expectativas del
27
usuario, para Nielsen (2006) “sabemos que los usuarios no emplearán su tiempo
en memorizar o en aprender el sistema navegación de sitios diferentes” (p.174).
Según McIntire (2008) afirma que existen principios que un diseñador web debe
tomar en cuenta con el diseño de la navegación de un sitio web, entre ellos están:
- Crear un sistema de navegación simple, visible y constante.
- Aprovechar los conocimientos previos al usuario.
- Minimizar el esfuerzo del usuario.
- Proporcionar varias formas de acceder a la información.
- Crear un sistema valido para usuarios con diferentes niveles de experiencia.
- Asegurarse que el sistema de navegación sea flexible y ampliable.
Por otra parte, según Jung (1984) afirma que “la mente humana es capaz de
manipularse, al receptor se le educa a través de un diseño altamente elaborado”,
esto nos lleva a pensar que el sitio web también va en dependencia a qué
segmento la empresa quiere dirigirse y de este modo determinar el diseño de la
navegación.
4.3.5 Usabilidad
La definición más extendida sobre usabilidad es la ofrecida por la ISO, que define
usabilidad como el grado de eficacia, eficiencia y satisfacción con la que usuarios
específicos pueden lograr objetivos específicos, en contextos de uso específicos.
La usabilidad hoy es día es un tema muy considerado en el proceso de
elaboración de un sitio web. De acuerdo con Nielsen y Loranger (2006)
especialistas en temas de usabilidad y que han trabajado para mejorar los sitios
web de marcas reconocidas a nivel mundial:
La usabilidad es un atributo relacionado con la facilidad de uso. Más
específicamente se refiere a la rapidez con que se puede aprender a utilizar
algo, la eficiencia a utilizarlo, cuán memorable es, cuál es su grado de
28
propensión al error, y cuanto les gusta a los usuarios. Si una característica
no se puede utilizar o no se utiliza, es como si no existiera. (p.17)
Es tarea del diseñador digital crear una interfaz usable con una identidad y
estética agradable al usuario, según Nielsen & Loranger (2006) “jamás será
suficiente ni un buen diseño de interfaz gráfico, así como un diseño con un alto
componente estético y con fallos evidentes de uso será un fracaso”.
Como también menciona Mariño (2005) que para conseguir un buen diseño visual
“es necesario proporcionarle una forma que sea funcional y transmita un mensaje”,
logrando construir “un conjunto equilibrado, ordenado, funcional y bello” (p.7). Por
lo que se debe crear un entorno en donde los usuarios puedan explorar fácilmente
sin complicaciones y, a la vez conseguir transmitir el mensaje que cada página del
sitio web ofrece.
Los creadores de un sitio también deben de saber que se cuenta con un alcance
de 20 segundos para convencer al cliente de que vale la pena explorar el sitio.
Para Nielsen & Loranger (2006) “con menos de medio minuto a su disposición,
todos los mensajes deben ser breves y directos.” (p.51). Que un navegante
permanezca más de un minuto en la página principal de un sitio web porque no
sabe a dónde ir es un delito, esto demuestra el bajo nivel de usabilidad del sitio, y
se corre el riesgo de que lo abandone. Sin embargo, si este hace clic en menos de
30 segundos en algún botón que lo traslade a otra página del sitio, es la prueba de
que la primera página logro captar la atención induciendo al navegante a explorar
el sitio web.
4. 4 PUBLICIDAD EN REDES SOCIALES
El mayor porcentaje del tráfico actual de internet está destinado a las exitosas
redes sociales, las cuales su evolución se debe en gran parte a la necesidad
innata del ser humano a relacionarse y comunicarse con sus semejantes.
29
Una red social para Dieter (2014) es “una plataforma interactiva en donde
conviven personas y empresas que se están relacionadas entre sí. Por lo que
cada vez las redes son más atractivas para las empresas, simplemente por la gran
audiencia de consumidores potenciales que representa”.
La facilidad que ofrecen de conocer personas y de establecer relaciones de
amistad con gente que posee gustos e intereses similares se considera como una
gran ventaja en estrategia publicitaria y por lo que no genera muchos costos para
las empresas.
Señalando la rapidez e inmediatez con la que se mueve hoy en día la información,
los medios tradicionales compiten con medios como Facebook y Twitter, ya que en
estos, la información puede viajar con mayor velocidad, sin importar el tamaño de
la entidad informativa.
Una de las redes que podría estar a la cabeza es sin duda Facebook, que según
Velasco (2008) “goza de gran popularidad y crecimiento…” (p.118) y las exitosas
páginas de fans traen beneficios satisfactorios para negocios, empresas y marcas.
En segunda instancia la red social de microblogging Twitter, permite compartir e
intercambiar información mediante textos con un máximo de 140 caracteres,
además las empresas la pueden considerar como un medidor del alcance que
tiene la marca en sus publicaciones por su sistema de seguidores, que van
marcando la cantidad de usuarios a los que les llega el mensaje.
Para Herrera (2012) la integración de las redes adecuadas dentro de las
estrategias de lanzamiento de un producto tiene como propósito “entregar el
mismo mensaje consistente a través de todo el espectro de las redes sociales más
adecuadas”. No obstante, para Velasco (2008) “el valor de una red social radica
en que se construye sobre la base de la confianza; nos permite llegar a personas
que de otra manera no podríamos contactar…” (p.113).
30
4.4.1 Estrategias publicitarias en redes sociales
En el proceso para definir una estrategia de lanzamiento de un producto o servicio
de una marca, se debe realizar un estudio previo para determinar la efectividad de
la publicidad en cada red social y lograr seleccionar las favoritas del público,
principalmente la del público meta de la empresa. Además, que para las marcas
es conveniente conocer la dinámica sobre el comportamiento de los usuarios en
las redes sociales. Esto permite definir el tipo de estrategia como por ejemplo el
diseño de artes publicitarios promocionando el nuevo servicio o producto.
Para Sigiliano, Gonzales, Calzada y Márquez “la publicidad directa en medios
sociales está creciendo en inversión. Tiene tres activos importantes frente a otras
formas de publicidad online. Además es óptima tanto para estrategias de branding
como promocionales.” (2014, p. 8).
Uno de los activos importantes dentro de las estrategias publicitarias en redes
sociales es la microsegmentación; en donde los usuarios realizan cientos de
interacciones diarias en las redes sociales y muchas de estas interacciones crean
opciones de segmentación al instante.
En segunda instancia se menciona la difusión orgánica, que es cuando los
usuarios no solo ven la publicidad sino también pueden interactuar con ella, y para
cada interacción puede provocar una nueva redifusión del contenido del anuncio,
desde ese momento y sin coste alguno (Sigiliano et al., 2014).
Como tercera instancia esta la familiaridad, que es cuando en el propio formato del
anuncio aparece el nombre de la marca dentro del perfil de quien está viendo el
anuncio.
31
Diseño de anuncios
Cada anuncio publicado en las redes sociales cumple con un objetivo, ya sea
despertar el interés y atención por parte de los consumidores, de deseo,
conversión o de fidelización y prescripción (Sigiliano et al., 2014). El siguiente
esquema refleja una propuesta que facilita el diseño de anuncios clasificándolos
según el objetivo del contenido:
Clasificación de anuncios según su objetivo. Ilustración 1.
Así como en medios impresos los anuncios para difundir información reciben
nombres como afiches, carteles, vallas, entre otros. Para cada red social los
anuncios también reciben un nombre según la descripción y función que cumplen
dentro de dichas plataformas.
En Facebook, las categorías de los anuncios incluyen post (promoted post) y los
content ads (publicación destacada); Son promociones pagadas de publicaciones
de contenido entre el público deseado mediante segmentación. Se muestran en la
página oficial de la marca (fan page) o sólo en la sección de noticias de los
usuarios.
32
También están los logout experience, que es cuando se muestra la imagen o
vídeo durante todo un día a todos los usuarios que cierran sesión de sus cuentas
de Facebook.
Logout experience. Figura 2.
En Twitter la publicidad es a través de tweets y los anuncios al igual que en
facebook tienen sus respectivas categorías, como los promoted tweets (tweets
promocionados) que son promociones pagadas de tweets de contenido entre el
público deseado mediante segmentación (Sigiliano et al., 2014).
Promoted Post. Figura 1.
33
Promoted Tweets. Figura 3.
También están los promoted trends que son anuncios pagados para obtener un
trending topic, es decir el tweet del anunciante es siempre el primero (aparece
arriba). Los trending topic tienen su origen en los hashtag, que son etiquetas
precedidas por la almohadilla (#) que sirven para organizar tuits sobre un tema
concreto.
Trending Topic. Figura 4.
Tweets
promocionados
Estadísticas
(Alcance de la
publicación)
34
En cuanto a las dimensiones de los anuncios cabe señalar que la red social de
Facebook brinda las medidas predeterminadas cuando es un promoted post, que
son de 720 pixeles por 960 pixeles.
Promoted post size. Figura 5
Por otra parte, para la red social de twitter las dimensiones para un Promoted
Tweet deberá ser de 375px por 375px.
Promoted tweet size. Figura 6
35
V. DISEÑO METODOLÓGICO
En esta parte se refleja el procedimiento que dará respuesta al problema
planteado en la investigación. Se refleja el marco estratégico constituido por los
métodos, técnicas e instrumentos empleados durante el trayecto del proceso de
diseño del producto creativo para el alcance de los objetivos de la investigación.
Para este caso la investigación tiene como propósito el diseño del sitio web y artes
publicitarios para la campaña de lanzamiento para la empresa nicaragüense
Estudio Creativo por lo que la metodología de la investigación seleccionada es de
enfoque cualitativo, tomando como base uno de los conceptos metodológico de
Sampieri, Fernández y Baptista en donde afirman que “las investigaciones
cualitativas se basan más en una lógica y proceso inductivo (explorar y describir, y
luego generar perspectivas teóricas).” (2010, p.9)
La teoría de la investigación es un marco únicamente de referencia sobre el
diseño del sitio web y artes publicitarios de la campaña de lanzamiento para
empresa Estudio Creativo. Los métodos de apoyo para recopilar la información
fueron libros, diccionarios, investigaciones relacionadas al diseño web y fuentes de
internet.
36
5.1. Instrumentos de recolección de datos
Los instrumentos que facilitaron la recolección de datos fueron entrevistas
realizadas a especialistas que manejan la publicidad en las redes sociales de
Facebook y Twitter para ciertas marcas que se encuentran posicionadas en el
país, con el propósito de conocer el comportamiento de la competencia y sus
formas de interacción con el consumidor dentro de estas plataformas; así mismo
conocer el tipo de publicidad con mayor efectividad para el lanzamiento del sitio.
Siendo la entrevista la herramienta principal para recolectar la información sobre el
diseño de los artes a publicar en redes sociales para el lanzamiento del sitio web.
Señalando que para Albert (2007) “Se trata de una técnica de recolección de
datos que tiene como propósito explorar y describir ambientes implica adentrarse
en profundidad, en situaciones sociales y mantener un rol activo, pendiente de los
detalles, situaciones, sucesos, eventos e interacciones”.
También se aplica la herramienta de observación directa, que permitió obtener
información sobre el comportamiento de los usuarios ante las redes sociales
seleccionadas: Facebook y twitter. Al igual que observar a un grupo seleccionado
de usuarios durante su primer contacto con el sitio web para valorar si no se
presentaban problemas de usabilidad.
37
Proceso del diseño
El proceso de diseño aplicado tiene como base el modelo de Jorge Frascara:
Proceso del diseño según Jorge Frascara. Ilustración 2.
38
VI. DESARROLLO
a) Encargo del trabajo por el cliente
Tal como Frascara lo plantea en su esquema la primera acción fue el contacto
inicial con el cliente, que en este caso es la empresa Estudio Creativo, para definir
el problema y obtener información a través de un brief sobre el tipo de segmento a
dirigirse (público meta), conocer los colores corporativos y especificaciones de la
marca, los elementos a incluir en el sitio web y los artes publicitarios para la
campaña de lanzamiento en redes sociales.
b) Recolección de la información
Contexto del Negocio
- En el año 2009 se funda la empresa nicaragüense Estudio Creativo la cual
tenía como único servicio la elaboración de portafolios fotográficos de
moda. Sin embargo, a través de sus clientes sus fundadores identifican la
necesidad de ofrecer un servicio completo de fotografía profesional,
principalmente el de fotografía de boda especializada.
- La identidad de la marca se caracteriza por un estilo minimalista. Pero esto
no impide que la empresa se limite con el estilo fotográfico para cada
servicio que ofrecen.
- Tiene como fin satisfacer la necesidad de los clientes. Siendo un negocio
rentable. Ofreciendo precios asequibles en comparación a la competencia y
servicios que cubren eventos en la mayor parte del país.
39
- La forma de promocionar los servicios ha sido por medio de las redes
sociales de Facebook y Twitter, pero su principal crecimiento se debe a la
buena recomendación de los clientes que ha tenido la empresa.
A continuación se presentan los servicios que ofrece la empresa según la
clasificación de costos:
Servicios Costo Variación de costos según las
siguientes especificaciones
Fotografía de bodas $ 500.00 -Transporte
-Cantidad de horas
Fotografía de moda $ 150.00 -Por más de dos horas
Fotografía de ambientes $ 800.00 -Transporte
-Viáticos
Fotografía de eventos sociales $ 150.00
-Transporte
Costos de los servicios. Tabla 1.
Contexto de la competencia
Nombre del negocio Ubicación Puntos fuertes Puntos débiles Eterno FotoArte Villa
Fontana -Instalaciones equipadas con herramientas necesarias para la producción de fotografías. -Promociones cada mes
-No atienden eventos sociales a domicilio
Oscar Chavarría - -Variedad en equipos físicos de la alta calidad. -Especialización en fotografía de bodas -Cobertura en la mayor parte del país.
-No tiene domicilio -Baja presencia en redes sociales -Falta de actualización del sitio web
Silvio Balladares - -Presencia en eventos sociales -Alto reconocimiento en la industria de la moda a nivel nacional
-No tiene domicilio -Falta de actualización del sitio web
Principales Competidores. Tabla 2.
40
Nombre del negocio Servicios Costo
Eterno FotoArte Fotografía de estudio -Familiar -Niños -Retrato -Publicitaria
Impresas $ 225.00
Digital editadas $ 30.00 cada fotografía
Oscar Chavarría Fotografía
Fotografía de moda y comercial Fotografía social -Boda -Eventos Familiares -Eventos corporativos
$ 700.00
$ 1,400.00 (precio puede variar según
especificaciones del cliente)
Silvio Balladares Fotografía de bodas Fotografía de moda Fotografía publicitaria
$ 800.00 (precio puede variar según
especificaciones del cliente)
Servicios de la Competencia. Tabla 3.
Comportamiento de la competencia en la web y en redes sociales
Nombre del negocio Presencia en Facebook
Presencia en Twitter
Sitio web Activo
Oscar Chavarría Fotografía A partir del año 2011
A partir de agosto 2010
Desde el año 2006
Silvio Balladares A partir del año 2008
A partir de agosto 2009
Desde el año 2009
Eterno FotoArte A partir del año 2013
A partir de agosto 2013
A partir del 2014
Tabla 4.
Actualización de estados/novedades
Oscar Chavarría Fotografía
Eterno FotoArte Silvio Balladares
Facebook Medio Medio/alto Medio
Twitter Bajo Alto Alto
Interacción con el publico
Bajo Alto Medio
Actualización del sitio web
Bajo Alto Bajo
Tabla 5.
41
Contexto del consumidor.
- Estudio Creativo ofrece servicios de fotografía especializados principalmente en
Bodas.
- Sus precios son asequibles ante los de la competencia, manteniendo siempre la
misma calidad sin importar la cantidad de servicio que se ofrezca.
- La empresa tiene como prioridad brindar una atención personalizada a los
clientes fijos, con el fin de ser una buena referencias para futuros clientes.
- Estudio Creativo procura entregar imágenes creativas, saliendo de lo racional,
popular y común de lo que ofrecen otros fotógrafos. Además, ofrece ideas fuera de
sus servicios
- Para la empresa la confianza de los clientes vale mucho.
Target
La empresa Estudio Creativo tiene como público objetivo un segmento A y
segmento B, entre las edades de 25 a 35 años de edad. Los servicios que se
ofrecen están dentro de un rango para una categoría pudiente, por lo que
mantienen un estándar de calidad para que los clientes se sienten identificados y
satisfechos con los resultados. Por lo tanto, el diseño del sitio web también es
resultado del estudio de los gustos sobre estética, color y el comportamiento del
público objetivo dentro de la web en relación a los servicios de la empresa.
Por otra parte, para el lanzamiento del sitio web se diseñan artes publicitarios, los
cuales son adaptados para las redes sociales de Facebook y Twitter.
42
c) Análisis, interpretación y organización de la información
Tabla 6.
-Determinación de objetivo
Diseñar el sitio web y artes publicitarios de la campaña de lanzamiento en las
redes sociales para la empresa nicaragüense Estudio Creativo.
-Determinación del canal
Tomando en cuenta que el diseño del sitio web de la empresa Estudio Creativo
está ligado a un medio de comunicación digital, que incluye la interacción del
usuario con la web, el apoyo en las redes sociales de Facebook y Twitter son una
herramienta publicitaria accesible para la empresa y efectiva para popularizar la
existencia del sitio a través de la elaboración de artes publicitarios. De manera que
las redes sociales seleccionadas pueden considerarse como el barco directo que
llevan al usuario hacia el sitio web, poniendo a su alcance inmediato los datos y
servicios de la empresa.
43
-Estudio de alcance, contexto, mensaje
Medios Digitales
Alcance Contexto Mensaje
Facebook Principalmente a
personas entre las
edades de 25 años a
35 años. Con alto
poder adquisitivo y en
general fans de la
página de Facebook
que contribuyan al
marketing de boca en
boca de la empresa.
El público objetivo
tiene contacto con la
red social durante la
mayor parte del día,
principalmente en
horas al final de la
tarde y primeras
horas de la mañana.
Los artes expuestos
a la herramienta
publicitaria que
brinda facebook dan
prioridad a personas
con alto poder
adquisitivo.
Promoted Post con
fotografías
únicamente para la
publicidad del sitio.
Y que reflejan el
tipo de servicios
que ofrece la
empresa.
Twitter A todos los seguidores de la cuenta de twitter y nuevos seguidores.
El público seguidor de la cuenta de Estudio Creativo y público nuevo obtenido a través de los promoted trends.
Tweets con hashtags referentes al sitio, incluyendo el link del sitio web
Tabla 7.
44
-Análisis de prioridades y jerarquías
Previo a estructurar el sitio web se utilizaron herramientas digitales que permiten
crear definir el aspecto visual, evitando complicaciones, entre estas están:
Adobe Photoshop: que es un programa de diseño que permite la edición de
imágenes y optimizarlas para la web, al igual que seleccionarlas y obtener los
códigos hexadecimales de cada color y su tonalidad.
Adobe Ilustrador: programa de diseño que permitió realizar los primeros bocetos.
También la creación de los botones personalizados de las redes sociales
Facebook y Twitter. Igualmente, el identificador visual de la empresa y el botón de
galería ubicado en la página de inicio del sitio web.
Finalmente, una vez obtenidos los detalles anteriores se procede a maquetar en
Adobe Dreamweaver como herramienta principal para diseñar el sitio web,
trabajando con lenguaje HTML y CSS.
Por lo que en el orden de jerarquía el diseño del sitio web cumple con un alto nivel
de funcionalidad. Siendo el resultado y unión de los conocimientos, herramientas y
técnicas adquiridas durante el proceso de investigación.
Iniciando a maquetar en Dreamweaver con un orden que inicia con la organización
de la información (arquitectura del sitio), luego el diseño avanzado de la interfaz.
Seguido de los elementos visuales seleccionados para ser distribuidos de la
siguiente manera: verde en el identificador, tonos blancos con transparencia. La
tipografía que corresponde a Arial, por ser una tipografía complementaria a la
marca y evitar cualquier distorsión en los ordenadores de los visitantes.
Las fotografías se organizan y están vinculadas en orden al portafolio de los
servicios: bodas, modelaje y momentos, en donde se muestran fotografías de
sesiones con clientes de la empresa.
45
Una vez definido cada detalle se diseña cada página. La siguiente ilustración
refleja la estructura del sitio:
Estructura del sitio. Ilustración 3.
Seguidamente se vinculan las páginas para proceder a verificar la navegación del
sitio y comprobar las direcciones con las redes sociales. Finalmente, se sube a la
web a través del programa Filezilla con la cuenta de hosting y dominio propios de
la empresa para poder ser parte de la world wide web.
Para la empresa Estudio Creativo contar con un sitio web diseñado bajo el perfil
corporativo, logra unificar el portafolio de una forma etérea, elegante y creativa, al
igual que la forma de presentación del trabajo según los servicios de la empresa.
Posterior al diseño del sitio, los artes publicitarios son los encargados de darlo a
conocer potenciando los atributos de los servicios de la empresa, por lo que son
elaborados con fotografías publicitarias elaboradas únicamente para la campaña
de lanzamiento del sitio.
46
ARTE FINAL
47
Presentación del sitio web
Figura 7.
Página de inicio
1366 x 636 pixeles
48
Vistas de la página del menú principal
Tamaño total de la página
Ancho: 1349 px
Alto: 2636 px
Figura 8.
49
Tamaño total de la página
Ancho: 1349 px
Alto: 2636 px
Figura 9.
50
Tamaño total de la página
Ancho: 1349 px
Alto: 2636 px
Figura 10.
51
Vista de la página de la sección de Bodas
Tamaño total de la página
Ancho: 1349 px
Alto: 2636 px
Figura 11.
52
Vista de la página de la sección de Modelaje
Tamaño total de la página
Ancho: 1349 px
Alto: 2636 px
Figura 12.
53
Vista de la página de la sección de Momentos
Tamaño total de la página
Ancho: 1349 px
Alto: 2636 px
Figura 13.
54
Detalles del diseño del sitio web
Barra de menú
Ancho: 1349 px
Alto: 70 px
Figura 14.
Señalización de la sección en la
que el usuario se encuentra
Identificador de marca en la
dirección del sitio web
55
Figura 15.
Barra de menú fija. Cuando el visitante se
deslice hacia abajo no desaparecerá de
la pantalla
Vínculos que redirigen a las redes sociales y correo electrónico.
56
ESTRATEGIA
57
Como apoyo para el lanzamiento del sitio, se la elaboraron artes publicitarios para
las redes sociales de Facebook y Twitter, que incluyen elementos propios de la
empresa como fotografías que reflejan los servicios que se ofrece. Por lo que, se
diseñan promoted post para Facebook y promoted tweets para twitter, al igual que
nuevos hashtag alusivos al sitio web de la empresa.
Mencionando que el diseño de los artes publicitarios responde a las características
que tiene que tener un promoted post para Facebook y promoted tweets para
twitter, al igual que la creación de hashtags. Por lo tanto, las estrategias
mencionadas anteriormente dan respuesta al cumplimiento de los objetivos
propuestos para la resolución del problema.
Mencionando que los promoted post en facebook tienen como prioridad un público
entre las edades de 25 a 35 años. Y los Hashtag son claros e informativos para
todos los seguidores de la cuenta de Estudio Creativo.
58
ARTES PUBLICITARIOS
59
a. Presentación y especificaciones de los artes publicitarios
Los artes publicados en Facebook van acompañados en la parte superior con una
descripción escrita en el muro y el link del sitio web de la empresa:
www.estudiocreativonic.com
El siguiente arte estará acompañado de la frase: “Conoce nuestras galerías
visitando nuestro sitio web”, seguido del link del sitio web.
720 x 960px
Promoted Post 1. Figura 16.
60
El segundo arte estará acompañado de la frase: “Visita nuestro Sitio Web y
conoce nuestro trabajo en cada uno de nuestros servicios”, seguido del link del
sitio web de la empresa.
720 x 960px
Promoted Post 2. Figura 17.
61
El tercer arte es acompañado por un post en la parte superior que diga: Porque
nuestros clientes siempre serán nuestra fuente de inspiración para mejorar día a
día nuestro trabajo. Seguido del link del sitio web.
720 x 960px
Promoted Post 3. Figura 18.
62
El siguiente arte es un promoted post y promoted tweet. Esta adaptado para las
redes de Facebook y Twitter. En la parte superior del post el contenido es:
Visítanos, seguido del link del sitio web: www.estudiocreativonic.com
720 x 960px
En la red social de twitter también se crearon hashtag para los seguidores y
clientes que compartan sus fotografías:
a. #MiSueño #MiRecuerdo solo con #E.Creativo
b. #MisRecuerdos los quiero con #E.Creativo
Estos hashtag serán publicados en conjunto con las fotografías de sesiones que
se realicen semanalmente y puedan ser apreciadas en los portafolios del sitio web.
Promoted Post y tweet. Figura 19.
63
VII. CONCLUSIONES
El diseño del sitio web fue una de las más grandes metas personales y de la
empresa, alcanzada con satisfacción. Reconociendo que a diferencia de los
proyectos pasados de diseño de sitios web realizados durante la carrera, este
caso es una muestra del trabajo que se realiza en el ámbito profesional del diseño
web, desde la perspectiva como diseñadora gráfica.
Igualmente, la obtención de nuevos conocimientos adquiridos sobre las diferentes
teorías, métodos y herramientas que se utilizan y deben tomarse siempre en
cuenta para el diseño y elaboración de sitios web, fortalecieron mis habilidades y
capacidades como diseñadora web. Así mismo el trabajar con una empresa
también requiere conocerla para que como diseñadora grafica se capte la esencia
de la marca, facilitando el diseño.
Finalmente, el diseño del sitio web para la empresa Estudio Creativo, expone lo
que la teoría del diseño grafico en cuanto al diseño web puede lograr, por lo que
es puesta en práctica y se refleja en el producto final.
64
VIII. RECOMENDACIONES
Se recomienda que si se desea integrar un nuevo efecto visual se haga
directamente desde el código HTML y los estilos CSS, para identificar cada parte
del sitio y no se distorsione el diseño en general al igual que evitar problemas en
los navegadores.
Cualquier cambio en su estructura puede cambiar todo el diseño del sitio, a
excepción de actualizar las imágenes de cada portafolio.
La empresa aun no cuenta con un libro de marca formal terminado, por lo que se
recomienda establecer las normativas y aplicaciones gráficas de la marca. Esto
facilitara la elaboración de trabajos gráficos que se deseen hacer en un futuro.
65
IX. BIBLIOGRAFÍA
Ambrose, G., & Harris, P. (2008). Color (2da. Ed.). Barcelona: Grupo Editorial Norma, S.A.
Anónimo. (2003). Graphic Design for the 21 st century. Londres: Taschen.
Bassat, L. (2014). La Creatividad. Barcelona: Editorial Conecta.
Carpintero, C. (2009). Dictadura del diseño. Buenos Aires: Wolkowicz Editores
Domene, F. (2011). Advanced search engine positioning techniques: Information architecture and optimization on page .Madrid: Anaya Multimedia.
Duckett, J. (2008). Fundamentos programación web con HTML, XHTML y CSS. Madrid: Anaya multimedia.
Erlhoff, M., & Marshall T. (2008). Design Dictionary. Alemania: Birkhauser.
Fernández, A. (1998). Producción y diseño gráfico para la World Wide Web. Barcelona: Paidós.
Frascara, J. (2004). Diseño y comunicación visual. Barcelona: Ediciones Infinito
García, C. (2007). Diseño web para todos: Accesibilidad al conocimiento web. Barcelona, España: Icaria.
Gordon, B., & Gordon, M. (2005). Digital Graphic Design. Reino Unido: Thames Hudson Ltd.
Gutiérrez, C., Arenas, M., Velasco, J., Hurtado, C., Marín, M., Navarro, G., et al. (2008). Cómo funciona la Web. Santiago de Chile: Centro de Investigación de la Web.
Heller. E. (2004). Psicología del color: Cómo actúan los colores sobre los sentimientos y la razón. Barcelona: editorial Gustavo Gil.
Jung, C. (1984). El hombre y sus símbolos. Barcelona: Caralt.
Lynch, P., & Horton, S. (2004). Manual de Estilo Web: principios de diseño básico para la creación de sitios web. Barcelona: Gustavo Gili.
McIntire, P. (2008). Técnicas innovadoras en Diseño Web. Madrid: Anaya Multimedia
Mccracken, S. (2011). Curso de programación web. Barcelona: InforBooks Ediciones.
66
Mariño, R. (2005). Diseño de páginas web y diseño gráfico: metodología y técnicas para la implementación de sitios web y para el diseño gráfico. España: Ideas propias.
Moles, A., & Costa, J. (2001). Publicidad y Diseño: el nuevo reto de la comunicación. Buenos Aires: Infinito.
Monreal, A., (2000). ¿Qué es la creatividad? Madrid: Biblioteca Nueva.
Montoro, M. (2010). Arquitectura de la información en entornos web. España: Trea, S.L.
Morín, E. (1993). El paradigma perdido. (8va. ed.). París: Du Seuil.
Muñoz, O. (2013). WCAG 2.0 de forma sencilla. Madrid: ItákiroPress.
Murphy, C., & Persson, N. (2009). HTML Y CSS. Madrid: Anaya Multimedia
Niederst, J. (2006). Diseño Web: Guía de referencia. Madrid: Anaya Multimedia.
Nielsen, J., & Loranger, H. (2006). Usabilidad: Prioridad en el diseño web. Madrid: Grupo Anaya, S.A.
Parera, D. (2004). Diseño grafico y comunicación. Madrid: Pearson Education
Pring, R (2000). WWW.tipografía: 300diseños tipográficos para sitios web. Barcelona: Gustavo Gili.
Rovira, D. (2011). Cs5 Curso de creaciones web: con Dreamweaver, Flash y Photoshop CS5. Barcelona: InforBooks Ediciones.
Sampieri, R., Collado, C. & Baptista, P. (2010). Fundamentos de metodología de la investigación (5ta. ed.). México: Mc. Graw-Hill Interamericana.
Sanagustín, E. (2000). Marketing 2.0 en una semana. Barcelona: Ediciones Gestión.
Schulz, R. (2008). Diseño Web con CSS. Madrid: S, A. Marcombo.
Smith, M. (2012). El nuevo marketing relacional. Madrid: Anaya Multimedia.
67
Fuentes de Internet
Anónimo. (2011). Web Font: User Guide. Recuperado de http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
Anónimo. (2014). Sistemas de Navegación. Recuperado de: http://luisf.wikispot.org/Sistemas_de_Navegaci%C3%B3n#headc5a1160c9a214098b6682eed2cb92d8da6bb2ad4
Burgos, E. (2012). Social Media Plan: estrategias y 7 puntos más. Recuperado de: http://www.enriqueburgos.com/2011/12/social-media-plan-estrategia-y-7-puntos-mas/
Dieter, C. (2014). Marketing en Redes Sociales- Interacción Viral. Recuperado de: http://stedica.com/servicios/redes-sociales.html
Flores, J. (2012). Áreas y disciplinas del diseño gráfico. Recuperado de: http://origenarts.com/areas-y-disciplinas-del-diseno-grafico-debate/
Herrera, F. (2012). 10 Puntos que Debes Conocer en Social Media Marketing. Recuperado de: http://marketingenredesociales.com/10-puntos-que-debe-conocer-en-social-media-marketing.html/
Herrera, E. & Fernández, L. (2007). Diseñar es transformar las cosas en signo. Recuperado de: http://convergencias.esart.ipcb.pt/artigo/7
Krug, S. (2005). No me hagas pensar: Una aproximación a la usabilidad en la Web (2da. Ed.). Pearson Prentice Hall. Recuperado de http://mblazquez.es/blog-ccdoc-arquitectura-informacion/documentos/no-me-hagas-pensar.pd
Lamarca, M. (2013). Hipertexto: el nuevo concepto de documento en la cultura de
la imagen. Recuperado de: http://www.hipertexto.info/documentos/lenguajes_h.htm Pérez, D. (2007). Los diferentes lenguajes de programación para la web.
Recuperado de: http://www.maestrosdelweb.com/los-diferentes-lenguajes-de-programacion-para-la-web/
Regalado, O. (2010) Definiendo tu estrategia empresarial de Social Media.
Recuperado de: http://es.slideshare.net/dosensocial/definiendo-tu-estrategia-empresarial-de-social-media
68
Sigiliano, K., Gonzales, P., Calzada, B. & Márquez, M. (2014). Guía Profesional de la publicidad en redes sociales. Recuperado de: http://www.territoriocreativo.es/wpcontent/uploads/2014/03/Guia_Profesional_Publicidad_Redes_Sociales_Territorio_creativo.pdf/
Trigueros, R. (2014). Uso de la fotografía en diseño web. Recuperado de: http://mlgdiseno.es/la-fotografia-en-diseno-web/
69
X. ANEXOS
70
Cuestionario de entrevista
1. ¿Por qué es importante que una marca tenga presencia en las redes
sociales?
2. ¿Qué beneficios traer para los consumidores y las empresas la publicidad
en las redes sociales de Facebook y Twitter?
3. ¿Cómo se comporta el consumidor dentro de las redes ante la publicidad?
4. ¿Qué herramienta publicitaria de Facebook se recomienda utilizar para
segmentar al mercado?
5. ¿Cuáles son las características de la publicidad en Facebook y Twitter?
6. ¿Qué ventajas tiene Facebook sobre Twitter?
7. ¿Cómo llegar al público en la red social de Twitter?
8. ¿Cuando una empresa debe de pagar por publicidad en Facebook?
9. ¿Cuando una empresa debe de pagar por publicidad en Twitter?
10. ¿Cómo se clasifican los anuncios dentro de estas redes sociales?
11. ¿Qué se recomienda para destacarse de la competencia que también
hacen presencia en las redes sociales?
12. ¿Cómo crear contenido que llame la atención?
13. ¿Cómo deben ser diseñados los anuncios para las redes de Facebook y
Twitter?
14. ¿En qué momentos del día se recomienda publicar anuncios?
15. ¿Por qué es importante actualizar los contenidos y estar siempre activos en
las redes de Facebook y Twitter?