Web UI/UX Personal Portfolio Website Project
For my main project in Web UI/UX this semester, I was tasked with creating a website prototype (of my choosing) in Figma. Since I'm graduating this semester and will be on the market to find work, I decided to go with a personal portfolio website.
Moodboard
The first task was to create a moodboard. We made a few different ones but ultimately I decided to go with the below vibe as it was the most generic and markets to a larger crowd.
Design System
Who will the website be for?
One of the exercises as part of this project, was to envision who would be using your website, why, and what would they want to see? I created a couple client personas which really helped me visualize later steps.
Site Map
User Flow
Now that I knew my target audience, I needed to figure out a flow to work on in Figma. Since this flow was a little simple, I decided to add a couple extra steps at the end, employing a contact page.
Scope Estimate
Now that I had the flow and general idea of what I was getting into, it was time to create a scope for how long the work would take. My scope was honestly a little spread out because I paced it based on the semester, the project could have been completed much faster than I originally anticipated.
First Iteration
I began by blocking out the different elements as simply as I could to get a general layout idea. Unfortunately, I didn't use frames when building this because I had no idea what I was doing in Figma, but it was still useful for creating the later iterations.
I started adding text and simple graphics, then realized my blunder and started over.
Finally, I watched more tutorials and figured out how to make components which made everything so much easier. Honestly building the site this way was way less monotonous than what I was doing previously.
In the end, I'm happy with the experience and I learned a lot. I have since launched my own website and this was very useful in helping me decide how I wanted it to look. If you're interested, you can check it out here.
Thanks for viewing!
