https://github.com/JuanJefry23/webflow-landing-page

A landing page designed in Figma using web design principles, typography knowledge and palette of colours and coded in Webflow
https://github.com/JuanJefry23/webflow-landing-page

css figma flexbox grid responsive-design user-experience ux-ui web-accessibility web-design webflow

Last synced: about 2 months ago
JSON representation

A landing page designed in Figma using web design principles, typography knowledge and palette of colours and coded in Webflow

• Host: GitHub
• URL: https://github.com/JuanJefry23/webflow-landing-page
• Owner: JuanJefry23
• Created: 2024-07-02T22:57:55.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-07-18T15:05:58.000Z (2 months ago)
• Last Synced: 2024-07-18T19:06:07.996Z (2 months ago)
• Topics: css, figma, flexbox, grid, responsive-design, user-experience, ux-ui, web-accessibility, web-design, webflow
• Homepage:
• Size: 14.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Webflow-landing-page

A landing page designed in Figma using web design principles, typography knowledge and palette of colours and coded in Webflow, enhancing user experience and web accessibility.

From Figma design to Webflow development.

## ABOUT THE PROJECT | ACERCA DEL PROYECTO 💻

In this project I created a landing page for a driving school, I designed the solution on a paper as a wireframe, after that I took that design into Figma, using grid to align the content and give a perfect responsive size, also investigated about colours, which are a perfect palette for landing page of a driving school and the accurate typography for the project.

Once I finished the braing storming and the web design, then I started to create the solution in Webflow 

En este proyecto he creado una landing page para una escuela de manejo, he diseñado la solución en un papel como parte de un bosquejo, luego he pasado dicho diseño a Figma, usando grid para una alineación perfecta y el diseño responsivo, además de investigar sobre los colores ideales para está página segun el cliente y producto, también se ha estudiado sobre la tipografía correcta para el mensaje y lo que se busca con esta landing page.

## KEY POINTS TO HIGHLIGHT IN THIS PROJECT | PUNTOS CLAVES A DESTACAR EN ESTE PROYECTO

➡️ I used **rem** values for font size to ensure web accessibility, good practices and user experience | He utilizado valores **rem** para los tamaños de los textos y así asegurar la accesibilidad web, buenas practicas y una buena experiencia de usuario.

➡️ I wrote accurate text for the **alt** atributes for each image to improve web accessibility and SEO | He escrito texto adecuado para los atributos **alt** de cada imagen y así mejorar la accesibilidad web y el SEO.

➡️ I uploaded the right sizes of favicon and webclip for the project, also tested the responsive design of the page to assure its right functionality | Subí las imágenes con los tamaños correctos tanto para el favicon como para el webclip de la landing page, además hice las pruebas para asegurar que el diseño responsivo funciona de la manera correcta en las diferentes pantallas.

LINKS OF THE PROJECT | ENLACES DEL PROYECTO

Figma: https://www.figma.com/design/dCDSUOdafC8zcqqFhL9Br0/Escuela-de-manejo?node-id=0-1

Webflow page: https://auto-escuela.webflow.io/