Labels

Design Portfolio / Individual Portfolio


23.9.2024 - 23.12.2024 (Week 1 - Week 14)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Design Portfolio
Individual Portfolio

INSTRUCTION

Assignment Overview

As a final year design student, you are required to demonstrate design solution, through application and execution of design in digital portfolio projects. You are now required to build your presence in the digital world.
Your digital portfolio should be able to showcase all the work you have completed thus far and it could also include your current work-in-progress. You are strongly encouraged to include work description, introduction of your own self, your show reel and curriculum vitate (CV).

    1. Requirements
    To analyse data on social media or website utilizing given tools. To gauge engagement and flow of a site.

    2. Submission
    1. Digital portfolio link.
    2. Show reel (max. 120 seconds, no less than 5 works, end frame – name, number, email, portfolio link).
    3. Resume/CV
    4. Name card

    3. Ideation
    My major is UI/UX, so accordingly I decided that the format of my portfolio would be a website.
    To set the art direction for the website, I first created a new MIRO board and did some research.

    Fig.1: Mood Board

    Sample design images from several websites were collected to create a mood board. Since a website suitable for a portfolio is primarily showing artwork, the website design itself should be modest and simple in terms of decoration, with a low color count.

    Fig.2: Final Concept

    4. Selection of works for publication
    The work to be included on the portfolio site must be of high quality and demonstrate professionalism. Therefore, unconvincing or low quality work should be avoided.

    Fig.3: Itemization

    I first organized all of my all design works from sem 1 to sem 6 on the MIRO board as items. I then consulted with Ms. Anis to determine which works to adopt or not.

    Fig.4: Item Selection

    As a result, I decided to include several items, such as graphic work and games, while focusing mainly on UI/UX design works. It was also decided to include book design and advertising graphic design, which I designed as work outside of my university coursework.

    5. Designing
    Fig.5: Logo Designing Process

    Fig.6: Business Card Design

    In order to clearly establish the art direction visually, we first began the graphic design work. As requested, we need to create a business card, so we first create the logo needed for it. This is also essential for the website.

    6. Proposal
     
    Fig.7: Portfolio Proposal Document (Week 5)

    The proposal to be submitted in W5 provided direction for the website mock-up design, mood board, color scheme and fonts.

    7. Coding
    Fig.8: Coding Process

    The basic structure of the website is as follows;
    • index.html
      • profile.html
      • Works.html
        • 10 Individual Design Works Pages
      • Contact.html
    - Total 14 Pages

    In order to reduce coding time, I introduced jQuery 3.6.0 and created a modified template of the existing grid system.

    Fig.9: Pick-up Image

    Images were created so that the slider area at the top of index.html would display 5 pickup works.

    Fig.10: Index Page

    Fig.11: Profile Page

    Fig.12: Works Page

    Fig.13: Contact Page

    These are the four main pages. The screen capture did not capture the slider image of the index page, but it is actually implemented, so please see the working website.

    https://individual-portfolio-takhozumi.netlify.app/

    As my identity, I set the eye-catcher of the subpage to an orange processed photo of the city of Tokyo.

    Fig.14: Sample Page of Design Work 1

    Fig.15: Sample Page of Design Work 2

    A total of 10 pages were created to introduce individual works, including the two pages above. The main design is set in the eye-catcher, and the main content area includes;
    1. Involving which company or module (in Uni course) created the work
    2. What kind of project it is
    3. Images showing details of the design

    8. Other Materials
    I was looking to graduate soon, and had updated my cv in October for my job search, so I cited that.

     
    Fig.16: CV

    FINAL OUTCOME

    Digital Portfolio Website


    Graphic Design Works

    WEB Design, UI/UX Design Works

    Curriculum Vitae (CV)
     

    Business Card Design

    W5 Proposal
     

    REFLECTIONS

    Experiences
    During this project, I reorganized my previous work, designed the website, and did the coding. I also created a consistent design for the CV, business cards, and other tools related to the job change. The objective of the project I thought was focusing on preparing for job hunting after graduation. Therefore, utilizing tools and technologies I know as much as possible, such as design tools; Figma and Adobe Illustrator and coding skills.

    Observation
    I have been using printed portfolios and this was my first experience with creating a portfolio on a website. At first, I thought I would include a lot of interactive animation, but after doing some design research, I realized that the purpose of a portfolio site is to showcase your work in a way that is easy to understand. In order to make it easy for everyone to understand ≒ web accessibility, the site had to be responsive, and the fonts had to be slightly bold and large. The construction was designed to be simple, as the hiring manager may be an older person.

    Findings

    In addition to this digital portfolio assignment, the module had the task of planning the exhibition, which carried a very large amount of weight. To take a slightly meta perspective, this limited the amount of time that could be devoted to the design of the digital portfolio. So in order to design the website efficiently, I modified the existing grid system and used it for the code, which seemed to work surprisingly well. However, I feel that there is still room for improvement in the detailed design. The individual artwork pages are coded one by one, which does not take into account when the number of artworks increases in the future. To manage the pages efficiently, it'd be better to use a CMS system such as WordPress and post them as "posts". For this purpose, it would be better to design a CMS template instead of coding from scratch. I will take up the challenge next time I have the opportunity to update my portfolio website.

    Labels:

    Comments

    Post a Comment

    Popular Posts