Pizzatopia, using AI for fake proposal

Pizzatopia-1

Pizzatopia-2

Pizzatopia-3

Pizzatopia-4

Pizzatopia-5

Source: Pizzatopia

Project Overview

This project was created with the goal of improving and expanding my portfolio, free from client constraints. To achieve this, I leveraged artificial intelligence tools for the images and text on the website, which allowed me to be creative, save time, and avoid the typical challenges that come with working with customers.

My objectives for this project were two-fold: to utilize my creativity to the fullest and find inspiration online. To ensure that I was able to bring my vision to life, I dedicated countless hours to research, studying the intricate details of complex websites and incorporating what I learned into my own work. This research-intensive approach is something I find deeply fulfilling, as it enables me to continually grow and develop my skills as a professional web designer.

Design Approach 

My design approach begins with a search for inspiration from visually appealing websites that align with my skillset. I carefully selected a few projects to use as references and then created initial designs using Adobe XD.

Throughout the development process, I aimed to improve my JavaScript programming skills by using a simple, vanilla coding approach with CSS, HTML, and JavaScript. I utilized the Sass framework to make the coding process more efficient.

In my designs, I placed a strong emphasis on interactivity, striving to bring life to every element on the page. However, I also discovered that sometimes simplicity and a focus on intricate details can greatly enhance the overall design.

I completed this entire project independently, relying solely on tutorials and research for guidance, without any outside assistance.

Key Features:

• Utilizes the contemporary trend of horizontal scrolling for an up-to-date feel.
• Homepage: Features a stunning full-screen video background with a pause button conveniently located on the left.
• About Us: Displays a unique layout style that combines a video background with concise descriptions. The full-screen video is complete with sound, which was added by me using a video editing tool. The video also features two buttons for expanding the experience.
• Menu: A section dedicated to showcasing the restaurant’s menu, separated into tabs for easy navigation. Each tab click reveals a corresponding image on the right side of the screen (on larger devices).
• Contact: Includes an interactive Google Maps component, complete with a custom-designed pointer. The images in this section are designed to be engaging, with a description and left/right buttons to navigate through the gallery. Keyboard actions, including the escape key, are also incorporated to enhance the user experience. The images also feature a loop to keep users engaged without the need to close the gallery.
• The website has been optimized for responsiveness, with a design that adheres to the Web Content Accessibility Guidelines (WCAG) in terms of colour choices.

Technologies Used:

As mentioned before, the website was created using a combination of HTML, CSS, and JavaScript, along with the Sass Framework to simplify the styling process.