Interactive Design - Final Project: Design, Exploration and Application
- July 25, 2024
June 22, 2023 - July 28, 2023 / Week 8 - Week 14
LIN CHENYI / 0367008
Interactive Design / Bachelor of Creative Media Design (Honours)
Final Project: Design, Exploration and Application
1. INSTRUCTIONS
2.LECTURE
Week 11
Lecture slides:
Project Tasks:
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.
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.
Website planning
I chose Vivian, an excellent photographer, for this project. I did research on the chosen topic and developed the sitemap and content. I then created the wireframes for the website and decided on the fonts and color scheme. For this photographer, the photography is more black and white, so I used black and white color scheme to make the web page more advanced.
Website Content
I use Figma to create my web content, which has 6 pages in total.
The production drawings in Figma are divided into 6 pages：
Page Code
For the first page, I used a sliding scrollbar to implement smooth scrolling navigation and a simple menu that allows users to jump to different parts of the page. This design improves the user experience and makes navigation more fluid and intuitive.
I started coding the login page using DW. Here is my attempt at coding the page.
Final submission
Html & Css ：
Netlify link：
REFLECTION
Creating a five-page website was a very challenging experience for me, especially in dealing with the complexity of the content and layout design. Ensuring that the website was responsive on different devices added to the difficulty. I spent a lot of time trying to implement the toggle button and drop-down menu functionality using JavaScript, despite not having learned JavaScript before. I watched many video tutorials on learning JavaScript, but despite my best efforts, I was not able to fully master these techniques.
However, this project brought me a lot of valuable experience and knowledge. I now know how to use flexible layouts and can fully build the various elements of the website. In addition, through this project, I became more familiar with the photographer's work and personal experience. This experience made me realize the importance of comprehensive planning before the actual development. Proper planning helps to anticipate potential challenges and ensure a smoother development process.
评论
发表评论