UNIVERSIDAD DE CUENCA

Facultad de Ciencias Econmicas y Administrativas

Escuela de marketing

Nombre: Deicy Elizabeth Guzmn Malla

Modulo: Diseo de pgina WEB

Profesor: Dis. Paul Delgado

Tema: Diseo de la pgina web de la empresa SARLITUM

Fecha: Cuenca, 25 de abril del 2013

RESEA INFORMATIVA DE LA EMPRESA (FABRICA)

La fbrica Sarlitum es una empresa dedicada a la elaboracin de calzado excl usivamente para damas. Es una fbrica que est en el mercado desde el ao 2007. Cuenta con dos socios Flavio Sarmiento y Tania Lituma que son esposos. El nombre comercial de la empresa proviene de la interseccin de los apellido de los socios SAR Sarmiento LITUM Lituma Organizacin de la empresa (fabrica): La empresa est organizada de la siguiente manera:

Propietario

Diseador

Cortador

Aparador

Plantador

Emplantillador y empacador

Empleados: A continuacin se describen el nmero de empleados con que cuenta la fbrica: 1 diseador 1 cortadores 3 aparadores 4 plantadores 2 en el emplantillado y empacado Total de empleados que cuenta la empresa es de 11. Filosofia empresarial: Mision: Sarlitum es una empresa dedicada a la fabricacion de calzado exclusivamente para mujeres jovenes, cuenta con empleados expertos, tecnologia avanzada y materia prima de excelente calidad para producir productos con modelos exclusivos y elegantes para las mujeres del Ecuador. Vision: SARLITUM ser una empresa reconocida a nivel nacional por sus empleados, clientes competidores y publico general por su constante innovacion en sus productos, seremos el punto de comparacion con las empresas dedicadas a la fabricacion de calzado. Valores corporativos:

 Respeto: Nos referimos a una empresa integramente humanista que volora y respeta la dignidad, creencias valores e ideas de todos Honestidad: La comunicacin internma y externa sea franca, fluida y abrierta sustentada por las actitudes y transparencia de la empresa Integridad: Apertura: Escuchamos con atencion para que las ideas, propuestas y reclamos del cliente interno y externo sean valoradas Responsable: Seremos responsables en el cuidado del medio ambiente y en trato de nuestros empleados, clientes y proveedores. Excelencia: Procuramos la busqueda invariables de estandares elavados en todos los procesos de produccion para ofrecer un producto de calida. Nmero de clientes por mes: Esta empresa atiende a 150 clientes por mes, con ventas mensuales aproximadas de 600 docenas de calzado. Anlisis de marketing de la empresa:
CARACTERISTICAS Producto CALZADO SARLITUM Los materiales que utilizados en esta empresa para la elaboracin de calzado son cuerina sinttica, tela sinttica, tacos 5, 6, 7, fibra, plantillas ortopdicas, forros, logotipos Y estos son nacionales e importados ALAMACEN Calzado formas (Altos) 20 Calzado informal (bajo) de $16 MINORISTAS Calzado formas (Altos) 16 Calzado informal (bajo) de $13 Cuenca Ambato Gualaceo Azogues Guayaquil Loja Almacn Calendarios Tarjetas de presentacin Letrero Esta empresa tiene promociones cuando los zapatos ya se vuelven obsoletos o no se vende y tambin hace promociones a fin de ao Bailarinas Sandalias Botas Calzado formal (altos)

Precios

Cobertura

Publicidad

Promociones Modelos

Distribucin del producto: La fabrica dispone de un punto de venta (almacen)

SARLITUM
AGENTE VENDEDOR

ALMACEN

MINORISTAS

CONSUMIDOR FINAL

DISEO DE LA PGINA WEB:

