Interactive Design / Final Project
23.10.2023 - 10.12.2023 / Week 9 - Week 16
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Bachelor of Design (Hons) in Creative Media
Interactive Design (GCD60904) / Section 1
Interactive Design (GCD60904) / Section 1
INSTRUCTIONS
FINAL PROJECT - SINGLE PAGE WEBSITE FOR YOUR FAVOURITE ARTIST
Single-page Website For Your Favourite Artist
For the final project of Interactive Design we are create a single
page website dedicated to our favorite artist which in turn helps us develop
our web design and development skills while also allowing us to showcase our
passion for the artist of our choice. In the selection of the artist, it can
be a musician, painter, actor, or any other creative individual or group,
although it was mentioned we must ensure we have a genuine interest in the
artist, since this was said to help in creating a more engaging website.
The requirements are the following:
Content:
- 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.
- 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).
- Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.
- Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.
Process
The artist I have chosen to be the subject of the website is Shigenori
Soejima, whos is a Japanese video game artist that is best known for his work
in the Persona Series. I have chosen him as I very much enjoyed the Persona
games- a large part of that due to the unique art style of the game and the
game characters themselves both of which Soejima are responsible for. His art
style is very distinct and characteristic in how he uses contrast, angular
shapes, and colour to create a strong dynamic feeling which makes it stand out
from other anime-like styles. I love his work and have always admired him as
an artist, thus why he was picked as the subject of my website.
Before creating the website itself, I first created the Prototype design in
Figma utilizing the knowledge learned from Project 1 to create a visually
appealing yet balanced layout. My first design however, after receiving some
feedback from Mr Shamsul, was said to be too simple, thus I revised the design
by carefully examining and referencing the artist's style and how it is
reflected in the games and their signature colours which helped in creating a
better layout for the prototype that was more interesting visually and more
faithful to the artist in general.
For the design layout, I had drawn inspiration from the Persona website itself
to get an idea and feel of the theme in how it should be designed and what
elements I could potentially use to create a visually appealing design-
particularly I took note of the boxes in how they were designed and how
information was stored in them. This idea was translated into my prototype
making up the base/foundation of each section and their content.
Fig 1.0 Prototype Inspiration 1
Fig 1.1 Prototype Inspiration 2
Fig 1.3 Design Prototype
Due to the artist not having any means of contact or a logo to represent
themselves, I have created a custom logo (as seen at the very top of the
layout) and fictional contact information excluding the website which is the
actual website the artist is affiliated with and works for.
Once I had finalized my Prototype, I then moved on to transforming this into a
website via HTML and CSS using Dreamweaver. I started off by first configuring
the viewport for responsive web design and set the width of the viewport to
the device width with an initial zoom level of 1, this is so that the webpage
is displayed appropriately on various devices and screen sizes.
Fig 1.4 Viewport Configuration
I have re-used the knowledge from Project 2 in importing google fonts here as well and imported the various styles I used the the prototype to be used in the website as well.
Fig 1.5 Importing Font
Next, I inserted the logo code and created the navigation bar via an anchor
element, creating a hyperlink that, when clicked, will jump to the section of
the webpage with the id.
Fig 1.6 Inserting Logo + Navigation Creation
Then, with the basic layout of a header and body, similar to Project 2, I
created several classes and id's due to the abundance of elements with their
own unique properties and for ease of editing later on in the CSS- and the
same was repeated for box elements and containers as well. This is then
followed by the addition of the informational text (descriptions) under each
content section under the appropriate chronological order of being under the
header or body, and encased in their respective containers and boxes, ensuring
to reference the prototype throughout the process so the ordering and
positioning matches it.
Fig 1.7 Multiple Class & id Creation + Addition of Content
Fig 1.8 Inserting Artist Image
Moving on to the hardest part, under the "Gallery" I wanted to create a carousel to showcase the artists artworks, though I wasn't sure how to as we never had a class detailing how to do this, thus I went online and learned from tutorials how to create one, following the instructions step by step. This part took the longest, as it had many components to it, such as adding slider, scrollbar, and button functionality. Additionally, I have also added a modal for image display so when clicking on each image, the use is able to view them as singular larger ones that pop up on their own as larger versions on the screen. This part I took my time in, as it is meant to be where most of the website interactivity lies.
Fig 1.9 Creation of Carousel + Addition of Image Modal
Then, I inserted the contact information content and created further
interactive elements by creating hyperlinks for each of them. I have created
a class that links to the (fake) email address using the mailto: scheme, and
when clicked on this link it would then open the default email client with a
new message to the specified email address. Next, with the phone
number, the same technique is used here, and then again for the website by
utilizing the class which links to the (fake) phone number using the tel:
scheme, and then again having the class linked to the website address. When
clicked on the phone number on a mobile device, it initiates a phone call to
the specified number, and in the case of the website, when clicked, it opens
it in a new tab in the browser.
Fig 2.0 Inserting Contact Information & Creating Hyperlinks
Lastly, I edited the CSS of each component in my HTML to reflect the prototype by specifying rules such as the text properties, padding, colour(using the hex codes of the colours used in the prototype), margin, border for the boxes, margin, alignment, positioning, and more.
Fig 2.1 CSS Edit of Components
I have also edited the CSS when it comes to the carousel and modal- making
the navigational visual elements match the theme of the overall design,
adjustment in proper visual balance, clarity (by making certain elements
bigger) and mostly to determine positioning and smooth efficient navigation.
Fig 2.2 CSS Edit of Carousel & Modal
Final Outcome
Fig 2.3 Single-page Website For Your Favourite Artist
FEEDBACK
Week 14
Specific Feedback: Design seems too simple and looks boring, can be improved more.
REFLECTION
The final project for Interactive Design has been a rewarding yet challenging experience. I liked that it served a purpose for the practical application of web design skills while also making it more fun and somewhat personal by allowing you to create a website of an artist of choice, choosing one I had genuine interest in did make the process more interesting and bearable while navigating the intricacies of HTML and CSS in Dreamweaver. There were some tough moments, such as the initial prototyping phase failing in the first design, although the feedback did help in the end as it made me create a better layout overall and capture the essence of Soejima's unique style. The biggest challenges arose during the implementation of a gallery carousel, as I had to learn this independently, and lots of tweaking had to be done to both the HTML and CSS in a way that did not break the entire line of code or other elements. Despite encountering difficulties in coding the interactive elements however, I was able to create a responsive single-page website that successfully executed the interactive elements it was supposed to and displayed the visual elements properly according to how I had envisioned with the prototype.
Comments
Post a Comment