Interactive Design | Final Project

 Jul 2024 - Jul 2024 | (Week 11 - Week  )
Chan Xiang Lam | 0358400 
Interactive Design | Bachelor of Design (Honours) in Creative Media 
Final Project | 
Table Content
    
    1. Instructions
    2. Final Project
        - Progress
        - Final Outcome

  Instructions 

Final Project 

Final Project ｜Creating a Single-Page Website

Objective:
Create a single-page website on your favorite topic to enhance web design and development skills.

Requirements:
  1. Topic Selection: Choose a topic you are passionate about and define the site’s goal.
  2. Content: Include at least five sections: Introduction, Background/History, Main Features, Gallery/Multimedia, Testimonials, and a CTA button.
  3. Design Elements: Select a fitting color scheme and fonts, ensure a visually appealing, balanced, and responsive design.
  4. Navigation: Implement smooth scrolling or a simple menu for easy navigation.
  5. Interactivity: Add interactive elements like image sliders, hover effects, or lightboxes.

Progress

Before starting this project, I wanted to create a pet store website. I researched many pet-related websites for inspiration and ideas. After looking at various designs and features, I decided to go with my initial idea and chose a pet store website for my project. 

Fig.1.1 Research Ideas 


After that, I created a wireframe to sketch out my ideas. I planned the layout for each section, including the homepage introduction, pet showcase, customer reviews, photo gallery, and contact us. The wireframe helped me visualize the website's structure and design direction more clearly.

Fig.1.2 Sketches

After creating the entire page in Figma, I had it reviewed by my instructor before starting to write the code. The feedback from my instructor was to keep it simple, use only two fonts, and ensure they are easy to read.

Fig.1.3 figma progress

Fig.1.4 figma progress


I watched many tutorials to help me complete my HTML. These tutorials covered various topics such as basic HTML structure, responsive design techniques, and advanced features. Specifically, I used a tutorial from CodePen to complete the gallery section of my website. This tutorial provided clear instructions and examples, enabling me to create a polished and functional gallery.

Fig.1.5 gallery layout


Final Outcome

Final Single-Page Website Link: Netliyf link



Comments

Post a Comment

Popular posts from this blog

Typography | Task 1: Exercises 1 & 2

Image
25 Sept 2023 - 23 Oct 2023 | (Week 1 - Week 5) Chan Xiang Lam | 0358400  Typography | Bachelor of Design (Honours) in Creative Media  Task 1 | Exercises 1 (Type Expression ) & Exercises 2 ( Text Formatting) TABLE OF CONTENTS     1.  Lectures     2.   Instructions     3.   Exercises         - Task 1| Exercises 1          -  Task 1| Exercises 2      4. Feedbacks     5.  R eflections     6.  Further Reading      LECTURES Lecture 1 | Briefing / Introduction  1.1 What is Typography? - Typography can be defined as the art of creating letterforms, involving elements like letter construction, grid usage and classic proportions. It is use to designs the shape of letters that you see in printed or digital media. Therefore, typography involves the creation of typefaces or type families.     1.2  Type History 1. Early Evolution of Roman Letters 1 Early evolution of roman
Read more

Digital Photography and Imaging | Project 1

Image
  5 Oct 2023 - 25 Oct 2023 | (Week 2 - Week 4) Chan Xiang Lam | 0358400  Digital Photography and Imaging  | Bachelor of Design (Honours) in Creative Media  Project 1 | Part 1 (Digital Collage) & Part 2 (Digital Imaging) JUMPLINKS            1. Lectures      2. Instructions      3. Practical      4. Project 1          - Part 1 | Digital Collage          - Part 2 | Digital Imaging LECTURES Week 1 | Introduction to Digital Photography & Imaging   Week 2 | Introduction to Photoshop Week 3 | Imaging Exercise 01  Week 4 | Blending Mode top^ INSTRUCTIONS top^ PRACTICAL Week 2 We have been i
Read more

Typography | Task 2: Typographic Exploration & Communication

Image
30 Oct 2023 -  6 Nov 2023 | (Week 6 - Week 7) Chan Xiang Lam | 0358400  Typography | Bachelor of Design (Honours) in Creative Media  Task 2 | Typographic Exploration & Communication (Text Formatting and Expression) TABLE OF CONTENTS      1. Lectures      2.   Instructions      3.   Exercises          -   Task 2| Text Formatting & Expression      4.     Feedbacks      5.     Reflections      6.    Further Reading LECTURES  All lectures 1 to 7 completed in   Task 1 INSTRUCTIONS  top^ EXERCISES Task 2| Text Formatting and Expression For this  task , we were required to select one of the three provided texts and express its content typographically. In this task we will need to design a two page editoria
Read more