Final Project - Creating a Single-Page Website

Week 10 - Week 14

JIN RONG/ 0361701

Interactive Design / Bachelor of Design (Hons) in Creative Media

Final Project - Creating a Single-Page Website

INSTRUCTIONS



Final Project - Creating a Single-Page Website

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.

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.

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.  

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

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

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


Figma Interface Design



final

FIGMA link:https://www.figma.com/design/5YYcMMpNAch5twRDyHH71u/love-and-deep-space?node-id=35-12&t=lD7zF1vJQ86xGK19-1


Coding Process

I started using DW to write code, but I found that my webpage requires a lot of knowledge related to JavaScript. I started watching instructional videos while writing code.




Write contact form code


CSS

JS


FIANL WEB LINK :https://final-loveanddeepspace.netlify.app/

REFLECTION

Creating a 5-page website is very challenging, especially due to the complexity of content and layout design. Ensuring website responsiveness on different devices adds another challenge. I have spent a lot of time learning JavaScript and achieving many results that I want to achieve, which I have not learned before. I am very grateful to my friends, they have taught me a lot.




评论

发表评论

此博客中的热门博文

Application Design II / Task 1

图片
WEEK1-WEEK4 NAME: JIN RONG I.D: 0361701 COURSE: Application Design II  / Bachelor of Design (Honors) in Creative Media Application Design II / Task 1 INSTRUCTION Week 1  To Do List  Get analysis feedback from GPT, prompt out all the pros and cons based on your app MVP features. Update blog Communicate with ChatGPT ✅ Highlights (good things) Consistent visual style: color matching and font usage are consistent, in line with Jakob’s Law (users expect the interface to follow a familiar pattern). Clear layout: the screen is divided reasonably and has a good hierarchical structure, in line with the Gestalt Law of Proximity (related elements are close together). Intuitive icon use: icons are intuitive, which helps speed up user understanding and reduce cognitive burden (in line...
阅读全文

Information Design - Exercise 01: Quantifiable Information

图片
WEEK1-WEEK 7 NAME: JIN RONG I.D: 0361701 COURSE: Information Design / Bachelor of Design (Honors) in Creative Media GROUP: Class 01 Sec 04 Information Design - Exercise 01: Quantifiable Information INSTRUCTION Exercise 1 - Quantify & Visualize Data  For this exercise we supposed to quantify our chosen items and arrange the objects into a presentable layout or chart. I decided to go with fluffy color deco balls. I started by sorting them based on their colors and then arranged them in order of their quantity and condition on the A3 paper.  Fig1.1 Sorted out according to colours Feedback: The number of buttons is a little small, you can get more I started by arranging them in order of their quantity on an A4 sheet of paper. Then I start to finish and finalize my ideas Exercise 02 - L.A.T.C.H. In exercise 2, we have to organize a group of information int...
阅读全文

Information Design - Project 1

图片
  WEEK1-WEEK 7 NAME: JIN RONG I.D: 0361701 COURSE: Information Design / Bachelor of Design (Honors) in Creative Media GROUP: Class 01 Sec 04 Information Design - Project 1 Part 01: Infographic Poster Instructions 1. Choose 1 infographic poster reference from Internet (Please consult before proceed) 2. Redesign the poster into A4 size. Sketch the idea and process 3. Redesign and simplify the poster based on visual hierarchy & typography 4. Simplify the poster's design based on color, shape & pattern 5. Attach your final poster on E-Portfolio with explanation and reflective writing Chosen Poster After deciding between a few posters, I proceeded with this infographic poster  Digitisation process COLOR I chose a color scheme dominated by blue and teal because they effectively convey the purity and tranquility...
阅读全文