04.07.24 - 03.08.03 / Week 11 - Week 15
Kim Abin 0365392
Bachelor of Design (Hons) in Creative Media / Interactive Design / Taylor's University
Final Project
- Final Project - Creating a SinglePage Website
Quick Links
Module Information Booklet (MIB) of Interactive Design
<iframe src="https://drive.google.com/file/d/1xs_1Oul1eI2COsIo2W3eILWqBWQTsykD/preview" width="640" height="480" allow="autoplay"></iframe>
Final Project - Creating a SinglePage Website
Project Overview
In this web design project, you will create a single-page website dedicated to your favourite topic. This project will help you develop your web design and development skills while allowing you to showcase your passion for the subject of your choice.
Project Requirements
Artist Selection: Choose your favourite 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 colour 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 page sections.
Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.
For this final project, I needed to prepare more than 5 sketches including: Content structure, Visual reference/design inspiration, Mood board - Color scheme (Primary, secondary, and ascent colour), and font choices (header, subheader, body copy, navigation).
 |
| Fig. 1.1 Moodboard and Font Choices (Week 11 / 2.7.2024) |
 |
| Fig. 1.2 References (Week 11 / 2.7.2024) |
 |
| Fig. 1.3 Sketches (Week 11 / 4.7.2024) |
|
After that, I started to design the website using Figma based on those sketches. I tried following the sketch, but there were a few parts that seemed lacking, so I corrected those parts.
 |
| Fig. 1.4 Process 1 (Week 11 / 5 ~ 7.7.2024) |
 |
| Fig. 1.5 Process 2 (Week 12 / 10.7.2024) |
 |
| Fig. 1.6 Process 3 (Week 12 / 12.7.2024) |
 |
| Fig. 1.7 Process 4 (Week 12 / 12.7.2024) |
 |
| Fig. 1.8 Process 5 (Week 14 / 27.7.2024) |
 |
| Fig. 1.9 Process 6 (Week 14 / 27.7.2024) |
 |
| Fig. 1.10 Process 7 (Week 14 / 28.7.2024) |
 |
| Fig. 1.11 Process 8 (Week 14 / 28.7.2024) |
 |
| Fig. 1.12 Process 9 (Week 14 / 28.7.2024) |
 |
| Fig. 1.13 Process 10 (Week 15 / 29.7.2024) |
 |
| Fig. 1.14 Process 11 (Week 15 / 29.7.2024) |
 |
| Fig. 1.15 Process 12 (Week 15 / 29.7.2024) |
 |
| Fig. 1.16 Process 13 (Week 15 / 29.7.2024) |
 |
| Fig. 1.17 Process 14 (Week 15 / 30.7.2024) |
 |
| Fig. 1.18 Process 15 (Week 15 / 31.7.2024) |
 |
| Fig. 1.19 Process 16 (Week 15 / 31.7.2024) |
 |
| Fig. 1.20 Process 17 (Week 15 / 2.8.2024) |
After completing the code, I created a site using Netlify.
Experience
For a total of five weeks, I worked on a project to create a website on a topic I was interested in. And upon completing the task, I felt a sense of accomplishment. Since the topic was my favourite, BTS, I tried my best, and it seemed like the lecturer’s intention worked well. As I had to apply everything I had learned so far, I also looked at many websites posted on Google Classroom.
Observations
I was worried about finishing on time since I worked on this along with other final assignments. Therefore, I tried to keep the site’s design as simple as possible. However, it was challenging to compress the introduction of BTS into the design. But having worked on a similar layout in a previous project, I referred to my previous project code to complete this assignment.
Findings
Revisiting the previous project was the most helpful. Although it was tough to apply the previous code to a more complex layout and code, it was more meaningful because it was challenging rather than easy. Initially, just looking at the code made my head spin, but now I feel proud that I have improved to the point where I can create a website.
QUICK LINKS
Projects
Comments
Post a Comment