Interactive Design / Final Project
21.06.2022 - 09.07.2022 (Week 13 - Week 15)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Interactive Design / Taylor's University
Final Project
PROGRESSION
First I looked up for some pictures I want to use for my headline. I searched using Pexels, Unsplash, and Freepik (but I rarely use). So here're my choice of images for the articles. I searched the images while I'm working on the corresponding articles, so the progression date takes time between 27 June - 6 July.
fig 4.1-4.7, Heading Images / Title Images, Week 13 (27/06/2022) - Week 15 (06/07/2022)
I planned to make the 5 articles to be like a travel guide where readers can now what things are there, how to get there, recommended accommodations, nearby things. I use 5W1H as a guide on making the content.
WHAT -to show what's the tourist spot
WHERE -to show the location of the tourist spot
WHY -to show the things provided in the tourist spot
WHO -to show who can visit and the ticket price of the tourist spot
HOW -to tell the way to visit
WHEN -to tell the best time to go
For starter, to make things easier later, I made some vector icons in AI to showcase the information efficiently.
fig 4.8-4.11, AI Vector Transportation, Week 13 (27/06/2022)
During the progression, I decided to make more:
fig 4.12-4.17, AI Vector Images, Week 14 (03/07/2022)
Then, I go on with the first article,
ARTICLE 1 - LABUAN BAJO
(WEEK 13 27/06/2022)
GUIDES:
- WHAT -image and headings
- WHERE -headings and description
- WHY -carousel card of things that can be do
- WHO -ticket price
- HOW -boat, plane vector
- WHEN -hour, calender vector
- ADDITIONAL INFORMATION / SUGGESTED POST
These are the images I use for the card-carousel post. They show on the things that can be done in the area.
IMAGES SOURCE:
- Sea Fashion Woman Water
- A Woman Riding a Boat
- People Swimming in Sea
- Person Underwater with Hands Up on Air
- Person on Body of Water
- A Child Touching The Aquarium with Stingray
- Brown and Gray Lizard on Brown Soil
- Silhouette of Man Facing Calm Sea
Continuing to the next section, nearby, these are the things that people can know.
IMAGES SOURCE:
- Close Up Photo of Seafoods
- High Angle View of People Sailing on Sea
- Couple Sitting on Brown Wooden Ladder
- Sumba by Febian
So currently, it looked like this:
fig 4.18, Progression of Article 1, Week 13 (27/06/2022)
ARTICLE 2 - TEGALALANG
(WEEK 13 27/06/2022)
GUIDES:
- WHAT -image and headings
- WHERE -headings and description
- WHY -images of things that can be do
- WHO -ticket price
- HOW -plane, car, bike vector
- WHEN -hour, calender vector
- ADDITIONAL INFORMATION / SUGGESTED POST
fig 4.19, Progression of Article 2, Week 13 (27/06/2022)
These are the images I use to show what can be done here, also the nearby part.
IMAGES SOURCE:
fig 4.20, Progression of Article 2, Week 13 (27/06/2022)
After I finished my 1st and 2nd articles, I realised the file size I use is unnecessarily big, that's why I have to change all the images again using the Save as Web option and reduce the size. It was very chaotic since I feel like I wasted my time inefficiently.
But so, I tried my best to speed up my work and continue to the third article and so on.
ARTICLE 3 - BOROBUDUR
(WEEK 14 03/07/2022)
GUIDES:
- WHAT -image and headings
- WHERE -headings and description
- WHY -images of things that can be do
- WHO -ticket price
- HOW -plane, train, car vector
- WHEN -hour, calender vector
- ADDITIONAL INFORMATION / SUGGESTED POST
These are the images I use for the card-carousel post. They show on the things that can be done in the area.
IMAGES SOURCE:
- Lawang Sewu
- A Past
- Hangout.
- Taman Sari
- Jogjakarta
- People Riding on Black and Yellow Vehicle
- Street Sign
- Old Bank Indonesia building at 0 km Yogyakarta
Continuing to the next section, nearby, these are the things that people can know.
IMAGES SOURCE:
- Prambanan Temple
- Kabupaten Gunung Kidul
- 1 of the 2,672 relief panels carved into the Borobudur monument in Java
- View from Mount Merapi
So currently, it looked like this:
fig 4.21, Progression of Article 3, Week 14 (03/07/2022)
ARTICLE 4 - TANGKUBAN PERAHU
(WEEK 14 03/07/2022)
GUIDES:
- WHAT -image and headings
- WHERE -headings and description
- WHY -images of things that can be do
- WHO -ticket price
- HOW -plane, train, car vector
- WHEN -hour, calender vector
- ADDITIONAL INFORMATION / SUGGESTED POST
These are the images I use to show what can be done here.
IMAGES SOURCE:
Continuing to the next section, nearby, these are the things that people can know.
IMAGES SOURCE:
So currently, it looked like this:
fig 4.22, Progression of Article 4, Week 14 (03/07/2022)
ARTICLE 5 - RAJA AMPAT
(WEEK 14 03/07/2022)
GUIDES:
- WHAT -image and headings
- WHERE -headings and description
- WHY -images of things that can be do
- WHO -ticket price
- HOW -plane, ship vector
- WHEN -hour, calender vector
- ADDITIONAL INFORMATION / SUGGESTED POST
These are the images I use to show what can be done here.
IMAGES SOURCE:
Continuing to the next section, nearby, these are the things that people can know.
IMAGES SOURCE:
- White and Blue Wooden Dock Photo
- HD Photo by Asso Myron
- Brown and White House
- Free Wamena Image on Unsplash
So currently, it looked like this:
fig 4.23, Progression of Article 5, Week 14 (03/07/2022)
ARTICLE 6 - PRAMBANAN
(WEEK 15 06/07/2022)
GUIDES:
- WHAT -image and headings
- WHERE -headings and description
- WHY -images of things that can be do
- WHO -ticket price
- HOW -plane, ship vector
- WHEN -hour, calender vector
- ADDITIONAL INFORMATION / SUGGESTED POST
These are the images I use to show what can be done here.
IMAGES SOURCE:
So currently, it looked like this:
fig 4.24, Progression of Article 6, Week 15 (06/07/2022)
ARTICLE 7 - BALI
(WEEK 15 06/07/2022)
GUIDES:
- WHAT -image and headings
- WHERE -headings and description
- WHY -images of things that can be do
- WHO -ticket price
- HOW -plane, ship vector
- WHEN -hour, calender vector
- ADDITIONAL INFORMATION / SUGGESTED POST
IMAGES SOURCE:
- Klungkung Beach
- Man Standing Between Ruins
- White Parasol and Lounge Near Seashore
- Green Grass Covered Mountain Island Photo
- Cascading Waterfall Photos
- Owl Statue Photo
- Low Angle Photography of Plant During Daytime
So currently, it looked like this:
fig 4.25, Progression of Article 7, Week 15 (06/07/2022)
Other problems I encountered aside of the images size:
- The light brown footer scale isn't automatically change
- Fixed up by editing the margin, padding, and using col-sm
- Size of the Google Map Embed that can't be responsive
- Not yet fixed
- Tried to add col and class but still not working.
FINAL SUBMISSION:
fig 4.26, final preview, Week 15 (06/07/2022)
ARTICLES:
REFLECTION
This subject, interactive design which require the knowledge of knowing the code of HTML - CSS - BOOTSTRAP was a lot of fun in my opinion. I started to have more passion in coding, because I understand the subjects taught. But again it was very rushed, especially in the final project we only get to meet Mr. Shamsul once, and it's only like when it's early (sketching/ideation time). I wish I had more time to finish everything and make things perfect, but I'm a little bit disappointed for not getting the chance to ask because no class :(. But then, the (+) point is that, I get to explore more, which enrich my knowledge, and I experienced lots of trial and errors!
Comments
Post a Comment