INSTITUTO POLITÉCNICO NACIONAL

UNIDAD PROFESIONAL INTERDISCIPLINARIA DE CIENCIAS

SOCIALES Y ADMINISTRATIVAS

AVENDANO HUERTA ERICK DANIEL

LAZCANO ESCAMILLA BRENDA GUADALUPE

ZAMUDIO RIVERA ANGEL YAFTE

MODELADO GRÁFICO DE INTERFACES

3CM53

DOCUMENTACIÓN DEL PROYECTO

1. Conceptualización de la Idea
Se realiza una página web de venta de cosméticos y cuidado para la piel para el
público en general, especialmente para el uso y cuidado de la higiene personal,
perfumar, mejorar la apariencia, especialmente del rostro y protegerla resaltando y
embelleciendo nuestras facciones en piel y rostro.

2. Análisis de la aplicación con base en la conceptualización

• 1.  el contenido (¿para qué es?)
El contenido de dicha página web se concentrará en los productos de cosméticos que
se comercializan como también información de cada uno de ellos, información de los
diferentes tipos de cuidados como los activos más empleados para el rostro  ya sea
vitaminas o derivados vegetales y los tipos de sustancias que contienen estos.
• 2.  el contexto (¿para quién es?)
Este mercado de cosméticos es para todo público interesado en comprar nuestros
cosméticos, pero el interés que tiene mayor proporcionalidad es en torno al sexo
femenino ya que tienen más inclinación a hacia la compra de cosméticos y cuidados
de la piel
• 3.  la audiencia (¿dónde vive?).
La página web fue creada en México y sus alcances por ahora son zonas de la
república mexicana y alcances de ella, por vía compras  facturadas en dinero
electrónico.

3.  Escenarios de uso de la interfaz.

• Acceso: En la parte de acceso, los usuarios de la pagina tendran que ser registrados
por medio de una plataforma como google o facebook o simplemente colocando un
correo en el cual se le pueda enviar las verificaciones correspondientes para que el
usuario no sea spam y una vez registrados, los usuarios deberán introducir las
credenciales para que pueda acceder a la página web mandando así el inicio
• Inicio: Consideramos que es necesario poner un contador de visitas y con base en
ello poner los más vistos dentro de la página. Los usuarios muchas veces entran por
una búsqueda en específico y es por ello que se le recomendarán los que tienen más
visitas
• Cuidados: Del inicio derivaran mas partes de la pagina, las cuales será un apartado
de cuidados los cuales estarán divididos también por cuidados para la cara, piel y
cabello en los cuales se deberá dar publicidad a los productos para que la pagina
pueda tener más cantidad de ventas, todo haciéndolo atractivo para que el usuario
pueda tener una compra satisfactoria
• Tienda: En este apartado vendrán los productos en específico que al momento de
abrirlos, se les dara una característica y uso de cada uno de los productos, asi mismo
un video tutorial para que ellos sepan aplicarlo correctamente y de ser posible
complementar la venta con otros productos para que los usuarios puedan tener una
piel o cabello perfectos
• Premium: En la parte premium los usuarios ingresaran los datos de su tarjeta para
poder estar suscritos a la página, la cual podrá brindarles regalos cada cierto tiempo
y poder al mismo tiempo quitar la publicidad que pudiera tener la página
• Buscar: En la parte de buscar los usuarios podrán buscar un articulo de interés e
incluso los productos para que su navegación sea más fácil
• Quienes somos: Por último viene este apartado, en el cual, los usuarios podrán tener

mas información de lo que somos nosotros, teniendo atractivos visuales y siendo

concisos para que el usuario lea todo y no se canse y pueda tener al mismo tiempo
toda la información para que se sienta en un lugar seguro para tratar los problemas
de piel y cabello que pudiera tener
4.  Meta de la interfaz: para que se está creando la interfaz.
El objetivo principal de la interfaz es el de ofrecer un espacio libre de elementos que
distraigan al usuario de llevar a cabo su compra. En muchas ocasiones, encontramos
interfaces a las que se les implementan un gran número de elementos, muchos de ellos
innecesarios, los cuales buscan enriquecer la esencia visual de la misma, pero hacen
todo lo contrario, sobrecargando la vista del usuario. Asimismo, llegan a utilizarse
tipografías y colores que pueden llegar a ser bastante incompatibles entre sí, haciendo
que la vista del usuario pueda ser deficiente y muchas veces, ilegible. Se busca que
esta interfaz sea armónica en todo sentido, utilizando los colores y las tipografías
adecuadas para una comprensión y legibilidad aceptables, a su vez que sus elementos
sean los justos y necesarios, para garantizar un atractivo visual para quien se
encuentre en ella.

• La interfaz se diseña para ofrecer productos de calidad para lograr el reconocimiento.

Mantener el crecimiento de nuestras ventas. Abastecer el mercado con nuestros
productos. Lograr una ventaja competitiva en base a nuestro personal. Todo a ra íz de
una interfaz atractiva y fácil de usar.
• La interfaz creada es para darle un gusto vistoso a la audiencia que interfiera en
dicha página web, atrayendo así su atención y su comercialización de cada uno de
los productos dentro de la interfaz. ¿Cómo? Concluyendo en ella imágenes de los
productos, vertiendo información de para qué sirve junto sus costos.

5.  Plataformas para las que se creará la interfaz:

