Introduction

Before creating my Promoes website, I wanted to get an idea of how the website will look like so I decided to use Figma for designing and prototyping even though I have zero experience with the it.

Timeline

2022-04-19

I tried diving into creating a mockup right away but quickly got stuck at the navbar. I was not able to figure out how to properly prototype a navbar button while using it as a component. Thankfully, I came across a great Figma Community File made by Crystal Tong that demonstrates the concept of Interactive Components, Auto Layout, and Variants in Figma design.

2022-04-20

Using what I have learned, I started recreating the mockup from scratch again. This time, I am starting with basic components. So far, I have created a color palette and link it with Color Styles. I also started creating a basic set of icons that will be used throughout the website.

2022-04-21

I was able to pick up the pace and created components for the navbar, the footer, the logo, buttons, cards, and tags. Using all of these, I created a working prototype of the home page. I am proceeding onward to create the project page by creating a general design of the page.

2022-04-22

I finished creating the project page with a paginated project cards and search bar. Honestly, most of my time was spent on creating a tile pattern for the background in Figma. Unfortunately, the tiles in Figma were two pixels off, which became apparent when all of them were arranged together. In the end, I used MS Paint to stack and make all the minor adjustments for the background.

2022-04-23

I recreated and reorganized the website layouts to be more modular. In addition, I added variants for dark and light modes. I later finished the page for blogs and tried to make recreate the pagination system in Figma but came across a bug that would not let me prototype more than 3 state changes for nested component. I decided revisit this when I have more time and continued onward by creating a page for posts.

2022-04-24

I used the same post component for about page since I wanted it to be configurable using Markdown format. With that, the mockup is completed. Although there are some items that I will revisit in the future, I wanted to get started with creating the website and fix them along the way.

Promoes Mockup