INTERACTIVE DESIGN - PROJECT 3: CREATING A SINGLE-PAGE WEBSITE
24th October - 10th December (Week 8 - Week 14)
Azim Azariff Bin Azahar (0353583)
Bachelor of Design in Creative Media
Interactive Design - Project 3: Creating a Single-Page Website
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1MRy82G0_gyKN5wyMc6G_aBq6diBz5w4_/preview" width="640" height="480" allow="autoplay"></iframe>
Azim Azariff Bin Azahar (0353583)
Bachelor of Design in Creative Media
Interactive Design - Project 3: Creating a Single-Page Website
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1MRy82G0_gyKN5wyMc6G_aBq6diBz5w4_/preview" width="640" height="480" allow="autoplay"></iframe>
PROJECT
Project 3: Creating a Single-Page Website
In this web design project, you will create a single-page website dedicated to your favorite artist. This project will help you develop your web design and development skills while allowing you to showcase your passion for the artist of your choice.
Project Requirements:
Artist Selection: Choose your favorite artist as the subject of your website. It can be a musician, painter, actor, or any other creative individual or group. Ensure you have a genuine interest in the artist, as this will help you create a more engaging website.
Content:
Project 3: Creating a Single-Page Website
In this web design project, you will create a single-page website dedicated to your favorite artist. This project will help you develop your web design and development skills while allowing you to showcase your passion for the artist of your choice.
Project Requirements:
Artist Selection: Choose your favorite artist as the subject of your website. It can be a musician, painter, actor, or any other creative individual or group. Ensure you have a genuine interest in the artist, as this will help you create a more engaging website.
Content:
Your single-page website should include the following sections:
Header with the artist's name and a brief tagline.
Introduction: Provide an overview of the artist's background and
why you admire them.
Gallery: Showcase images, videos, or other multimedia related to
the artist's work.
Biography: Include a brief biography or description of the
artist's life and career.
Contact Information: If applicable, include contact details or
links to the artist's social media profiles.
Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your
personal 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.
The artist I decided to create this website on is Coldplay. The reason why I chose this artist is because I was thinking about their concert in Kuala Lumpur and I've always listened to Coldplay since I was a kid.
The artist I decided to create this website on is Coldplay. The reason why I chose this artist is because I was thinking about their concert in Kuala Lumpur and I've always listened to Coldplay since I was a kid.
I began to work on my final project on Dreamweaver. I watched a few
Youtube tutorials to freshen my memory on coding as well.
Source Code:
I learned how to use bootstraps by watching the tutorials. It really helped me create this website quickly. I know we had about 4 weeks but I managed to finish this up in the space of 3 days.
After putting all of the source code, I moved onto the CSS panel.
CSS
This is the final website on desktop. Honestly, I'm happy with what I've done. I know it looks simple but I can only improve moving forward. Hopefully my skills on making a website gets better.
It is also responsive on mobile phones.
Final PDF of Webiste
<iframe src="https://drive.google.com/file/d/1ajuvSkSbbgNNKxtDSRbKf7GWwCL1a8GQ/preview" width="640" height="480" allow="autoplay"></iframe>
FEEDBACK
Unfortunately, I did not receive any feedback because I actually started doing this project pretty late. So I wasn't able to show anything when there was a time for it.
REFLECTION
Honestly, these past 14 weeks have been very interesting. I went into this module not knowing that I'd be learning any type of coding. I'm really glad I did though. I truly enjoyed this module and Sir Shamsul made it much more enjoyable than it already is. When I was doing this project, I kept on delaying it. I only started 2 weeks before it's due. However, I managed to pull through and complete it in time. I had fun creating this website. Yes it may be simple but to me it looks really nice. I hope Sir Shamsul agrees with me too.
Source Code:
|
| Fig. 1.1 |
|
| Fig. 1.2 |
|
| Fig. 1.3 |
|
| Fig. 1.4 |
I learned how to use bootstraps by watching the tutorials. It really helped me create this website quickly. I know we had about 4 weeks but I managed to finish this up in the space of 3 days.
After putting all of the source code, I moved onto the CSS panel.
CSS
|
| Fig. 2.1 |
|
| Fig. 2.2 |
|
| Fig. 2.3 |
|
| Fig. 2.4 |
Since my artist is Coldplay, I wanted to use a specific font that
relates to Coldplay. So I decided to use the font called 'Albertus
Medium'. It is the font used in their Parachutes - X&Y era.
The font code in CSS:
When using Dreamweaver, I like to use the Split view so I know the changes being made on the website without having to exit the app.
Hover Effect
It's nothing too special but I really like the hover effect I added onto the social media icons.
Final Website (Desktop)
|
| Fig. 3.1 |
The font code in CSS:
|
| Fig. 3.2 |
When using Dreamweaver, I like to use the Split view so I know the changes being made on the website without having to exit the app.
|
| Fig. 3.3 |
Hover Effect
It's nothing too special but I really like the hover effect I added onto the social media icons.
|
| Fig. 3.4 |
Final Website (Desktop)
_Interactive203_PROJECT%25203_index.html%20(2).png)
|
| Fig. 4.1 |
This is the final website on desktop. Honestly, I'm happy with what I've done. I know it looks simple but I can only improve moving forward. Hopefully my skills on making a website gets better.
|
| Fig.4.2 |
It is also responsive on mobile phones.
Final PDF of Webiste
<iframe src="https://drive.google.com/file/d/1ajuvSkSbbgNNKxtDSRbKf7GWwCL1a8GQ/preview" width="640" height="480" allow="autoplay"></iframe>
Unfortunately, I did not receive any feedback because I actually started doing this project pretty late. So I wasn't able to show anything when there was a time for it.
REFLECTION
Honestly, these past 14 weeks have been very interesting. I went into this module not knowing that I'd be learning any type of coding. I'm really glad I did though. I truly enjoyed this module and Sir Shamsul made it much more enjoyable than it already is. When I was doing this project, I kept on delaying it. I only started 2 weeks before it's due. However, I managed to pull through and complete it in time. I had fun creating this website. Yes it may be simple but to me it looks really nice. I hope Sir Shamsul agrees with me too.
Comments
Post a Comment