Interactive Design | Project 03

29/6/2024- 3/8/2024 / Week 10 - Week 15

Kerly Ooi / 0358726

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Project 03 | Design, Exploration & Application (Single-Page Lifestyle Microsite)

INSTRUCTIONS 

 


TASK

Final Project- Design, Exploration & Application 

For our final assignment, we were required to build a single-page microsite with reasoning for any topic of our choice. The page must be visually captivating and intriguing to viewers by incorporating interactive elements. The page should also be easy to navigate and responsive to all screen sizes.



Visual references

I have created a Pinterest board to get some inspiration and references so that I can have a clearer vision and more creative ideas for my current projects. It helps me gather visual elements, design styles, and relevant content that align with my goals and objectives.




Proposal 

 


Wireframes




Prototype

Attempt 1 & 2: 



After feedback given by Mr Shamsul, I make changes to the needed. 

  • key miles stone to one section 
  • add heading for video 
  • merchandise - add prices 
  • circuits - own style layout - line similar like the history





Final Prototype 

After making the necessary adjustments to the prototype, including updating the key milestone section, adding a heading for the video, incorporating prices for the merchandise, and designing the circuits using a unique layout style similar to the history section. I am able to proceed to creating the final website. 




Dreamweaver 




HTML

5 Main sections 

  • Home
  • History
  • Team & Drivers
  • Races (circuits & gallery)
  • Fan Zone (Merchandise, Fan's ig stories)

1. Header, Home, Explore now 





2. History




3. Team & Drivers



4. Races (calendar)





Circuits 



Gallery/ Race Highlights



5. Fan Zone

Merchandise & Fans's stories





Footer



CSS




Progress :


Adjusted the margin for circuits 




MEDIA QUERIES





Responsive website




Final Project | Single Page Lifestyle Microsite




FEEDBACK

Week 11

Specific feedback : Wireframe looks ok, make some minor changes to it. As for my proposal that i showed Mr Shamsul, he suggested me to only use 3 colours the most, to match the theme of Ferrari, I have chosen red, black & light grey. For the fonts, Oswald and Montserrat is fine. 

Week 12

Specific feedback : Make some minor changes on the prototype key miles stone to one section ,add heading for video, add prices for merchandise, circuits - own layout style (use lines) - line similar like the one i did for history. Goodjob on the prototype overall.


Week 13

Specific feedback : I can proceed to the next stage, start coding the website. 

REFLECTIONS

Overall, this project has been a great learning opportunity. It strengthened my knowledge of responsive web design and improved my problem-solving abilities & coding skills. The process of transforming a prototype design into a dynamic, adaptive website has been challenging and satisfying. I am happy of the final outcome and the skills I gained along the way, which I believe will help me in my future web development pursuits.


Quick Links

Lectures & Exercise 1-3 : Lectures & Exercises
Project 2 : Working Web Page
Final Compilation 

Comments

Post a Comment

Popular posts from this blog

Advanced Interactive Design | Task 1

Image
22/4/2025 - 13/5/2025 / Week 1 - Week 4 Kerly Ooi / 0358726 Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 1 | Thematic Interactive Website Proposal TUTORIAL / PRACTICAL WEEK 2 - Introduction to Adobe Animate Card title swf/ html (create new file) html 5 canvas 25 - 30 frames per sec new project (save as index) - upload to Netlify preview (command + return) vector / bitmap - (see pixels) WEEK 3  Animation tutorial square/ rec to circle fluid brush - tool panel- point selection original brush ( limited settings) compared to Fluid brush tool delete everything - double click keyframe (starts / ends) exp to include keyframe select one of the frame / insert, keyframe double click - create shape tween ease out - Quad to loop - publish settings - more settings - loop animations / command + enter Play with timeline break apart text - command + b / modify →break apart Exercise (countdown 10 - 1 ) Adobe Animate WEE...
Read more

Minor Project

Image
23/4/2025 - 1/8/2025 / Week 1 - Week 15 Kerly Ooi / 0358726 Minor Project / Bachelor of Design (Honours) in Creative Media / Taylor's University Final Compilation | Yubari (Expedio) INSTRUCTIONS   TASKS TASK 1 | PROPOSAL Group Formation | Week 1  On the first week, Mr Mike gave us a briefing of the project we will be carrying out in the next 14 weeks. We were instructed to form a group with people from different specializations and choose a topic from given topic lists for the project.  Below are the topics to choose from: WarisanXR Digital Hologram Experience WayangMind – Mindfulness Solution EXPEDIO Project: Self-Watering Pot & Mood Light CONTINENTAL TIRES Project (for SOE groups) IMPACT LAB: Edu4All – The Night School Project IMPACT LAB: Food Security and Nutrition – Food Aid Foundation IMPACT LAB: Innovation and Technology for Sustainable Hospitality and Tourism After reviewing the options, we were required to form groups of 6–7 members. My group decided to c...
Read more

Advanced Interactive Design | Task 2

Image
20/5/2025 - 10/6/2025 / Week 5 - Week 8 Kerly Ooi / 0358726 Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 2 | Interactive Design Planning & Prototype TUTORIAL / PRACTICAL WEEK 5  Modify - convert to symbol - make sure its graphic Graphic (colour in different keyframe etc) & Stage (change looping etc) Masking background (add frame & lock) / shape - two layers For shape - 20 keyframe - shape tweet right click layer 2 - choose mask   WEEK 6 (Online) - Button exercise  Ease out → Ease In (Quart effect) Movie Clip & Graphic (The differences) right click on the layer (new layer(actions)) - add wizard button → stop → this timeline →NEXT → with this frame → finish and add WEEK 7    INSTRUCTIONS   Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to i...
Read more