Google Store Layout

This project showcases the ability to seamlessly integrate new products into an existing website, specifically for the Google Store.

Project: Google Store – New Product Integration

 

This project focuses on integrating two new products into the existing Google Store website, showcasing my foundational Frontend Development and UI Design skills. Given JPG design files and a sticker sheet, the core objective was to accurately translate visual mockups into a fully functional and responsive web experience.

Visit the site: https://google-store-ruby.vercel.app/index.html
Github Repository: https://github.com/catmaluci/GoogleStore

Key Frontend & Design Skills Highlighted:

 

  • HTML5 & CSS3 Mastery: I meticulously implemented the designs using semantic HTML5 for a well-structured foundation and CSS3 for precise styling. This demonstrates a strong understanding of web standards and efficient styling techniques.
  • Responsive Web Design: A crucial aspect of this project was ensuring an optimal user experience across various devices. I developed the pages with a responsive design approach, adapting seamlessly to desktop, tablet, and mobile viewports. This highlights my ability to create flexible and accessible layouts.
  • UI/UX Design Translation: I worked directly from provided JPG designs and a sticker sheet, demonstrating a keen eye for detail and the ability to translate visual concepts into accurate web implementations. This involved understanding existing design patterns and applying them consistently.
  • Figma Proficiency: I utilized Figma for creating both low-fidelity wireframes and high-fidelity mockups of the new sections. This showcases my proficiency in design tools for planning and visualizing web interfaces before development.
  • Static Web Page Development: This project involved creating static web pages, demonstrating my competence in building clean, well-structured, and styled web content ready for integration into a larger system.

This project underscores my capability to design and implement visually accurate and fully responsive web pages, solidifying my skills in essential frontend technologies and UI design principles.

Tags: HTML5, CSS3, Responsive Design, Web Development, Static Website, Desktop Layout, Figma, Visual Studio Code