La pgina web que se va a disear tendr un estilo de elegancia, formal y distincin que se acople a las condiciones y requerimientos del cliente, de igual manera se realiza una seleccin de colores, texto e imgenes que se ajusten a estas condiciones. Requerimientos funcionales de la pgina web Objetivos: Facilitar el contacto con el cliente Informar sobre los productos nuevos (nuevos modelos de zapatos) Impulsar la compra por internet. Pblico objetivo: Mujeres de 18 a 35 aos que le gustan adquirir zapatos elegantes e innovadoras para eventos sociales y para el uso diario. Usuarios: La pgina web tendr dos usuarios que ser un ingeniero en sistemas y el propietario. Tareas llevadas a cabo por cada uno de los usuarios: Ingeniero en sistemas: el ingeniero en sistemas ingresar a la pgina diariamente para controlar si la pgina est teniendo acogida por el pblico objetivo, para mantenimiento para editar la pgina, ingresar nuevas ofertas de productos. propietario: Para receptar pedidos mediante on line, responder sugerencias, dudas, inquietudes, preguntas, etc.,

Condiciones de uso y manejos de la pgina (clasificacin y edicin de los contenidos): Se debe ingresar a la pgina a diario para atender a los clientes que ha ingresado a la pgina y estn interesados en el producto La pgina se actualiza tres veces a la semana en la seccin de productos ya que la empresa continuamente ofrece nuevos modelos de calzado. Cada mes de debe cambiar las imgenes de la pgina

 La persona que va a utilizar la pgina es un ingeniero en sistemas que es el hermano del propietario y los propietarios con su debida capacitacin. El ingeniero en sistemas conjuntamente con el equipo de marketing y diseadores van a editar la pgina mensualmente. Estructura de la pgina web: La pgina web contiene la siguiente estructura: Pgina principal Nuestro proceso Quienes somos Productos (submens) Contctenos Pgina principal: En la pgina principal encontramos una imagen con un diseador ecuatoriano junto a una chica en el almacn del propietario, adems se encuentra informacin de la fbrica. Nuestro proceso: Encontramos, el logotipo de la empresa, seguida de los iconos de las subpginas, en el centro encontramos cuatro imgenes del proceso de elaboracin del calzado con una pequea descripcin Quienes somos: En esta subpgina encontramos el logotipo de la empresa, seguida de los mens de las subpginas, en el extremo izquierdo encontramos una imagen de una chica, al extremo derecho una descripcin de la empresa amigable que se hace constar la misin, visin y valores corporativos. Productos: Encontramos el logotipo de la empresa seguida del catlogo de los productos (gamas y lneas de zapatos), en el cual se debe dar un clic en el modelo del calzado y se despliegan los zapatos con sus respectivos colores, con el cdigo, una descripcin y precio del producto seguido de un carrito para comprar el producto en el cual se despliega una nueva imagen en donde se coloca descripcin del pago (tarjeta de crdito, datos personales, lugar de residencia, etc.) Contctenos: En esta subpgina de igual manera est el logotipo de la empresa, el formulario para que los clientes puedan enviar va email sus sugerencias, inquietudes, preguntas etc. Diseo de contenidos (clasificacin y edicin de los contenidos): A continuacin se analizan los contenidos que debe contener la pgina web con su respectivo anlisis que se ajuste a los requerimientos del cliente: Color: Los colores a utilizar son el RGB y CMYK con una resolucin que se ajuste al PPP de 72, con una luminosidad de 0 negro a 100% blanco, juntamente con una saturacin de que se acomode a la pgina web. Mediante una combinacin de tres colores contrate. Se utiliza seis tipos de colores que son el negro, blanco y purpura, se utilizan estos colores por lo que la empresa

