Interactive Design/Project 2: Working Web Page

Week08-Week09/16.10.2023-24.10.2023
Yap Guang You/0363730
Interactive Design/Bachelor of Design(Hons)in Creative Media
Project 2/Working Web Page

---

Content

1. Lecture
2. Instruction
   1. Visual Reference
   2. Progressions
   3. Submission
3. Reflection

---

Lecture

Week08/Independent learning week

This week was independent learning week, I found some tutorial videos on YouTube, to learn more about HTML and CSS languages, and it does help a lot in my project.

Week09/Final project briefing

Mr. Shamsul briefed us on our final project, in this exciting web design project, I am tasked with crafting a single-page website that celebrates my absolute favorite artist. This endeavor promises to be an excellent opportunity for me to nurture and enhance my web design and development abilities. Mr. Shamsul gave us some advice on the progression, he provided a timeline for us from start to submission. Last, he showed us some composition skills that we can use in our coding for Project 2 and the final project. Then he gave us some feedback on our latest project 2 progressions, and then he showed us some skills to let our resume look more decent.

Example_Artist web page

---

Instructions

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

My goal for this assignment is to turn my static prototype from Project 1 into an engaging and fully functional web page. I will utilize my understanding of web layout classes to craft a website that closely mirrors my original prototype.

Visual Reference

The prototype of my resume is quite simple in content, so I decided to make some changes to it.

Project 1 Prototype Design

Progressions

I use Adobe Dreamweaver to do my project, the languages I use are HTML for basic web development and CSS for decoration. I just typed the content of my resume, it has a few parts, bio, education, experience, skills, languages, etc. I separate them into the head, left, and right, and the specific section for each content, so it will be a bit convenient when I am decorating the web with CSS language.

Progression_1

After typing the information, I decided to add the icon for the skills section., and then add some new content to it, I decided to show the details of my experience and add some communication skills showcase into my resume.

Progression_2

Besides adding the icon, I decided to add some hyperlinks to my resume to let users can visit the page of my e-portfolio, working space, and my school. However, I found that the hyperlink will just replace my resume page when the user clicks on it, so I changed it into the jump link.

Progression_3

When I finish the web development, I start with the decoration, I use CSS languages and Dreamweaver to make the decoration. I found that the original color from the prototype might not work very well so I changed my color choosing static I will stick with the grayscale color palleted.

Progression_4

After decorating the web, I started adjusting to let my web fit with the devices like smartphones and tablets. I use the web development tool in Microsoft Edge to simulate the view of these devices and also, I use my own device which is the Samsung S22 so I can have a clearer mindset for the adjustment. 

Progression_5

After making some adjustments I will be considering about the submission, I upload my file to Netlifly.

---

Submission

Link submission: https://yaguangyou-project2.netlify.app/

Project 2_Final Submission.Jpeg

Project 2_Final Submission.Pdf

Project 2_Final Submission Phone View.Jpeg

Project 2_Final Submission Phone View.Pdf

 
Project 2_Final Submission.HTML Code

Project 2_Final Submission.CSS Code

---

Reflection

In this project, I found that the color using is a very important part of the web design, it can help user read more easily. To let the web page fit into any device, it better start in the beginning when we develop a web page, if not it will be a big issue in the end of the progression. Organizing our code nicely is a big part of the progression it will have a big positive impact during our work, especially when it comes to the adjustment and decoration.

Design Principles/Task 2:Self-Portrait

Week06-Week10/04.10.2023-03.11.2023

Yap Guang You/0363730
Design Principles/Bachelor of Design(Hons)in Creative Media
Task2/Self-Portrait

---

Contents

1. Lectures
2. Instructions
   1. Ideas Development
   2. Visual Study
   3. Sketch
   4. Visual References
   5. Progression
3. Submission
4. Reflection
5. Feedback

---

Lectures

Topic6/What is a Self-Portrait?

The self-portrait is a self-representation in the form of a drawing, painting, sculpture, etc. It is a visual depiction of the self. This lecture shows us how to use a mind map to be tapping into ourselves as much as we can. A self-portrait artwork represents us, how we see ourselves, and how we explore ourselves.

