Diseño de interfaces

Guía de estilos

Portfolio

1
 Diseño de interfaces

Índice
1. Descripción del proyecto

2. Tipografía utilizada

3. Paleta de colores

4. Logotipos e imágenes

5. Otros aspectos importantes

2
 Diseño de interfaces

1. Descripción del proyecto

En este proyecto lo que se quiere lograr es formar un portfolio donde

se indiquen los puntos fuertes del usuario en cliente que en este caso
soy yo mismo, siguiendo las directrices impuestas por la profesora
como por ejemplo añadir tres cards en la “landing page” tener una
página de contacto con un formulario hasta cosas más técnicas como
el uso de offset y explotar lo máximo posible el uso de “bootstrap” 5.
Se va a usar “bootstrap” 4.6 porque no considera deprecado el
“jumbotron” y hace las cosas más fáciles.
Dada estas directrices continuaremos en otros puntos de la guía como
se ha podido dar cada parte de este proyecto.

3
 Diseño de interfaces

2. Tipografía utilizada

En este caso se ha utilizado una tipografía llamada AnonymousPro se

encuentra en todo el proyecto y se usa dos modelos de esta (Standard
y Bold).
¿Por qué se utilizó esta tipografía? Se utilizo esta tipografía porque
recuerda en cierta forma a la terminal de Windows y como el
proyecto se trataba de un porfolio web se buscaba hacer referencia a
ello a parte es visible y a mi parecer en ningún momento se hace
ilegible

4
 Diseño de interfaces

3. Paleta de colores

En la paleta de colores estuve pensando detenidamente en un

principio esta iba a ser una paleta de azules con verdes vivos, luego
pensé que no era lo mejor y cambié de idea a una más segura que fue
una paleta de azules monocromáticos, pero lo veía entre muy aburrido
y que parecía un proyecto sobre una aplicación sanitaria por lo cual
decidí esta paleta diversa con algunos colores complementarios entre
sí.
En el fondo se usa un color que nos recuerda al verde menta, pero más
suave para evitar que sea un fondo blanco aburrido en las “cards”
usamos una tonalidad un poco más blanca, luego tanto en el footer y
el nav se usa ese azul oscuro para marcar bien el inicio y final de
página por último el rosa pastel lo utilizamos para cuando se pasa el
ratón por los enlaces para darme más dinamismo a la página

5
 Diseño de interfaces

4. Logotipos e Imágenes

De logotipo se usa uno de creación propia basada en

otros diseños encontrados en internet (todos los
enlaces están en el punto 5) este también paso por
una fase de creación acorde con los colores de la
página donde fue cambiando hasta decidir que lo
mejor es que fuese un logotipo con la menor
información posible pero que tuviese cierta complejidad y se usa el
color más oscuro de la página en él.
El banner también sigue la misma lógica que el logotipo y usa un azul
muy parecido al de nav, y por ultimo las imágenes han sido sacadas de
una web de imágenes “Creative Commons” como se indicó en la
práctica, a continuación, dejo una imagen del logo empleado:

6
 Diseño de interfaces

5. Aspectos importantes

Esta página se ha intentado respetar lo máximo posible los principios

de accesibilidad dados en clase usando etiquetas de HTML 5 como
footer, nav, main... y usando también el atributo alt en las imágenes.
Otro punto por destacar sería el uso de los margin y padding en toda
la página para respetar los espacios y quede lo menos cargada
visualmente y también el uso de una navegación reticular donde el
usuario puede viajar desde cualquier página a otra, en este apartado
también se ha buscado que la experiencia de usuario sea lo más
simple posible para que sea intuitiva para cualquier público.

Por último, dejo los enlaces donde he recogido información:

https://www.color-hex.com/
https://www.pexels.com/es-es/
https://chat.openai.com
https://www.canva.com

(chatGPT lo he utilizado para tener una visión de más o menos hacer

la página web y el diseño del logo con sus plugin)