Portfolio Design

See for yourself. This site explained

UX Design

HTML

CSS

JavaScript

Astro

Figma Wireframe
  • Time table 4 months
  • Role UX Design / Web Developer
  • Platform Web

Introduction

Yes, I know it is very meta to make a UX case study about my own UX portfolio, but this project of mine has been a great learning opportunity for myself. There are several techniques used across this website that could be put to good use in other UX and web projects, so I believe it deserves a deeper dive.

Most everything you see on this site was made by me with just code, and every detail has been mulled over to great lengths. I believe this to be my most wide-ranging project to date and great testament to my cross-functional skillset across UX, UI, and graphic design, and general comprehension of development.

Purpose and Intent

This project possibly serves the greatest purpose of any of my projects: that is to present my work, skills, and professional capabilities to a wide range of prospective eyes–ranging from employers to peers to potential industry connections. Therefor, it was vital that this form of self branding and promotion be true to my aesthetics, passions, and never-ending pursuit towards personal and professional growth.

Previously, my portfolio was hosted and built through Wix, but site builders always felt half-hearted in self expression; always somewhere between prefab templates and one-size-fits-some designs. We are designers working alongside very talented developers, shouldn't we at least know how the sausage is made?

Research and Learning

As I previously alluded to, I was not opting for a site builder this time around. However, this presented me with quite the hurdle to overcome. I had some knowledge of simple HTML and CSS from college, but I was not confident in my ability to realize my vision for this portfolio website with what I already knew. This meant I had to refresh myself on these languages and their recent changes, then meticulously solve for the logistics of every design element. This meant interaction, responsiveness, accessibility, and more.

Learning from the Other Side

Despite how closely the roles of designers and developers intertwine, there doesn't seem to be much of an importance placed of understanding one another. It would benefit designers to understand how UI components are crafted, how layouts are made responsive, or the ins and outs of accessibility guidelines. At the very least, knowing what a rem is wouldn't hurt.

Designers who master this relationship become known as DX designers, or developer experience designer (everything needs an X, it's much cooler that way). But a little bit of DX can go a long way in making me a better designer.

Design System

Typography

Layout

Projecting Personality

Homepage

Images

Page Transitions

Case Study Hero Sections

Color Themes

Accessibility

Semantic HTML

Color

Testing with a Screen Reader