8/10/2021 - 26/11/2021 / Week 7 - Week 14
Lui Hsiao Hui (Tressa) / 0342003
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2: Microsite Design and Project 3: Website
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2: Microsite Design and Project 3: Website
INSTRUCTIONS
*Project 3 defers from the instructions in the MIB
Project 2: Microsite Design
Project 2 is a continuation of Project 1. Our task is to develop a microsite that was proposed in Project 1 with a minimum of 5 pages.
1. Sitemap
Fig. 1.1 Sitemap, Week 8 (13/10/2021)
Before starting to design our microsite, we had to create a sitemap to plan the pages and which page links to which page.
Fig. 1.2 Attempt one with star borders, Week 9 (19/10/2021)
Just like Project 1, I used Adobe Illustrator to create the microsite design. The star borders were my initial design idea, however, I was just worried about the coding later on so I changed it to the design in Fig. 1.3.
Fig. 1.3 Final microsite design, Week 9 (19/10/2021)
Here is the final microsite design based on my landing page design in Project 1.
Click here to view the PDF:
*The file is too large to be embedded.
Individual pages
Fig. 1.4 Home page, Week 9 (19/10/2021)
Fig. 1.5 About page, Week 9 (19/10/2021)
Fig. 1.6 Portfolio page, Week 9 (19/10/2021)
Fig. 1.7 Contact page, Week 9 (19/10/2021)
Fig. 1.8 Illustration page, Week 9 (19/10/2021)
Fig. 1.9 Animation page, Week 9 (19/10/2021)
Fig. 1.10 Graphic Design page, Week 9 (19/10/2021)
Fig. 1.11 Photography page, Week 9 (19/10/2021)
Project 3: Website
For Project 3, we have to code the microsite design we did in Project 2 using Adobe Dreamweaver.
Fig. 2.1 All website pages/files (HTML and CSS)
Here is the website folder which includes all the HTML, CSS and images. I decided to create separate style sheets because I didn't want them to be confusing and messy if they were all mashed into one style sheet. All the images are kept in folders within the website folder, so when the website is generated, the images would load.
Fig. 2.2 - 2.4 Coding in Adobe Dreamweaver, Week 13-14 (20-21/11/2021)
Fig. 2.2 to 2.4 shows a few of the code of the illustration page - HTML and CSS. From Mr. Tarmizi's tutorials, I managed to grasp the basic workflow of coding a website. I also learned from W3Schools, YouTube tutorials and my friends.
Fig. 2.5 Final website, Week 14 (25/11/2021)
To generate the final website I used https://www.netlify.com/. Depending on your screen size, you may have to resize your screen so my website fits the dimensions. Example: 90% / 100% / 125%
Link to final website: https://trxssa.netlify.app/index.html
FEEDBACK
No feedback.
REFLECTION
With this module, I learned the basics of coding and website design. I gained knowledge of the importance of responsive website design and the various types of websites, their functions, as well as some key website design principles. UI/UX was never my interest and is the least of my interest. Even after learning basic coding, I still can't learn to like it, so unfortunately it really isn't for me. It just felt like the design equivalent to math. The design side is fine, but the coding just wasn't enjoyable. This project was one of the toughest and most frustrating to work on. Often the code would not work and it was very time-consuming to search up ways of fixing it and finding out what's the issue. I relied on W3Schools a lot and just tried my best to figure out how to code. I also got help from my friends so it made the learning progress much more bearable. The mistake I would often make is forgetting to put "px" behind the numbers, so the images or texts would end up not resizing or repositioning. Nevertheless, it may not have been a fun experience learning to code, but at least I learned some basic coding.
Comments
Post a Comment
be nice