La aplicación será destinada a los usuarios de la web de una forma responsiva para
que todos puedan tener acceso a ella sin la necesidad de instalar una aplicación debido
a que se está optando por tener las aplicaciones en la nube optimizando así mejor los
recursos y así también tendremos como mercado a los usuarios de PC de clientes
ligeros.
 
6.  Requisitos de la interfaz
Al tratarse de un sitio web, se tienen pensados los siguientes requisitos que deben
cumplirse para poder decir que la interfaz cumple su función.
 
REQUISITO SÍ NO OBSERVACIÓN

LOS COLORES CONTRASTAN X SE DISTINGUEN LOS COL-

ORES USADOS
LA TIPOGRAFÍA ES LEGIBLE X ES UNA FUENTE CLARA Y
LEGIBLE
HAY ELEMENTOS QUE NO ESTEN RELA- X LA INFORMACIÓN ES LA
CIONADOS CON LA TEMÁTICA NECESARIA
LA INFORMACIÓN ESTÁ DISTRIBUIDA X
SEGÚN EL CONTENIDO
EL ESTILO ESTÁ DEFINIDO X CADA PANTALLA CUENTA
CON EL MISMO ESTILO
7.  Restricciones de la interfaz
Contrario a los requisitos, las restricciones hacen referencia a los elementos o
características que NO le permitirá al usuario hacer. Tomando en cuenta el enfoque de
la interfaz, se tiene en cuenta las siguientes restricciones.
 
·      No podrá cambiar los colores
·      No se podrá modificar la información presentada.
·      El usuario no podrá alterar el orden visual de los elementos.

8.  Planificación
La finalidad de la planificación es dar una idea o marcar los limites de tiempo en los
cuales se llevarán a cabo las diferentes etapas del desarrollo de la interfaz.
Algunos de ellos podrían llevarse a cabo en simultáneo, pues no necesariamente
podrían ser dependientes una de la otra. Asimismo, se tomará en cuenta un periodo de
modificación, en el cual se podrá modificar, añadir o eliminar elementos que durante la
etapa de planificación se hayan definido, pero en el diseño o desarrollo no den los
resultados esperados. Se tienen contempladas las siguientes etapas, las cuales, a su
vez, están conformadas por una serie de tareas para su desarrollo.
 
 
1. Análisis: en esta parte se determinara cuales son las necesidades que pudieran
surgir para crear la plataforma y sus características que debe contener
2. Establecer requerimientos: En esta etapa nos enfocaremos en que es lo que
necesita el cliente para la creación de la plataforma, cuáles son los escenarios y las
características que debe contener
3. Conceptualización: Una vez entendidos los escenarios se creará un sitemap en el
cual se creará de manera muy general la navegación del usuario
4. Arquitectura de la Información: Veremos la información que maneja la página, por
medio de esta procesaremos todos los datos de compra y datos del usuario con la
finalidad de que sea entendible para el sistema y a su vez sea amigable para los
usuarios
5. Desarrollo de diseños: Para esta etapa se crearán los bosquejos de cada una de
las pantallas de navegación del usuario
6. Prototipado: En esta etapa se crearán los diseños de alta fidelidad
7. Construcción de versiones: Aquí, se enfocara en la programación de la página
8. Evaluación: Se dará retroalimentación de todo el trabajo realizado de tal manera
que se corregirá lo que este mal
9.  Guía de Estilo ó Manual de diseño Gráfico
1. Colores: Qué colores
se van a utilizar y por
qué su relación con
la aplicación.
Hemos seleccionado
y bautizado las
siguientes colores que
servirán para darle
vida a nuestra
página:

Gris. El tono de gris seleccionado tiende ligeramente al color negro, dando una
sensación de elegancia y formalidad, así como una belleza sutil. Como su nombre
lo indica “fine Gray” o “gris sutil”
Morado. Lo relacionamos con la percepción que causa en las personas, pues da
una sensación de sensibilidad, delicadeza y lujo en los cosméticos.
Dorado. Nuestro color “golden orange”, es un tono de dorado ligeramente más
fuerte y con más carácter, demostrando fortaleza pero sin dejar de lado las
sensaciones que da el color dorado; brillo, elegancia y lujo.

2. Paleta de colores seleccionada  justificación

Determinamos que la plataforma deberá contener la selección de colores escogida
debido a que queremos que la plataforma tenga un toque elegante y bella dándole
un toque de naturaleza a la página para dar a los clientes una imagen sensible y
delicada para que las clientas se sientan en confianza cuando se esté hablando de
un remedio y que los productos que se venden en la empresa son sumamente
confiables.
3. Tipografía qué tipo se utilizará y justificación
Para tener una mejor claridad, se escoge la tipografía HELVETICA.
Se trata de una tipografía sans serif,
las cuales se caracterizan por ser
finas, sin líneas que se proyecten en
los extremos. Con una apariencia
moderna y, sobre todo, bastante clara.
Esta fuente en particular permite
una legibilidad clara, su estilo
denota elegancia,
profesionalismo y seriedad

4. Imagen y composición:  ícono de la aplicación

Para dar más énfasis en la belleza y la cosmética, la idea de crear un icono que sea
alusivo a eso es fundamental.
La idea principal es hacerlo tomando como referencia el rostro de una mujer,
haciendo referencia a la belleza femenina y el principal público objetivo.
5. Logo.
Para el icono de aplicación pensamos en un diseño el cual presenta un aspecto
joven y moderno mostrando en líneas las cualidades del maquillaje, pero a su vez el
buen cuidado de la piel representando la belleza, destacando con una tipografía el
nombre de la marca.

Imagen de referencia.