Labels

Advanced Interactive Design | Task 1: Thematic Website Proposal

 FEILYCIA JOY KURNIAWAN / 0373400 

Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media 

Task 1 : Exercise  

TABLE OF CONTENTS

1. Lectures

2. Instructions 

3. Thematic Website Proposal

4. Feedback

5. Reflection

6. Further Reading

LECTURES

WEEK 2 - Adobe Animate 

! when drawing / adding a shape, turn on the Object Drawing tool (J) 

As an exercise, we are asked to trace a boat drawing using the tools we just learnt. 




WEEK 3 

No class
WEEK 4

Mr. Shamsul taught us basic animation in Adobe Animate by animating a spider. We tried to animate its legs and making it move up & down across the screen 


WEEK 5

WEEK 6

INSTRUCTION

Fig. 2.1 <iframe src="https://drive.google.com/file/d/14n43noxq07szHB9wVs_0TxDa5Jd1R_kh/preview" width="640" height="480" allow="autoplay"></iframe>


Proposed Ideas

We first started with proposing our ideas for our topic. I proposed a few ideas:
  • What's in my fridge (food sustainablity)
  • Blind people's surroundings awareness 
  • What dogs can eat or not
However after consulting, Mr Shamsul mentioned that I need to do more research on these topics as it may not have enough content for the website. Later on, I proposed the idea of Origami as my topic, and it got approved. 


Origami

After getting the approval I continued with my research on the topic to get more contents for the website. 


For the history, I mainly used this two website and compare the two ( Georgie Tech & Origami.me )

I then decided on the website's overall concept and content. 



Project Objectives:
  • To introduce users to the history and cultural meaning of origami.
  • To teach basic and complex folds through interactive animations.
  • To show how origami is used in real-world design, science, and innovation.
Target Audience: 
  • Students and young adults who are interested in art, culture, and creative learning.
  • Design and craft enthusiasts who are curious about how origami connects to real-world design, architecture, and innovation.
Art Direction:


As for the art direction I originally chose something clean and minimalist, but then I realized how boring it would be. So I still kept the clean style but with a splash of colors. I mostly played around with the geometry shapes of the origami and will have grain effects on the vectors. 

link!

For the colors I originally chose this muted earthy colors, but after experimenting with it, I found it too dull.

trial #1



I decided to mix both muted and vibrant colors which I mostly used as the gradients. 



Website References

After getting an idea of what I want the website's going to look like, I start to look for some UI references. This includes the UI style and the interactions they have.

1. https://studiodunbar.xyz/



What I took:
- I really like the layout and how simple it is
- One of the feedback I received was to include grids
- Each element there is a navigation button, which is also draggable
2. https://oryzo.ai/


What I took:
- The layout and how they combine graphics and photos
- Transitions from each page


What I took:
- When you hover to a certain interactable element, the cursor will have an additional label on it
- Layout and clean design

Wireframe

For wireframes, I did several changes to make it flows and consistent. 



FINAL OUTCOMES

Proposal Slides
Figma Prototype



FEEDBACK 

WEEK 2

General Feedback - Proposed 3 ideas (Food sustainability, Dog's diet do's and don'ts for kids, Blind people awareness in our surroundings). Mr. shamsul likes the first 2 ideas but asked me to develop it further

WEEK 3

General Feedback - Focused on the 2 ideas and proposed it. After proposing Mr. Shamsul still feels like it lacks content and asked me to develop those 2 ideas again and add another topic as backup 

Focused on the food sustainability idea and added 1 more topic which is Origami. After proposing, he approved both ideas and asked me to proceed. 

WEEK 4

General Feedback - Showed him my contents, pages, moodboard, sitemap and wireframe. Gave some ideas on the moodboard to consider using grids as the background of the website. Had to make changes in the wireframe to keep the website consistent all through out. 

WEEK 5

General Feedback - Showed the wireframe and I needed to make the transition more consistent and flows better

WEEK 6

General Feedback - Make the navigation system better and more clear. As in right now the navigation is not that clear. Pay attention to the style and how it can relate or support the topic I'm doing

WEEK 7

General Feedback - Navigation is okay now, and flow is better but I can improve on the layout of the homepage. Pay attention on the little details like the micro interactions. 

REFLECTIONS 

Through this task, I learned a lot about thematic website design by exploring many existing interactive websites for inspiration. By analyzing different websites, I discovered how creative designers use animations, interactions, and storytelling to make even simple or ordinary topics feel engaging and memorable. This helped me understand the importance of user experience and how a strong theme can be enhanced through interactive elements. I also gained a better understanding of designing in Figma and learned new features that helped me visualize and present my ideas more effectively. Overall, this task broadened my perspective on web design and showed me how creativity and interaction can transform a website into an immersive experience.
Labels:

Comments

Post a Comment

Popular Posts