desea trasmitir formalismo, distincin y elegancia para mujeres que desean utilizar un calzado exclusivo. Intencionalidad: La empresa quiere demostrar un estilo de elegancia, formal y distincin por lo que se realiza una seleccin de colores que se ajusten a este requerimiento. Significado: El significado que tiene el color a utilizarse es muy importante por lo que se realiz un estudio de la psicologa de todos los colores, tomando en cuenta que es un producto y el diseo de la pgina es exclusivamente para mujeres Funcionalidad: Se realizara una combinacin de colores para fondo de la pgina, imgenes, color de la letra, etc., siempre y cuando estos colores puedan ser legibles los elementos y evitando el cansancio visual con unos todos suaves, elegantes y combinados A continuacin se realiza un anlisis de los colores seleccionado que se utiliza a la pgina tomando en cuenta las tres consideraciones de uso: Negro: Se utiliza este color porque demuestra elegancia, prestigio y serenidad, se utiliza para disear una pgina web creativa e impacto para la moda. Este color se utiliza de fondo para el centro mediante texturas con un calor purpura claro Purpura: El purpura aporta la estabilidad del azul y la energa del rojo, representa serenidad, mstico, romntico, elegancia, se realizara una combinacin con un purpura brillante por lo que es ideal para diseos dirigidos para mujer. Este color se utiliza para la parte de arriba donde se va a incluir el logotipo Rosa: El rosa aporta Dulzura, delicadeza amistad y sobre todo a esa mujer que le gusta ser delicada y elegante al momento de elegir su vestuario. El color rosa se utiliza para darle realce al banner mediante un espiral elegante y para darle destello. plata: se utiliza este color para dar relace a la pgina mediante unas rajas muy finas en los extremos de las pginas o de la imagen, se utiliza este color para dar prestigi a la empresa. Blanco: El blanco significa optimismo, limpieza se utiliza este color para darle luminosidad destello a la pagina Oro (amarillo): Este color significa diversin alegra innovacin felicidad, se utiliza este color mediante una combinacin con el color plata en forma de rajas para darle realce y elegancia a la pagina

Tipografa: Se utiliza tres tipos de letras Romana Antigua, romana Moderna y decorativa, por lo que estas familias de letras demuestran el estilo que la pgina desea trasmitir a sus usuarios. Romana antigua: Se caracteriza por tener serif angular y de amplia base, las astas varan de grosor, el ojo es amplio, hay mucho espacio entre tipos. Se utiliza este tipo de letra por demostrar belleza, proporciones ideales, elegancia. Y el tipo de letra a utilizarse es Bernard MT Condensed Palo seco: No tienen serif o terminal, generalmente son alargadas, el asta es uniforme, son letras geomtricas. Se utiliza por lo que demuestra industrialismo, practicidad, sencillez, el tipo de letra a utilizar es Arial Narrow Decorativas: La pgina web utiliza este tipo de letra porque quiere demostrar, elegancia, femineidad, delicadeza, por lo que se utiliza en el logotipo de la empresa.

Textos que van a incluir en la pgina web:

PROPIRTARIOS: Flavio Sarmiento Tania Lituma TELEFONO: 072256366 095673452 DIRECCION: Gran Colombia y Manuel Reyes EMAIL: sarlitum07@gmail.com flasermi@hotmail.com Gualaceo-Cuenca-Ecuador Somos una empresa dedicada a la fabricacin de calzado exclusivamente para damas modernas, desde el 2007 cuenta con empleados expertos, tecnologa avanzada y materia prima de excelente calidad para la fabricacin de modelos exclusivos y elegantes para las mujeres del Ecuador. SARLITUM ser una empresa reconocida a nivel nacional por sus empleados, clientes competidores y pblico general por su constante innovacin en sus productos, seremos el punto de comparacin con las empresas dedicadas a la fabricacin de calzado. Valores corporativos:

PROCESO DE FABRICACION DISEO Y CORTE:

Corte de piezas: Se realiza mediante la moldura de acuerdo con la medida que se requiera para dar forma a la piel sinttica o cuero y forro, segn el modelo diseado en una actividad que pueda ser interna o externa a la empresa.

COSIDO (APARADO):
Unin de piezas: Se renen las piezas en dos procesos, primero se pegan las piezas con los forros, y se cosen con hilos de alta calidad, para su posterior elaboracin. Cada zapato lleva de 7 a 12 piezas segn el modelo.

