Interactive Design / Project 1 & 2: Prototype Design
Derin / 0354969 / Design in Creative Media
GCD 60904 / INTERACTIVE DESIGN
Project 1 & 2
INSTRUCTIONS
Landing Page Design Prototype
1) Technical And Digital Media Competencies – Demonstrate creative use of software, and effective use of digital media skills to promote or communicate design concepts or solutions.
Working Web Page
1) Strategic Communication Competencies – Conduct oral and verbal presentation to persuade and illustrate ideas and concepts in a multidisciplinary setting as a team or an individual.
PROJECT 1
Choosing a Website
I have chosen to redesign the landing page of Domino's Pizza's website. The reason for this is that the current design of the page is not really optimized for user experience. The design could also benefit from a more user-friendly and visually appealing layout.
Currently, the landing page of the Domino's Pizza website appears cluttered and overwhelming, with a lot of information competing for the user's attention. The font used for this website could also be changed to a more readable typeface for wider audiences.
|
| Fig 1.1 Chosen Website - Domino's Pizza |
Design Concept
The following is my design analysis and identification of areas that need improvement for Domino's Pizza's landing page.
Fig 1.2 Design Concept - Domino's Pizza
Wireframe
Creating wireframes was crucial for designing the restaurant website. I made four wireframes with different layouts to visualize the look and feel of the site and identify important content. I added more content, like menu options and unique features, to differentiate the restaurant from competitors. Refining the wireframes helped create a great design and guide development. The resulting website effectively communicated the restaurant's brand and offerings to potential customers.
|
| Fig 1.3 Wireframes |
Prototype Design
I decided to proceed with Wireframe #2, and added some features from other wireframe designs.
|
| Fig 2.1 Creating the prototype design |
I took the liberty of adding some missing elements to the original Domino's page. One of the first things you'll notice when you visit the website is a bunch of coupons that takes up the entire page. Everyone loves a good deal, but a page filled only with coupons can be a bit underwhelming. So, I went ahead and spiced things up a bit by adding some other relevant stuff too.
I thought it would be great to highlight what makes Domino's stand out from the rest of the pizza chains. So, I made sure to include points that showcase the unique features of Domino's. Of course, I couldn't forget about the menu. I made a bar that makes it easier to navigate into all the food options available. I also made sure to feature any ongoing events happening at Domino's below the menu since it was shown in the original website. To round it all off, I added one last call-to-action at the end of the website. It just made sense to put one there at the end of the website after scrolling through all of those contents. While I maintained the overall design of Domino's footer, I changed the color to differentiate it from the main content. I also made sure to adhere to Domino's main color palette in this redesign.
|
| Fig 2.2 Website parts |
The following is the first draft of my design.
|
| Fig 2.2 First draft for the web redesign |
Font used: Futura Std (Book, Medium, Bold)
In Week 6, Mr. Shamsul provided some valuable feedback on the website. Firstly, he suggested changing the font to a more universal style and decreasing the font size to improve readability. Additionally, he recommended replacing the initial image with a visually appealing alternative, rather than a coupon. To enhance the overall look of the website, Mr. Shamsul advised replacing any low-quality images with higher quality ones. He also noticed that the payment options section appeared cluttered and suggested organizing the options into categories or displaying only the most popular ones. Lastly, it was important to ensure that the terms of service used on the updated website matched those of the original site.
I proceed to create the changes after the feedback. I also added one last content which features the reviews of Domino's customers, this serves as a testimonial of Domino's quality of product and service.
|
| Fig 2.3 Making changes |
|
| Fig 2.4 Adding the reviews section |
The following is the second draft of my design.
|
| Fig 2.5 Second draft for the web redesign |
In week 9, Mr. Shamsul once again reviewed our prototype since we will be making it into a working website for project 2. I got more useful feedback regarding my redesign. Mr. Shamsul says that the font size looks good, but he suggests reducing the size of the icons and the thickness of the image borders. He also recommends considering changing the border color to white and using blue when hovered. Furthermore, he advises avoiding the use of the triangle shape tool for the button design. Lastly, he recommends using stock images for the website as the image quality is much better.
I took note of his feedback and started making changes on my prototype. During the lecture, he mentioned that it's better to start off by creating a color palette. I focused on reducing the number of colors used in the website to only six. The main colors I used were Domino's red and blue, along with white, light gray, dark blue, and black for specific sections of the body text and background.
|
| Fig 2.6 Color palette |
|
| Fig 2.7 Making the white space equal from section to section |
Final Outcome
 |
