portfolio website assignment progress
1. Brainstorming and concept ideas
To start with the portfolio website, I hope it could have a concept idea behind the portfolio website so it could have a special meaning behind it. As I mentioned before, each project is like storytelling to me, thus, I wanted this portfolio website to have a story behind it.
However, before getting started with the concept ideas, I asked myself who I want to be in the future? What is the possible future pathway for the job I’ve chosen? And, who is my target audience that I would like to show my portfolio to? Therefore, I did some research on the doubts and questions :
who I want to be in the future / what do I want to do in the future :
I wanted to be a creative director or the co-founder of a design house, hoping to lead a group of members to create stunning projects. “Sometimes reality is cruel, but that reality is what keeps you strong”, said Kurosora. I knew if I wanted to be a creative director or a boss of a design house, I must learn from the basics too, as in working started from a basic position. Therefore, I told myself I must strike my goals step by step, starting from a junior graphic and digital media designer. I’ve come across a video which I found interesting and totally agreed with it. It was a university student giving a speech on graduation day. His speech was titled “No regrets in the 16th second”. His message was the need to focus on the relationships that matter in our lives because, without those connections, celebratory moments have less meaning. Everything in our lives must have a balance even if we wanted to achieve our goals. What I understand from life is that It’s not only about achieving our goals in career, but what matters is also the life balance. In the meantime we achieve our goals, we must not neglect the life balance, as in our relationship between people, family, and friends.
What is the possible future pathway for the job I’ve chosen :
Being a designer leads you jobs, companies, and places you never expected (Sara Mazzoni, 2019). The job of a graphic or digital media designer will never stop evolving and improving. It can be added value to any workplace, but not just a design studio or agencies. It is something that no business can live without. (Sara Mazzoni, 2019). If agencies do not suit me as well, I can venture into other designing position, maybe editorial designer? or UX designer and many more. A graphic or digital media design career will enhance our problem-solving skills, as in we not only doing design jobs but meanwhile considering how is this design will solve a problem? (Sara Mazzoni, 2019). And this actually boosts our skills more than we realized. Well, I’m interested in design thinking, as in be the concept idea thinkers or managing the project. Ranging from the ideas concept of a project until the execution of the project. It is actually called “design thinking”. Design Thinking provides a solution-based approach to solving problems. It is not only an exclusive property for designers, but it is applicable in literature, art, music, science, engineering, and business. It is useful in tackling problems that are unknown by reframing the problem to find a solution. (YU SIANG TEO, 2020). It requires lots of brainstorming sessions. Ranging from sketching, prototyping, testing, and trying out concepts and ideas, to come out with the best solution or idea.
Thinking outside the box can provide an innovative solution to problems. Therefore, there is a job position called “creative director”. This position mainly is to help figure out how the work will live in the world, that is, how real people will experience the campaign. In the meantime, sort out a creative idea or execution, being out of the box. These are what we should expect from a creative director. (John Kovacevich, 2015)
who are my target audience that I would like to show my portfolio to :
a) Companies
- branding/idea design houses
- target may expand to agencies
b) individuals
- people who are passion in branding/concept idea design
- people who hope to see more fresh ideas
1.1 portfolio website concept ideas mind mapping
Before getting started with the concept ideas behind the portfolio website, I planned to take this portfolio website as a collaboration work with my self-branding. It is because this is like a working place that represents me and produces works. Therefore, it would be showing as
“ CHAO, x This portfolio website concept name”. To make this website represent my story, I’ve made a brainstorming session for myself using mind mapping.
1.2 portfolio website progress (the idea & rationale)
After having the rough idea of the concept, I summarized it and gave a name to it ----- “PIMPLE REVOLUTION”. The idea was every young designer has gone through an unhealthy routine by having sleepless nights to finish the assignments or projects. This caused the birth of pimples. People may not fully understand how pimples can affect more than only your skin. It impacts your entire life in genuine ways; it influences your self-esteem and emotional stress.
The individual with pimples might feel uncomfortable or embarrassed might even lead us to feel a sense of guilt or shame as if you are somehow responsible for your pimple. However, I don’t feel shame as the way people feel, and I’m aware every pimple in my face depicts my focused efforts and struggle for consistent work while sticking to my initial vision to be recognized as one of the ICON. My pimple revolutionizes who I am as a future designer.
The pimple on my face means something different to me. As in how much effort and struggles I have in my works as well as how many sleepless nights that gave birth to the pimples. It’s like a never-ending revolution between pimples and works. Therefore, by using different stages of pimples to represent the level of struggles between works and pimples. From the first stage of pimples, “whiteheads” until the worst stage of pimples “nodules”. Each stage shows the pimples amount, stress, and efforts I have gone through while working on projects.
Deeper, pimples also represent my principle or perspective on design and life. As everyone knows, a pimple face has an uneven surface of the skin, it just like our lives that is “not smooth” at all. There are ups and downs with each kind of story behind. We may not have a perfect life that is without obstacles, but we can do our best to make our lives full of different stories and goals. The pimples just like my every kind of stories on design and life. I take design as my storytelling way. Instead of just designing, each concept and design is storytelling of myself.
And this is how “CHAO, x PIMPLE REVOLUTION” worked together as a brand of myself. A never-ending story “CHAO,” and her portfolio website concept “PIMPLE REVOLUTION”.
1.3 portfolio website progress (execution software)
After having the whole concept idea of the portfolio website, we are required to think about what platform we should use to do our portfolio website prototype. I’ve chosen to use wix to execute my portfolio website and add on some extra elements to make the website more interesting.
Platform:
- Wix
Extra ideas on execution:
- insert some simple animation to let the website looks more fun
- insert branding elements illustrations
- interesting layouts that relevant to my portfolio website concept idea
1.4 Art direction references
___________________________________________________________________________________________
2. Portfolio
To start with website design, I planned and decided to finish the portfolio part first so that it is arranged according to what I wanted . It is better to categorize our portfolio which one we wanted the audience to see first. This is because the audience might be some designers, hiring manager or creative directors, so it is important to decide which portfolio we hope to let them preview first.
2.1 portfolio (category structure)
First, I preview my projects that have been done in the past few months. I rearranged it according to the types of projects, as in branding, campaign or many more. Then I categorized all the portfolios based on the pimple stages, which is from the most severe nodules, followed by pustules, papules, blackheads and the beginning stage of pimples, whiteheads.
Portfolio types:
- missing (conceptual awareness campaign)
- pimple revolution (conceptual self-branding)
- naked (conceptual self-manifesto publication)
- shooting star (branding)
- naga ddb (conceptual CNY campaign)
- eagg (branding)
- monsterbin (campaign)
- manglish (web design)
- just sleepy poker cards (conceptual illustration)
- shoot the alien (interactive game)
2.2 progression
After confirming with the portfolio I decided to put on the website, I started to proceed with the layouts and mockups as well as the writings and visual presentation of each portfolio.
a) progression - shoot the alien (interactive game)
b) progression - just sleepy poker cards (conceptual illustration)
c) progression - manglish (web design)
d) progression - monsterbin (campaign)
e) progression - eagg (branding)
f) progression - naga ddb (conceptual CNY campaign)
g) progression - shooting star (branding)
h) progression - naked (conceptual self-manifesto publication)
i) progression - pimple revolution (conceptual self-branding)
j) progression - missing (conceptual awareness campaign)
2.3 final outcome
a) final putcome - shoot the alien (interactive game)
b) final outcome - just sleepy poker cards (conceptual illustration)
c) final outcome - manglish (web design)
d) final outcome - monsterbin (campaign)
Monsterbin
e) final outcome - eagg (branding)
eagg
f) final outcome - naga ddb (conceptual CNY campaign)
nagaddb
h) final outcome - naked (conceptual self-manifesto publication)
i) final outcome - pimple revolution (conceptual self-branding)
j) final outcome - missing (conceptual awareness campaign)
___________________________________________________________________________________________
3. Portfolio Web Design
3.3 layout design progress (wireframe in digital)
3.4 progression
After done with the portfolio mockups and writings. I started to execute the portfolio website
layout and design. It is indeed a fun process where I try out a few gif animations. It makes me
feel like having fun while doing the website design.
layout and design. It is indeed a fun process where I try out a few gif animations. It makes me
feel like having fun while doing the website design.
3.1 layout design progress (content structure)
Before I kick start with the layout design of the portfolio website, I plan the content structure of
the website. It is to show how many pages and content will be inserted into the website.
the website. It is to show how many pages and content will be inserted into the website.
Portfolio website structure :
- welcome page
- homepage
- portfolio > categories > portfolios
- resume
- contact
- story behind
However, after the second of brainstorming, I felt it will be more fun to have names that match
with the concept idea. Therefore, I did another version of the portfolio website pages title.
with the concept idea. Therefore, I did another version of the portfolio website pages title.
Portfolio website structure (improved) :
- welcome page
- homepage | pimple revolution
- portfolio | pimple creation > categories > portfolios
- resume
- contact | pimple team
- story behind pimple revolution
After knowing what to put in the website, I did some research and extra readings on the tips to
make a better portfolio website.
Tips on creating a good portfolio website:
a) Bake our personality in the design
The goal of the website is to show both our professional and deeply personal. (Nick Babich, 2019)
Therefore it is important to show our style or strength in the design.
b) Make our contact information prominent (Nick Babich, 2019
Our contact information is the most critical elements of our design. Therefore it is important to
make sure the visitors can reach us easily. Thus, we need to state our contact information
clearly such as email, or contact number.
c) Show who is our clients (Brealey, 2017)
It catches audience's eyes when they saw some collaboration. Thus, it is significant to show
who we worked with before. Or if it's a branded agencies or companies, it will add weights to
our impressions and skills.
After knowing what to put in the website, I did some research and extra readings on the tips to
make a better portfolio website.
Tips on creating a good portfolio website:
a) Bake our personality in the design
The goal of the website is to show both our professional and deeply personal. (Nick Babich, 2019)
Therefore it is important to show our style or strength in the design.
b) Make our contact information prominent (Nick Babich, 2019
Our contact information is the most critical elements of our design. Therefore it is important to
make sure the visitors can reach us easily. Thus, we need to state our contact information
clearly such as email, or contact number.
c) Show who is our clients (Brealey, 2017)
It catches audience's eyes when they saw some collaboration. Thus, it is significant to show
who we worked with before. Or if it's a branded agencies or companies, it will add weights to
our impressions and skills.
3.2 layout design progress (sketches)
The structure of the portfolio website was done. Hence, I started with the sketches of how the
portfolio website will look like. During the process, it was quite challenging for me to design a
layout match with the concept of my portfolio website. However, I managed to make it what I wanted.
portfolio website will look like. During the process, it was quite challenging for me to design a
layout match with the concept of my portfolio website. However, I managed to make it what I wanted.
3.3 layout design progress (wireframe in digital)
After having some ideas on the layout design, I’ve made a wireframe of the website to show the
lecturer how the portfolio website roughly will look like. Lecturer commented that it is good and
can continue to develop the design.
lecturer how the portfolio website roughly will look like. Lecturer commented that it is good and
can continue to develop the design.
3.4 progression
Before executing the homepage, I have an idea which is to insert a welcome pop up page for the audience, it will be an animated gif. The purpose is to surprise the audience, as the audience always loves to see moving things.
a) welcome page :
During the execution, I experiment with the animation gif, draw frame by frame to make the animated gif works. It was indeed a fun process when I saw all the graphics become alive. Meanwhile, the audience can press the enter button to enter the main page of the portfolio website.
figure 1: the illustrations animation frame by frame
b) home page :
After I was done with the welcome page, I decided to execute the home page of the portfolio website. However, I felt if it’s just an image on the homepage it would not be interesting. Thus, I planned to make another gif animation to insert on the homepage too. Instead of just putting animation gifs, I insert some interactive elements to have interactions with the audience. I used to think pimples will pop one day, hence, I decided to make some pimples animations to put on the homepage and it will show something different when the audience mouse over the pimples. This is the part where I planned to have interaction.
figure 2: the homepage animation frame by frame
figure 3: the pimples interactive elements animation frame by frame
figure 4: the outcome of homepage
However, when I showed this outcome to the lecturer, the lecturer commented that the menu bar was too small to press. Therefore, I’ve made some corrections to improve the whole outcome of the homepage.
figure 5: the outcome of homepage after improvement
c) pimple creation (portfolio category page) :
I continue to develop the portfolio page. According to my concept idea, I have a category page which only showcases the categories of each project. It will link to portfolio stages when pressing each categories link. From there, the audience will be able to choose which portfolio to see. The idea of the layout design of the portfolio category page is based on the concept of pimples affected area. Pimples always popped up anywhere without a neat arrangement, hence, the portfolio category page is like the pimples are placed at different areas without a specific arrangement. Meanwhile, to make the website more fun, I inserted some animation gif for lively purpose.
figure 6: experimenting with the layout of portfolio category page
figure 7,8: after select a category from the category page,
it jump to the portfolio thumbnails page
figure 9: after select a portfolio to view,
it will jump to the portfolio details page to review
d) resume page :
It is necessary to insert our resume into the portfolio website. Therefore, I did some experimenting with the layout of the resume page, as in how to put it to best fit the user eye view. Lecturer did mention the resume should be placed properly, which means it should be cut nicely even if we can’t view the whole page at the same time.
figure 10, 11: resume page after improvements
e) the pimple team (contact) :
In the contact page, it is a bonus if we insert a form where the audience could directly send us a message. Therefore, while having the execution of the layout, I inserted a contact form box to let the audience can immediately fill up the details and messages. Meanwhile, to avoid the page looking too boring, I did another animation gif to put in the page. 2 blogger icon was inserted into the contact page too, which is to have a direct link to blogger journal posts.
figure 12: progress of contact page
figure 13: animation illustrations frame by frame
figure 14: outcome of contact page
f) the story behind pimple revolution :
After done with all the pages, I felt it is a need to let the audience know the concept and story behind the website. How it is formed and what is the concept behind. Therefore, I created an extra page which describes the story behind the concept ---- pimple revolution, hoping to inspire the audience and know more about me.
figure 15: outcome of story behind pimple revolution
3.5 final outcome
After done with the layouts and design, I felt it’s another achievement or another storytelling to
me. From 0 until the website was done, it was full of effort and hard work. The result came out
with what I proposed to the lecturer in the beginning. I’ve succeeded on the portfolio website,
and did the parts that I intend do. Therefore, I learned something again from the process, which
is, there’s nothing impossible. Things can be possible if we choose to put in more efforts.
me. From 0 until the website was done, it was full of effort and hard work. The result came out
with what I proposed to the lecturer in the beginning. I’ve succeeded on the portfolio website,
and did the parts that I intend do. Therefore, I learned something again from the process, which
is, there’s nothing impossible. Things can be possible if we choose to put in more efforts.
Here is the final outcome of the portfolio web design :
___________________________________________________________________________________________
References
YU SIANG TEO, 2020. What Is Design Thinking And Why Is It So Popular?. [online] The Interaction Design Foundation. Available at: <https://www.interaction-design.org/literature/article/what-is-design-thinking-and-why-is-it-so-popular> [Accessed 6 May 2020].
John Kovacevich, 2015. 12 Things You Should Expect From A Creative Director. [online] Medium. Available at: <https://medium.com/@JohnKovacevich/12-things-you-should-expect-from-a-creative-director-e82711528b1f> [Accessed 20 April 2020].
Sara Mazzoni, 2019. The Ultimate Graphic Design Career Guide (Career Paths Included). [online] Shillington Design Blog. Available at: <https://www.shillingtoneducation.com/blog/graphic-design-career/> [Accessed 11 May 2020].
Brealey, J. (2017). 10 tips for building a killer portfolio website. [online] Creative Bloq. Available at: https://www.creativebloq.com/portfolios/tips-portfolio-website-4137460. [Accessed 3 May 2020].
Nick Babich, 2019. 12 Essential Tips To Making Your Portfolio Website Stand Out - Elementor. [online] Elementor Blog. Available at: <https://elementor.com/blog/portfolio-website/> [Accessed 11 May 2020].
Sara Mazzoni, 2019. The Ultimate Graphic Design Career Guide (Career Paths Included). [online] Shillington Design Blog. Available at: <https://www.shillingtoneducation.com/blog/graphic-design-career/> [Accessed 11 May 2020].
Brealey, J. (2017). 10 tips for building a killer portfolio website. [online] Creative Bloq. Available at: https://www.creativebloq.com/portfolios/tips-portfolio-website-4137460. [Accessed 3 May 2020].
Nick Babich, 2019. 12 Essential Tips To Making Your Portfolio Website Stand Out - Elementor. [online] Elementor Blog. Available at: <https://elementor.com/blog/portfolio-website/> [Accessed 11 May 2020].
Comments
Post a Comment