Interactive Design - Final Project
02.07.2024 - 10.08.2024
Graciella Limpah / 0364517
Interactive Design / Bachelor of Design (Honours) in Creative Media /
Taylors University
Final Project - Creating a Single-Page Website
INSTRUCTIONS
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 light boxes for multimedia content.
First, I did a proposal to ask Mr.Shamsul approval alongside with the
wireframe sketches.
Next, I did a prototype design before getting in to the html design. Here is
my prototype :
|
| fig 1.1 First Prototype |
After getting Mr.Shamsul feedback, I did a minor change for the prototype.
|
| fig 1.2 Final Prototype |
Prototype link : https://www.figma.com/design/Heq5bVeS0Jua4JEjgkpWH5/Layout?t=iu4KaXAiOp4K0o1N-1
This is how my final website would look like. Next, I continue to do the html
and css in adobe dreamweaver.
First, I do the about part, continue to concert part, and latest single part.
|
| fig 1.3 About part |
|
| fig 1.4 Concert part |
|
| fig 1.5 Latest Single part |
Then, I do the header part.
|
| fig 1.6 Header |
Continue to the album part, I use the tutorial
here
to make a slideshow.
|
| fig 1.7 Code for slideshow |
Then, for the "home" part, I add image background as well as a call to button
which lead to Spotify page.
|
|
fig 2.1 Home Part |
|
| fig 2.2 Call to Button |
For the top music part, I just simply embed from Spotify.
|
| fig 2.3 Top Music part |
|
|
fig 2.4 Gallery part |
Then, after the second feedback, I add call to button for the "latest
single" part, as well as delete the line for the title.
|
| fig 2.5 Revised Latest Single part |
Then, for the concert and about part, I need to make 2 column and don't wrap
the image. So I change it.
|
| fig 2.6 Revised About part |
|
| fig 2.7 Revised Concert Part |
Then, for the album part, Mr.Shamsul advice me to add a background image.
|
| fig 2.8 Revised Album (slideshow) part |
For the social part, I just add picture next to each other and put links in
it.
|
| fig 2.9 Socials part |
Next, I change all of the font so it matches my prototype.
|
| fig 3.1 Changing the font |
|
| fig 3.2 Changing the font |
Continue to change the color of the page.
|
| fig 3.3 Changing the color |
Then, I add @media so its responsive.
|
| fig 3.4 Adding @media |
|
|
fig 3.5 Trying if its responsive
|
FEEDBACK
Week 11 - Mr Shamsul suggest me the 4th sketch of the wireframe to
proceed, he also asked me to add the hue color for the color palette. For
the layout, don't make it too hard because simple one also attractive. I
also need to have a CTA button and I'm going to add in the home page
button to the artist's Spotify.
Week 12 - Drop the lines in the design, need to have more white
space. For the album section, need to have more info. In lates single needs
to provide a call-to-action button so audience can listen the the music. For
top music maybe can suggest song from spotify.
Week 13 - For the about part and concert part, make it paragraph, and
don't wrap the text because it makes it look not interesting. Some put
background image so its not too simple.
REFLECTION
For this task, me personally think that it's a very fun project because we are to choose a topic with our personal interest, I'm really enjoying every small step of me doing this project. Because of the tutorial Mr.Shamsul gave also really help me during this task, I learnt a lot during this interactive class. I would never thought of myself doing a website from html because that's just too hard for me in the past, but now I can do it, thanks to Mr.Shamsul help.
Comments
Post a Comment