Interactive Design | Task 3: Creating a Single-Page Website

4/7/24 - 3/8/24 | Week 11 - 15

Iman Mikudim | 0338004 | Section 1

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

Task 3: Creating a Single-Page Website

---

SECTIONS

|  Instructions

|  Feedback

|  Reflections

---

INSTRUCTIONS

1. Brief

• 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 topic 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 sections of the page.
• Interactivity:
• Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

2. Process

Chosen Topic: K-pop Fashion Page for "NewJeans"

(i) Wireframe

Fig 1.1 Initial Colour Palette | Week 12

To represent the group's overall aesthetic, I initially wanted to use a cute and bubbly color palette and fonts for the overall style for the website.

Fig 1.2 Initial Wireframe | Week 12

After showing Mr. Shamsul a brief layout of my wireframe, he pointed out that some areas of the page lacked contrast and that the fonts for the headings were not suitable. 

Fig 1.3 Final Colour Palette | Week 12

I then chose a different image to represent their cool fashion side, using darker colors, more contrast, and fonts ('Jost' & 'Lato') giving a more minimalistic appearance and feel.

Fig 1.4 Final Wireframe (JPEG) | Week 12

After showing Mr. Shamsul my revised layout, he liked and approved it, allowing me to move forward with the HTML and CSS.

Fig 1.5 Final Wireframe (PDF) | Week 12

(ii) Visual Studio Code

Fig 1.6 HTML & CSS progress | Week 12

Fig 1.7 'Navigation Bar' and 'Featured' Section | Week 13

For the featured section, I included a slider with three images, each with a 'call-to-action' button that leads to the'music video look' section of the page.

Fig 1.8 'About' Section | Week 13

Fig 1.9 'Fashion Collaborations' Section | Week 13

Fig 1.10 'Live Performance Looks' Section | Week 14

For the live performance section, I used this image gallery, which allows users to hover over images and see extra details at the bottom of them.

Fig 1.11 'Music Video Looks' Section | Week 14

Next, I used a slick slider and embedded a jQuery plugin to create an image slider with a button at the bottom linking to other websites.

Fig 1.12 'Newsletter' Section | Week 14

Final Working Web Page

Link to Website (View at Larger Resolution): https://task-3-final-project-microsite.netlify.app/

Fig 1.13 Final Desktop Screengrab (JPEG) | Week 14

Fig 1.14 Final Desktop Screengrab (PDF) | Week 14

Fig 1.15 Final Mobile Screengrab at 425px (PDF) | Week 14

Fig 1.16 Final HMTL & JavaScript (PDF) | Week 14

Fig 1.17 Final CSS (PDF) | Week 14

---

FEEDBACK

Week 12

Good wireframe and colour palette, can proceed to working on building the site.

---

REFLECTIONS

This task has been both fun and enlightening. I learned a lot, especially about creating detailed prototypes. Working on sliders and image galleries taught me how to make these elements look good and work well. I also gained a lot from using media queries to make sure my designs work on different screen sizes, from phones to computers. This helped me understand how important it is to make designs that work well on all devices. Overall, this experience has improved my skills and given me useful knowledge for future projects.

---

QUICK LINKS

|  Exercises

|  Task 1: Prototype Design (Digital Resume/CV)

|  Task 2: Working Web Page