Interactive Design - Final

2.7.2024 - 3.8.2024 

Ruthlene Chua Zhen Si 0365222 

Bachelor of Design (Honours) in Creative Media - Interactive Design

Final Project: Creating a Single- Page Website

Jumplink 

Exercise

Project 1

Project 2

Final Compilation 

INSTRUCTION

 

FINAL TASK

Requirements:
  • Lifestyle Theme Selection:
    • Choose a specific lifestyle theme (e.g., fitness, travel, fashion, food, wellness) that interests us
  • Design a single-page microsite with at least five distinct sections:
    1. Introduction: Captivating headline and brief description of the lifestyle theme.
    2. Featured Content: Core content related to the theme, such as articles, tips, or guides.
    3. Photo Gallery: Interactive gallery showcasing high-quality images related to the lifestyle theme.
    4. Expert Interviews or Testimonials: Quotes or short video interviews from experts or enthusiasts.
    5. Get Involved or Subscribe Call-to-action section for user engagement (e.g., subscribe or follow on social media).
  • Visual Design:
    • Create a visually appealing microsite aligned with the chosen lifestyle theme.
    • Use a consistent color palette, typography, and visual elements throughout.
  • Photo Gallery:
    • Develop a dynamic and interactive photo gallery with smooth navigation and transitions.
  • Responsive Design:
    • Ensure the microsite is functional and accessible across various devices (desktop, tablet, mobile).
  • User Experience and Interactivity:
    • Incorporate interactive elements (e.g., hover effects, animations) to enhance engagement. Design intuitive navigation between sections.
  • Technical Implementation:
    • Write clean, well-structured HTML and CSS code adhering to best practices.
  • Evaluation Criteria:
    • Creativity and coherence in design reflecting the chosen lifestyle theme.
    • Effective use of interactive elements to engage users.
    • Functional and visually appealing photo gallery.
    • Responsiveness across different devices.
    • Clean and organized code following web standards.
    • Thoughtful documentation explaining design and technical aspects.
  • Deliverables:
    • A microsite with at least five sections.
    • Clear and consistent visual design.
    • Easy navigation with intuitive menus.
    • Responsive design for various devices and screen sizes.
    • Adherence to web design best practices, including accessibility and usability.
    • Inclusion of multimedia elements (e.g., images, videos, audio) to enhance user experience.
Wireframe: 
I chose to do a Dog webpage, To narrow the scope, my main focus is on how to take care of them and the benefits of having or keeping a dog. 

I have done a few sketches but only digitized the most satisfied to Figma. 

The first section is the menu section, to show viewers what I'm trying to present. A dog picture was shown to make the topic straight to the point, which helped the audience to accept the information like " this is a dog page". 

In the second section, I wrote down the information about what they love to eat and what their preferred food is. To make it more eye-catching, I changed the photo to a round shaped, making the information more prominent and conspicuous. 


The third section covered basic and simple hygiene practices for pets, including brushing, bathing, nail clipping, and fur trimming. The left side emphasized why owners should groom their pets daily or weekly, highlighting the importance of maintaining their hygiene. The table below provides detailed instructions on the proper techniques for brushing, cleaning, and trimming, underscoring the importance of correct grooming methods.


This section presents various dog breeds, focusing on the most common and frequently seen ones. The purpose of this page is to inform people about different breeds and their unique traits, helping them choose a dog with a personality that best matches their own.


The upcoming page features a pug breed dog named Mabel, with an eye-catching picture to attract viewers. Beneath the image, there's a friendly reminder of the joys of having a pet dog, such as happiness, fun, and companionship, aimed at increasing the viewers' desire to adopt a dog.


Last but not least, the final section features a fun diary of the pug named Mabel, written by her owner. This section includes a link to another webpage. In the middle, other blog posts highlight the benefits of having a dog, supported by medical and psychological evidence to convince viewers. On the left side, there's information about different dog personalities. Clicking on these will take you to another page detailing the corresponding personalities of various breeds, such as shy, friendly, loyal, and playful. Btw, "Salmons " means: Stubborn and attached to their ideas; it was not the fish type! 


Final Outcome: Figma


While everything was done, I started to create the webpage.

At first, I started to make java scrip on the menu button, I made it into a total of 5. Make the user have a small jump link during scrolling the webpage. The menu button will scroll down together while user are reading through thr passage. 


For this part , I made the photo into egg-shaped/ round shaped by adjusting the shape. The class are link to the CSS that I have created. 








For this project, the primary focus was on CSS coding. The CSS was used to create a border layout and to ensure adequate spacing between the images and text. This involved defining clear margins and padding to maintain visual harmony and enhance readability.


Maintaining spacing for the images in this section was quite challenging, as the images kept shifting positions. After some frustration, I resolved the issue by researching online and applying specific CSS techniques found through various coding resources.


There is a next and previous button included, but they are non-functional due to the assignment requirement of creating a single webpage. Ideally, I envisioned these buttons would navigate to additional pages showcasing more dog breeds. 


