Portfolio Website UI/UX Case Study

Project from : BNCC (Bina Nusantara Computer Club)

Year : 2021

This project is a part of BNCC (Bina Nusantara Computer Club) Learning and Training, UI/UX Course Final Project. BNCC is organization in Binus University that teaches about programming, UI/UX, and other IT related stuff in Binus University for people who curious and want to learn more about programming and IT related topics. Originally, I created this back in mid April until early June, but I forgot to upload this case study online so I upload it now.

Problem

After I studied UI/UX course for about 4–5 months, I have tasked with a final project to create my own personal portfolio website design. This project’s purpose is to evaluate my understanding about UI/UX and practical design training, and also this will be useful for when I applied for a job.

User and Audience

The user in this case are other UI/UX Course participant, and the teachers who teaches this course because this is for final project. In the future, the user is Human Resource Department or employer where I applied for job.

Role and Responsibility

In this project, I am the designer. My task is to designing wireframe, mockup, and the prototype’s interaction.

Scope and Constraints

To finish this project, there are some page requirements that I have to design. The list of pages that required was :

  • Homepage
  • About Page
  • Project Page
  • Project Detail Page

Process

Gathering Requirements

The first thing to do was briefing from the teachers about what we should do in this project. The briefing told that we should create our own portfolio website design as requirement to complete the UI/UX Course and get the certificate. This design will also be useful for the future when we apply jobs.

Websites for Inspiration

After the briefing, I start looking for design inspiration online. I also got some design inspiration from the teachers as well. I am looking for the simple design, and this websites I found mostly covered in black color, with white or yellow as secondary color.

Wireframe

After I got the idea from another websites, I began to create the wireframe for all the pages. The layout I used is to display how the webpage would look like, the position of every elements, etc. I used black and white colors with an image placeholder and regular font for this wireframe.

Defining Colors and Design Elements

After I done with the wireframe, I start picking colors to use and design elements. The main color to use is my favorite color, black. For the secondary color, after I search what color fit black, I decided to go yellow and white. For the design elements, I go with a circle for the profile picture, rectangle for projects, and triangle for next or previous arrow.

The Design

Homepage

The homepage, or landing page will contain various information that highlight all the contents of my websites. The first section contain my name, about me, my photo, and a button to download my CV. Originally, I intended to create a new page for About Me, but after gathering design inspiration, I decided that About Me could be fit into homepage, thus making the contents less. For the photo, I crop the original picture using Photoshop, and then for the background I create an oval shape and put it behind the cropped photo.

My Skills

The next section is about my skills. I create this section which contain the yellow and black bar next to the skill’s name to display my mastery over said skill. I also divided the skills into hard skill and soft skill.

Portfolio Section

After the skills section, next is the portfolio section. I put the 2 of the projects I choose in the middle, and below the pictures I create a more button to view more projects on the projects page. To include the title of the project, I create a rectangle and put it in the bottom of the image, and make it 60% transparent and then put the white text over it.

Footer

The last section of the homepage is footer. For the footer, I write a heading Get in Touch, and below the heading I use 3 icons to symbolize email, phone, and Instagram, and then I write the contact info next to each icons. On the right side, I write the content of the website to navigate to other page.

Portfolio Page

After the homepage, next is portfolio page where I placed my selected projects to display in the website. I write the heading “Portfolio”, and then I write 3 categories for all, web design and front-end design to separate the projects. After the categories, I placed the projects like in the homepage, image and then I used a rectangle above the image to display the text.

Project Page

After clicking at 1 of the projects in the portfolio page, you will be redirected to a new page detailing the chosen project. The first content is the “< Projects” text to go back to portfolio page. After that, I create a heading, and then a big rectangle to contain images, image’s number, also next and previous navigation button. Below the rectangle, I explained about the projects, tools or programming language I used in the development, and include a button to visit the website or view the case study if it was UI/UX design.

Conclusion

After some advice from the teachers, this project is finally finished. A few mistakes was made, including the content size was to big, and some color errors. For this project, this already meet the requirements mentioned at the briefing. For the design itself can always be improved, I go with simple black design here, for the next time I can use brighter color and make this design more colorful and use more icons than this design.

If you want to see the prototype, here is the link to the prototype. If you have any feedback or advice, feel free to comment below. Thank you!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store