CU DM Portfolio – Online Portfolio Progress

This is the RKL3030MP Professional Practice Portfolio: Media Production development progress journal, which will be used to communicate the results of research and development for the self-branding and identity phase.

Below are the logs of each phase of this journal written and reported on weekly basis from 4th of January 2022.

1. Ideation

A portfolio is a dynamic, evolving collection of records that documents your achievements, talents, experiences, and characteristics. A portfolio includes samples of some of your best work, as well as information on your life experiences, values, and accomplishments. The personal information you provide in your portfolio can reveal a lot about a person’s qualities while also serving as a beneficial personal marketing tool (COFC, 2018).

My visibility and presence will undoubtedly improve if I have an online portfolio (a website). It will showcase my works in a professional manner. As a website can be indexed by search engines like Google, it will evaluate my online visibility & presence (Realism, 2014). The style, feel, and design of a website, as well as its functionality, would give my potential clients/employers an idea of what I can accomplish for them and why they should choose me.

To have a portfolio website, my plan is to revamp my current portfolio with my new self-branding and the concept of multiple skills (swiss army knife). To do so, I need to collect data and information from my current and previous portfolio and take them to the next level. rmation from my current and previous portfolio and take them to the next level.

For me, the main purpose for having an online portfolio presentation is to showcase my works which show the variety of my digital skills so that businesses and investors from the industry would become interested in hiring me for a more senior job or in investing in my ideas by visiting my portfolio.

Based on this goal, my website needs to feature:

• Brief information about myself
• My works (detailed Portfolio)
• My Resume
• How to reach me

And most importantly, it should have a CTA to my portfolio on its landing page where it encourages visitors to see my works.

The main art style and look & feel of the website should follow my branding art style – which is using the modern and trendy 3D looking illustrations in a dark theme.

As for the landing page, the idea is to feature my mascot highlighting my skills with a call to action to my portfolio page. This page should also give a brief information on myself – such as How I am, what is my expertise and why they should hire me or invest in my projects/ideas.

• My name (Schahryar Fekri + self-branding)
• My expertise (Digital designer & developer)
• Why I’m Unique / USP (I have multiple skills + 20 years experience)
• CTA (See my portfolio + contact me)

My portfolio website should also be simple, easy to read, and viewable to all screen sizes from desktop to mobile phone (responsive).

To make a stronger impression, my landing page should include more information and details about myself and my works, which will aid in the indexing of my website in search engines like Google, giving me a better chance of being discovered by people searching for designers like me on the internet using relevant keywords and hashtags.

As my branding, portfolio showcase and CTA have the main hierarchy on my site, this additional information could be placed below the fold of my site preventing the above the fold section being bombarded with unnecessary details.

2. Website Structure

To plan out my website content and presentation, I need to have a structure for it. Regarding my achievement and goals of having a portfolio website, I came up with the following sections to make my site easily navigable for users and especially for my target audience.

2.1 Sitemap

• Home (Brief intro + C2A + Art Direction)
• Portfolio (Categorised)
  – Work profile (pages)
  – Links to actual site/presentation
  – Links to Behance etc.
• CV / Resume
  – Web page
  – Downloadable PDF
  
• Contact
  – Contact details
  – Contact form
  

These sections will be available as a fixed menu bar on the top navigation bar of my site so it would be accessible all the time while browsing my website.

Works (Portfolio Artworks)

An ideal number of artworks for a portfolio would be 10-15 works. However it is a web-based portfolio, I can include a higher number than this, I will keep a maximum number of 15 works per each index page.

Here is the list of works I chose to include in my portfolio:

• Aromalab
• Planet Shop
• Gamescom
• Footballizer
• Takeo Angpao
• My Ear
• Fire Up Beer
• Body & Soul
• Quanta Game
• Paradiso
• KL Tourism
• Proton X70

3. Planning

