Interactive Design | Final Project: Design, Exploration and Application

-
02.07.2024 - 03.08.2024 / Week 6 - Week 15
Khu Ying Ying / 0357306
Interactive Design / GCD60904 / Bachelor of Design (Honours) in Creative Media
Final Project: Design, Exploration and Application

TABLE OF CONTENTS





INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1XxZ4GlWre0iUTmrVDC7BdScj8GtVotBm/preview" width="640" height="480" allow="autoplay"></iframe>

FINAL PROJECT: DESIGN, EXPLORATION AND APPLICATION

Week 15 (02/08/2024)

Objectives:
  1. Create a single-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to showcase your passion for the topic of your choice.

Requirements:
  1. Artist Selection: 
    • Choose your favorite topic as the subject of your website. 
    • Ensure you are genuinely interested in the topic, which will help you create a more engaging website. 
    • Decide the site's goal to ensure that the site has clear content.
  2. Content: 
    • Your content should have at least 5 sections that explain the topic of interest. 
    • You should also include one CTA button that reflects the content.
  3. Design Elements: 
    • Choose a color scheme and fonts that reflect the artist's style or your taste. 
    • Ensure a visually appealing layout with a balanced use of text and multimedia. 
    • Create a responsive design that adapts to different screen sizes (mobile-friendly).
  4. Navigation: 
    • Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.
  5. Interactivity: 
    • Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

Progress:

Contents & Sketches

I selected "Jojo's Bizarre Adventure" for my website's subject and listed the contents in Google Docs, including the title, about, author, manga, and collaborations.
Figure FP1: Content, Week 15 (02/08/2024)

Before I sketched, I found some ideas on Pinterest to get some inspiration.
Figure FP.2: Inspiration, Wek 15 (02/08/2024)

I then started to sketch out the layouts. I chose Sketch #4 as my final design.
Figure FP.3: Sketches, Week 15 (02/08/2024)

I decided to use a minimal color scheme: black and white colours. This helped to keep the design clean and avoid a cluttered look. After that, I did the prototype design in Figma according to Sketch #4.
Figure FP.4: Figma, Week 15 (02/08/2024)


This was the overall look of my prototype design.
Figma Prototype: Link.
Figure FP.5: Figma Embedded File, Week 15 (02/08/2024)

Figure FP.6: Prototype Design (JPG), Week 15 (02/08/2024)

Figure FP.8: Prototype Design (PDF), Week 15 (02/08/2024)

HTML & CSS

Before starting on the HTML and CSS for my website, I listed the fonts and color codes here to make the work easier later on. 
  • Fonts: 
    • Vollkorn: Introduction, headings, and subheadings.
    • Merriweather Sans: Menu and normal (paragraphs).
  • Colour Codes: 
    • #000000 (black colour): Sections 1, 3, and 5.
    • #ffffff (white colour): Sections 2 and 4.

I began by typing all the resume contents in HTML with Adobe Dreamweaver.
Figure FP.9: Content in HTML, Week 15 (02/08/2024)

Then, I worked on the CSS. I tried my best to make it look as similar as possible.
Figure FP.10: CSS, Week 15 (02/08/2024)


Final Submission of Final Project.
Website: Link.
Figure FP.11: Final Submission of Final Project - Website Screengrab, Week 15 (02/08/2024)

REFLECTIONS

Experience
Notes

QUICK LINKS


Comments

Post a Comment

Popular posts from this blog

Brand Corporate Identity | Task 1: Breaking Brand

-
Image
23.09.2024 - 07.10.2024 / Week 1 - Week 3 Khu Ying Ying / 0357306 Brand Corporate Identity / MKT62404 / Bachelor of Design (Honours) in Creative Media Task 1: Breaking Brand TABLE OF CONTENTS LECTURES     Week 1 (25/09/2024)  Introduction     Week 1 (25/09/2024)  Brand     Week 1 (25/09/2024)   Types of Marks     Week 1 (26/09/2024)   Brand Ideals     Week 1 (26/09/2024)   Positioning INSTRUCTIONS TASK 1: BREAKING BRAND     Week 1 (23/09/2024)  Grouping & Research     Week 2 (30/09/2024)   Google Slides     Week 3 (06/10/2024)   Final Submission of Task 1 FEEDBACKS REFLECTIONS FURTHER READING QUICK LINKS LECTURES Week 1 (25/09/2024) Introduction Brand Corporate Identity: ...
Read more

Brand Corporate Identity | Task 2: Logo

-
Image
23.09.2024 - 30.10.2024 / Week 1 - Week 6 Khu Ying Ying / 0357306 Brand Corporate Identity / MKT62404 / Bachelor of Design (Honours) in Creative Media Task 2: Logo TABLE OF CONTENTS LECTURES INSTRUCTIONS TASK 2A: RESEARCH & ANALYSIS     Week 2 (30/09/2024)   Collecting Logos & Google Slides     Week 3 (10/10/2024)  Final Submission of Task 2A TASK 2B: IDENTITY SYSTEM     Week 1 (23/09/2024)  Career Choices     Week 2 (29/09/2024)   Mind Maps     Week 3 (07/10/2024)   Sketches     Week 4 (19/10/2024)   Digitisation     Week 6 (29/10/2024)  Adjustments & Digitisation     Week 6 (30/10/2024)  Final Submission of Task 2B FEEDBACKS REFLECTIONS FURTHER READING...
Read more

Interactive Design | Exercises

-
Image
23.04.2024 - 01.08.2024 / Week 1 - Week 15 Khu Ying Ying / 0357306 Interactive Design / GCD60904 / Bachelor of Design (Honours) in Creative Media Exercises TABLE OF CONTENTS LECTURES     Week 1 (23/04/2024)  Introduction     Week 1 (24/04/2024)  Usability : Designing Products for User Satisfaction     Week 3 (07/05/2024)  Understanding Website Structure     Week 4 (14/05/2024)  Web Standards     Week 5 (21/05/2024)  HTML & CSS     Week 7 (05/06/2024)   CSS Selector     Week 9 (18/06/2024)   Box Model TUTORIALS     Week 2 (30/04/2024)  Prototype Design INSTRUCTIONS EXERCISE 1: WEB ANALYSIS     Week 1 (24/04/2024)  Website 1: Poison Studio     Week 1 (24/04/2024)  Website 2: Fiteg² - Protein Smoothies EXERCI...
Read more