FINAL PROJECT:WEBPAGE FOR ARTIST
23/10/2023 - 10/12/2023 / week 9 - week 14
DAVIES
ANNIKA ANGELA /0362108
BACHELORS OF DESIGN(HONOURS) IN CREATIVE
MEDIA
INTERACTIVE DESIGN
FINAL PROJECT : WEBPAGE FOR MAVERICK CITY
MUSIC
LECTURES
WEEK 10:
sketches > 5 sketches
mood board
color pallet
font
choice
visual references
WEEK 11:
low fidelity prototype- miro - website template
-assets
-icons
folder
-images
WEEK 12
developing website
WEEK 13
developing website
WEEK 14
final submission
INSTRUCTIONS
STEP 1: IDEATION
I decided tp go with the band maverick city music.
MOOD BOARD
fig 1.1 mood board
the contrast and drama created by the black, white, and brown color palette
matches the band’s logo and I would like to use these kind of colours in my
website.
The moodboard shows expressiveness and diversity of the images, which show the
band’s energy and unorthodox style.
I enjoy the retro and pop vibe of the font used for “Million Little Miracles”,
which fits the song’s genre and mood.
I find the handwritten and ornamental style of the font used for “Mystical
Celtic Typeface Fonts” intriguing, as it adds a touch of mystery and
spirituality so I will be using a font that has this kind of vibe.
FONT CHOICE
Sunwick maverick
SKETCHES
VISUAL REFERENCES
Fig 1.3 visual references
PROTOTYPE DESIGN
landing page
I wanted to have a background changing effect instead of a photo gallery so
when people open the page they get to the way they worship with joy and
enthusiasm so they see what kind of band this is.
about
I then wrote about why I like them so much and what they are about I wanted
the about to be short and sweet.
popular songs
I then put their most popular songs and I will add links to youtube for each
song. I chose to have the heading center aligned as they could stand out more
and add harmony to the page and there will be a adequate amount of white
space.
Members
For the members section I want to do a carousel and I made all the images
black and white so there is consistency for each picture.
awards
I then added an awards section to showcase them getting recognition for their
talent.
contact them
This section is for the users to see more of them I shall links to each icon I
made the background brown as that is part of the colour palette that they use
a lot in their albums and music videos.
Final figma
DEVELOPING THE WEBSITE
'
HTML
navigation and background image
about and popular songs section
members section with captions
awards and contact them section.
CSS
changing background.
making code responsive to mobile devices
INTERACTIVITY
fixed navigation bar
hover effect on navigation and changing background
zoom hover effect on members
FINAL PAGE
FEEDBACK
- reduce the size of the font
- make sure to add navigation
- reduce the size of some images
- Avoid right alignment
- add more white space
REFLECTION
Experience : I found this task to be time consuming but fun as well. I got to show my passion for my favourite artist.
Observation : I noticed that making a simple prototype helps and using A.I helps when I get stuck with figuring out how to solve some problems in my code.
Finings : I found that making sure you like artist helps in creating a good website and also I liked the final outcome though I know I can do better in future with better time management.
Comments
Post a Comment