Este documento presenta las guías de estilo para el sitio web de Nutria University. Explica que se crearon dos wireframes, uno a mano y otro en computadora. Establece los colores que se usarán, incluyendo tonos de gris para el encabezado y pie de página, y tonos de azul para resaltar elementos. También cubre el diseño responsive para tabletas y teléfonos, ocultando el menú y eliminando sliders en dispositivos móviles. El documento concluye esperando que el diseño propuesto sea de agrado.

1. GUIA DE ESTILOS
NUTRIA UNIVERITY

2. PRIMER wireframe
hecho a mano a boli
y papel.
Segundo, hecho a
ordenador. Con
ideas BASICAS del
diseño y su
estructura.
Para el diseño del WIREFRAME de papel y boli
se establecieron únicamente los espacios a
ocupar por cada bloque de la web.
Para el diseño del WIREFRAME en ordenador se
establecieron ya los espacios y su estructura. En este
caso la pagina principal. Donde el encabezado y pie
serán iguales para todas las paginas del sitio.

3. Estos son los colores usados para la web.
Los tonos GRISES para el FONDO del HEADER y FOOTER.
BLANCO para el FONDO del CONTEINER para asi hacer mas fácil la
lectura de sus textos e imágenes.
Los tonos de azul
elegidos nacen de este
azul(#285A89).
Los iconos, la resaltacion
del menú y otras
opciones, son en base a
este color.
NOTA:
Para el texto (salvo excepciones como
se verán mas adelante) se ha utilizado
el color negro #000000

4. La web vista en un PC muestra unos márgenes a cada
lado, esto hará que la web se pueda ampliar mediante
zoom del navegador si el usuario lo necesita.

5. Menu principal con resaltacion
Menu principalMenú con 5
categorías.
La resaltación se
en color #6697c5
Un color nacido
apartir de
#005b8b, que
como ya hemos
dicho antes, es el
color azul padre
de los demás.
La resaltación será usada en DOS ocasiones:
Cuando el usuario pase por encima (over) y
cuando se encuentre en una pagina de dentro
de esa categoría (click).
NOTA: El usuario siempre tendrá a su
disposición el mapa web en el footer, asi
como los accesos directos de las
categorías de estudios

6. El usuario al
acceder al
apartado
‘Estudios’ podrá
elegir como
clasificar la
información.
Podra seleccionar
‘Por grado’ si
quiere ver los
niveles de
estudios que se
ofertan.
De lo contrario
puede verlos por
familia si
selecciona la
opción.
Este método será útil por varios motivos,
principalmente si el usuario no sabe donde se
encuentra el estudio que quiere conocer solo
tendrá que selección ‘por familia’ y encontrará
su estudio mas fácilmente.
Pero si por el contrario, el usuario quiere
conocer los estudios por su clasificación de
grado, también tendrá esa opción sin ir
buscando, simplemente seleccionándola desde
la misma pantalla.
Nota: Este método
es muy sencillo de
implementar en
moviles

7. La web será
responsive en
Tablet y
Smartphone.
En móvil, se ocultara el menú y se eliminarán
todos los sliders. Para mostrar el menú en móvil
bastará con clickar con el dedo sobre el icono de
menú.
En Tablet, se podría ocultar el menú
también si la pantalla de este es
demasiado pequeña.

8. Así es como
estructuramos la
web.
Los menús
‘N. University’ y
‘Estudis’ Tienen
también un
submenu

9. La gama de colores
elegida: GRISES y
AZULES, dotan de
la web de armonía
y sutileza.
Hace también que
cualquier imagen
pueda ser incluida
sin problemas.
Hemos dotado a la
pagina principal de
un slider con
imágenes, algo
que es
aconsejable
aunque no
obligado.
La creación del logo ha sido
obligada para la estructura
del sitio web. Con 2 colores:
azul y gris. En tonalidades

10. Hasta aquí esta guía de estilos del proyecto ‘Nutria Univerity’,
Espero que le haya gustado, y sea de su agrado el diseño
propuesto.
Oriol Izquierdo Vibalda