top of page

Case Study:
Portfolio Design

April 2022

With my junior year in university coming to an end, I decided to give my portfolio an entire makeover. I have established an interest in a career in web development and design, and what better way to celebrate this discovery than to make myself a new portfolio?

 

My new design philosophy from here on out is to create designs and websites that celebrate our identities. Whether you’re an individual or business, I want to capture your character and story in my work.

matt-gross-9aCkSl6YcXg-unsplash.jpg

Skills

  • Planning

  • Development

  • Design

  • Graphic Design

Tools

  • Photoshop

  • Figma

  • Wix

  • Microsoft Word

Roles

  • Me (Solo-Project)

Problem

How do I create a design that not only captures my identity, but as a portfolio, also attracts the attention of recruiters and the public?

Previous Portfolio

There was nothing inherently "wrong" with my previous portfolio. However, I did not have a strong design mindset since I believed "a portfolio is better than no portfolio." What I needed at the time was something to serve as a portfolio, but now I want a portfolio that better represented me and my capabilities.

Screenshot 2023-03-19 131948.png

Why "no-code"?

I chose no code development for my website since I could create an immediate product. A portfolio serves to display personal works, so there’s very little technical need. With more time on my hands, I can focus on my design skills to create a more aesthetic product.

Brainstorming

For any design project, brainstorming is a necessary process. In addition, establishing a design mindset is important to stay consistent and achieve all client needs.

Here's a list of keywords to describe my website:

  • Modern

  • Artistic

  • Colorful + Bold 
     

And here's what I want the audience to feel:

  • Inspired

  • Surprised

  • Curiosity

​​

My design mindset:​

  • Create a portfolio to celebrate my identity and achievements

Inspiration/References

Inspiration Boards:

Brand Guidelines

The Brand Guidelines act as a set of rules throughout the design process. In addition, it allows all design elements to interact together and is available for immediate feedback and critique.

Process

Before beginning my website design, I needed to create a "brand" for myself to guide website assets. After establishing color palettes and fonts, I used Photoshop to create the following designs:

Linear_name.png
logo_vert.png
favicon2.png

Graphics + Assets

Then, I went ahead and made various graphics and assets in Procreate. You can find these assets used across my portfolio!

Challenges + Conclusions

There were several different challenges during the design and development stages of my portfolio. Concerning design, the color palette I chose was somewhat risky. The main colors were black and white with color bright rainbow accents. I feared the designs would be very "typical" or "plain" since it relied heavily on the accent colors to make it stand out. At the same time, an 8 color palette requires a lot of balancing. To add more variety to the whites and blacks, I included paper and dust textures for depth. In addition, I alternated the use of accent colors to reduce one color from being overwhelming. 

With this color palette, however, I was able to take advantage of a few design and psychological principles: 

  • Von Restorff Effect

  • Aesthetic Usability Effect

  • Miller's Law

​​

​During development, one con of using a no code platform is handling responsiveness. The GUI of Wix makes it difficult to gauge proper widths and sizing. Although this can be attributed to my lack of knowledge and user error, I decided to include "tests" on my other devices (desktop, laptop, mobile devices).

Overall, I am very happy with how my new portfolio turned out! It reflects my design journey and how much I have matured in my academic and professional career.

My next steps from here is to receive more feedback from my peers and mentors. Openly welcoming feedback in this manner is key to improvement and growth. Thus, the portfolio may have some minor changes that is not reflected in this report at the time it is written.

Brainstorming
Problem
Process
Conclusions
Introduction
bottom of page