My website would be the virtual face of my online representation and an important aspect of my marketing efforts for my self-branding. This is why the planning phase of any online project is so crucial. Before having my website planned, I need to consider the following matters (Interactive, 2021):

• Determining my goals – My website should have a clear picture of what I’m doing and shows what is the benefit of hiring me or investing in my ideas.
• My target audience – Which are digital companies to hire me for a full-time job / part-time freelance projects, or investors/sponsors who would like to invest in my ideas and projects.
• Plan for the content
• Develop based on the site structure and wireframes

Here is the plan for completing the portfolio website. As visible, the portfolio website will be completed by week 10. Here is a breakdown of tasks to be done by week 10:

• Documentation & Journal
• Site architecture (site)
• Research
• Art direction + Brand ID modification
• Development
• Copy modification / writing
• Content for portfolio / works

4. Design

When designing a website, there are a few factors that if considered, can considerably improve access and usability for my portfolio website. A well-crafted landing page and access statement will communicate my degree of dedication and describe my talents and abilities. I need to make the navigation straightforward and consistent. And also, I need to make sure that the colour contrast is good and it is connected to my style (DRC, 2020).

4.1 Low Fidelity Wireframes

Low-fidelity prototyping is a simple and quick technique to turn abstract design thoughts into physical and testable items. Lo-fi prototypes’ initial and most significant function is to check and test functionality rather than the product’s visual look (Babich, 2017).

To kick off the design phase, I started drawing the lo-fi prototype of the main pages for my portfolio website. Below are the low fidelity wireframes for the main pages including landing page, portfolio index page, portfolio artwork page and resume screen. The other inner pages will follow the layout of the portfolio artwork page.

4.2 High Fidelity

Since high-fidelity wireframes capture the entire look and feel of a website/product, they are critical for overviewing the final stages of visual design (Moqups 2021). Therefore, I created a hi-fi wireframe for my landing page to preview the general look & feel of my website.

5. Development

Creating and coding a website needs a plan and the necessary tools and skills to carry it out. Before starting the development phase, I need to decide on the following points (CBEC, 2021):

• Using a Website builder or coding it myself? [Decision: I will code it myself]
• Using WordPress template or custom HTML template? [Decision: WP, but with customisation]
• Choose a service or host it on my own domain? [Decision: My own domain]
• Which language to choose? [Decision: PHP]
• Which responsive framework should I use? [Decision: Bootstrap]

5.1 HTML and CSS Coding

After designing the site it’s now the time to convert the graphics to HTML and CSS codes so the website can be run on web browsers. Using Adobe Dreamweaver I have created the HTML templates and CSS files and made functions and template files for PHP as it will be the language for my website.

There are 8 master templates for the following pages:

• Landing Page
• Blog Index
• Blog Posts
• Photoblog Index
• Photoblog Posts
• Portfolio Index
• Portfolio Posts
• Resume
• Other Pages (About, Contact etc.)

5.2 Template Creation (Theme)

In order to run my website on a template based CMS so I can manage my content easily later, I have chosen to use WordPress (WP). WordPress is a PHP-based open-source content management system that works with MySQL or MariaDB databases. WordPress allows you make it simple to create websites and publish content online even without having technical knowledge of website development such as HTML and CSS (Muldoon, 2021).

The main reasons to use WordPress for me are that it is easy to use, it is completely customisable, it is SEO friendly and it is safe & secure (Wpbeginner, 2022).

To create WP templates, I chose to have an automatic WP theme creator known as Underscores. Underscores cuts down on the time it takes to create WordPress themes, and you don’t have to worry about code because Underscores works closely with the Automattic team and the Gutenberg editor (Wpcity, 2021).

Above is a snapshot of the created WP theme using Underscores.

6. Final Progress (Launch)

Having developed the site themes, pages, and compiled all portfolio works, I have my lecturer reviewed the site and commented on minor amendments such as typos. I have published the website on my personal domain URI at www.schah.online.

Here are the screenshots of final progress:

My portfolio website is now live at www.schah.online