Interactive Design - Final Project

01/11/18 - 28/11/18 (Week 10 - Week 14)
Mohamad Irfan Mohamad Zaim (0326620)
Interactive Design
Final Project

---

INSTRUCTIONS

---

Final Project - Design, Exploration, and Application

Week 10

Mr Shamsul and Mr Lee explained the final project to the class. We are to design a website for someone and meet their requirements. I talked with my partner Junwon and discussed potential ideas and themes for each other website. I asked for something related to food so he decided to make a website based on Korean recipes. Junwon wanted something related to animation or games so I decided to make a website about Pokemon for him.

Week 11

This week was E-learning week, so Mr Shamsul told us to plan out our website such as sketching out the wire-frame and site-mapping.

Site-map for Pokémon themed website

Week 12

This week me and Junwon were told that our idea would not work. We had to design a website about work we have done. We decided to do what everyone else was doing and showcase each others work. Junwon had a lot of drawing done so I had enough content to work with. I started with doing another site-map for all the pages and content. I split the content based on the medium and people/objects Junwon drew and painted.

Site-map for Junwon's art webpage

Wireframe sketch

Next I went on to decide the colour theme. I felt simple colours like black and another bright colour would suit Junwon's art which are mostly monotone.

Colour Palette #1

Colour Palette #2

Colour Palette #3

Week 13-14

After gathering all of Junwon's images and content, I started with downloading a bootstrap template and working from there.

Completed Navbar

In the navbar I included a wrap (it will be on the navbar for the other pages as well) so that the audience immediately knows what the website will contain without even reading the about the artist section.

About the artist box with CALL TO ACTION (links to contact page)

Making custom blogger icon in Photoshop.

Using bootstrap I was able to have a hover over the thumbnails which will make the image have a blue overlay and display 2 options: enlarge the image or link to where it can be found elsewhere on the website.

Thumbnails with working hover effect

Footer with Social link icons

Downloading image from Pexels and adding blue overlay in Photoshop

About Pencil section

Some of the images Junwon had were very large in size. I made them smaller in Photoshop for faster loading times.

Resizing Junwon's art in Photoshop.

Adding more images with descriptions

Changing titles and adding AOS (Animate on Scoll) effect

Adding html links

Adjusting padding for descriptions so they don't look messy or overlap

Uploading files to webhost (hostinger)

---

LINK TO WEBSITE: http://irfaninteractivefinalproject.site

Screenshots of all pages:

Home Page Final Outcome

Pencil Page Final Outcome

Watercolour Page Final Outcome

Still-Life Page Final Outcome

Contact Page Final Outcome

Site interaction video recordings of all pages:

Home Page Interaction

Pencil Page Interaction

Watercolour Page Interaction

Still-Life Page Interaction

Contact Page Interaction

---

FEEDBACK

Week 13
Specific Feedback: Me and Junwons idea won't work because we are not making a website about the other persons work. We have to redo everything.

Week 14
Specific Feedback: Mr Shamsul said the design looks good. There heading text in my about section for the index page is not readable due to a mistake with CSS so I should fix it.

---

REFLECTION

Experience
Week 13 - I was excited to design a website for my partner but when my Pokemon theme idea got rejected it was disappointing. I wanted to do something different from everyone else in the class.
Week 14 - Making a website from scratch was a little difficult but as soon as I got Junwon's images I felt a lot more confident to do it.

Observation
Week 13 - Everyone had interesting websites. Those who used bootstrap seem to be using the same type of template, which I think is one of the flaws of using bootstrap. A lot of the templates have good designs so most templates use those similar designs.
Week 14 - From I observed most of my classmates are close to completing their sites. Many used bootstrap but not much animation. They should be adding them before submission because it is not very hard to do and can really make your website look more professional.

Findings
Week 13 - The point of my website is to showcase Junwon's art, and call to action is to get you to contact him for work purposes or related. I need to work around the content. Maybe not use such overwhelming features to highlight his art. In terms of interaction I should use things that make his art even better than what it already is.
Week 14 - I feel like I did a good job showcasing all of Junwon's pencil, painting, and still-life artworks. When I was initially brainstorming ideas I was worried on how the site would be organized, but then it became the issue of how can I make each page unique but display the same type of images and information. As seen from my website the layout is pretty different throughout. I did this by copying bootstrap code around and altering them here and there. I utilized different features and layouts from several pages from the template.