Figma is your best friend

Hello Reader!

Months ago, I created my portfolio using React, CSS, HTML, and AWS.

I thought the design was brilliant, and I loved it at the time. However, I’ve come to outgrow it and I’m not entirely happy with it.

picture of my outdated, dumb looking portfolio. It is dumb because I squished too many cool CSS elements into this website without thinking about how I could deliver a crazy cool experience WHILE implementing CSS.

I didn’t know anything/really think about the user experience and design, all I wanted to do was create, as the kids say, “bomb AF” CSS stuff.

Upon realizing how important UI/UX is, I’ve redesigned my website! I used Figma to make my ideas come true and I used Codepen and Coolors.co for inspiration.

On Figma, there are a couple things you have to keep in mind:

• The top navbar is for cursor events (orange). If you want to create a new desktop sized board/create a frame, a new shape, drop an image, create a text or make a comment, always report to the navbar!
• The column on the left (blue) keeps track of all your shapes, layers and groupings. Each item that is on a frame it keeps track of!
• The column on the right (yellow) allows for element manipulation. First you go to the navbar and create a square, the square item is logged in the column on the left and the column on the right lets you create rounded edges, a layered blur effect, change the color, etc.

Mood Board

Create a mood board! A moodboard is a board which encapsulates an entire theme. Here, you can see my color palette and I found photos that matched my color palette.

I created this mood board and found pictures that matched my colors!

First, I created my desktop frame using the frame icon on the navbar. Next, I went to Unsplash and Coolors and found images that matched my color palette. Lastly, I found text that I thought was cool, that could match my theme.

Next, I created/added images to another frame I created. These images encapsulated the mood I want for my site. I continued to find photos that I liked that matched the colors, and a theme started to formulate. Obviously, I’ve concluded that I am going for a cyberpunk themed website.

all the photos I’ve come to love on Unsplash!

I continued my Cyberpunk research by going onto Codepen, Pinterest, Tumblr, etc.

This is something that I concluded that works with me, my vision and my overall theme.

This blog is to highlight how important it is to have something cohesive on your sites that you build. A design makes so much sense and gives the user an amazing experience.

Happy hacking!

-Crystal