Interactive Design - Project 3 - Microsite

Week 8-14
Marcus Leong Ka Shing 0363643
Interactive Design / BA of Design (HONS) in Creative Media / Taylor's University
Project 3 - Microsite

---

LECTURES

Week 1-3

Week 4-6

---

INSTRUCTIONS

For the final project, we were tasked to create a single page microsite for an artist we like. I chose the DJ 'Fred Again...'. The criteria of this task was to make the site responsive to changes in device, and to have certain sections such as introduction, biography, gallery and contact. 

Fig 1.1 Sketches

I drafted up 5 different sketches to visualize and determine what would look best. Mr Shamsul liked my first two sketches so I decided to implement both together. 

Fig 1.2 Proposal

I started to draft up a proposal regarding my site. I decided on the typeface as well as moodboard. I chose the typeface 'Dirtyline 36Days of Type' as I found it to be very unique and suited the aura of my artist. I also found images that related and have a similar color scheme. 

Fig 1.3 Wireframe

After getting approval, I started to work on my wireframe in week 2. Mr Shamsul liked the potential design I had for the biography section in the second wireframe so I stuck with that. 

Fig 1.4 Prototype

I started my prototype in Figma and laid out the images and how I anticipated it to look on the website. 

Fig 1.5 Pre-approved prototype

This is my final prototype before approval. After consulting Mr Shamsul, he expresses his concern about my design. It did not turn out the way as expected so I had to make some major tweaks on the design for it to be more suitable. 

Fig 1.6 Final Prototype

This is how the reworked design looked. I made many changes so there is visual hierarchy and the text are more readable. 

Fig 1.7 HTML Code

I started to code the website on Adobe Dreamweaver while reviewing it on the front end using the inspect element. 

Fig 1.8 CSS Media query Code

I added CSS codes to different screen sizes so my microsite is responsive to any device. 

Fig 1.9 Laptop View

Fig 1.10 Mobile View

This is how my front end looks for different media queries. 

Week16 Final Submission

Website: https://marcus0363643-finalproject.netlify.app/

---

Feedback:

Week 8: 

Simplify your work, reduce the graphical elements. 

Week 10:
Change the design, no visual hierarchy, body text not readable.

---

Reflection 

This task was very challenging to me. I do not have a good base in coding and struggled during my previous project as well. Though I have learned from the previous task and is capable of solving some problems, many problems were still faced in terms of the front end not being reflected as what I wanted. There were many trial and errors and I required to use the internet a lot to fix my code. As I did more, I felt less stressed each time I overcame a hurdle and felt a sense of accomplishment and relief once the whole site was completed.