Self-Portrait example: https://pin.it/1faHPzU

---

Instructions

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

This task required us to make a self-portrait using the various design principles we have learned before.

Idea development

My mind comes empty in the beginning, so I use the mind map and start brainstorming, I decided to have 10 ideas first, then I will cut them in to 3. After a short brainstorming I have few ideas, which is draw a self-portrait in different kind of art style, or making a poster of my self or using a different image to make a collage.

Idea development/Mind map_1

Then I start to think about myself, so I also use the mind map and start brainstorming. I am considering like adding something like MBTI or constellation into my artwork, but I have no idea that how to express them, so I give up.

Idea development/Mind map_2

Visual Study

After having a few ideas, I started to find some references for me.

https://pin.it/31Od5HL

I found this from Pinterest, I think it has a high usage of contrast. Even if the contrast is strong enough to focus on the portrait of the object, the details are still very conspicuous, I would like to try something like this in my task 2 if possible if I use the contrast principle again.

https://pin.it/5VKm6HX

This is an art style from a famous artist in history, Picasso.

https://pin.it/1o7yDTi

Going with collage of my task 2 was also my choice, so I find a few collage artwork online. Then I think this is the artwork that very catches my eyes, I like the using of the red in the collage and also the composition.

https://pin.it/1o7yDTi

I actually have the same idea as this artwork in the previous task, so if I can try this idea again in task 2, I'm more than happy to try it.

https://pin.it/1wH79ys

When it comes to self-portraits, I think we must mention Vincent van Gogh. 

Sketch

I sketched a few ideas, but I am still very confused about how to express myself in the self-portrait. When I was sketching, I found a new question it seems like I can't really at a specific principle inside my artwork. 

Sketches_1

The #1 and #2 ideas are something like Picasso-style art. For the #3 idea, I decided to turn it into pixel art or something like the NFT image. Then #4 is something like turning me into a visual character, then what kind of character do I like to be, the sketch is basically a simple rough sketch of the character Nanika from Hunter x Hunter.

Sketches_2

The #5 is a combination between idea #4 and idea #2, which is like Picasso-style art with a Nanika face because I think it face is very fun and playful. #6 was I turned one of my random childhood photos into a draw, and #7 is the combination of #4 and #6. Then #8, I would think about turning myself into a character on the music album cover, this inspired by the cover from "The One Last Kiss" by Utada Hikaru.

Visual Reference

https://pin.it/4gyALmD

This is one of the pixel arts I found, I think it is pretty cool, and maybe it can be a stronger contrast if I chance the color used in my own artwork.

https://pin.it/5No0U3E

This is the music album cover that I mentioned in the sketch section.

https://pin.it/aOUarkh

This is an artwork I found when I was finding other module ideas, I think it is pretty fun, and it might be a good choice for me.

Progression

Inspiration 1: https://pin.it/71cYRly

Inspiration 2: https://pin.it/4AbPz9O

I decided to go with the #7 idea and try to make pixel art for it. First, I go with the lines.

Progression_1

I used Adobe Photoshop for my assignment, after the lines worked, I transferred the line art into a 64px*64px file then I found it the lines looked a bit messed up I changed it into 128px*128px it still did not fix really well, so I redrew the line art again.

Progression_2

Then I turned the lines art into 128px*128px again, then it looked well this time, then I colored my artwork with plain color. I decided to have some contrast for my color using.

Progression_3

After coloring my artwork, I decided to add some more details to it.

Progression_4

Then I went to deal with the background, I decided to use the repetition of the emoji in my background.

Progression_5

After getting feedback from Ms. Yip, I made some minor changes to my artwork, which is increase the size of the emoji on the background and changing the color of the emoji on the hair band.

Progression_6

---

Submission

Artwork Title: Emoji

Statement: Everyone has their own thoughts, but in relation to society, is hard to always be ourselves. We have different emotions due to random situations; they might be sincere and maybe not. So, I try to express the usual emotions by using emojis, just seeing them as our mask to face different situations. The core of the artwork is to tell people to face their emotions at the time, knowing that what emotion they are having and make the right decision.

