Interactive Design | Final project

 September 20, 2025

week 1 - week 14

Hisham Rasheed / 0356691

Interactive Design / Bachelor of Design in Creative Media

Development Report — Bite Into Bliss Website

 The project included planning the website, designing it in Figma, coding it into a working site, and testing and publishing it online. Through this process, I learned how visual design and technical development come together to create a complete digital product.

Before starting any design or coding, I spent time thinking about what kind of website I wanted to create. Since the website is for a cupcake and dessert brand, I wanted it to feel friendly, fun, and appealing. I also thought about how users would move through the website. For example, they should be able to easily find products, learn about the brand, and see how to order or contact the business. This helped me decide what pages and sections were needed, such as the homepage, product listings, and an about or story section.

Designing in Figma

The design process was done mainly in Figma, which helped me plan everything visually before I started coding. I first created basic wireframes to decide where things like the navigation bar, hero image, product cards, and footer would go. These early layouts were simple but very useful because they helped me see if the structure of the website made sense.

After that, I moved on to creating more detailed designs. I chose colours, fonts, and images that matched the bakery theme. I went for warm, soft colours and clean fonts so the website would feel welcoming and easy to read. I also paid attention to spacing and alignment to make the layout look neat and organised. Using Figma made it easy to adjust things quickly, like moving sections around or changing font sizes until everything looked balanced.

Another helpful part of Figma was the prototyping feature. I could click through my designs like a real website, which helped me understand how users would navigate between sections. This allowed me to notice small issues, such as buttons being too small or important information not being easy to see, and fix them before moving to the coding stage.

Turning the Design into a Real Website

Once I was happy with the Figma design, I started coding the website using HTML and CSS, and a small amount of JavaScript. This is where things became more challenging. While the design looked great in Figma, turning it into a real website required careful work. Things like spacing, fonts, and alignment did not always appear the same way in the browser, so I had to constantly adjust my CSS to match the design.

One of the biggest challenges was making the website responsive. The site had to work on different screen sizes, such as phones, tablets, and desktops. Sometimes elements that looked fine on a large screen would break or overlap on smaller screens. To fix this, I used CSS tools like flexbox, grid, and media queries. I also used the browser’s developer tools to test how the website looked on different screen sizes and make changes when needed.

Challenges and How I Solved Them

Throughout the project, I faced several problems, especially when it came to layout and responsiveness. For example, some sections would not align properly, or text would not wrap correctly on mobile devices. To solve this, I experimented with different CSS properties and tested my changes many times. Even though it took a lot of trial and error, this helped me understand how layouts really work on the web.

Another challenge was making sure the website looked as close as possible to my Figma design. Small things like font sizes, padding, and image scaling required careful tweaking. Sometimes I had to go back to Figma to double-check measurements and adjust my code to match.

Testing and Deployment

Once the website was mostly finished, I tested it on different browsers and devices to make sure everything worked properly. I checked that the navigation links worked, images loaded correctly, and the layout stayed consistent. After that, I deployed the site using Vercel, which allowed me to publish it online and share the link for assessment.

Conclusion

Overall, this project helped me understand how design and development connect. Figma allowed me to plan and visualise my ideas, while coding helped turn those ideas into a working website. Even though the coding part was difficult at times, especially with responsiveness and layout, I learned a lot by solving these problems. This project gave me more confidence in both UI design and front-end development, and it was a valuable learning experience.

Comments

Post a Comment

Popular posts from this blog

Major Project

Image
Hisham Rasheed  / 0356691 Major Project  3D Animation Instructions Project Proposal click link to view slides Project Overview For this project, I decided to create an advertising campaign for Kodak . At first glance, Kodak may seem old or outdated, but it is far from dead. Film photography still holds strong value among many creators today, especially at a time when AI is increasingly taking over digital media . This made Kodak a relevant and meaningful brand to work with. The campaign consists of three videos , each exploring a different discipline: 3D animation, motion graphics, and visual effects (VFX) . I wanted to push myself creatively by trying new techniques and workflows, particularly in areas I had little experience with before. 3D ANIMATION The main concept of the 3D animation was to showcase three Kodak film stocks: Kodak Gold, ColorPlus, and UltraMax ...
Read more

Intractive Design Exercise

Image
October 1, 2025 week 1 - week 14 Hisham Rasheed / 0356691 Interactive Design / Bachelor of Design in Creative Media Introduction Exercises ・Exercise 1: Web Analysis - Process 1. Simply Chocolate  Fig 1.1 The purpose and goals of the website This is a chocolate company website called simply chocolate. It is an online store with very fine and rich cocoa chocolates with all the nutrient aspects and details. The visual design and layout I really admire the popping pastel colors which are appetizing. Fig 1.2 Fig 1.3 The home page brings us to a really engaging design where, as you scroll down, you can browse through each distinct chocolate taste while seeing an animation of that flavor in the backdrop.  Fig 1.4 The components of the home page are arranged in a really intriguing way; they are all arranged vertically, including the logo. Fig 1.5 Fig 1.6 A call to action button that reads "Shop" is present on every page as well as at the bottom as you scroll down, a...
Read more

Design Exploration

Image
(Week 1 - Week 14) Hisham Rasheed / 0356691 / Design in Creative Media Design Exploration  Instruction Project Proposal At first, my idea was to make a 3d ad for a table from Ikea, after consultation with the sir  He asked me to change to something with features to display, so I went with Ugreen Headphones. I have been using this model for a while, and I feel it is very underrated for the price and features. I started modeling the headphones and the blender. It was tricky since I was overcoming a lot of new issues. After modeling, I proceeded with detailing and texturing the materials. Rendering sessions were blasting my laptop's fans. I divided my sequence into parts, scenes, and rendered them individually and stitched them in Premiere Pro. At the same time, a few effects and text motions were done on After Effects and made the whole timeline on Premiere. I was inspired by the movie the substance for text placements and layout, and decided to ...
Read more