Informe TP2 Portfolio

Presentado por:
Dylan Garces
 Logo
En el logo nos encontramos la D y la G, las
cuales son las iniciales de mi nombre y apellido,
busque que sea minimalista y simple, para que
sea mas facil de reconocer por el usuario.
ESTUDIO SHONOS
Tipografía Montserrat
01 LEGIBILIDAD
es una fuente sans-serif que es fácil de
leer en pantalla, lo que la hace
adecuada para una variedad de
tamaños de texto.
03 VARIABLES
Montserrat ofrece una variedad de
pesos y estilos, lo que te permite
utilizarla de diversas maneras en tu
sitio web. Ademas es una tipografia
ampliamente compatible con
diferentes navegadores y sistemas
operativos
02 ESTILO MODERNO
tiene un aspecto limpio y moderno que
da una apariencia contemporánea,
fresca y actual, lo cual va de la mano
del planteo del sitio.
04
ATRACTIVO ESTÉTICO
La estética de Montserrat es atractiva
para los usuarios. Su diseño simple y
limpio ayuda a que el sitio web tenga
un aspecto visualmente agradable y
sencillo para el usuario.
 Paleta de colores
#14303F #FFFFFFF
Color principal de la pagina, es un tono de azul El blanco lo utilice para generar un
oscuro que se asocia con la profesionalidad y la buen contraste con el #14303F, tanto
seriedad y da un aspecto limpio y moderno al para fondos (cuando la tipo era de ese
sitio. Lo utilice para generar un buen contraste color) o para texto (cuando el fondo
con el fondo y dar facilidad de lectura al usuario era de ese tono oscuro)
y por su versatilidad, ya que puede funcionar
como texto o como fondo.

#04A4CC
Este color lo utilice para los hovers, lo
elegi, ya que es una variacion mas
clara del color principal (#14303F)
que genera diferencia notoria visual a
la hora de pasar el mouse, pero no se
empasta con el blanco de fondo
Wireframes

En el wireframe, si bien hubo errores

estructurales, como que la home funcionaba
como una landing page, me sirvió para ir
encontrando algunos formatos que iria usando
mas adelante, como el navbar, el footer y la
estructura de visualización de todos los post.
Si bien, sufrieron cambios de orden y diseño
estas estructuras, funcionaron de base para
generar la pagina final
 Logo Hover navbar Menu hamburguesa

Header
En los elementos del Header o Navbar, nos
encontramos con el logo, y con las 4
paginas del sitio, las cuales poseen un
hover que da a entender visualmente al
usuario que es un boton interacuable. A su
vez, a la hora de pasar a tamaño de
celular, las secciones desaparecen y son
remplazadas con un menu hamburguesa
desplegable, que nos permite encontrar
las secciones dentro del mismo. Navbar desktop

Menu hamburguesa desplegado

 Footer
En el footer nos encontramos con botones
asociados a mis redes sociales, así como
también las 4 secciones de la página,
porque al no tener un navbar que sigue al
usuario, el footer ofrece la posibilidad de
una vez llegado al fondo de la página, se
Sin hover en Tiktok
cambie de sección sin necesidad de subir
al inicio. Todos estos elementos poseen un
hover que aumenta el tamaño del icono.
Con hover en Tiktok
Home
Para la home busque generar una breve descripción de quien soy,
mis skills para trabajos y un breve resumen de que se puede ver en
la página. Busque que sea simple y concreta, para que ya el
usuario tenga conocimiento de con que se va a encontrar, y pueda
ir r´apidamente a ver los trabajos.

SOFTWARE ANTIVIRUS
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse in mi sed velit lacinia vulputate. Vestibulum
dignissim mollis ipsum sed pellentesque.

DIAGNÓSTICO GRATUÍTO
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse in mi sed velit lacinia vulputate. Vestibulum
dignissim mollis ipsum sed pellentesque.
 Contacto
En la sección contacto nos encontramos
con un formulario generado con el plug-in
“Contact Form 7”. Con este, el usuario
puede enviarme un mail con una propuesta
laboral y ya con sus datos para poder
establecer una conversacion.
 Aquí nos encontramos con información personal para que el

Sobre mi usuario pueda conocerme mas, así como también nos

encontramos con toda mi formación académica y con mi
experiencia laboral
 Mis trabajos funciona como la post page de la pagina, aquí nos encontramos todos los post

Trabajos con trabajos, todos poseen un titulo, una breve descripción y una imagen de portada, al
reducir el tamaño de la pagina, los post se ordenan uno abajo de otro en una misma
columna. A si vez todos los post poseen un hover que agranda un poco el tamaño del
articulo al apoyar el mouse sobre el mismo.
 Posts
En los posts nos encontramos con distintas estructuras, particulares del contenido que muestra cada trabajo, pero
nos encontramos con 3 estructuras principales, las cuales por lo menos 1 de las 3 debe estar presente en el post,
tambien son combinables, si el trabajo asi lo permite.

AUDIO VIDEO GALERIA

Reproductor de audio que Permite sin salir de la pagina Galeria de imagenes que
nos permite escuchar ver contenido subido a muestra distintas pantallas
distintas pistas .mp3 youtube, aligera la carga del del trabajo
sitio tambien
MUCHAS
GRACIAS