Submission_Emoji_Jpeg

Submission_Emoji_Pdf

---

Reflection

I think I still need to improve my familiarity with digital art. During the progression, I don't really use any principles for purpose, need to be cautious about the requirements of the task. I think the coloring skills need to be improved like shading and color used. The drawing must be improved. I think is not enough to try the sketch and the possibility of the portrait combination with different ideas.

---

Feedback

Week07

Try more expressing ourselves in the task. Trying to explore more at the visual study, deeper, more details/ We can have multiple principles in our work, but having one main focus is better if not the outcomes might be a bit messy.

Week10

Make the emoji on the background or change the color of the emoji on the hair band.

Interactive Design/Project 1:Prototype Design

Week04-Week06/18.09.2023-02.10.2023
Yap Guang You/0363730
Interactive Design/Bachelor of Design(Hons)in Creative Media
Project 1/Prototype Design

---

Lecture

Week04/The Web and Language

Web standards are defined by their markup languages like HTML and CSS. Different standards of wed is used to adapt different devices, solution, and operating systems. The wed standards that can display the website properly will highly effected for developers and visitors experience. The structure is to help readers to understand the messages the web is trying to convey and to navigate around he document. We trying to develop our first web page in class using the notepad in our device, we are using HTML for this exercise.

Week04/Web page development exercise

Week05/ID and Class attribute

Every HTML element can carry the ID attribute,  each ID is unique and can only be carried by one HTML element, it can't have the same ID, just like our IC number. Class attribute is the same as ID attribute, but it can have the same Class attribute in different HTML elements. The CSS language allows us to create rules that specify how the content of an element should appear, such as our background, font type, font colors, etc. All the decoration code was contained in {}. We tried to decorate our web in Dreamweaver during the class, Mr.Shamsul showed us a lot of code to decorate our web, such as adding background, changing font type and colors, adding lines, etc.

Ex: Scrip font might not have a good effect on the paragraph, it was hard to read.

Week05/Web decoration exercise

---

Instruction

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

In this assignment, we are required to make a visual resume using prototype software such as Figma or Adobe XD. The resume needs to contain a bunch of personal inform, then we we need to focus on the layout and design, it been told that organizing the section nicely in important in this task, and we can add some visual elements in our design to make our resume more interesting, such as icon or image.

Sketch

I sketched out a few ideas, I found my idea online. I decided to make it simple and play around with the shapes. After sketching out those idea, I have a idea that I can't make my resume looks like paper with boxes.

Sketches

I decided to work with the #2 idea I have drawn.

Progression

I use Adobe XD to finish my layout, and then for the image and icon, I do it with Adobe Photoshop and Illustrator. The font I used was Source Code Pro, Stencil, and Yu Gothic. My art board size was 1330*1980.

Progression-1

I separate my personal information into 5 boxes, Bio at the top then education, work experience and skills, and contact at the bottom. I am trying to use the plugin to due with the icon, but it doesn't really get the effect I want, I would like to have the effect like a chart to show my ability on each skill. So I use Illustrator and Photoshop to help me complete the icon.

Progression-2

I go search for the software icon online(Photoshop, Illustrator, InDesign, Premiere Pro, After Effect, XD) and use the tracing and shape-building tools in Illustrator to help me complete the icon, if the tracing tools can't work well, I use pen tools and Photoshop to complete the icon.

Progression-3

Then I changed the color of the box because I thought that white color wasn't a good choice.

---

Final Submission

Project 1:Prototype Design/Final Submission(PDF)

Project 1:Prototype Design/Final Submission(Jpeg)

---

Reflection

It was very important that maintain the balance of the element's alignment, such as text and boxes. Spacing between these elements also has a big impact on the visual effect, it makes the image look more tidy and easy to understand. I think I still need to improve with my composition, I don't that this composition was very fun and interesting, but I think it was organized and easy to under stand, and it might reduce my task in the following assignment that we need to recreate the same resume design into a web page.