Figma is your best friend
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.
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.
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.
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.
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.