Responsive landing page
Project Goals
To learn how to transfer designs from Figma to a coded product and publish it on GitHub pages. To test how to make it fully responsive with help from Flexbox and Media Queries.
My My role: UX designer (solo project) Branding, UX/UI designer from start to finish (solo project).
Tools: Figma, Visual Studio Code, GitHub, Github pages.
Result
Process
Figma Wireframes
Figma Prototype
HTML
CSS
Mediaqueries
JavaScript
Figma Prototype
HTML
CSS
Mediaqueries
JavaScript
What I Learned?
It is important to have a correct grid system, clear consistent sizes of all parts in the Figma prototype.
Now I know how important it is to prepare good wireframes and HiFi prototypes in order to optimize and streamline the work and how important is clear structure of all details and elements.
I have learned how to carry out the entire process from idea to finished coded product.
Flexbox, Container, Media Queries and breakpoints.