| Fig 3.1 Final Outcome for Project 1: Landing Page Design Prototype - PNG |
Font used: Montserrat (Medium, SemiBold, Bold, ExtraBold)
PROJECT 2
I made a fake coupon for the 'Domino's Pizza Deals' to make the website look more realistic. This process is done in Canva.
 |
| Fig 4.1 Making the new coupon |
For the coding, I started by setting up the HTML structure. After doing the basics, I included the necessary meta tags for character encoding and configuring the viewport.
 |
| Fig 4.2 HTML Markup |
Afterward, I collected all the CDN that I needed, like the bootstrap, for the website. For this, I mainly used the CSS Bootstrap, the following is the location of where I linked my source code.
 |
| Fig 4.3 CSS Bootstrap |
Next, I built the navigation bar. I implemented the navigation bar using the Bootstrap navbar component. I then customized the appearance of the navbar, including the brand logo, navigation links, and ordering button.
 |
| Fig 4.4 Navigation Bar |
Then, I created the main sections. I started by creating the main container for the sections using <div class="container-fluid">. I implemented the hero section with a carousel, including slides with images and captions. Afterward, I designed and structured the remaining sections, such as section 2, section 3, section 4, section 5, and section 6. Bootstrap's grid system and classes is used to arrange the content within each section. Finally, I incorporated responsive images, customized cards, and buttons for visual elements.
 |
| Fig 4.5 Main Sections |
To have responsive features, I used Bootstrap's responsive classes, such as col-* for columns and container or container-fluid for responsive containers. I applied the appropriate classes for image responsiveness, such as d-block and w-100. I also made sure that the layout and content adapted well to different screen sizes by leveraging Bootstrap's responsive utilities.
 |
| Fig 4.6 Utilizing Bootstrap for responsive features |
For additional interactivity, I added JavaScript functionality. I included the Bootstrap JavaScript library using the <script> tag, typically placed near the end of the <body> section. In case if needed, I added custom JavaScript code or event listeners for interactivity or dynamic behavior.
 |
| Fig 4.7 Adding the <script> tag |
To style the webpage, I created a separate CSS file and linked it in the <head> section using the <link> tag. I customized the visual appearance of the website by applying custom styles to the HTML elements, classes, and IDs. I then overrode or extended Bootstrap's default styles if necessary.
 |
| Fig 4.8 Linking the separate CSS file |
 |
| Fig 4.9 Separate CSS file |
The following is the result for the website!
https://derindominos.netlify.app
 |
| Fig 4.10 Final result for Project 2 - PNG |
Fig 4.11 Final result for Project 2 - Pdf
FEEDBACK
Week 6
- Consider changing to a more universal font and decreasing the font size.
- Replace the first image with something more visually appealing instead of a coupon.
- Replace low-quality images with higher quality ones to enhance the overall look of the website.
- The payment options section appears to be cluttered. Consider categorizing the options or only displaying the most popular ones.
- Ensure that the terms of service used on the updated website match those of the original website.
- The font size looks good.
- Reduce the size of the icons.
- Reduce the thickness of the image borders. Consider changing it to white, and use blue when hovered.
- Avoid using the triangle shape tool for the button design.
This project was a great experience for me for my growth as a designer.
I noticed how important it is to pay attention to details when it comes to website design. Each element of a website plays a crucial role in providing a great user experience. From the font used to the placement of call-to-action buttons, every decision should be made with the user in mind.