Online Portfolio

-

My portfolio should be an organic, fluid, and evolving representation of my works and selfbranding. It should be the single most important vehicle I have for finding employment (Anderson, 2016). The tone of my portfolio should reflect the kind of work that I will be targeting to (Eisenman, 2011).

Since my preferred employment mode for my pathway is a full time job at a design agency or a design studio and I also would be open to any freelance design jobs on my free time, I would prepare and tailr my portfolio for the following target audiences.

My Target Audience

Based on my career pathway, I'm targeting:

  • Agencies and studios, which are looking to hire creative digital designer and offering self-development within the company so the designer can go up the career ladder to higher and more senior positions
  • Individuals and small businesses, who are looking for creative digital designer who can solve their issues through design and digital development

The reason I am targeting two groups is that so I can go through a variation of different issues and be able to create solutions in different situations while I'm developing my knowledge and creating connections by knowing people from different industries.

Considering my target audience, my online portfolio needs to be focused on companies (agencies and design studios) as well as individuals who looking for digital freelance designer and it should highlight my skills and abailities for doing creative digital designs.

My portfolio should contain the following content sections:

  • An Intro / About page which gives a brief description about myself and my digital design skills and experiences. This page can be combined with the landing (home) page so the visitors can get these information once they landed to my online portfolio.
  • A Portfolio section, which showcases a collection of my work samples, their styles, details and outcomes. Each work can have a page for itself with more details and visual and the pages can be featured in and crossed linked to each other.
  • Contact info where people can get details on how to reach me in the case they want to hire me.

Here is the sitemap (page sections and its breakdown list) needed for my online portfolio:

Following my selfbranding meaning, my portfolio needs to have the same theme and message. As a website's design area is wider and can contain motion graphics, my online portfolio can narrate my story and its message visually. Below is a wireframe of the general layout of my portfolio.

The above layout is in standard web format of 1920 x 1080 pixels. It has a sidebar containing navigations and a content area. My logo (branding) will be place on top-left side of the page and the heading of each section will be on the top of the content are. The sidebar background can be filled with motion graphics (GIF / HTML5 animations) to highlight my story which will be talking about my philosophy for my career path, my skills and the functionally of my abilities.

Website Wireframe

Here is a wireframe for for portolio website. In order to push usability to the forefront in my website page layouts at their core, I did the above wireframe forming my online portoflio structure and layout. Will will also help make the design process iterative (Climer, 2020). The visual design will be based on this wireframe.

Visual Design

The design and the look & feel based on the above skeletal framework will be looking like the following layout design:

As mentioned, the sidebar on the right hand side can represent animation to personality, my interest or skills regarding my selfbranding rationale/philosophy - For instance, a construction tool like a crane can stack the blocks together to make a part of a building - these blocks are basically my logos which can form any structure (building) when they are used together.

In terms of the user-interface and navigation wise, the user journey considered in this design (assuming my users are mostly businesses and agencies) is to get to the point easiyl, meaning I keep the main characteristics for the UI simple, clear and consistent (Laurinaviscius, 2020).

Feedback & Comments

Here are some comments and feedback from the lecturer on the layout to improve the visual and functionality of the website.


After taking the comments and applying the improvement, here is the latest revision of the portfolio website's design structure.

Elements Design

To make the website's visual more communicating with the user, there will be some animated elements on the sidebar which are related to the page's topic. Here are these elements.



Here are the relations of these elements: Blocks for Home page, Retro phone for Contact page and Plant Seedlings for Resume.

In order to make the site visually more appealing for web users, Greater and enhanced options for interactivity, more visual impact to get messaging across in an already-busy arena, light in filesize, better browser and mobile compatibility and support for showing animation (Tomkins, 2018), the site needs to be coded in HTML5 technology.

Development

Using Adobe Dreamweaver and Adobe Animate to code the HTML/CSS part and design the elements animation.




Online Portfolio Website Link

References

  • Anderson, D., 2016, Stand out. San Francisco, California: Peachpit Press.

  • Eisenman, S., 2011, Building design portfolios. Gloucester, Mass.: Rockport Publishers.

  • Climer, S., 2020, What Is a Wireframe? 7 Reasons Why Wireframing Is Important In Web Design. [online] Orbit Meida Studios. Available at: [Accessed on 11 Nov 2020]

  • Laurinavicius, T., 2020, Web page layout: website anatomy every designer needs to learn. [online] WebFlow. Available at: [Accessed on 11 Nov 2020]

  • Tomkins, M., 2018, The benefits of HTML5 animated adverts. [online] Aubergine. Available at: [Accessed on 11 Nov 2020]

Comments

Post a Comment

Popular posts from this blog

Weekly Journal Blog

-
Image
Week 1 [29 July 2020] RKL Digital-Media Professional Experience first class session on Wednesday, 29th July 2020. This class will help students to gain experience professionally during their studying in order to find their career path, handle freelance projects and be able to start their own business in future. As the first step, we as students need to know our personality and be able to spot and list down our weaknesses and strengths. I did a Big 5 and (Truity 2020) a 16 personalities test (16 Personalities) online and here are the results: Big 5 Test 16 Personalities Test Weaknesses: As for my weaknesses and my strenghts I have done a quick study and reading on how to spot your weaknesses and managed to spot some of mine: Being Lazy Being Slow Overthinking Looking for shortcuts rather than finding a proper way Doing less documentation No good drawing skills Weakness in animation Weakness in 3D modelling and design Test anxiety Sterngths UX desig
Read more

Work Placement [Week 1] - Graphic Design for EA FIFA Game

-
Image
FIFA franchise game, developed by Electronic Art (EA) sis the most famous football video-game in the market. EA offers some jobs as part-time / freelance for developing the FIFA game. One of these freelance jobs are graphic design jobs for preparing the images and graphics for in-game contents. This job is usually offered on their microsite called EA Talent Scout. By applying the job you will need to pass a test and get qualified for the job which is done online. The test will assign you some graphic design and image editing tasks. After applying and passing the test I got qualified for the job and received the contract to sign. Then the first batch of the job was arrived for graphic editing. The first batch contains 60 pictures of football players. I need to crop out images, edit the photo quality, prepare them for in-game 3d object faces and card items. below is the outcome example: Challenges Photo editing and graphic design preparation for a game like
Read more

Work Placement - Personal Reflection

-
I have worked for two different clients throughout this work placement experience practice. Both of these clients are not based in Malaysia (one of them is in Singapore and the other one in Germany) These companies were looking for freelancers to outsource their design jobs. My roles were to design and come up with a solution for their assigned tasks. As for the first client, the Electronic Arts GmbH, my role was to edit, retouch and prepare raw images and photos for their FIFA video-game's in-game graphic data. I found this job online at EA's account on twitter. My skills, the industry knowledge I had from my past experience and the passion I have for gaming (Williams, 2008) have helped me to pass the job application test and get the job. I was working for them as a graphic designer and photo editor within their Data and Graphics team which has over 30 team members. As for the second client, I was in charge of designing and rebranding their company's identity. I got t
Read more