Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena - Tutora / DCV. Biadice Qiñones Davidson
←
→
Transcripción del contenido de la página
Si su navegador no muestra la página correctamente, lea el contenido de la página a continuación
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena Diplomantes / Lia Potes González / Claudia Alvarez Sánchez Tutora / DCV. Biadice Qiñones Davidson Facultad de Diseño de Comunicación Visual Instituto Superior de Diseño 2019-2020
Agradecimientos Lia Potes González
A mi mamá por sacrificarse para que todo mi espacio y tiem- Al Yisus, por iluminarnos y dedicarnos su tiempo y apoyo.
po fuera dedicado a mis estudios.
A Marilú, por los regaños que nacían de la preocupación.
A mi papá por animarme los días más tensos y compartir sus
conocimientos conmigo. A Fabi, Miguelón, Anthony y Rachel por hacer de nuestro
grupo una familia.
A Clau, por las noches en vela trabajando, los nervios y las
risas, siendo la mejor compañera de tesis y amiga. A todos los profesores que asistieron nuestra formación,
mostrándose como mentores y amigos.
Claudia Alvarez Sánchez A Boris por la oportunidad de participar en este proyecto, la
simpatía y el esmero en su atención.
A mi Any por sus ocurrencias y madrugadas de compañía.
A los trabajadores de APICUBA por el interés y tiempo brin-
A mi mamá por todo su amor y sacrificio desde el día cero, dado.
por no faltarme nunca, y por los regaños también.
A nuestra tutora por su acertada guía.
A mi abue y a Lila por todo su apoyo, preocupación y ocu-
pación constante, por los consejos. A Naye por sus consultas y asistencias oportunas.
A Pipito, porque nada de esto sería posible sin ti y porque A Nany, Amy, Dani, Rob y todos esos amigos y familiares,
estás a mi lado en cada paso que doy. que nos animaron y brindaron su incondicional respaldo.
A Liita por ser la mejor amiga y compañera de tesis, por
mantenerme despierta con tus disparates y por todas las
conversaciones sin sentido que vienen después.IX Resumen Índice
CAPÍTULO I CAPÍTULO II CAPÍTULO III
Etapa Necesidad Etapa Problema Etapa Concepto
2 Cliente y Encargo de Diseño 7 Definición del Problema Apicuba La Colmena
3 Definición de la Necesidad 7 Objetivos Generales 15 Definiciones Estratégicas 23 Definiciones Estratégicas 31 Conclusiones
4 Validación de la Necesidad 7 Objetivos Específicos 16 Discurso Visual 24 Discurso Visual 32 Recomendaciones
5 Condicionantes 8 Factor Contexto 17 Premisas Conceptuales 25 Premisas Conceptuales 33 Bibliografía
9 Factor Uso 18 Alternativas Conceptuales 26 Alternativas Conceptuales 35 Anexos
10 Factor Función 20 Variantes Conceptuales 28 Variantes Conceptuales
11 Factor Teconología 21 Concepto Óptimo 29 Concepto Óptimo
12 Factor Mercado
13 Requisitos de DiseñoResumen El presente Trabajo de Diploma aportará el diseño del Sitio un análisis tecnológico para garantizar su óptimo funciona-
Web de Apicuba y el de su tienda virtual La Colmena. Se miento y por último una investigación mercadológica, con
llevará a cabo un proceso de trabajo que tendrá como el objetivo de determinar tendencias actuales y llegar a una
base la metodología impartida en el Instituto Superior de solución de diseño que compita funcional y estéticamente en
Diseño, iniciando su primera fase con la Etapa Necesidad, el mercado.
planteándose el encargo de diseño, la necesidad y
simultáneamente se precisan las condicionantes del cliente. Por último se realiza la Conceptualización del producto,
comenzando con las definiciones estratégicas necesarias, el
La etapa posterior consiste en el análisis del Problema, discurso visual, se establecen las premisas que posteriormente
donde se plantean los objetivos generales y específicos del se seleccionan mediante un proceso de evaluación, y de igual
proyecto, además de un arduo análisis de los factores. Este manera se trabaja con las alternativas y variantes hasta llegar
proceso tiene una gran repercusión en el desarrollo del tra- al concepto óptimo del producto, concluyendo esta etapa con
bajo, ya que a partir de él se arrojan especificidades que las recomendaciones para evitar un inadecuado uso del mismo.
son determinantes en el diseño del producto, sobre el con-
texto en que será implementado, sus principales funciones,
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena xvCapítulo 2
Etapa Necesidad
Diseño del Sitio Web de Apicuba
y de su tienda virtual La ColmenaETAPA NECESIDAD
Cliente y encargo CLIENTE ENCARGO DE DISEÑO
de diseño La Empresa APICUBA es una organización dedicada al La ONDI como parte de un proyecto encargado por la
empresa APICUBA, solicita al Instituto Superior de Diseño
acopio, beneficio y comercialización de productos apícolas.
Su cartera de negocios consiste en la comercialización de (ISDi) la realización de un Trabajo de Diploma que aporte
miel de abejas y otros productos de la colmena, destinados el diseño del Sitio Web de la institución, así como el de su
no solo a clientes nacionales, sino a la exportación por medio tienda virtual La Colmena.
de CUBAEXPORT, la cual juega un papel fundamental en el
mercado.
A propuesta del Ministerio de Comercio Exterior (MINCEX),
se conformó un Grupo Asesor para el Fomento de las
Exportaciones, enfocado en primera instancia en los
productos exportables del Grupo Agroforestal (GAF),
atendido por el MINAG y cuyo objetivo principal consiste
en generar acciones que aumenten los volúmenes de miel
envasada y brindar a esta valores añadidos en aras de
incrementar ventas y penetrar mercados.
La Oficina Nacional de Diseño es miembro de este Grupo
Asesor desde el primer momento, y el presente Trabajo de
Diploma busca darle continuidad al intercambio de trabajo
sostenido que se ha establecido con Apicuba, aportando
un Sitio Web que represente tanto a esta institución como
a su Tienda Física La Colmena.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 2ETAPA NECESIDAD
Definición de la NECESIDAD
Necesidad La Empresa Apícola Cubana tiene como misión el
crecimiento diversificado de sus productos distintivos sobre
la base de un desarrollo sustentable, y su visión se enfoca
en convertirse en una organización reconocida dentro y
fuera del país por la calidad y diversidad de sus productos y
ofertas.
Desde el 2017 la empresa, con el objetivo de penetrar
mercados e incrementar exportaciones ha venido generando
acciones para añadir valores al producto; y tras un rediseño
de su marca se hace necesario modificar su visibilidad en
línea, diseñando su sitio web para establecer una relación
con la nueva identidad, y de esta manera posicionar a la
empresa en el mercado internacional como una institución
fuerte, de elevada calidad y eficiencia, además de presentar
sus líneas y productos de forma eficaz.
Por otro lado se hace necesario el diseño de una tienda
virtual, que posibilite la comercialización de la miel y
sus derivados a menor escala, facilitando al mercado
nacional el acceso a estos productos.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 3ETAPA NECESIDAD
Validación de la ECONOMÍA
Necesidad La miel de abeja y sus derivados constituyen uno de los
rubros más importantes del Grupo Empresarial Agroforestal
del Ministerio de la Agricultura. En aras de fomentar
exportaciones, se define como objetivo principal generar
acciones para incrementar los volúmenes de miel envasada,
acrecentar las ventas y penetrar mercados.
El Sitio Web agilizará la comunicación con los clientes y
el desarrollo de contratos, potenciando a su vez la marca,
consolidándola en el mercado, de forma que reporte un
incremento de los clientes y las ganancias. La empresa posee
los medios para su aplicación y cuenta con un informático
para su desarrollo.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 4ETAPA NECESIDAD
Condicionantes CONSUMO PRODUCCIÓN
Dada que la nueva línea de productos tiene como objetivo Actualmente la Institución tiene su host en ETECSA, y se
principal insertarse en el mercado europeo, el proyecto ha encuentra tramitando su traslado a CITMATEL. Con ello
de presentarse tanto en español como inglés. ganaría la plataforma de esta empresa para su comer-
cio electrónico.
El sitio web podrá ser visitado desde disímiles dispositivos
por lo que se empleará un diseño “responsive” garantizan-
do que la experiencia en cada dispositivo sea la misma, sin
perder funciones y evitando el abigarramiento en propor-
ciones pequeñas o un diseño muy vacío en pantallas de
mayor tamaño.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 5ETAPA NECESIDAD
Capítulo 2
Etapa Problema
Diseño del Sitio Web de Apicuba
y de su tienda virtual La ColmenaETAPA PROBLEMA
DEFINICIÓN DEL PROBLEMA OBJETIVOS GENERALES Problema de Diseño
Diseño del sitio web de la empresa APICUBA y de su tienda Diseñar el sitio web de la empresa APICUBA con el fin de
virtual La Colmena para garantizar el posicionamiento de la lograr mayor identificación y posicionamiento en el mercado.
empresa en el mercado internacional.
Diseñar el sitio web de su Tienda virtual La Colmena para
potenciar las funciones de exportación y expansión de la em-
presa.
OBJETIVOS ESPECÍFICOS
Diseñar la interfaz gráfica del sistema de productos definidos.
Elaborar la arquitectura de la información y mapa de
contenidos de ambos sitios, en el caso de Apicuba rediseñar
el de la página existente.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 7ETAPA PROBLEMA
Factores de Diseño CONTEXTO
Nacional / Internacional /
En los últimos años Cuba ha experimentado una apertura al Por otra parte, ambos productos de diseño, no solamente
mercado mundial y una inserción creciente en la navegación operarán en nuestro país, sino que tienen como finalidad
y compras online. De acuerdo a estadísticas consultadas (ver operar en países europeos, llevándose a cabo una búsqueda
Anexo 1), en la actualidad exhibe una penetración de inter- de estadísticas sobre el uso de tecnologías en dicho con-
net en su población superior a la de la media mundial, sin tinente (ver Anexo 2), siendo la Unión Europea receptora
embargo la conectividad continúa presentando dificultades de prácticamente el 100% de las exportaciones de miel a
tanto en velocidad como en alcance. granel cubana (ver Anexo 3).
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 8ETAPA PROBLEMA
Factores de Diseño USO
Público Primario /
Usuario europeo o cubano, en un rango de edad de adultez La Organización Internacional para la Estandarización (ISO)
joven a adultez media. ofrece dos definiciones de usabilidad:
Público Secundario / ISO/IEC 9126: “La usabilidad se refiere a la capacidad de un
Trabajadores y directivos de ambas entidades. software de ser comprendido, aprendido, usado y ser atractivo
para el usuario, en condiciones específicas de uso”.
El público meta del rango etáreo anteriormente pautado es
el que mantiene una mayor relación con los medios digitales ISO/IEC 9241: “Usabilidad es la eficacia, eficiencia y satisfacción
ya que ha desarrollado de manera mayormente empírica con la que un producto permite alcanzar objetivos específicos
una cultura visual en cuanto a pautas estéticas y tendencias a usuarios específicos en un contexto de uso específico”.
internacionales, siendo objeto de su atención las páginas o
sitios web con un correcto diseño enfocado en ellos, que Por otra parte el experto en usabilidad de los entornos
desempeñen una interacción más fácil, cómoda e intuitiva y web Jakob Nielsen, estableció diez principios básicos de
proporcionen un feedback adecuado en un tiempo razonable. usabilidad para sistemas web, aplicable a todo sistema
interactivo digital (ver Anexo 4).
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 9ETAPA PROBLEMA
Factores de Diseño FUNCIÓN
Sitio web Apicuba / Comercio Electrónico /
El contenido de la página es muy escaso y presenta una El impacto de los e-commerce ha aumentado exponencial-
navegación principal justo debajo del banner. Esta barra de mente el número de ventas de las empresas que disponen
menú muestra 6 diferentes secciones (incluyendo el inicio) de este servicio, siendo crucial para su crecimiento, la de-
que exponen información sobre la empresa. Dentro de las tección de clientes potenciales, la apropiación de estos y su
diferentes secciones hay un uso recurrente de las etiquetas permanencia como consumidores de la empresa.
textuales así como el empleo de imágenes como anexo en
el evento, noticia o información que se expone. Por otra par-
te el empleo desacertado de recursos visuales en el sitio
trae consigo que el diseño se torne repetitivo y en ocasiones Banner /
excesivo. El uso del color y el desorden desde el punto de El uso de este recurso representa una manera económica y
vista compositivo es un ejemplo de lo anteriormente men- eficaz de dar a conocer la actividad de cualquier empresa,
cionado (ver Anexos 5 y 6). ya que constituye el formato publicitario por excelencia,
teniendo como principal función captar la atención del usua-
rio y cliente potencial que visite el sitio. Es una manera de
Identificador Actual / hacer marketing y publicidad digital, incrementar ventas de
El identificador posee un alto nivel de representación y com- algún producto o dirigir más tráfico en la web.
posición (imago-logo-genérico) y conceptualmente apoya
de manera acertada la institución que representa, tanto por
el código tipográfico, compositivo y de color, además de la
estrategia de Identidad de la Marca respecto a sus líneas de
productos (ver Anexo 7).
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 10ETAPA PROBLEMA
Factores de Diseño TECNOLOGÍA
Responsive Design / Los formatos más empleados para imágenes y gráficos en
En los últimos años la variedad de dispositivos, resoluciones y la web son el .jpeg, por no contener límites de colores y
navegadores ha crecido considerablemente. Para garantizar dar la opción de elegir el porcentaje de compresión, el .gif,
la correcta visualización de los portales creados, se usa el empleado en animaciones sencillas, con un límite de 256
Responsive Web Design o Diseño Adaptativo , con el cual los colores, lo que posibilita crear pequeños archivos; el .png,
contenidos y el diseño se adaptan a las distintas resoluciones con millones de colores, mejor balance entre peso y calidad,
de pantalla, sin dejar de ser el mismo portal web. Se esta- compresión sin pérdida y transparencia. Por último el .svg
blecen puntos de cambio donde se redistribuye el contenido que se emplea cuando una imagen será redimensionada en
posibilitando el eficiente uso y visualización del mismo. varias ocasiones, siempre teniendo cuidado con el tamaño
de los archivos.
Gestión de color, imagen y tipografía /
La gestión de color es la conversión controlada entre las re- El formato TrueType tiene como fortaleza que posee un
presentaciones del color de varios dispositivos. Navegadores mayor grado de control sobre la forma en que los carac-
como Chrome, no son capaces de reconocer los perfiles de teres se muestran en pantalla, con lo cual se logra una mejor
color y mostrarán una gama distinta a la real. La gama de legibilidad. En el caso del OpenType, tiene una arquitectura
colores RGB de Adobe es muy superior por contener la mayor basada en la de su antecesor, cuya estructura básica con-
cantidad de colores y matices posibles, sin embargo sRGB es serva y complementa. WOFF por otra parte se trata de un
el formato más universal, ideal para la web ya que se verá formato tipográfico comprimido para la web. Se genera una
con los mismos colores prácticamente en cada navegador. versión reducida de la fuente que se usa y se incrusta en el
Los formatos más empleados para imágenes y gráficos en la documento para que el usuario pueda verlo perfectamente.
web son el .jpeg, con los mismos colores prácticamente en La tipografías son un recurso con muchas restricciones de
cada navegador. uso, por lo que deben adquirirse de forma legal o emplearse
tipos libres o gratuitos.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 11ETAPA PROBLEMA
Factores de Diseño MERCADO
Mercado apícola internacional / Plataformas internacionales de comercio en línea /
Utilización de una estética moderna y diseño minimalista, La paleta cromática varía totalmente en dependencia del
adecuado a los estándares actuales y respetando los códigos sitio, el único patrón común es el uso de colores diferentes
de visualidad de la web. En cuanto al código cromático para dividir secciones y el gris como secundario y recurso di-
predomina el uso de colores cálidos vinculados con la miel y visor. En cuanto a código tipográfico existe una tendencia
complementados por valores neutros. Destaca la presencia al uso de tipografías Sans Serif en diferentes pesos y Display
del blanco. Los titulares difieren en cuanto a tipografía, em- en algunos casos de titulares. Existe una tendencia a las com-
pleándose Sans Serif, Serif y Display. Para cuerpos de texto posiciones estables y simétricas, a la utilización de módulos
se suelen utilizar tipografías Sans Serif. La interacción suele en filas horizontales y en lista, justificados generalmente a
ser simple, se evidencia principalmente en botones y víncu- la izquierda o centrados en el caso de algunos titulares. La
los, reaccionando cuando un elemento es pulsado o se le navegación se define por menú principal, menú de casca-
sobrepone el cursor. La navegación está dada por un menú da y/o hamburguesa, hipervínculos de contenido, carrusel,
principal, menús de cascadas, hipervínculos internos en el bullet y barras de navegación inferior. En su mayoría la zo-
contenido, carrusel y barras de navegación. La zonificación nificación de los sitios está dada por un cabezal, un banner,
se encuentra mayormente distribuida por un cabezal con el espacio para contenido y pie de página (ver Anexo 9).
menú, banner a continuación, espacio para contenido y pie
de página (ver Anexo 8).
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 12ETAPA PROBLEMA
Requisitos de Diseño CONTEXTO TECNOLOGÍA
Los elementos usados para el diseño web de ambos sitios Los productos serán diseñados con responsive design para
estarán optimizados para funcionar eficientemente en Cuba una resolución máxima de 1920x1080 px y una resolución
manteniendo estándares globales (europeos). mínima de 320x480 px.
USO El modo de color de las imágenes para la web será RGB para
maximizar compatibilidades.
La usabilidad del sistema en ambos sitios estará optimizada
según los principios de Jacob Nielsen. Las imágenes para el medio digital se exportará a 72 dpi.
FUNCIÓN Las imágenes empleadas serán generadas en la institución o
descargados de forma gratuita con libre licencia comercial.
Para poner en marcha un comercio online, es necesaria la
subscripción al sitio web. Así como para consolidar el público
Las tipografías usadas serán las institucionales o libres.
que visita los sitios.
Mantener el banner como recurso para promocionar los MERCADO
productos de la empresa, tanto en el sitio web de Apicuba
como en su tienda virtual la Colmena. La Identidad Visual se mantendrá en el cabezal del sitio web.
Utilizar los identificadores de Apisun, Apiqueen y La Colme- Presentará un banner al inicio de la página.
na, respondiendo así a la estrategia de identidad de la Marca
respecto a sus líneas de productos. Utilizar composiciones mayormente horizontales.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 13Capítulo 3
Etapa Concepto
Diseño del Sitio Web de Apicuba
y de su tienda virtual La ColmenaETAPA CONCEPTO
Definiciones estratégicas
Sitio web Apicuba
MAPA DE CONTENIDO ÁRBOL DE NAVEGACIÓN
Se llevará a cabo un diseño reevolutivo del sitio actual, de-
bido a los problemas funcionales tanto gráficos como de
usabilidad que se arrojaron en el estudio de factores. El
nuevo diseño presentará 4 niveles de navegación, como es
posible apreciar en el mapa de contenidos, estructurado de
forma tal que permita el acceso intuitivo a la información
institucional, sin disminuir el protagonismo del espacio de-
dicado a la difusión de los productos derivados de cada una
de sus marcas y servicios. El mapa describe además los com-
ponentes y elementos multimedia que conforman el sitio
(ver Anexo 10).
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 15ETAPA CONCEPTO
Discurso Visual
Sitio web Apicuba
ATRIBUTOS RASGOS DE ESTILO
Generales Código tipográfico: Código interacción:
Especializada / Eficiencia / Calidad Uso de tipografías Sans Serif Neohumanistas para garantizar Animaciones en los componentes y retroalimentación que
mayor legibilidad, contrastando con tipografías Display por simulen movimientos presentes en la naturaleza. Se em-
peso, puntaje y color tipográficos. pleará el color para elementos interactivos.
Específicos
Ecologista / Tradicional / Natural / Única Código Compositivo: Código imagen:
Grilla flexible, adaptable a diferentes resoluciones y for- Alta calidad fotográfica. Sólo se utilizarán imágenes gratui-
matos. Se usarán composiciones centradas que transmitan tas, y estas deberán resaltar la mejor faceta de los productos
estabilidad y seriedad. de la empresa.
Código de color: Código gráfico:
Empleo del color institucional y derivados optimizados Formas simples y depuradas. Empleo de líneas y planos de
para medio digital. Se usará el color como énfasis con fines color para hacer énfasis y apoyar la jerarquía de la infor-
funcionales, así como tonos de baja saturación u acromáti- mación.
cos como apoyo.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 16ETAPA CONCEPTO
Premisas Conceptuales
Sitio web Apicuba
PREMISA 1 EVALUACIÓN
Aludir a la tradición de APICUBA destacando lo artesanal Se seleccionó la Premisa 2 ya que cumple de manera más
y humano de la actividad apícola, para enfatizar su solidez directa y eficiente los atributos que se quieren comunicar de
como empresa de valores. la empresa, además de facilitar una mejor representación
gráfica del concepto, lo cual aporta en gran medida al obje-
PREMISA 2 tivo principal de la empresa: vender (ver Anexo 11).
Recrear el carácter naturalista de la empresa enfatizando su
exclusiva labor, para exponer los beneficios de sus productos.
PREMISA 3
Sugerir la creciente expansión de la empresa destacando su
constante desarrollo y modernización para exponer sus ca-
pacidades competitivas.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 17ETAPA CONCEPTO
Alternativas Conceptuales
Sitio web Apicuba. Zonificación
EVALUACIÓN
Se maquetaron tres alternativas que respondían a la premisa
planteada, respetando los requisitos y limitantes extraídos
durante el desarrollo del proyecto. La zonificación definió
la ubicación de los elementos y secciones, así como su
jerarquía. Fue seleccionada la solución No.1 basado en su
versatilidad para el desarrollo de alternativas, y en el análisis
de la usabilidad de cada variante. Según los parámetros
efectividad, eficiencia y satisfacción, esta solución ofrece
más comodidad al usuario al interactuar con el sitio web
(ver Anexo 12).
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 18ETAPA CONCEPTO
Alternativas Conceptuales
Sitio web Apicuba
EVALUACIÓN
Partiendo de la premisa de inspirar el carácter naturalista,
y la zonificación seleccionada, se desarrollaron tres alterna-
tivas conceptuales, que persiguen el objetivo de agilizar la
comunicación con los usuarios, a través de una navegación
clara, que permita el fácil acceso a todas las informaciones.
Tras el objetivo de consolidar la marca en el mercado, se em-
plean recursos que aludan a la identidad, pero manteniendo
una visualidad simple y limpia.
Fue seleccionada la alternativa No.2 tras un análisis de
la correspondencia de cada una de las soluciones con los
atributos que se desean transmitir (ver Anexo 13), así como
su correspondencia con los requisitos pautados para el sitio
(ver Anexo 14).
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 19ETAPA CONCEPTO
Variantes Conceptuales
Sitio web Apicuba
EVALUACIÓN
Al analizar y comparar las soluciones según los principios de
usabilidad de Jacob Nielsen, dos variantes arrojan resulta-
dos positivos similares, cumpliendo de forma eficiente los 10
planteamientos. Finalmente quedó seleccionada la variante
No.2 dado que representa de forma más eficaz el concep-
to a comunicar, manteniendo una visualidad más sencilla y
atractiva, que opta por la simplificación en las acciones de
los usuarios con el sistema (ver Anexo 15).
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 20ETAPA CONCEPTO
Concepto Óptimo
Sitio web Apicuba
EVALUACIÓN
El camino conceptual óptimo presenta una navegación sen-
cilla, evidente e intuitiva, permitiendo el uso correcto del
Sitio Web y una fácil exploración del mismo, aplicable tanto
para escritorio, tablet y teléfono móvil (ver Anexo 16). Acata
la premisa y los atributos detallados para su desarrollo, así
como el uso de elementos gráficos que aluden al identifica-
dor visual. Presenta 4 niveles de navegación, que organiza
grandes niveles de información de forma simplificada y fácil-
mente accesible.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 21ETAPA CONCEPTO
Concepto Óptimo
Sitio web Apicuba
EVALUACIÓN
El camino conceptual óptimo presenta una navegación sen-
cilla, evidente e intuitiva, permitiendo el uso correcto del
Sitio Web y una fácil exploración del mismo, aplicable tanto
para escritorio, tablet y teléfono móvil (ver Anexo 16). Acata
la premisa y los atributos detallados para su desarrollo, así
como el uso de elementos gráficos que aluden al identifica-
dor visual. Presenta 4 niveles de navegación, que organiza
grandes niveles de información de forma simplificada y fácil-
mente accesible.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 22ETAPA CONCEPTO
Definiciones estratégicas
Sitio web La Colmena
MAPA DE CONTENIDO ÁRBOL DE NAVEGACIÓN
Como muestra el mapa de contenidos realizado, el sitio web
presenta 4 niveles de navegación, cuya estructura se basa en
los productos, servicios y contenidos que ofrece el e-commerce.
Por cada uno de estos niveles se expone la descripción de los
componentes del sitio, además de los elementos multimedia y
formatos usados en el mismo. En el caso de la Sección Productos
se encuentra dividida en dos subsecciones: Apisun y Apiqueen,
con la intención de facilitar y organizar el proceso de compra
para el usuario, dándole acceso a cualquier lugar y producto
del sitio sin importar su ubicación actual (ver Anexo 17).
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 23ETAPA CONCEPTO
Discurso Visual
Sitio web La Colmena
ATRIBUTOS RASGOS DE ESTILO
Generales Código tipográfico: Código interacción:
Variado / Confortable / Interactivo Uso de tipografías Sans Serif Humanísticas en el cuerpo de Animaciones para los movimientos de los componentes y
texto para garantizar mayor legibilidad. Marcado contraste retroalimentación que evoquen el descubrimiento. Uso del
entre el cuerpo de texto y los titulares por peso y puntaje color para elementos interactivos.
Específicos tipográficos, para diferenciar los niveles jerárquicos.
Especializada / Calidad / Singular / Código imagen:
Tradicional - Contemporánea Código Compositivo: Alta calidad fotográfica y uso del desenfoque como recur-
Grilla flexible, adaptable a diferentes resoluciones y formatos so para complementar el concepto de descubrimiento. Las
A comunicar y una tendencia a la horizontalidad para transmitir estabili- imágenes deben resaltar la mejor faceta de los productos de
dad y confort. la empresa.
Calidad / Singular / Tradicional - Contemporáneo
Código de color: Código gráfico:
Empleo mayormente de colores acromáticos optimizados Empleo de formas simples y depuradas. Se usarán planos
para medio digital así como tonos de baja saturación como con baja opacidad para hacer énfasis en determinados ele-
apoyo. Uso del croma como énfasis con fines funcionales. mentos del sitio, aludiendo al descubrimiento.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 24ETAPA CONCEPTO
Premisas Conceptuales
Sitio La Colmena
PREMISA 1: EVALUACIÓN
Recrear la intención de La Colmena como escondite, tradu- Para la evaluación de las premisas se partió de los atributos a
ciendo el ambiente de su interior a recursos gráficos que representar, debido a que los requisitos arrojados en la eta-
aludan al descubrimiento por parte del usuario. pa Problema generalmente constituyen condicionantes para
el desarrollo del producto y no para su conceptualización.
PREMISA 2: También se parte del hecho de que cada idea reflejada en
las premisas puede potencialmente permitir la conceptua-
Representar a La Colmena como tienda especializada que
lización y desarrollo del producto hasta el punto en que los
exterioriza la imagen de la empresa que la respalda, para
diseñadores y desarrolladores puedan lograrlo. Se selecciona
fomentar la funcionalidad de ambas como sistema.
la Premisa 1 por facilitar diferentes caminos gráficos con un
grado de interés visual que supera al resto de las premisas
PREMISA 3:
(ver Anexo 18).
Reflejar el contraste entre la complejidad detrás del trabajo
apícola y la simplicidad del proceso de compra, para resaltar
la facilidad de uso de este servicio.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 25ETAPA CONCEPTO
Alternativas Conceptuales
Sitio web La Colmena. Zonificación
EVALUACIÓN
Se selecciona la Alternativa 1 ya que cumple eficientemente
las funciones planteadas para el producto, el concepto plan-
teado en la premisa óptima, así como las condicionantes
y requisitos arrojadas en las etapas previas. Deviene en un
producto fácilmente implementable como sitio web y apli-
cación móvil. Además se tuvo en cuenta la eficiencia de su
estructura, su efectividad y satisfacción para garantizar la
óptima usabilidad del producto (ver Anexo 19).
Para la distribución de las maquetaciones se tuvo en cuenta la
distribución y jerarquización de los principales componentes
y secciones del sitio.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 26ETAPA CONCEPTO
Alternativas Conceptuales
Sitio web La Colmena
EVALUACIÓN
De la zonificación seleccionada se derivaron tres alterna-
tivas conceptuales, diseñadas con el objetivo de resaltar
los productos que ofrece el sitio mediante diferentes com-
posiciones y uso de recursos, partiendo de que la finalidad
de la plataforma es vender y llamar la atención del usario
y cliente potencial garantizando la usabilidad óptima y el
interés visual del sitio.
La alternativa seleccionada ya que cumplía estos aspectos
de manera eficiente, los atributos a comunicar, así como los
requisitos planteados anteriormente fue la No. 1, con un
diseño más simple e intuitivo facilitando así la navegación,
además de exteriorizar de forma factible el concepto que se
plantea en la premisa seleccionada (ver Anexos 20 y 21).
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 27ETAPA CONCEPTO
Variantes Conceptuales
Sitio web La Colmena
EVALUACIÓN
Para la evaluación de las variantes se tuvieron en cuenta los
diez principios de usabilidad de Nielsen, constituyendo la
No. 1 la solución más eficiente. El resto de las soluciones a
pesar de presentar un diseño muy similar, no superaban a la
variante seleccionada a la hora de exteriorizar el concepto
de descubrimiento que se quiere comunicar con la premisa
óptima, además de presentar un orden más evidente que in-
fluye en la usabilidad del sitio, ser visualmente más atractiva
y equilibrada (ver Anexo 22).
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 28ETAPA CONCEPTO
Concepto Óptimo
Sitio web La Colmena
EVALUACIÓN
La solución seleccionada como concepto óptimo cuenta
con una navegación simple e intuitiva, lo que garantiza su
usabilidad y correcto entendimiento, tanto para su aplicación
en escritorio, tablet y teléfono móvil (ver Anexo 23).
Cumple con la premisa seleccionada, el concepto a comunicar,
así como los rasgos de estilo expuestos anteriormente. Sus
4 niveles de navegación permiten al usuario una búsqueda
con eficacia, además de posibilitarle acceder a los principales
componentes y secciones del sitio.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 29ETAPA CONCEPTO
Concepto Óptimo
Sitio web La Colmena
EVALUACIÓN
La solución seleccionada como concepto óptimo cuenta
con una navegación simple e intuitiva, lo que garantiza su
usabilidad y correcto entendimiento, tanto para su aplicación
en escritorio, tablet y teléfono móvil (ver Anexo 23).
Cumple con la premisa seleccionada, el concepto a comunicar,
así como los rasgos de estilo expuestos anteriormente. Sus
4 niveles de navegación permiten al usuario una búsqueda
con eficacia, además de posibilitarle acceder a los principales
componentes y secciones del sitio.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 30Conclusiones Concluido el actual Trabajo de Diploma y comprendiendo Respetando de manera coherente el concepto identitario, a
todos los fundamentos generados a partir del encargo inicial través de una navegación sencilla, que garantiza una óptima
del proyecto se ultima que: Se da respuesta acertada a los experiencia de usuario, en enlace con una calidad estética
objetivos de diseñar el sitio web de la empresa APICUBA y acorde a las pautas contemporáneas, y favoreciendo la
el de su tienda virtual La Colmena, en la medida que ambos funcionalidad al exponer imágenes e información textual
cumplen eficientemente con sus funciones representativas, en un contexto depurado y bien organizado, las soluciones
informativas y promocionales, de forma que inserten la obtenidas como parte de este proyecto satisfacen la
empresa en el mercado internacional digital, como una necesidad actual, creciente y cada vez más indispensable
institución fuerte y competente. de poseer una imagen en línea fuerte, que impulse el
desarrollo y las ventas de la empresa.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 31Recomendaciones Para la correcta implementación del sistema de productos
se recomienda:
Desarrollar los manuales pertinentes a ambos sitios web
pautando de forma detallada las propiedades de los
productos, para lograr la correcta terminación y desarrollo
de los mismos, así como la estética deseada en su
implementación.
Mantener un estricto control sobre el cumplimiento de las
pautas establecidas una vez generado en Manual de Marca.
Luego de su implementación, la actualización periódica
es de vital importancia, respetando los códigos visuales
generados.
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 32Bibliografía
TESIS SITIOS WEB
Antón, CM., Hernández, M. (2018) Identidad Visual y Sitio Web para APICUBA. (2014a). Quiénes somos. Consultado el 9 de febrero Instituto Boliviano de Comercio Exterior. (2012). El mercado de la
la Sucursal Gastronómica Centro Histórico. La Habana: Instituto Su- de 2020, disponible en : http://www.apicuba.co.cu/%C2%B- Unión Europea para la miel y otros productos apícolas. Consultado
perior de Diseño de la Universidad de la Habana. Fqui%C3%A9nes-somos.html el 9 de febrero de 2020, disponible en: http://www.ibce.org.bo/
documentos/resmercadomielderivados. pdf
Costa, ME., García, A. (2019). Sistema de Identidad Visual y Sitio APICUBA. (2014b). Productos Apicuba. Consultado el 9 de febrero
Web para la galería Servando. La Habana: Instituto Superior de de 2020, disponible en : http://www.apicuba.co.cu/productos- Ourcodeworld.com. (2018) Top 7: Los mejores entornos de
Diseño de la Universidad de la Habana. apicuba.html desarrollo integrado (IDE) para JavaScript, HTML y CSS. Consultado
el 17 de febrero de 2020, disponible en: https://es.ourcodeworld.
Sánchez, A., Romero, JM. (2017). Aplicación móvil y Sitio Web para APICUBA. (2014c). Eventos Apicuba. Consultado el 9 de febrero de com/articulos/leer/105/top-7-los-mejores-entornos-de-desarrollo-
la Teoría del Diseño Básico. La Habana: Instituto Superior de Diseño
2020, disponible en : http://www.apicuba.co.cu/eventos.html integrado-ide-para-javascript-html-y-css
de la Universidad de la Habana.
APICUBA. (2014d). Contactos Apicuba. Consultado el 9 de febrero Rockcontent.com. (2020a). ¿Qué es un lenguaje de programación y
de 2020, disponible en : http://www.apicuba.co.cu/contactos.html qué tipos existen?. Consultado el 17 de febrero de 2020, disponible
CONFERENCIAS en: https://rockcontent.com/es/blog/que-es-un-lenguaje-de-programa-
Bluekea.com. (2019). Sistema de gestión de contenidos (CMS): ¿por cion/
Departamento de Comunicación Visual (2018). Conferencias de la
qué implementarlo en tu empresa?. Consultado el 17 de febrero
asignatura, Diseño de Interfaz.
de 2020, disponible en: https://bluekea.com/blog/consejos-para-tu- Rockcontent.com. (2020b). Qué espacio de color usar en fotografía
web/espacios-de-color-para-web-srgb-adobergb para web: sRGB o AdobeRGB. Consultado el 17 de febrero de 2020,
D.I. Aliana Sánchez Garteiz. (2018a). Diseño de Comunicación Visual.
disponible en: https://rockcontent.com/es/blog/cms/
Diseño de Interfaz. Funciones y Componentes. Documento PDF
Eumed. (2012). Aplicación de test de precios al mercado de la miel
presentado en La Habana. La Habana. D.I. Aliana Sánchez Garteiz.
natural cubana exportable, en observatorio de la Economía en StatCounter. (2020a). Browser Market Share Cuba Jan 2019—Jan
(2018b). Diseño VI. Interfaz Gráfica. Documento PDF presentado en
Latinoamérica. Consultado el 15 de febrero de 2020, disponible 2020. Consultado el 10 de febrero de 2020, disponible en: https://
La Habana. La Habana.
en: https://www.eumed.net/cursecon/ecolat/cu/2012a/miel-natural- gs.statcounter.com/browser-market-share/all/cuba
cubana-exportable.html
MsC. Alfredo Aguilera Torralbas. (2019, septiembre). Taller de Tesis.
StatCounter. (2020b). Browser Market Share Europe Jan 2019—Jan
Metodología del Proceso de Diseño. Etapas Necesidad y Problema.
Initcoms.com. (2020). 7 Tendencias UI en eCommerce. Consultado el 2020. Consultado el 10 de febrero de 2020, disponible en: https://
Documento PDF presentado en La Habana. La Habana.
15 de febrero de 2020, disponible en: https://www.initcoms.com/7- gs.statcounter.com/browser-market-share/all/europe/#month-
tendencias-ui-en-ecommerce/ ly-202001-202005
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 33Bibliografía
StatCounter. (2020e). Operative System Share Cuba Jan 2019— Statista. (2020c). Tráfico web en Cuba. Consultado el 11 de febrero Wikipedia. (2020b). Entorno de desarrollo integrado. Consultado el
Jan 2020. Consultado el 10 de febrero de 2020, disponible en: de 2020, disponible en : https://www.statista.com/statistics/934669/ 17 de febrero de 2020, disponible en: https://es.m.wikipedia.org/
https://gs.statcounter.com/os-market-share/all/cuba/#month- cuba-web-traffic-share-device/ wiki/Entorno_de_desarrollo_integrado
ly-202001-202005
Statista. (2020d). Uso diario del internet en Europa. Consultado el Wikipedia. (2020c). Formatos de archivos de imagen. Consultado
StatCounter. (2020f). Operative System Share Europe Jan 2019— 11 de febrero de 2020, disponible en : https://www.statista.com/ el 17 de febrero de 2020, disponible en: https://es.m.wikipedia.org/
Jan 2020. Consultado el 10 de febrero de 2020, disponible en: statistics/377631/daily-internet-usage-in-european-countries/ wiki/Formatos_de_archivos_de_imagen
https://gs.statcounter.com/os-market-share/all/europe/#month-
ly-202001-202005 Statista. (2020e). E-commerce en Europa. Consultado el 11 de febrero Wikipedia. (2020d). Framework de CSS. Consultado el 17 de febre-
de 2020, disponible en : https://www.statista.com/study/28488/e- ro de 2020, disponible en: https://es.m.wikipedia.org/wiki/Frame-
StatCounter. (2020c). Screen Resolution Share Cuba Jan 2019— commerce-in-europe-statista-dossier/ work_de_CSS
Jan 2020. Consultado el 10 de febrero de 2020, disponible en:
https://gs.statcounter.com/screen-resolution-stats/all/cuba/#month- Statista. (2020f). Métodos digitales de pago en Europa. Consultado Wikipedia. (2020e). Lenguaje de programación. Consultado el 17
ly-201908-202008 el 11 de febrero de 2020, disponible en : https://www.statista.com/ de febrero de 2020, disponible en: https://es.m.wikipedia.org/wiki/
topics/3946/digital-payment-methods-in-europe/ Lenguaje_de_programaci%C3%B3n
StatCounter. (2020d). Screen Resolution Share Europe Jan 2019—Jan
2020. Consultado el 10 de febrero de 2020, disponible en: https:// Statista. (2020f). Compra Online en Europa. Consultado el 11 Wikipedia. (2020f). Medios digitales. Consultado el 17 de febrero de
gs.statcounter.com/screen-resolution-stats/all/europe/#month- de febrero de 2020, disponible en : https://www.statista.com/ 2020, disponible en: https://es.m.wikipedia.org/wiki/Medios_digitales
ly-202001-202005 topics/3881/online-shopping-in-europe/
Wikipedia. (2020a). Miel. Consultado el 16 de febrero de 2020, dis-
Statista. (2020a). Usuarios de Internet en Cuba. Consultado el Statista. (2020f). Diseño Web Responsive en Europa. Consultado el ponible en: http://es.wikipedia.org/wiki/Miel
11 de febrero de 2020, disponible en : https://www.statista.com/ 11 de febrero de 2020, disponible en : https://www.statista.com/
statistics/739030/number-of-internet-users-cuba/ topics/4021/mobile-responsive-web-design-in-europe/ Wikipedia. (2020g). Navegador web. Consultado el 17 de febrero de
2020, disponible en: https://es.m.wikipedia.org/wiki/Navegador_web
Statista. (2020b). Penetración del Internet en Cuba. Consultado el Statista. (2020f). Diseño Web Responsive en Europa. Consultado el
11 de febrero de 2020, disponible en : https://www.statista.com/ 11 de febrero de 2020, disponible en : https://www.statista.com/ Wikipedia. (2020h). Perfil ICC. Consultado el 17 de febrero de 2020,
statistics/739036/internet-penetration-cuba/ topics/4021/mobile-responsive-web-design-in-europe/ disponible en:https://es.m.wikipedia.org/wiki/Perfil_ICC
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 34ETAPA NECESIDAD
Anexos
Diseño deldel
Rediseño Sitio
Sitio
WebWebdedeApicuba
Apicuba
y de
diseño
su tienda
de su virtual
tienda Lavirtual
Colmena
La ColmenaANEX0 1
Estadísticas de uso de tecnologías en Cuba
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 36ANEX0 2
Estadísticas de uso de tecnologías en Europa
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 37ANEX0 3
Demanda europea de la miel a granel cubana
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 38ANEX0 4
Principios básicos de usabilidad según Jacob Nielsen
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 39ANEX0 5
Imágenes del Sitio Web actual de Apicuba
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 40ANEX0 6
Matriz Funcional Sitio Web actual de Apicuba
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 41ANEX0 7
Análisis funcional del Identificador actual
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 42ANEX0 8 ANEX0 9
Estadísticas del Mercado Apícola Internacional Estadísticas de Plataformas Internacionales de Comercio en línea
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 43ANEX0 10
Mapa de contenido / Sitio Web Apicuba
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 44ANEX0 11
Evaluación de Premisas Conceptuales según atributos / Sitio Web Apicuba
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 45ANEX0 12 ANEX0 13
Evaluación por objetivos específicos de usabilidad Evaluación de alternativas según atributos
/ Zonificación del Sitio Web Apicuba / Sitio Web Apicuba
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 46ANEX0 14 ANEX0 15
Evaluación de alternativas según Requisitos de Diseño Evaluación de variantes según Principios de usabilidad de Nielsen
/ Sitio Web Apicuba / Sitio Web Apicuba
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 47ANEX0 16
Concepto Óptimo
/ Responsive del Sitio Web Apicuba
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 48ANEX0 17
Mapa de contenido / Sitio Web La Colmena
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 49ANEX0 18
Evaluación de Premisas Conceptuales según atributos / Sitio Web La Colmena
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 50ANEX0 19 ANEX0 20
Evaluación por objetivos específicos de usabilidad Evaluación de alternativas por atributos
/ Zonificación del Sitio Web La Colmena / Sitio Web La Colmena
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 51ANEX0 21 ANEX0 22
Evaluación de alternativas según Requisitos de Diseño Evaluación de variantes según Principios de usabilidad de Nielsen
/ Sitio Web La Colmena / Sitio Web La Colmena
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 52ANEX0 23
Concepto Óptimo
/ Responsive del Sitio Web La Colmena
Diseño del Sitio Web de Apicuba y de su tienda virtual La Colmena 53INSTITUTO SUPERIOR DE DISEÑO
Diseño de Comunicación Visual
Curso 2019-2020
Diseño del Sitio Web de Apicuba
y de su tienda virtual La ColmenaTambién puede leer