ARMADO:
Se selecciona la horma de acuerdo a la numeracin para conformar, fijar la planta a base de clavos y cemento. Se pega la suela y tacos mediante un horno por ltimo se colocan clavos o tornillos a los tacos.

ACABADO:
Se pegan las plantilla, se pintan los cantos de

Respeto Honestidad Integridad Aperturas Responsable Excelencia

suelas, se realiza el lavado del corte y forros con jabn especial; se desmancha el zapato de residuos del proceso productivo.

Imgenes y smbolos: Se utiliza imgenes en primer y segundo plano con modelos que estn mostrndolo las zapatos y los productos con sus lneas y gamas.

Matriz y pauta de diagramacin: El tipo de diagramacin que se va a utilizar es la asimtrica, panel y Windows en la diagramacin convencional se va a utilizar banner superior Pauta general de diagramacin: Banner: El banner est colocado en la parte arriaba de color purpura en centro con una luminosidad del 90% y en los filos de un color plata en el centro se incluye una espiral elegante (vino) de color rosa y unos puntos de destellos una bota y una sandalia y se incluye el logotipo de la empresa con un color blanco. Con un tamao de altura de 125,24px y 764,11px de ancho

 Columnas: En la pgina de nuestros procesos y nuestros productos se incluir cuatro columnas con imgenes y texto, el espacio para separar las columnas es de 30 px. . El tamao del texto es de 140px de anchura y de 122px de altura. Para separar las imgenes de las columnas es de 18px.

Nota: Se utiliza el mismo diseo y formato para colocar las lneas y gamas de productos en los submens Campos: En el campo contiene un fondo de color neg en el cual se incluirn imgenes y texto ya sea en columnas o en otro formato el tamao es de764,11px de anchura y 384,27px de altura

Imgenes: Se realiza una seleccin de imgenes que se ajusten a los requerimientos de la pgina, ya sean perfiladas o en cuadrado. Pauta de diagramacin de textos: Texto de men: Se utiliza la letra romana antigua el tipo de Bernard MT Condensed en caja alta de 11 puntos con un estilo de negrita y centrada, con un espaciado de 1,15
QUIENES SOMOS QUIENES SOMOS
NUESTROS PRODUCTOS

CONTACTENOS

 Titulares: Se utiliza la letra romana antigua el tipo de Bernard MT Condensed en caja alta de 12 puntos con un estilo de negrita y centrada con un especio mltiple de 2 cm. PROCESO DE FABRICACION DEL CALZADO Subtitulares: Se utiliza la letra de palo seco Arial Narrow de 12 puntos en caja alta con un estilo de negrita, y centrada con un especia sencillo de 1.15 cm. DISEO Y CORTE Cuerpo de texto: Se utiliza la letra de palo seco Arial Narrow de 11 puntos en caja baja con un estilo normal y justificada a la izquierda y derecha con un especia sencillo de 1.15 cm. Corte de piezas: Se realiza mediante la moldura de acuerdo con la medida que se requiera para dar forma a la piel sinttica o cuero y forro, segn el modelo diseado en una actividad que pueda ser interna o externa a la empresa. Pie de fotos: Se utiliza la letra palo seco Arial Narrow de 8 puntos con un estilo de negrita y a la derecha. En este caso si la foto tuviera pie de pgina. El texto es de color blanco. Pauta de diagramacin de imgenes: Perfiladas o no: Perfiladas en las imgenes de una chica sentada, en la pgina del men quienes somos principal con un tamao aproximado de 565 de anchura y 343 de altura justificada a la izquierda.

Recuadros: las imgenes de las subpginas, con tamao de 142,01px anchura por 129,01px de altura. En los contornos una rayo fina de color plata con dorado para dar un efecto de elegancia a la pgina y a la imagen

 Fondos de imagen: cabe recalcar que el fondo de la pgina es de color negro con texturas y el de la imagen de color gris.

MATRIZ DE CONTENIDOS Se presenta la matriz de contenidos, la pgina contiene cuatro mens ms la pgina principal, se elabora de acuerdo a las condiciones, requerimientos y necesidad del usuario para la creacin de la pgina web.

