Asiabite

Created a style guide for the website, incorporating playful and colorful design elements. Choose fun fonts and vibrant colors to align with the website's theme. Developing a style guide aids in maintaining design consistency, it ensures that the website maintains a cohesive and visually appealing look.

Designed a sitemap to outline the website's structure, identified six main pages, Described the header and footer elements, including cart functionality and social media links. Creating a sitemap helps in organizing website content logically, it ensures that users can navigate the website intuitively. improving your information architecture skills, making it easier for users to find what they need.

Developing high-fidelity wireframes, which include detailed elements like banners, images, and real product representations. This step gives you a complete vision of the website's final design. High-fidelity wireframes allow you to visualize the website as it will appear to users. You can assess the aesthetics, functionality, and user experience in detail. These wireframes serve as a blueprint for the actual design implementation phase.

This project aims to focus on web development, applying design concepts from the previous phase to create a functional and visually appealing website. Additionally, it involves implementing interactive animations using CSS and integrating a JavaScript plugin to create a gallery feature.

Home Page

Shop Page

Box Page

Snack Page

This project has been a valuable learning experience, enabling me to seamlessly bridge the gap between design and development while enhancing my skills in HTML, CSS, CSS animation and JavaScript. I gained a deeper understanding of being a web development, refining my ability to create engaging user interfaces.