Sitio Web IE - Amparo Pérez
| Título | Sitio Web IE - Amparo Pérez |
|---|---|
| Tipo de Proyecto | Proyecto de Curso |
| Palabras Clave | sitioweb |
| Período | 2025-2025 |
| Asignatura | Imagen Escrita |
| Del Curso | Imagen Escrita 2025 |
| Carreras | Diseño |
| Alumno(s) | Amparo Pérez |
| Profesor | Javiera Ruiz |
| URL | https://amparoperezr.github.io/portafolio-2025-web-IE/ |
Sitio Web
Introducción
El objetivo principal de este proyecto era crear un portafolio digital para la asignatura de Imagen Escrita que fuera más allá de la plantilla base, reflejando un enfoque de diseño personal. Para ello, se optó por una estética minimalista y oscura, utilizando una paleta de colores vibrante para los títulos y los elementos interactivos. El sitio se diseñó para ser intuitivo y fácil de navegar, con una jerarquía de contenido clara que guía al usuario a través de los trabajos realizados.
El desarrollo de este portafolio ha sido una oportunidad para traducir conceptos de diseño a un lenguaje de programación. Más allá de la estética, el desafío principal fue construir una estructura lógica y coherente desde cero, un proceso que exigió entender no solo qué hace una línea de código, sino cómo se relaciona con el conjunto. Aprendí que cada decisión técnica, desde el uso de Flexbox hasta la aplicación de un filtro en las imágenes, tiene una implicación directa en la experiencia de usuario y en la narrativa visual del sitio. El proyecto demuestra que el diseño y la programación no son disciplinas separadas, sino herramientas que, al unirse, permiten materializar ideas de una manera precisa y expresiva.
Wireframe
Los wireframes iniciales sirvieron como mapa de ruta para la estructura del sitio. A pesar de que el diseño final varió en detalles, la diagramación general y el orden de las secciones se mantuvieron fieles a esta planificación. La idea fue organizar el contenido de manera vertical, con secciones claramente definidas y una navegación principal que siempre estuviera disponible.
-
Página de inicio -
Primera sección -
Segunda seccion para las tareas 1 -
Segunda seccion para las tareas 2 -
Segunda seccion para las tareas 3 -
Segunda seccion para las tareas 4 -
Ultima sección
Paleta de colores: Se utilizó un fondo completamente negro (#000000) para generar un contraste dramático. Los títulos y enlaces se resaltan con colores cálidos y saturados (color-encargos, color-sobre-asignatura) definidos mediante variables en CSS, lo que facilita la consistencia visual.
Tipografía:La tipografía Alegreya Sans fue seleccionada por su legibilidad y estilo, que complementa la estética moderna del sitio.
Efectos visuales: Se implementaron diversas propiedades CSS para mejorar la experiencia de usuario y la estética general, como:
- Sombras de texto (text-shadow) en los títulos para darles una sensación de profundidad.
- Transiciones suaves (transition) en los efectos hover de enlaces e imágenes.
- Transformaciones (transform: scale) para un efecto sutil de zoom en las miniaturas de los encargos.
- Filtros de imagen (filter: grayscale) que revelan el color de las miniaturas al pasar el mouse, creando un efecto de revelación.
- Box-shadow para añadir un efecto de elevación al menú fijo.
Diagramación: Se utilizó Flexbox para la maquetación de la barra de menú y para alinear las miniaturas y descripciones de las tareas, permitiendo una organización fluida y adaptable.
Código
El desarrollo del sitio partió de cero, lo que permitió un control total sobre la estructura y la lógica. La arquitectura del código se basa en HTML semántico (<section>, <nav>, <main>), que organiza el contenido de manera lógica y accesible.
Para el CSS, se utilizaron variables personalizadas (:root) para gestionar la paleta de colores de manera centralizada, haciendo el código más limpio y fácil de mantener. La responsividad se implementó con media queries, asegurando que el diseño se adapte correctamente a dispositivos móviles. El JavaScript se usó para la animación inicial de p5.js y para la funcionalidad de la barra de menú que se fija al hacer scroll, mejorando la experiencia de navegación.