BANER DE CABECERA

SARLITUM
PAGINA PRINCIPAL NUESTROS PROCESOS IMGENES RECUADRO (142,01px anchura por 129,01px de altura) IMGENES RECUADRO (142,01px anchura por 129,01px de altura) 18 PIXELES COLUMNA TEXTO (140px de anchura y de 122px de altura.) QUIENES COMOS NUESTROS PRODUCTOS IMGENES RECUADRRO (142,01px anchura por 129,01px de altura) 18 PIXELES COLUMNA TEXTO (140px de anchura y de 122px de altura.) IMGENES RECUADRO (142,01px anchura por 129,01px de altura) 18 PIXELES COLUMNA TEXTO (140px de anchura y de 122px de altura.) CONTACTENOS

30 PIXELES

IMAGEN WINDOWS (567 de anchura 349,16 18 PIXELES de altura) Y TEXTO COLUMNA TEXTO (140px de anchura y de 122px de altura.)

IMAGEN PERFILADA A LA IZQUIERA ( de anchura y 343 de altura) Y TEXTO

30 PIXELES

FORMULARIO DE CONTACTENOS

30 PIXELES

Diseo del sitio de mapas: Los mapas de sitios (sitemaps) es uno de los requisitos bsicos si desea
tener un buen posicionamiento en buscadores la pgina web de la empresa SARLITUM, pues informar a sus araas de todo el contenido de nuestra web, la importancia que damos a cada seccin e incluso de la frecuencia con que deben actualizar cada pgina. A continuacin se presenta el stemap de la pgina web de la empresa.

30 PIXELES

SARLITUM
UBICACIN DEL NEGOCIO INICIO
QUIENES SOMOS PRODUCTOS CONTACTENOS

SARLITUM
INICIO
QUIENES PRODUCTOS CONTACTENOS SOMOS ELABORACION DEL CALZADO

SARLITUM
INICIO
QUIENES SOMOS PRODUCTOS CONTACTENOS

SARLITUM
INICIO
QUIENES SOMOS PRODUCTOS CONTACTENOS

SARLITUM
INICIO

QUIENES SOMOS

PRODUCTOS CONTACTENOS

DISEO CORTE

APARADO

ARMADA

ACABAD O

DESCRIPCION AMIGABLE DEL NEGOCIO QUE CONTENGA MISION, VISION Y VALORESS IMAGEN PERFILADA

FORMULARIO DE CONTACTENOS
ZAPATOS BAJOS ZAPATOS ALTOS BOTAS BOTINES

SARLITUM
INICIO
QUIENES SOMOS PRODUCTOS CONTACTENOS ZAPATOS BAJOS

SARLITUM
INICIO
QUIENES SOMOS PRODUCTOS CONTACTENOS ZAPATOS ALTOS

SARLITUM
INICIO
QUIENES SOMOS PRODUCTOS CONTACTENOS BOTAS

SARLITUM
INICIO
QUIENES SOMOS PRODUCTOS CONTACTENOS BOTINES

COD 0002 Precio 16

COD 0003 Precio 16

COD 0012 Precio 16

COD 0002 Precio 16

COD 0002 Precio 20

COD 0003 Precio 25

COD 0012 Precio 16

COD 0002 Precio 24

COD 0002 Precio 25

COD 0003 Precio 20

COD 0012 Precio 30

COD 0002 Precio 22

COD 0002 Precio 16

COD 0003 Precio 18

COD 0012 Precio 20

COD 0002 Precio 25

SARLITUM
INICIO
QUIENES SOMOS
MAS CARD

SARLITUM
PRODUCTOS CONTACTENOS PAGO
VISA CONTADO

INICIO

QUIENES SOMOS

PRODUCTOS CONTACTENOS FACTURACIN

DATOS DEL CLIENTE FORMA DE PAGO (TIPO DE TARJETA DETALLE) RECARGO POR ENVIO

