EL MÉTODO UNCHI
EL MÉTODO UNCHI
DISEÑO DE WEB CON HTML, CSS Y JS
DISEÑO DE WEB CON HTML, CSS Y JS
Herramientas
Visual Studio Code | Figma
Herramientas
Visual Studio Code | Figma
Herramientas
Visual Studio Code | Figma
Duración
4 semanas
Duración
4 semanas
Duración
4 semanas
MISIÓN
El Método Unchi tiene como finalidad dar a conocer el perfil profesional de la halterófila Sara Martínez. De este modo, la página web muestra sus logros y actual actividad como deportista y entrenadora personal dentro del mundo de la halterofilia.
MISIÓN
El Método Unchi tiene como finalidad dar a conocer el perfil profesional de la halterófila Sara Martínez. De este modo, la página web muestra sus logros y actual actividad como deportista y entrenadora personal dentro del mundo de la halterofilia.
COLORES
Los colores de la web reflejan, por una parte, el diseño limpio y simple que quería implementar. Por otra parte, el color acento resalta la pasión y funciona como un atractivo visual para captar la atención del usuario.
COLORES
Los colores de la web reflejan, por una parte, el diseño limpio y simple que quería implementar. Por otra parte, el color acento resalta la pasión y funciona como un atractivo visual para captar la atención del usuario.
TIPOGRAFÍA
TIPOGRAFÍA
La tipografía empleada también pretende representar el diseño simple y limpio de la web. Por ello, se han empleado dos tipografías san-serif de fácil lectura; Poppins y Raleway. Ambas son tipografías que emplean formas geométricas y que casan muy bien con el formato web.
La tipografía empleada también pretende representar el diseño simple y limpio de la web. Por ello, se han empleado dos tipografías san-serif de fácil lectura; Poppins y Raleway. Ambas son tipografías que emplean formas geométricas y que casan muy bien con el formato web.
LOGOTIPO
LOGOTIPO
El logotipo está compuesto por el nombre de la web y el icono de un brazo musculado que hace referencia a la fuerza y a la práctica de deporte.
El logotipo ha sido realizado en Figma, tomando de base un icono de un músculo al que se le han modificado la orientación y los vectores para personalizarlo. Además, se ha curvado la orientación de la tipografía para darle una forma más redondeada que envuelve al icono. Los colores empleados han sido el principal (#F2F1F0) y el acento (#F24535). Además, el logotipo cuenta con la variante del favicon de la web, que omite la tipografía.
El logotipo está compuesto por el nombre de la web y el icono de un brazo musculado que hace referencia a la fuerza y a la práctica de deporte.
El logotipo ha sido realizado en Figma, tomando de base un icono de un músculo al que se le han modificado la orientación y los vectores para personalizarlo. Además, se ha curvado la orientación de la tipografía para darle una forma más redondeada que envuelve al icono. Los colores empleados han sido el principal (#F2F1F0) y el acento (#F24535). Además, el logotipo cuenta con la variante del favicon de la web, que omite la tipografía.
EJECUCIÓN
EJECUCIÓN
La página web cuenta con 4 documentos .html (index.html, sobre-mi.html, galeria.html y contacto.html). A su vez, el proyecto consta de 4 carpetas (css, fonts, img y js) con sus archivos correspondientes.
El index.html cuenta con 6 secciones. La primera es la que genera el mayor impacto dado que es lo primero que el usuario ve junto con el header. Por ello, simplemente escogí una fotografía que definiese a Sara Martínez y su relación con la halterofilia para emplearla de background-image en style.css. Junto a esta añadí un eslogan que definiese a la protagonista de la web y, finalmente, un botón para indicar que hay más contenido debajo de esta sección. Las siguientes secciones adjuntan botones a los otros .html explicando de forma simple y concisa quién es Sara (acceso a sobre mí), sus logros en la halterofilia, información acerca de los entrenamientos que ofrece (contacto), el carrusel con algunas fotografías de ella compitiendo (galería) y, por último, un breve apartado de sus datos de contacto.
La página web cuenta con 4 documentos .html (index.html, sobre-mi.html, galeria.html y contacto.html). A su vez, el proyecto consta de 4 carpetas (css, fonts, img y js) con sus archivos correspondientes.
El index.html cuenta con 6 secciones. La primera es la que genera el mayor impacto dado que es lo primero que el usuario ve junto con el header. Por ello, simplemente escogí una fotografía que definiese a Sara Martínez y su relación con la halterofilia para emplearla de background-image en style.css. Junto a esta añadí un eslogan que definiese a la protagonista de la web y, finalmente, un botón para indicar que hay más contenido debajo de esta sección. Las siguientes secciones adjuntan botones a los otros .html explicando de forma simple y concisa quién es Sara (acceso a sobre mí), sus logros en la halterofilia, información acerca de los entrenamientos que ofrece (contacto), el carrusel con algunas fotografías de ella compitiendo (galería) y, por último, un breve apartado de sus datos de contacto.
Los encabezados de la página web cuentan con tres elementos clave: logotipo, menú y redes sociales. No obstante, realicé dos variantes para la correcta adaptación a todos los dispositivos según sus dimensiones. Todos los que se encuentren a partir de 320px hasta 1280px contarán con la variante específica para móvil y tablets. Por el contrario, los que superen 1280px tendrán la variante para ordenador.
Los encabezados de la página web cuentan con tres elementos clave: logotipo, menú y redes sociales. No obstante, realicé dos variantes para la correcta adaptación a todos los dispositivos según sus dimensiones. Todos los que se encuentren a partir de 320px hasta 1280px contarán con la variante específica para móvil y tablets. Por el contrario, los que superen 1280px tendrán la variante para ordenador.
Por su parte, el pie de página de la web cuenta con tres elementos: logotipo, derechos de autor (copyright) y redes sociales.
Por su parte, el pie de página de la web cuenta con tres elementos: logotipo, derechos de autor (copyright) y redes sociales.
Respecto al diseño visual de los elementos de la página web, siempre busqué formas geométricas redondas ya que combina muy bien con el mundo del deporte y la halterofilia (como los músculos redondos y discos circulares). Por ello, decidí emplear formas redondas en el logotipo y la tipografía. Por su parte, también decidí aplicar la propiedad border-radius en varios elementos: botones, iconos, imágenes, cards, mapas y formularios.
Respecto al diseño visual de los elementos de la página web, siempre busqué formas geométricas redondas ya que combina muy bien con el mundo del deporte y la halterofilia (como los músculos redondos y discos circulares). Por ello, decidí emplear formas redondas en el logotipo y la tipografía. Por su parte, también decidí aplicar la propiedad border-radius en varios elementos: botones, iconos, imágenes, cards, mapas y formularios.
Los .html restantes cuentan con diseños muy sencillos. En Sobre-Mi.html redacté la trayectoria y aporté información acerca de quién es Sara Martínez, para que los usuarios pudiesen conocerla más a fondo. En Galeria.html introduje las imágenes de Sara con la opción de zoom.
Los .html restantes cuentan con diseños muy sencillos. En Sobre-Mi.html redacté la trayectoria y aporté información acerca de quién es Sara Martínez, para que los usuarios pudiesen conocerla más a fondo. En Galeria.html introduje las imágenes de Sara con la opción de zoom.
Por último, en Contacto.html se realizó un formulario muy simple para que el usuario pueda contactar con Sara y conocer más acerca de los entrenamientos que ofrece.
Por último, en Contacto.html se realizó un formulario muy simple para que el usuario pueda contactar con Sara y conocer más acerca de los entrenamientos que ofrece.
