Interactive Design Project 1

Week 1- Week 4

Justin Averill Prasetya / 0355048

GCD 60904 / BDCM / The Design School

Project 1

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1LQD_KvDXt5gTFT0H0fKjlRv-Zv-JkiVO/preview" width="640" height="480" allow="autoplay"></iframe>

---

Project 1/ Week 3

Our task was to analyze websites based on our findings and improve the landing page, I came up with 3 websites that I analyse but ended up with 1 website. It was KPI.go.id

I stated the reason that the KPI.go.id website was considered a bad website was that the placement of the layout was unpleasant to see the icon was too huge and the placement of the small icon was too messy it should be on 1 section not spreading everywhere. it had 3 layers of menu bar which in my opinion it’s not effective and confusing. The content was too busy and made me headache to see it meanwhile there are also many empty spaces in the middle of the pages. 

too many sections on the homepage there are also many unnecessary elements such as a gallery and agenda, and the picture was too compressed. Too many compressed pictures and empty space / white space. Lastly the call to action button is not obvious soo first thing i see it was just an image and i dont know i can interact with it

Fig 1.1.1 (KPI.go.id)

I made 5+1( the final wireframes) wireframes in Adobe XD to try the composition and learn how to compose the placement so it doesn't look messy, I used another country's government website as a reference. the first two wireframes actually were for my first idea but it got scraped and I decided to redo it a bit so I can use it as a guideline for the finalized version.

Fig 1.1.2

For my color combination, I keep it simple because I analyze the logo of the company and I found out that the company consists of 2 colors, White Gold, and red. But I felt too much if I add gold to the website 

Color Code:

• Red: #AD3333
• Grey: #717171
• Grey: #DBDBDB
• Blue: #8AC0D3

For the final wireframe, I decided to make it low poly and give a colour so i can finalize it 

Fig 1.1.3 (Wireframe 6)

For the final one i had 2 version but i think the second one is better because the first one is too boring and repetitive

Final Outcome

Fig 1.1.4

Fig 1.1.5