JUSTIFICACIÓN

PORTADA

Centro Hidalguense de
Estudios Superiores
CENHIES

Proyecto global
Materia: Material Didáctico
Profesor: Miguel Negrete
Fecha de entrega: 29/06/2018
Producto: Página Web, realización de
marca, mascota y animación.
INTRODUCCIÓN

El proyecto consiste en la realización de una

página web bajo el concepto de superhéroes y la
formación de valores, los principales usuarios a
los que se dirige es a niños de 6 a 9 años y
padres de familia residentes de Pachuca de
Soto, Hidalgo, con un nivel socioeconómico
clase A.
La página web contiene 19 links o subpáginas
las cuáles se dividen en:

-Flexy -Afiliación
-Gemas -Noticias
-Nosotros -Talleres
-Galería -Eventos
-Videos -Foro FAQ
-Juegos -Glosario
-Lectura -Ayuda
-Escritura -Chat
-Tienda -Contacto
-Padres

Cada link contiene datos importantes y de forma

didáctica para una fácil navegación del usuario
en el sitio. El tipo de página web es de ancla
debido a que su diseño no nos manda a subpági-
nas sino que denttro de la misma se dividen sus
secciones para hacer muy fácl la interacción con
cada link.

2
PROCESO CREATIVO

Al determinar el contenido y parametros a respetar

de la página web se procedió al proceso creativo,
es decir, definir un concepto y experiencia para
reflejarlos en un estilo gráfico único y correspon-
diente al usuario. También se comenzó el proceso
de bocetaje de cada elemento, desde el nombre de
la empresa, marca y mascota obteniendo las
siguientes propuestas:

3
PROCESO CREATIVO

Después de obtener los bocetos comprensibles se

siguió con la digitalización de los mismos y modifi-
cación de detalles para mejorar la calidad.

Marca empresa

Marca página web

Mascota (Flex)

4
PROCESO CREATIVO

El siguiente paso fue la diagramación en Adobe

Muse de cada link o sección obteniendo como resul-
tado lo siguiente:

Aquí se muestra la página principal del sitio, el

fondo representa mediante una ilustración la ciudad
de color naranja dónde vive flex, el personaje o
mascota de nuestra empresa. Al centro se colocó la
marca de la página en animación para generar en el
usuario una sensación de diversión e impresión a
primera vista del sitio. Los colores análogos del
naranja buscan generar un contraste con el centro y
así otorgarle mayor jerarquía debido a la importan-
cia de las marcas.
El uso de ilustración nos ayuda a conectar mejor
con nuestros usuarios y hacer que la navegación
dentro del sitio sea fluida y agradable para la vista.

5
PROCESO CREATIVO

Después de observar la página principal viene la

presentación del personaje Flex, al mismo tiempo
que mediante un degradado se hacen presentes los
botones de todos los links del sitio.

Cada uno de los botones se distingue por un color

diferente, su descripción en texto y un icono en abs-
tracción media.

6
PROCESO CREATIVO

El link siguiente “Nosotros” da una breve descrip-

ción sobre la empresa KidZone acompañada de Flex
como en la mayoría de las páginas generando una-
rrelación del personaje con el usuario.

Los colores de cada link o icono corresponden al

fondo de cada sección para así relacionar mejor
todo y no confundir al usuario.
En el fondo se observan formas de tipo viñetas de
un comic y elementos gráficos ornamentales como
flechas para que inconscientemenete el usuario
siga navegando hacia abajo del sitio.

7
PROCESO CREATIVO

Al seguir navegando nos encontramos con el link

“Gemas” el cuál tiene el objetivo de comenzar con
la parte didáctica del sitio y conduciral usuario bajo
un método interactivo con toda la página.

Flex le hace una pregunta, ¿Que tipo de gema eres?

para que el niño identifique un valor que lo repre-
senta mediante un icono especial para cada uno.

8
PROCESO CREATIVO

Después se encuentra el link de “Galería”, en el

cuál se muestran algunas fotos de SuperKids, al
mismo tiempo se muestra de nuevo una indicación
para que el niño se motive a ganar la gema de Res-
petuoso y así ir juntando todas para ser un Super-
Kid, de ésta forma no solo se queda la experiencia
del sitio sino que se complementa con acciones en
la vida real y transmite un reto fácil para el usuario.

Al dar click en el icono de la cámara el niño podrá

enviar una imagen al equipo de KidZone en dónde
este realizando una actividad de juego o de aprendi-
zaje, como recompensa se gana la gema siguiente
para continuar con la navegación del sitio.

9
PROCESO CREATIVO

El link siguiente es “Videos” en dónde se muestra

un video de SuperKids para así motivar a los niños
a divertirse sanamente con sus amigos, ésta sec-
ción solo muestra el audiovisual y un texto de moti-
vación para que el usuario continue su recorrido por
las gemas dentro del sitio.

10
PROCESO CREATIVO

La parte divertida y pensada para que niño regrese

al sitio varias veces es la de “Juegos”, se muestra
una ilustración de un videojuego conocido por los
niños y un texto que indica seleccionar el botoón
rojo para direccionar al usuario a otra página ese-
cial de videojuegos especiales.

La mayoría de los links son minimalistas y con ele-

mentos concretos para que el niño no se confunda y
su percepción sea enfocada a lo que realmente
importa de una manera sencilla y precisa. También
conforme va avanzando va ganando las gemas
depende a cada instrucción o actividad que debe de
realizar.

11
PROCESO CREATIVO

Otros importantes links son los de lectura y escritu-

ra los cuáles hacen que el usuario de alguna forma
pueda estudiar un poco y así aprender bajo la expe-
riencia de SuperKid.

El link “escritura” te premia con una gema más al

escribir una cata para alguien querido, aunque el
sitio no la recibirá tiene la intención de que el niño
la realize para recibir su recompensa.

12
PROCESO CREATIVO

13
PROCESO CREATIVO

13
PROCESO CREATIVO

13
PROCESO CREATIVO

13
CONCLUSIÓN

Como podemos observar en cada link se pretende

reflejar el aprendizaje mediante un método práctico
y muy fácil de entender, la experiencia del usuario
a generar es de felicidad y de recompensas porqué
algunos links le ayudan al niño a ganar gemas y así
convertirse en un Super Kid oficial.

Los colores nos primarios y secundarios nos ayudan

a conectar psicológicamente con el usuario y no
solo ofrecerle un sitio de entretenimiento sino un
aprendizaje autodidacta experimental.

El nivel de concección de cada link es alto gracias a

los elementos que presenta y su estructura basada
en el “960 Grid System” para generar armonía y
una composición adecuada para cada elemento
dentro del sitio, de esta manera es algo justificado
esteticamente y funcional para el usuario.

El uso de botones simples nos ayuda también a

poderlos identificar de inmediato y entenderlos sin
necesidad de explicar para que sirven, habalndo de
iconos de redes sociales y el botón de retorceso en
la parte inferior derecha de la página.

14