Interactive Design - Final Project
23.10.2023 - 10.12.2023 (Week 9 - Week 16)
Sorcha Griselda / 0353056
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Final Project | Design, Exploration and Application
INSTRUCTION
Final Project | Creating a Single-Page Website for Your Favourite Artist
Project Overview:
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.
- Biography: Include a brief biography or description of the artist's life and career.
- Gallery: Showcase images, videos, or other multimedia related to the artist's work.
- Contact Information: If applicable, include contact details or links to the artist's social media profiles.
Week 9 | Proposal
In the first week, we kicked off our website design project by
delving into some research. I dove into details about my chosen
music artist, Ariana Grande.
The mood board presented below incorporates the chosen color
palette. Based on my research, I chose a blue-lavender palette
because those are Ariana's favorite colors. Additionally, I explored
visual references on Pinterest to enhance my design concepts.
Fig 1.1 Proposal Ideas [PDF]
I drew out the rough wireframes for the single-page website based
on the sitemap.
 |
| Fig 1.2 Rough Wireframes Sketches |
Week 10 - Week 11 | Prototype
- Logo
- For my single-page website, I decided to use Ariana Grande's official logo that can be found on her website.
Fig 2.1 Logo Used
- Figma
- I actually created two prototype in Figma as my first prototype was not approved due its lack of interactivity. The first failed prototype can be seen below:
Fig 2.2 Unapproved Figma Prototype
Fig 2.3 Approved Figma Prototype
Week 12 - Week 16 | Website Coding Process
To start off the process, I created a folder named 'Final Project'
to organize the necessary HTML and CSS files for building the
website. This facilitated easier navigation and storage for
subsequent coding tasks, with the 'index.html' and 'style.css' files
neatly stored within. Additionally, I also created a sub-folder for
images, allowing me to compile efficiently the pictures necessary for display on my website.
|
| Fig 3.1 Final Project Folder |
|
| Fig 3.2 Document Setup Link |
|
| Fig 3.2 CSS of Navbar |
|
| Fig 3.3 HTML of Navbar |
This principle also extends to certain buttons incorporated into my
website. I have implemented a hover effect on all buttons using CSS.
This hover effect is uniform across various buttons, and to ensure a
seamless transition, I incorporated a 1s transition on both links
and buttons.
 |
| Fig 3.4 Explore Button on Homepage |
 |
| Fig 3.5 Explore Button on Homepage with Hovered on |
For 'About The Artist' section featuring columns, I designed a
type of hover effect with a shadow beneath the columns. To
maintain a smooth transition, I applied a 0.5s transition to these
hover effects as well.
 |
| Fig 3.6 One of the Columns that is Hovered (that shows shadow) |
I primarily engaged in coding by learning from and exploring
YouTube video tutorials. In addition, I obtained certain code
snippets by using GitHub and Bootstrap.
On the last week, Favicon was added to my website. I started out
by:
1. Creating the icon in Adobe Photoshop/Illustrator (document
size 200 px x 200px)
2. Making the icon as simple as possible
3. Export the image as .PNG
4. Saving it as favicon.png
5. Adding this code <link rel="shortcut icon"
type="image/png" href="images/favicon.png">
|
| Fig 3.7 Favicon Process on Adobe Photoshop |
Week 16 | Final Submission
Final Project Submission Link:
Fig 4.1 Final Single-Page Website [HTML]
Fig 4.2 Final Single-Page Website [CSS]
FEEDBACK
- Avoid using different color schemes for different areas of the page and instead try to keep the color scheme consistent throughout.
- Ensure that the fonts on the page are all the same.
- Verify that the buttons connect to an internal page.
REFLECTION
This particular project proved to be exceptionally challenging, given
creating a responsive single-page website. Even the working webpage for
project 2 was a bit of a struggle for me, making this project a whole new
level of difficulty. Although the coding process, especially for the
homepage's HTML and CSS, consumed a significant amount of time, I found that
as I progressed to work on the additional pages, my confidence grew, and the
time required decreased. Reusing certain elements and copying some codes
facilitated the process.
Furthermore, I felt a sense of accomplishment with the final result.
Ensuring each button was functional and incorporating subtle transitions and
details added to the overall satisfaction of the project.
Comments
Post a Comment