Interactive Design / Final Project

29.06.2024 - 03.08.2024 (Week 10 - Week 15)

Tan Sin Mi (0368821)

Interactive Design

Final Project

CONTENT
INSTRUCTIONS
 

FINAL PROJECT - CREATING A SINGLE PAGE WEBSITE

Requirement:

1. Project Overview
In this web design project, you will 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.

2. Project Requirements
Artist Selection: Choose your favorite topic as the subject of your website. Ensure you are genuinely interested in the topic, as this will help you create a more engaging website. Decide the site's goal to ensure that the site has clear content.

3. Content
Your content should have at least 5 sections that explain the topic of interest. It should engaging and significant to the topic. You should also include one CTA button that reflects the content.  

4. 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).

5. Navigation
Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.

6. Interactivity
Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

Visual Reference:

Figma Outcome:
Figure 1 Figma Outcome

Final Outcome:
Figure 2 HTML Code

Figure 3 CSS Code


Figure 4 Webpage outcome

Figure 5 Media outcome (iPhone 14 Pro Max)

REFLECTION


Comments

Post a Comment

Popular posts from this blog

Advanced Typography / Task 2

Image
22.05.2024 - 21.06.2024 (Week 5 - Week 9) Tan Sin Mi (0368821) Advanced Typography Task 2 CONTENT Instructions Lectures Task 2A - Key Artwork Task 2B - Collateral Feedback Reflection Further Reading INSTRUCTIONS   LECTURES Week 5: Lecture 5- Perception & Organization Perception 1. Definition Perception is how something is regarded, understood, or interpreted. In typography, it involves visual navigation and interpretation via contrast, form, and organization of content. 2. Focus Typography deals with how textual, visual, graphical, and color elements are perceived and understood. Contrast 1. Size Large elements draw attention first, such as a big letter standing out against smaller letters. Commonly used to make titles or headings more prominent than body text. 2. Weight Bold type can stand out amidst lighter type of the same style. Other met...
Read more

Advanced Typography / Task 3

Image
21.06.2024 - 23.07.2024 (Week 9 - Week 14) Tan Sin Mi (0368821) Advanced Typography Task 3 CONTENT Instructions Task 3 - Type Exploration & Application Feedback Reflection Further Reading INSTRUCTIONS TASK 3 - TYPE EXPLORATION & APPLICATION  In this task, we are required to create or improve a font that addresses a problem or adds value in graphic design, animation, new media, or entertainment design. In last, we need to use the font we created to applying and presenting. This task can take one of three forms: Creating a new font Improving an existing font Experimenting Proposal: Figure 1.1 Proposal PPT Sketches: Figure 2.1 Letterforms Sketches First Version Digitized Letterforms: ...
Read more

Advanced Typography / Final Compilation & Reflection

Image
22.04.2024 - 23.07.2024 (Week 1 - Week 14) Tan Sin Mi (0368821) Advanced Typography  Final Compilation & Reflection INSTRUCTIONS Task 1:  Typographic System & Type and Play Task 2:  Key Artwork & Collateral Task 3:  Type Exploration & Application SUBMISSIONS TASK 1 | Exercise 1: Typographic System 24.04.2024 – 15.05.2024 | Week 1 – Week 4 Figure 1.1 Final: Axial (08/05/2024) Figure 1.2 Final: Radial (08/05/2024) Figure 1.3 Final: Dilatational (08/05/2024) Figure 1.4 Final: Random (08/05/2024) Figure 1.5 Final: Grid (08/05/2024) Figure 1.6 Final: Modular (08/05/2024) Figure 1.7 Final: Transitional (08/05/2024) Figure 1.1 Final: Bilate (08/05/2024) Figure 1.9 Final Typographic System.pdf (08/05/2024) Figure 1.10 Final  Typographic System with grids.pdf  ...
Read more