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
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.
    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.

      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

      I then added in the headshot image of the artist ensuring that it also lies within the container class I have created for it so that the positioning matches the prototype.

      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

      Popular posts from this blog

      Design Principles / Task 3

      Image
      0.7.03.24 - 21.03.24  / Week 5 - Week 7 Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017) Bachelor of Design (Hons) in Creative Media Design Principles ( GCD60804 ) / Section 1 INSTRUCTIONS TASK 3 Design For Task 3 of Design Principles, after we have analysed the design of out choice in Task 2, we are to produce a work of design, inspired/influenced by the one we had analysed, or as a reaction to it. We should also apply our knowledge of design principles in our creation and may use any medium and/or materials that are suitable to convey our visual message. We should also include some cited visual references that inspire our own ideas and a rationale, in about 150-200 words, explaining/defending the decisions made in our design, the meaning/purpose of the design and the design principles that are found in the design. Brainstorming First off, I went back on my Task 2 to look at the design I analysed in order to get inspiration and gauge how I should approach this task. When rea...
      Read more

      Design Principles / Task 2

      Image
      20.02.24 - 05.03.24  / Week 3 - Week 5 Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017) Bachelor of Design (Hons) in Creative Media Design Principles ( GCD60804 ) / Section 1 INSTRUCTIONS TASK 2 Visual Analysis For Task 2 of Design Principles, we are to assess, investigate, document, and analyze the existing art/design work we selected in Task 1 to further study the design principles found in that work, as well as the size, placement, purpose, effectiveness of the design in relation to the UNSDG goal that we have chosen. The requirements are the following: Write a 300-350 word visual analysis of the selected design. Include reference links where applicable. Firstly, I started by visually observing the image itself and re-reading some of the design principles documented in the lectures to refresh my understanding of them so I could better identify which ones are present in the art work, then noted them down. Fig 1.0 'Guernica' From my observations, these are all the design ...
      Read more

      Application Design I / Final Project

      Image
      15.07.24 - 05.08.24 / Week 13 - Week 15 Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017) Bachelor of Design (Hons) in Creative Media Application  Design I  (DST60504)  INSTRUCTIONS    LECTURES Week 14 FINAL PROJECT Completed Mobile Application Design Prototype For the final project of Application Design I, we are required to continue from the Lo-Fi prototype we created and turn it into a High-Fi prototype by refining and creating further visual assets for it as well as include a UI kit. Process As I had completed most of the design and functionality in the previous project, all that was left to do was incorporate my user-testing feedback, colour my prototype, and test it myself with the refined user scenarios + full walkthrough. I first started on recolouring my wireframes....
      Read more