Interactive Design - Final project: Final Working Website
Week 08 - Week 14
Khansa Raudlatus Syahiidah / 0374511
Interactive Design / Bachelor of Design (Honours) in Creative Media
Final project: Final working website
TABLE OF CONTENTS:
1. Lectures
2. Introduction
3. Final project
3.1 Prototype & Dreamweaver
3.2 Homepage
3.3 About Us
3.4 Products
3.5 Services
3.6 Contact Us
4. Feedback
5. Reflection
1. LECTURES
The objective of this assignment is to bring your website redesign to life by developing a fully functional website based on the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.
Assignment Description:
Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.
Website Development:
Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, or any other relevant technologies or framework (e.g., Bootstrap).
Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.
Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).
Core Features:
Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.
Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.
Technical Considerations:
Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.
Final Testing and Deployment:
Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.
Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.
Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, or any other relevant technologies or framework (e.g., Bootstrap).
Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.
Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).
Core Features:
Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.
Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.
Technical Considerations:
Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.
Final Testing and Deployment:
Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.
Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.
Links to previous works:
1. Exercise 1 - Web Analysis
2. Exercise 2 - Web Replication
3. Project 1 - Website Proposal
4. Project 2 - Website Re-Design Prototype
2. INTRODUCTION
Fig 1.1: Module information booklet
3. FINAL PROJECT
Website Re-design (Click here): Sweet Confections Cakes
3.1 Prototype & Dreamweaver
Fig 2.1: Figma website prototype
In order to be able to continue working on this final task is to have finished designing your website. Looking back through my previous work, we redesigned our website using Figma. I have designed all the pages consisting of, Homepage, About Us, Products, Services, and Contact Us.
PROJECT 2 - Click here!
Moving on to Dreamweaver as we have completed all the above. As we were assigned to code our re-designed website exactly how we designed it on Figma.
Fig 2.2: Dreamweaver process
3.2 Homepage
Process:
Fig 2.3: Dreamweaver Homepage process
During the process of coding all pages of the website, I mostly use both HTML and CSS. However, as some parts of the pages have the same placement, I kept it easy by using the same CSS file for all the other HTML pages. I had to make sections and div, as well as class and id, especially when moving on to CSS. I realize how important it is for you to name parts in your HTML sections in order to be able to link it in your CSS. For example, when we name something through Class, we must use dot (.) in CSS, while on the other hand, when we use Id, we must use hashtag (#) in CSS.
Process:
Fig 2.4: Dreamweaver About Us page process
In this page, I had to create multiple div for the image and the name description above it. One thing I have come to understand is that, although h1 all the way to h6 can apply differently based on its size, but as long as you make the adjustment through CSS, those h1 to h6 does not matter. Also, both h1 and p could be applied with a similar approach.
3.4 Products
Process:
Fig 2.5: Dreamweaver Products page process
On the "Products" page, it is almost similar to some parts in the "About Us" page. I placed images and also made a text with border above it.
3.5 Services
Process:
Fig 2.6: Dreamweaver Services page process
In the "Services page", I insert links for all the social media except their email as I could not find their actual website email. When putting in links on each image to be linkable, I added <a> on the beginning before the img, and ended with </a>. However, only like that will still work but as we click the image later, the links will pop up in the same tab as the tab you're currently in. Therefore, I added target="blank". Therefore, the end result will be a pop up of the links on a new tab.
3.6 Contact us
Process:
Fig 2.7: Dreamweaver Contact Us page process
Fig 2.8: Dreamweaver Contact Us page (JavaScript) process
Although I don't have much information or other elements in this last page, it was still considered a tricky page. I added a pop up to fill in the form on this page. This pop up was hidden and only shown as we clicked the "DROP US A LINE" button. In this particular part, we had to use JavaScript.
Challenges Faced & Solutions
Working on this project surely had many challenges.
1. Starting from the beginning, although this isn't the biggest trouble but as working on with Dreamweaver, I had to understand first the simple thing such as creating a new documents / files, while remembering how Mr. Shamsul taught us on our previous exercises.
2. 
3. 
Fig 3.1: Homepage boxes
On the Homepage, I personally had struggled on creating and keeping them clean together. Before ending up with this look, there were constant small white gaps between each boxes, and some were not aligned despite all the CSS I had tried. Because of this trouble, the colored boxes, where usually color-background is written on the CSS file, I had to move it to HTML and continue to see the error.
Fig 3.2: Homepage CSS file 1 Fig 3.3: Homepage CSS file 2
I played around by making both margin and padding to 0px. And width on 100% is to make sure that all boxes are fitting on both ends of the website. For the box class, width and height are based on the ones on Figma.
Fig 3.4: Home top page
The struggle faced on this page was the information bar that wouldn't want to stay aligned with the others. After the feedback given about how all bars must be within one line to keep a consistent look, I started fixing all pages to have their bars placed on the same spot. However, while Services, Products, and Contact Us pages are consistent enough, About Us keeps being slightly different.
Fig 3.5: Home top page (HTML)
As I inspect the problem, the reason why not all bars on all page are align may be cause not all of the pages HTML uses jsdeliver and viewport from Adobe Dreamweaver.
4. 
Fig 3.6: Products buy now part
In this page, while I tried making text with a border to overlay the image beneath, I had trouble as it kept hiding and placing itself beneath the image. At first I tried by changing placements in HTML. Perhaps there may be something wrong there, however after I improved it from HTML, there were still no changes.
Fig 3.7: Products CSS
I then went back to CSS and tried applying Z-Index and Transform to force the border to be placed over the image. The transform are for the border placement on the image.
5. 
Fig 3.8: Social media invisible box
As I went through all the pages, I realized that my social media image and "Drop us a line" button had some errors. When clicking exactly the middle part of the "DROP US A LINE" button, it will successfully appear in the pop up form. However, as I tried going more the the left, it started opening the Facebook line. This also happens to the rest of the social media image (not only on the Visit us page), where when clicking the blank white next to the Instagram image, I can still be linked to the Instagram link. This was due to the invisible boxes, before importing images to HTML, there were many gaps surrounding the small image just like shown above. Due to that, it is still possible to be linked even outside the image. I then fixed this problem by tightening the image and surrounding, leaving no gaps. After that, I had to re-adjust the width and height and also the placing to be placed on the center.
6. As I did not make it compatible to phone on the beginning of coding this website, I had to re-adjust a couple parts like logos, social media image, font size, and placement in @media.
As well as re- adjusting it on desktop, since a part of them changes after being applied to be compatible on other device.
Final outcome:
Website final: Click here!
sweet-confections-2eb7de.netlify.app)
Drive: Click here!
4. FEEDBACK
During my website feedbacks, there were a couple of improvements needed and typographical error.
- On the description bar, my "services" was not written correctly on all pages.
- The pink rectangle elements I put in the homepage was not applied to the rest which resulted to an inconsistent design view.
- The description bar specifically on the "About Us" page was not in line with the others.
- The description bar for all must be in one line.
- Logo must be put on every page.
- the gap on the end page of the Homepage was too much and need to make it smaller.
5. REFLECTION
Working on this final project had many challenges. At first, as I was not yet as familiar with coding, it wasn't easy to work on overall process of this work. However, as I took the time working on completing this project, I gradually understand deeper and more clear in using HTML, CSS, compatibility, etc. With all the challenges I faced, and the solution made was also a major reason in understanding this task. With all the process of creating and fixing has brought me to get a clearer grip on UI/UX , as well as this module, Interactive Design.
Comments
Post a Comment