Reference coding: 


For the part here, the mainly focus is on how to change the family font and the sizes, have great control on the sizes (<p><h1><h2> etc). 


Last but not least, I included a jump link to another webpage. I figured out how to do this by researching online, and the coding was easy to learn. The challenging part was ensuring that it was phone user-friendly, as the text kept shifting positions due to a lack of detailed control in the CSS. However, with some adjustments, I managed to make it quite ok maybe?


The second important of all is the background color adding. 


These are the table codes from CSS that I used for creating the layout : 
(THE WHOLE CODING WILL BE PRESENTED AS A PDF FILE IN THE LAST POSTING PART)






LINK TO WEBPAGE:https://theworldofdogs-final.netlify.app/

CODINGS: HTML & CSS

FINAL OUTCOME: PDF FORMAT 

REFLECTION

Experience:

This semester, I worked on designing and developing a single-page microsite focused on dog care. I chose this theme because I wanted to highlight how to take care of dogs and the benefits of owning one. I started by creating sketches and then digitized the best one using Figma. After designing, I moved on to coding the webpage, mainly using CSS to create a nice layout with good spacing and a responsive design.

Observation:

During the project, I noticed several important things. Making sure the images and text had proper spacing was tricky because the images kept shifting. I solved this by researching online and applying different CSS techniques. Adding interactive elements like a photo gallery and navigation buttons made the site more engaging, even though some buttons didn't function because we only needed a single page for the assignment. Ensuring the webpage was phone-friendly was also challenging, but after some adjustments, I got it to work. 

Findings:

I learned a lot about combining design and technical skills in this project. Using CSS effectively can really improve the look and usability of a microsite. Consistency in visual elements like colors, fonts, and layout is important for a professional appearance. Adding interactive features like hover effects and navigation links can make the site more engaging. Making sure the site works well on different devices showed me the importance of detailed CSS coding. Overall, this project taught me the value of continuous learning and adapting through research and experimentation in web design.

Comments

Post a Comment

Popular posts from this blog

Information Design_Exercise

Image
5/2/2025-19/3/2025 Ruthlene Chua Zhen Si 0365222  Bachelor of Design (Honours) in Creative Media  Instruction Lectures Class Summaries Task Exercise 1 (Quantifiable Information) Exercise 2 (L.A.T.C.H information poster) JUMPLINK TO: PROJECT 1 &1.2 PROJECT 2 (GROUP PROJECT) Feedbacks  Reflections INSTRUCTION Class Summaries  Week 1_5/2/2025 : Introduction to Infographics Infographics are a great way to present information in a visually engaging and easy-to-understand format. They combine text, images, and design elements to make data and ideas more digestible. Compared to traditional text-based content, infographics capture attention more effectively and improve retention. Types of Infographics There are eight main types of infographics, each serving a different purpose: List Infographics – Organize information into a structured list while using visuals to enhance readability. Statistical Infographics – Present data using charts, graphs, and percentage indica...
Read more

Sonic Design_Final Project

Image
 21/4/2025-21/7/2025 Ruthlene Chua Zhen Si 0365222  Bachelor of Design (Honours) in Creative Media  Instruction Lectures Task  Game audio_Final Project   JUMPLINK TO: Sonic Design Exercises Sonic Design Project 1 Sonic Design Project 2  Reflections INSTRUCTION Task For this assignment, we were tasked with selecting one gameplay clip out of five options and producing a complete, original soundscape to accompany the visuals. All audio had to be created independently, without using pre-existing or third-party sound sources.  I decided to work with Hollow Knight because its visual style and overall tone appealed to me creatively. Since I’ve played the game before, I already had a rough idea of how its world should sound, which helped guide my approach.  However, since I played the game a long time ago and couldn’t clearly remember how it sounded, I referred to a few gameplay videos to refresh my memory and get a better sense of the game's audio ...
Read more

Sonic Design_Exercises

Image
21/4/2025-21/7/2025 Ruthlene Chua Zhen Si 0365222   Bachelor of Design (Honours) in Creative Media   Instruction Lectures Class Summary  Task  Adjustment of the sound equalizer using Adobe Audition Adjust different sound effects depending on its environment sound equalizer using Adobe Audition 2 Environment  Audio Fundamentals JUMPLINK TO: Sonic Design Project 1   Sonic Design Project 2 Sonic Design: Final Project  Feedbacks   Reflections INSTRUCTION Lectures Week 1_21/4/2025 The required task for this week is to write a reflection blog about what we have learnt through the lecture videos below: Link 1 Link 2 Link 1: Sound Fundamentals Figure 1.0: Sound fundamental video on YouTube  Nature of Sound: Understanding how sound behaves and what contributes to its creation. Capturing Sound: How sound is recorded using various techniques and equipment. Processing Sound: Analyzing and manipulating sound for specific purposes and m...
Read more