Interactive Design - Final Project Design, Exploration and Application
26/6/2021 - 18/7/2021 // Week 13 - Week 16
Gan Shin Tung / 0346455
Interactive Design / Bachelor of Design (Hons) in Creative Media
Final Project: Design, Exploration, and Application
Instructions
<iframe
src="https://drive.google.com/file/d/17gAJVt0w293uSw8UPuuvmIg_pbAEcaDD/preview"
width="640" height="480"></iframe>
Final Project
For final project Mr.Shamsul changed the content due to lack of time since
most of the public holidays land on our class day. Instead of choosing a
classmate and make a website for them, we can choose any website we want to do. We could do a personal portfolio, redesign a webpage, make a website for the family businesses or any business or services out there.
PROPOSAL:
Figure1.1 Proposal Slides
I'm remaking a Korean Winter Fashion website called citybreeze. The reason why I don't choose to make a personal portfolio website is because
I feel like remaking would be better for me personally as I do not have ideas.
More importantly, I feel like I don't have any extraordinary or remarkable artworks to showcase like the others in my class. Redesign a website would be easier for me to spot the call to action and purpose.
Web Design Elements Source:
After that, I start working on my codes. I'm using bootstraps and various of
templates that I can find online and just simply fill in the information and
elements I wanted into the template.
|
| Figure1.2 HTML |
|
| Figure1.3 CSS |
Here is my first attempt: https://kind-curran-b7716f.netlify.app
After getting feedback from Mr.Shamsul I made the necessary changes to my website.
- Logo on the top left to act as the home button
- Add more info on the About page
- Standardize all font, paragraphs, etc
- Add back to top button
- Add social media icons to the footer
- Add header or title on each page (product details)
Here is my second attempt: https://practical-wiles-1a69e8.netlify.app
I let Mr.Shamsul check my second attempt, he was confused by my menu bar as I have sub-menu items labeled however I did not link them as in the last class he mentioned to only add them. He suggested me to add header for Shop page so that audience will know which page they are on.
 |
| Figure1.4 Add category hyperlink list |
Since the side menu confused Mr.Shamsul, I thought of instead of having side menu items, I could include the category on the top of the page so that consumers could click from there.
Final Outcome:
 |
| Figure1.5 Home Page |
 |
| Figure1.6 About Page |
 |
| Figure1.7 Shop Page |
 |
| Figure1.8 Contact Page |
 |
| Figure1.9 Product Details |
 |
| Figure2.0 Product Details |
 |
| Figure2.1 Product Details |
 |
| Figure2.2 Product Details |
 |
| Figure2.3 Product Details |
 |
| Figure2.4 Product Details |
 |
| Figure2.5 Product Details |
 |
| Figure2.6 Product Details |
 |
| Figure2.7 Product Details |
Link to my final: https://citybreeze.netlify.app
Reflection:
Week 13: I had thought of changing my topic to online shopping website. Initially, I wanted to do a traveling photography website however the purpose of the website and call to action is not obvious, so I decided to remake a shopping website with clear call to action, logo, and business idea. So I thought it would be easier for me to remake a website.
Week 14: I change my proposal slide's content then move on to make my website. It was whole lot smoother for me to carry on as I do not need to think of the design of the assets and elements. However, I still need to design the page and navbar and how to present the website. I did enjoyed this project quite a lot myself.
Week 15: After finish designing my website, the website still have a little technical issues so I didn't show Mr.Shamsul my website in class. I was not ready. I spent most of the time on coding as the templates online took me some time to figure out how it works.
Week 16: I've manage to finalize all of the codings in time and fix all of the big and small tech issues. I just need to get more feedback and improve my webiste. I really hope I could make a fantastic job on my final project and get extra marks in order to get a decent grade as I did not done well on my project 2.
Feedback:
Week 15: Add the categories like top-bottom etc into the shop menu
navbar so that people can choose, but you don't have to make the pages just
show it will do.
Week 16: The logo should be placed on the top left of the page. And it will act as the home button image on the top section overlapped with the search text box CTA button can be improved and make it stand out using different color Font size should be well formatted. Make sure that the size of each user must be standardized eg: all paragraphs should use the same size, the header should use the same size and color, etc Footer can be improved. You can add social media icons etc and can add them back to the top button as well It's confusing I’m indifferent to pages, you can add a header or title on each page. On the about page, can include more info.
Comments
Post a Comment