DATOS DE LA FACTURA

1. En la primera principal, contendr en la parte de arriba el logotipo de la empresas seguido de los mens, en el centro una pequea descripcin del negocio, a que industria pertenece (manufactura), a que se dedica (fabricacin y comercializacin), categora del producto (calzado exclusivamente para mujer) y ciudad en la que se encuentra la empresa (Gualaceo), una breve descripcin de Gualaceo en un extremo contendr una imagen de Gualaceo con una imagen de una chica con zapatos de la empresa. 2. En la subpgina (inicio), se describe el proceso del zapato que realiza la fbrica con imgenes y una pequea descripcin, de igual manera en la parte de arriba contendr el logotipo de la empresa seguido de los mens de la pgina. 3. En la subpgina (quienes somos) tendr el mismo formato que la pgina principal en el centro se cambiara por descripcin amigable y llamativa de la empresa que contiene inicio, misin, visin y objetivo en un resumen. 4. En la subpgina (productos) de igual manera es el formato de la pgina principal en la seccin del centro contendr las lneas de productos que tiene la empresa con una imagen y el nombre de las lneas que son tres lneas que son zapatos bajos, altos, botas y botines, al dar un clic en la foto o en la lnea de producto se despliega otra pgina con las gamas de zapatos que pertenecen a esa lnea con su respectivo cdigo, precio y los colores que existen con una carrito para que puedan comprar, al dar un clic en el carrito se abre una nueva pgina para los acuerdos de pago (crdito contado, tarjeta, otras formas de pago). Cuando se llene esta seccin el usuario-cliente dar un clic en imprimir

y se imprimir la factura con la descripcin de producto, son las mismas caractersticas mencionadas para cada lnea de producto (cuatro lneas). 5. Contctenos en esta subpgina se encuentra los nombres de los propietarios, direccin de la fbrica y almacn, telfono, email, mensaje, etc., de igual manera tiene el mismo formato que el de la pgina principal. SECO Requerimientos tcnicos: Administracin y mantenimiento del sitio web: El gestor de contenidos que se va a utilizar es el Joomla ya que es un sistema libre y sencillo adems los tipos de usuarios que va a utilizar las paginas son dos con las caractersticas mencionada anteriormente, se respalda una copia de seguridad para evitar problemas futuros. Codificacin y formato de contenidos: Se diferencia entre contenidos y formatos, respetando minuciosamente los estndares que existen, el sitio web se desarrollar con una codificacin que funcione o sea usable en los principales navegadores como internet Explorer y Mozilla Firefox, dependiendo del funcionamiento de la pagina se incluir un video de la empresa y el turismo de Gualaceo siempre y cuando estos videos no interfieran en la interfaz de la pgina como rapidez, legibilidad, etc. Arquitectura del sitio web: La estructura de los contenidos de la pgina web ser coherente, se deber contar con buenos mens de navegacin, evitando acudir nuevamente a los botones de navegacin para desplazarse, se debe presentar prototipos que ilustre la organizacin de los contenidos. Usabilidad: El tiempo, el esfuerzo y capacidad que disponen los visitantes para alcanzar un determinado nivel de aceptacin a la pgina, los nmeros de pasos necesarios para entregar a la pgina principal, mens y submens deben ser sencillas y rpida se tiene que crear una pgina en las que todos puedan ingresar con facilidad y los pasos para entregar a cada actividad deben ser lo ms natural. Accesibilidad: El sitio web de la empresa debe ser accesible para todos los usuarios por lo que hay que tener en cuenta dos consideraciones: 1. Accesibilidad a la computadora: La aplicaciones tiene que adaptar al computados y a la capacidad del hardware (porttiles, telfonos, escritorio, tablets, etc.)

2. Accesibilidad del navegador utilizado: El diseo del sitio web se tiene que visualizar en la mayora de los navegadores (en los ms visitados), como internet Explorer, Mozilla, chostomer, etc., con el fin de evitar que los contenidos se vena de distintas maneras (idiomas, etc.