This case study is my way of teaching myself how to use Figma by redesigning my portfolio website. I built on the skeleton of what I have already made through Cargo. I’m continuing to learn more and more about web development and UI/UX design, so this was my first real foray into playing with wireframing in a more polished environment, rather than just through basic sketches.
I started with basic sketches, though I didn’t expand the sketches directly into Figma at first. I’m often the type of person to go back and forth between media, tweaking this and that until I can refine and iterate in one program.
Experimenting with Figma was exciting. The program was fairly intuitive to me, having used Adobe’s design products for years at this point. I utilized Figma’s built-in tutorials and Youtube tutorials to learn about the tools and usage of components and styles. I also explored the prototype function, concluding that I have a lot of learning to do on that front. Still, I managed to do some basic linking of pages and screens and create a few small hover animations.
In terms of the design, I kept it very similar to my previous website design. I wanted to emphasize my publication design skills as well as my skills working outside of print and learning new things. Until I gain the know-how to completely code my own website, which I am currently working on, I’m sticking with using Cargo to host and design my portfolio. I started on a landing page with the aforementioned hover and quickly realized that I have no idea how to implement such a thing (yet!). Therefore, I continued in Figma to create instead some designs that kept it simple enough to fit with the functions of Cargo.
Finally, I implemented the design and tweaked some elements to end up with what you see here today.
I started with basic sketches, though I didn’t expand the sketches directly into Figma at first. I’m often the type of person to go back and forth between media, tweaking this and that until I can refine and iterate in one program.
Experimenting with Figma was exciting. The program was fairly intuitive to me, having used Adobe’s design products for years at this point. I utilized Figma’s built-in tutorials and Youtube tutorials to learn about the tools and usage of components and styles. I also explored the prototype function, concluding that I have a lot of learning to do on that front. Still, I managed to do some basic linking of pages and screens and create a few small hover animations.
In terms of the design, I kept it very similar to my previous website design. I wanted to emphasize my publication design skills as well as my skills working outside of print and learning new things. Until I gain the know-how to completely code my own website, which I am currently working on, I’m sticking with using Cargo to host and design my portfolio. I started on a landing page with the aforementioned hover and quickly realized that I have no idea how to implement such a thing (yet!). Therefore, I continued in Figma to create instead some designs that kept it simple enough to fit with the functions of Cargo.
Finally, I implemented the design and tweaked some elements to end up with what you see here today.