Design Process

Every good frontend starts with design. I personally believe to create a good frontend you first have to spend time designing it. After you have a proper design you can start writing the code. therefore the first step is creating the design in Figma.

For that it’s important to look at what I want to display in the first place. I essentially want a dashboard that displays everything the backend returns. Since the emphasis in this documentation lies on the coding aspect I won’t go to deep into the designing process but using Figma specifically is helpful because it’s built for developers and it’s therefore very easy to later convert the design into code.

Anyways after putting some time into it I ended up with the following design:

Image 4.1

Note that not every component is necessarily going to be in the end product. For example I don’t really intend to add Account management for now but I’d rather have too much and just strip it away when coding it later than the other way around. (I also added a logo at the top).