Interactive Design // Final Project: Design, Exploration, & Application

30th October 2023 - 10th December 2023 (Week 8 - Week 14)

Emran Tarek Sayed // 0346648

Bachelor of Design (Hons) in Creative Media

INSTRUCTION

<iframe src="https://drive.google.com/file/d/1axYTTpG4QssakTuddTkAz4EMs-uYBMkR/preview" width="640" height="480" allow="autoplay"></iframe>

PROJECT

Final Project: Design, Exploration, & Application

In the final project, we are tasked to create a single webpage of our chosen favourite artist. Artists can vary from musicians, actors, painters, or creative individuals. We must be genuinely interested in them to create the best web page.

The content should include an introduction, gallery, biography and contact information of the chosen artist. The web page needs to have engaging design elements, navigation and interactivity.

Progression

Moodboard

Similarly to my previous project, I started by making slides containing the details of my artist, Jenna Ortega whom I have chosen. I will make slides for her introduction, gallery, biography and contact information.

<iframe src="https://drive.google.com/file/d/12z5NVykXTVv2ap5vdW4aDaCTnoL_lqkM/preview" width="640" height="480" allow="autoplay"></iframe>

Sketch

I have done four sketches of the webpage design/layout on Procreate. These sketches are rough; they are not the final design. I will only use them as references. Below are the four sketches I did:

Digitalisation

For the next step, I used Figma to create a layout for my artist, Jenna Ortega. I used a website page as a reference to create the layout.

Fig. 6.0 Web Reference

25th November 2023

I started creating my page using that as a reference. I began by adding a background image of Jenna in the first section. Position the nav section, HOME, INTRODUCTION, BIOGRAPHY, PHOTOS, VIDEO, CONTACT. I added two sections below it: an introduction and a biography section. Each has its own background colour.

Fig. 6.1 Digitalisation 1

25th November 2023

I didn't particularly like the way it looked. Therefore, I changed it up a bit. I edited the title and its description a bit. I removed the biography section below the intro and put it beside it to represent or show that you can switch sections by clicking the arrows. Here is what I mean by that:

Fig. 6.2 Digitalisation 2

25th November 2023

I then completed the rest of the sections: photos, video, and contact.

Fig. 6.3 Digitalisation 3

25th November 2023

Jenna Prototype Design

Here is the final look at Digitalisation that I created in Figma. Below are the image, PDF and Figma links to it:

Fig. 6.4 Final Digitalisation

25th November 2023

Figma Link: Jenna Prototype Design

Web Page

For the next course of action, I replicated the prototype design in Adobe Dreamweaver with HTML and CSS codes. I began with the first section. But before I began, I decided to add Bootstrap to the mix so it would be easier to code the layout without messing up badly.

Anyway, here is the first section codes and look:

Fig. 6.5 Web Page 1st Section (HTML Code)

25th November 2023

Fig. 6.6 Web Page 1st Section (CSS Code)

25th November 2023

Fig. 6.7 Web Page 1st Section (Look)

25th November 2023

I progress to the next section, where I must add JavaScript to the HTML to get the function working properly. To switch from Intro to Bio and Bio to Intro sections with a click of a button. It took me a bit of time as I encountered a problem with functionality as it wasn't working as intended but I managed to do so in the end. I even customised the arrow to match the section.

Although one of the arrows is in the wrong position is still a problem, so I decided to leave it be for now.

Fig. 6.8 Web Page 2nd Section (HTML Code)

26th November 2023

Fig. 6.9 Web Page 2nd Section (CSS Code)

26th November 2023

Fig. 6.10 Web Page 2nd Section (Introduction Look)

26th November 2023

Fig. 6.11 Web Page 2nd Section (Biography Look)

26th November 2023

Putting down the codes in the third section was tricky as I needed to position the photos in the right place so they would have a collage look. To make it the web was hard as I also had to adjust the sizes of the photos so they would fit in better. Nevertheless, I managed it somehow in the end.

Fig. 6.12 Web Page 3rd Section (HTML Code)

26th November 2023

Fig. 6.13 Web Page 3rd Section (CSS Code)

26th November 2023

Fig. 6.14 Web Page 3rd Section (Look)

26th November 2023

Creating the 4th section might be the easiest, but the step was easy. All I had to do was create a section as a background video, with JavaScript for the play and pause function. And made sure the background video covers the website. (I will add the thumbnail later because I forgot to add it while doing this).

Fig. 6.15 Web Page 4th Section (HTML Code)

26th November 2023

Fig. 6.16 Web Page 4th Section (CSS Code)

26th November 2023

Fig. 6.17 Web Page 4th Section (Look)

26th November 2023

And for the fifth part, the fifth section, was relatively easy to create, although I decided to change the looks of the prototype design a bit. Here is the look:

Fig. 6.18 Web Page 5th Section (HTML Code)

26th November 2023

Fig. 6.19 Web Page 5th Section (CSS Code)

26th November 2023

Fig. 6.20 Web Page 5th Section (Look)

26th November 2023

As for the final section, adding the media link for Jenna Ortega was quick and simple. She only has two socials, Instagram and Facebook, because her TikTok account has been banned and Twitter deleted.

Fig. 6.21 Web Page 6th Section (HTML Code)

26th November 2023

Fig. 6.22 Web Page 6th Section (CSS Code)

26th November 2023

Fig. 6.23 Web Page 6th Section (Look)

26th November 2023

As for the final step, I needed to make a few adjustments, such as to the code, so it would be responsive in different screen sizes without crumbling apart. And add a few more features to it.

Finding a method to make it responsive without the page collapsing took me hours. In order to fix it, I had to modify the bio and introduction (as well as the photos section). In order to make the code look good, I also cleaned it up. I changed the button's colour and the navigation's hover effect to point to different sections. In the photos section, enlarge the images and press the pause button. In the contact section, type and submit as if it's working. In the media section, click to access Jenna's social media. I added jQuery as a final step for JavaScript (some of them, at least).

Here is the final look at it:

Final HTML Code

Final CSS Code

Final Look

Fig. 6.24 Web Page Final Look

8th December 2023

Netlify Link

Jenna Ortega Web Page

Google Drive link to materials

Materials

FEEDBACKS

"Feedback has been mentioned under Project."

REFLECTIONS

Final Project: Design, Exploration, & Application

My favourite artist, Jenna Ortega, is the subject of my final project, which has been a rewarding journey of technical exploration and creativity. Motivated by a sincere appreciation for her work, Jenna was chosen as the subject at the start of the process. I was able to conceptualise the layout with the aid of the sketching and digitalisation phases, and Figma was crucial in the creation of the prototype. The actual webpage development involved HTML, CSS, and JavaScript, with Bootstrap for structural support. Challenges arose in ensuring seamless interactivity, multimedia integration, and responsiveness.

Despite obstacles, the project helped me hone my problem-solving, design, and coding skills. This experience reaffirmed the importance of perseverance, meticulousness, and iterative design. Finally, the finished webpage not only highlighted Jenna Ortega but also demonstrated personal development and a feeling of achievement in establishing a captivating online presence for a well-liked artist.

Search This Blog

Emran Tarek Sayed (0346648)

Interactive Design // Final Project: Design, Exploration, & Application

Comments

Post a Comment

Popular Posts

Advance Typography // Final Compilation