Porfolio scrolling page:
Creating a webpage by Figma to showcase all the work that I have in DMS1 for the whole semester. This work including my working process and some footage
HOMEWORK 10.1
ASSIGNMENT 1: SELF-REFLECTION VIDEO
• How did you approach the relationship between the sonic and visual components of your edit?
I considered the interplay between the visual and sonic elements in my edit. For instance, I chose a piano soundtrack because it resonated with the emotional tone I wanted to convey. The fact that piano sound it’s the first element that i think of when planning the whole work. The another fact that me and my friend play that together, which mean it’s become more personal. The music served as a guide to shape specific feelings from the viewers and enhance the overall impact of the visuals.
• How did you decide on the footage that you used to shape your project?
I start the project with a well-defined brainstorming process, outlining the scenes and shots I visioned. However, during filming, I welcome spontaneous ideas and allowed the 'going with the flow' mindset. Additionally, I incorporated footage I had previously captured, drawing connections between past experiences and the present I aimed to convey.
• What did you learn about the power of sound to shape emotional experience, and how did you apply this knowledge to your project?
I learn that most of the scene it’s really based on the sound to shape the mood. It’s could be a horror movie, or romantic scene just because of the soundtrack, or how people adjust the tiny sound in scene could lead the attention dramatically. Based on what i have learn, I really priority detail sound in my work like the stepping, environment sound to make people feel like they’re really inside my work
• How does editing relate to the concepts of pacing and rhythm, and how did you use these concepts to shape your use of time in the project?
Editing plays a core role in establishing pacing and rhythm in a video project. In my work, I consciously divided it into two distinct parts. The first part was characterized by a frenetic pace, featuring fast cuts and abrupt noises to create a sense of urgency and confusion. In contrast, the second part is more peaceful and slow, eliciting a feeling of sadness. These deliberate editing choices served to convey the emotional journey and changes within the narrative
• Which parts of your personality, interests, past, and potential future did you choose to depict in your portrait?
My project serves as a visual representation of my personal journey, particularly my transition to Melbourne and bunch of experiences in this new environment. It’s a flip coin of emotions I felt during this period, with the first part embodying the rapid pace and challenges of adaptation, while the second part reflects a sense of healing amid underlying sadness. I acknowledge that my work may not fully reveal my bolder personality, which i believe i’m not get used to the studying system of Melbourne at that time.
• What were the primary aesthetic choices that you made to express those ideas in your work?
I didn't prioritize aesthetics as much as I should have, in fact i nearly forgot to considered it. But based on the strong brainstorm, i still convey most of the mood and emotions through a shot. I approached this project as if the camera were my eye, offering viewers a glimpse into how I perceive the world. By adopting this perspective, I intended for viewers to connect with the raw emotion conveyed in the video, despite any potential shortcomings in aesthetic considerations
ASSIGNMENT 2 - SUITE OF ICON WEBPAGE
• How would you summarise your idea behind the suite of icons, and why did you choose the theme that you did?
The suite of icon that i make for an interacted app, that help the user to be calm when hearing the sound, seeing the color of the creature wings. I choose the fantasy dream calm categories because I have always been interested in this incredible amazing world. And personally, i want to make it for my old friend who have a lot of mental disorder
• Did you iterate through a series of approaches before settling on one? What changed across those iterations, and why did you choose the one that you ended up with?
Before the last official idea, i actually have some another thinking for this assignment: suite of icon for an insomnia disorder app; app for daily astrology fortune; interactive virtual pet app,... I find there is a common point of all the ideas, which is calming people by using fairytale elements. I have experienced many type of creature wings to find out which style would work the most for the work (single continuous drawing line style; the super complicated one, the geometric shape). I find the butterfly shape it’s the most fit to my aesthetic i aimed to achieve, which is fantasy dreamy style. Notice that the texture of butterfly wings could be complicated on illustrated, i decide to minimise the detailed but still keep the shape of them. Additionally, the last option that i choose basically achieved all of thing i need for this assignment: the style and graphics are easy enough for me to work on; it’s suit the style’ and fairytale vibe would help people to feel calm because of the dreamy color and the softness, thin texture in my suite.
• How did you translate your thumbnail sketches into the final flat designs in Illustrator? Was anything lost in that translation, or gained?
First, I start with thumbnail sketches to brainstorm and visualize my design ideas. Once I have these rough concepts on paper, I scan them into Illustrator. In Illustrator, I use the scanned sketches as a reference and meticulously trace and refine the lines to create a more polished and digital version of the design.
However, during this translation process, I often encounter challenges, especially when my sketches are intricate with numerous shapes and lines. To adapt them to Illustrator, I need to simplify the details, prioritizing clarity and coherence. This simplification involves making decisions about which elements are essential to retain and which can be modified or omitted while ensuring the overall integrity of the design.
In essence, translating my thumbnail sketches into Illustrator involves a careful balance between preserving the essence of the original concept and adapting it to the digital medium. This iterative process allows me to maintain the core idea while ensuring it works effectively as a final design
• How did you use colour to create a sense of unity and visual interest in the icons? Why did you choose the palette that you did?
I chose a color palette inspired by Monet's paintings, known for their dreamy aesthetics and pastel saturation. This palette was instrumental in creating a cohesive feel throughout the icons. Firstly, I used a thin stroke for the illustrations to make them stand out from the background. Additionally, I applied a gradient background with colors from the Monet palette to further enhance the overall unity of the design
• How did the elements and principles of sound that you used in your audio design correspond to the elements and principles of design that you used in your visual design?
I incorporated two types of sounds in my audio design to correspond with the elements and principles of design in my visual design. Firstly, I used background sounds resembling water flowing to complement the visual elements. Secondly, I created flapping wings sounds through my hand movements to synchronize with the visual cues.
Unfortunately, my sound design received a lower grade due to the lack of variety among the nine edited sounds, which all ended up sounding the same.
• How did you translate the prompt that you chose from an abstract idea to a set of concrete visual designs?
To translate the chosen prompt from an abstract idea to concrete visual designs, I began by brainstorming and sketching rough concepts. Personally it’s most important step for me to sculpture my mindset. After have some ideas, which include some very visualizing image, adjective, it’s help me to start build uf more detail by building more and more elements in my work.
ASSIGNMENT 3 - 3D ENVIRONMENT
• How important was a working prototype to your design process? What did it offer that process?
Working prototype to me it’s the step that i built the greybox and start testing it out by using gameplayer mode. So it’s a important step for me which i could make sure if i’m in the right direction or not
• How did your experience of designing and producing a three-dimensional environment differ from your experience of designing and producing a project in two-dimensional media?
It’s necessary to think in very 3D way when producing a three-dimensional environment, putting yourself in the user eyes and predict thousands of script how they will move, react. Sometime it’s could be out of hand so let number of people to testing it out it’s necessary. Unlike producing a project in two-dimensional media, we we usually limited the user reaction, and spend more time on the visual more.
• What was the role of the virtual camera in your project, and how was it similar to and different from the role of the camera in Assignment 1?
The virtual camera in the Assignment 3 become the eyes, feet, and ear for the user. The similar between them in the first assignment and this assignment it’s how they lead people to see my work. However, people can see/hear/go independently in this assignment, which really different from the first assignment which the user will only see what i shown.
• How did you use sound in your project, and how was this similar to and different from your use of sound in Assignments 1 and 2?
The sound that I put in Unity would be more detailed and divide in different area. For example if you dive in the water, you could here the sound of the fire on stair. Same as the assignment one where i divided sound in two different timing, which separate the mood from the starting journey to the ending. The difference it’s I put putting sound in the first assignment based on the timing, scene, footage; this assignment it’s totally different since i put sound based on a 3D area, which takes more time to adjust the 3d effect too.
• How did you unify the different elements of your virtual environment under a certain theme or concept? How did your theme or concept evolve over the project’s development?
To me, brainstorming to grasp the overall concept is crucial in finding the right elements for the project. Since it was my first time working with the software, I couldn't plan everything in advance, and at times, I had to go with the flow. Therefore, to understand the core concept, I tried to simplify it into keywords such as 'sad,' 'moody,' 'old,' 'ancient,' 'obsess,' and others. Due to a lack of information about the final visual outcome, I had to change my work's concept and aesthetic multiple times, sometimes taking risky approaches. For instance, I initially planned to create a game, so my visuals included a lot of code and scripts. However, as I revisited my work, I retained the core idea but continued to grapple with the challenge of making it effective for players to understand
• What did you discover through the process of play testing that you wouldn’t have discovered otherwise?
Through the process of play testing, I discovered several critical aspects that would have remained unnoticed otherwise. One significant finding was that objects that appeared visually pleasing during the design phase often turned out to be too tall for players to see through effectively. Additionally, I realized that the overall scale of the environment needed adjustments as players found it too vast. Play testing also revealed issues with staircases that appeared functional but proved problematic for player navigation. These insights were invaluable in refining the user experience and improving the virtual environment
HOMEWORK 10.2
​
Personal Progress:
-
Trusting the process and following step-by-step instructions helped me stay organized and focused. This was most evident when I had no idea what to do and felt lost; I would simply refer back to the weekly tasks, which helped me stay on track.
-
Weekly feedback sessions with both my lecturer and peers allowed me to gather diverse perspectives and refine my work effectively. I realized the power of this when I showed my work to my peers. It's not just the feedback they provided; their compliments and affirmations encouraged me to stick to my plans and made me realize that I possessed valuable skills.
-
Having a specific, straightforward question guided my problem-solving process and made my solutions more efficient. It's not easy to answer vague questions like 'how to make my work address the requirements' or technical queries like 'how to make this element move.' But when you have a clear question, it means you have a clear path for what you're going to do.
Technical Progress:
-
Regularly using the software deepened my understanding and proficiency. As the saying goes, 'practice makes perfect,' and the more I used the software, the better I remembered its functions. I experienced this feeling again while working with Unity.
-
Learning within a community provided me with various insights and opinions to enhance my work. There was a time when I couldn't find a bug in my HTML code for my web project. I randomly asked my friend to take a look. She told me, 'It's always in the details,' and she was right. My software skills today are mostly thanks to the communities I've learned from. I believe that joining a community is the best way to learn something new.
Conceptual Progress:
-
I realized that while brainstorming is crucial, having a clear key concept and avoiding over-planning were effective strategies for staying creative and adaptable. This was especially evident in the first assignment, where I had planned out every detail. However, the final workpiece felt out of context and random. So, if I could grasp the concept and allow myself to work within certain limitations, it might lead to better results than strictly following a detailed plan and feeling drained by the end.
TASK:
Start to consider what structural elements/information/content you will need for your webpage, and consider how you will distribute this material across your project's timelines, and also your overall journey of the semester.
Summarise your current understanding of these thought processes in a blog post ready for the next class
STRUCTURE ELEMENTS:
-
Header: a big strip across the top with a big heading, logo, and perhaps a tagline. This usually stays the same from one webpage to another
-
Primary menu navigation: organized list of links to other web pages, Navigation menus appear in page headers or sidebars across a website, allowing visitors to access the most useful pages quickly
-
Primary content.
-
Footer: the section of content at the very bottom of a web page
INFORMATION:
-
Text Content:
-
Artist statement
-
Strategies
-
Work statement
-
Work reflection
-
Overall insight: personal, technical, and conceptual progress
-
Images and Media:
-
Image of work that example for the points that i mention
-
Video of work / testing playing
CONTENT:
-
Content Types:
-
Artist information
-
Portfolio showcase
-
What kind of keywords do you want the user to associate with the aesthetics of your webpage?
- Professional
- Clean
- Purple - Blue - Paper color
-
Who do you think your target audience might be, and what will they understand about you and your work?
- Purpose / goals: Showcase my DMS1 works (Footprint, Wings and Moss Rose) and let people have a deep look at my artwork.
- My audience: anyone that interested in art and learning more about my process to getting a new insight from it
-
What features will your audience want to see in your final webpage design?
- * Website features are the many individual components that make a website easy to navigate, functional and valuable to users *
- Sticky navigation: which easy for the user to navigate, moving between each categories
- Scroll to Top Button: Button that allow the user after clicking return to the top of the page
HOMEWORK 11.1
OFFICIAL CONTENT​
​
ARTIST BIO
Ocean Nguyen Pham
“ A multidisciplinary artist and designer who takes pleasure in the act of creation. I'm an avid learner, constantly seeking new inspirations. With a robust design background, I consider myself both a dreamer and an explorer. This duality fuels my passion for fantasy, from intricate elements to romantic pastel colors. Moody themes are my forte, a reflection of the time I invest in writing and contemplation “
ASSIGNMENT 1 - VIDEO EDIT
(video)
This is a two minutes self-portrait digital video that I show my journey when come to Melbounre. I use the camera angle it’s mimic myself, which suggests the viewers join me and look through my eyes. It’s my one of very first assignment and this work it’s to mark my journey when i come here. Since this was the first time that i independently living on my own, there tons of chaos feeling happen. The emotion definitely showing through my seperated scene, where at the first part the scene just full of busy heart-racing scene, and the rest it’s the journey how to find out the way to deal with things
Brainstorm:I start the project with a well-defined brainstorming process, outlining the scenes and shots I visioned. I starting with making mind map based on the tasks questions, creating the whole key words to shape the aesthetic.
Working Process:I was recording the piano instrument when me and my friend played together to make a theme soundtrack become more personal. During filming, I welcome spontaneous ideas and allowed the 'going with the flow' mindset
Reflection: If i could do things differently, I would prioritise the aesthetics. Secondly would be more follow the outline that help me shape the project. Lastly it’s screenshot more carefully my working process. But overall, the work it’s a very personal experience reflection about my Melbourne journey.
ASSIGNMENT 2 - ICONS WEBPAGE
I have created a website to showcase a suite of digital art icons using a combination of HTML and CSS coding for the web interface. The visuals are meticulously crafted through Adobe Illustrator, drawing on a fairy aesthetic inspired by Monet's palette. The audio consists of personally recorded sounds, capturing my own hand movements combined with the soothing sound of water, resulting in a variety of calming audio elements. The target audience for my work is individuals who suffer from anxiety disorders. My personal motivation for this project stems from my desire to offer a gift to a friend with whom I no longer communicate. This work serves as a present for them. What makes this project special is the interactive of the icons; the illustrations change upon clicking.
Brainstorm: I created a suite of icons for an interactive app designed to soothe users through the sounds and colors of various creatures' wings. I noticed a common theme in all my ideas: the use of fairytale elements to provide a calming experience. Among these ideas, the butterfly shape resonated the most with the aesthetic I wanted to achieve.
Working Process:The working process had two main parts. The first involved illustration, which began with thumbnail sketches to brainstorm and visualize my design ideas. Once I had these initial concepts on paper, I scanned them into Illustrator. The second part focused on sound, where I combined sounds resembling the flow of water as background music and incorporated sounds synchronized with my hand movements to correspond with visual cues.
Reflection: When translating the chosen concept from an abstract idea into concrete visual designs, I initiated the process by brainstorming and sketching rough concepts. Personally, this is a crucial step for me as it helps shape my mindset. Once I had a few initial ideas, featuring vivid images and adjectives, it allowed me to add more detail by incorporating various elements into my work. If I had the opportunity to enhance my work, I would aim to make the sounds more distinct.
ASSIGNMENT 3 - 3D ENVIRONMENTAL
I created my very first 3D digital art environment using Unity within a 250x250-pixel space. This project serves as a visual representation of my emotional journey from obsession to recovery. The moody theme is conveyed through a carefully divided space, with two distinct parts that immerse viewers in my evolving emotions, transitioning from a cramped, dark space through the fog and ending with the light, outdoor freedom space. Background soundscapes, a central statue, and a fiery finale play crucial roles in shaping the viewer's experience. What excites me about this project is how I can reflect a very special transformative experience through a visual language. My creative process involved using my Blender skills and converting text to speech thanks to intelligent software
Brainstorm: Since working with 3d environments it’s really different that we need to put yourself in the user eyes and predict thousands of script how they will move and react. I’ve learnt that brainstorming to grasp the overall concept is crucial in finding the right elements for the project.
Working Process:
Working prototype it’s the step that i built the greybox and start testing it out by using gameplayer mode. I use that more often since i realize it’s an important step for me which i could make sure if i’m in the right direction or not.
Reflection: I realised that due to a lack of information about the final visual outcome, I had to change my work's concept and aesthetic multiple times, sometimes taking risky approaches. However, as I revisited my work, I retained the core idea but continued to grapple with the challenge of making it effective for players to understand
​
HOMEWORK 11.2
WIREFRAME EXPERIENCE
​
​After trying working on my freestyle wireframe, i recognize it doesn’t work really effectively. So i try to redraw a wireframe of 2 popular apps: Youtube and LinkedIn. That action helps me a lot since i have more idea to work on a phone wireframe, which more limited for the space.
Working on some first wireframe without reference and it's turned really freestyle and not in order. After learning how to create a column, i begin to make a really simple (boring) shape which i find effective to do web. At the same time, i keep working on my context cause the more I do, the more insights i have, the more things changed that different from the starting plan.
HOMEWORK 12.1
Working continously on wireframe and try to follow the grid-based layout, i find myself being more consistent. Even though it's seem simple, but overall my design look eye-pleasing based on the feedback i get from classmate.
Making icon on Figma
Learning how to share my work with others and getting feedback also the favourite part in the process.
HOMEWORK 12.2
FINAL TOUCH
​
My previous work is nearly complete, but I've received some feedback that I'm eager to address for further improvement:
-
Incorporating additional images and footage to give it the appearance of a comprehensive working portfolio.
-
As it's an assignment, Neroli has suggested that I include more detailed process work
BEFORE
BEFORE
AFTER
AFTER