Feb 2022–March 2022
A picture of a young woman pointing at the website’s welcome message, which subconsciously suggests reading it.
A mockup of a laptop with the open app on it.
Clean and fresh look with nice shapes in the background.
Another picture of a young and smiling woman, by which we resonate with the website more, as photos of real people give the human feel.
Cut-outs from the app, which demonstrates what it has to offer.
Big picture of the dashboard with cut-outs once again.
A lot of whitespace and subtle shadows with a nice, clean, and fresh look.
By defining a colour system, I ensured I have a controlled and consolidated palette of colors, so everything is maintainable.
I went with the HSL colour models to get the exact tints and shades of the main colours. For time-saving purposes, I used a Figma plugin called “Color scale generator” to generate them.
I scaled colour names between 0 and 900 based on HSL’s lightness.
To reduce the cognitive load, enhance decision-making speed, and make it easier to maintain the colour system, I limited tint and shade quantity from 10 to a maximum 5.
These are the colors that are most frequently used across my UI and impart a distinct identity to the product.
Using these colours strengthens brand awareness.
I decided on blue for simple reasons:
700 is the CTA colour.
These colors highlight or complement the primary color.
These include shades of grey, all the way from white to black. These are used for backgrounds, text colors, etc., and form the majority of my UI.
I added a slight hint of blue to bring more liveliness to these colors.
600 is the colour of the body text.
These are the colors that communicate purpose. They help users convey messages.
I went with a medium-scale, 1.200 — Minor Third, as it has a clear hierarchy and helps organize sections with subheadings. I rounded up the numbers. It's a good idea to stick with whole, even numbers.
I also added some custom, tailored to my needs, sizes, as I wanted to have some more control. So, e.g., besides having only one basic size for a paragraph (16), I also added 14 and 18.
For things like metadata, smaller fonts can also be found, from 12 to 10.
There are also sizes for the mobile version to maintain responsivity. Thus, H1 for desktop is 48, but for mobile, it’s 34.
Line-heights differ, as, e.g., headings don’t need as much line-height as, e.g., a paragraph. It all comes down to readability.
Headings have only two fonts; semi bold and bold.
Line-height for headings was calculated simply by multiplying the size by 1.2 (which, as previously stated, was chosen as the type scale). Therefore, if H1 is 48, I multiply it by 1.2 and the result is 57.6. I round it to a full and even number, and we’ve got 58. I adjust it a little bit and decide to go for 56 for better readability.
For better readability, headings have a smaller value for letter-spacing.
I set the basic font size as 16 (1rem), as this is the browser default and is recommended by many as the perfect size for the main body text.
A good rule of thumb advises to set the line-height at around 150% of the text size for the paragraphs.
I chose Inter, which is under the Open Font License, for both the landing page and the dashboard.
I think Inter is a great font, as it’s universal, widely-known, and looks professional.
Inter also provides many styles. I only used Regular, Semibold, and Bold.
As it’s stated on the Google Fonts page: “Inter is a variable font family carefully crafted & designed for computer screens.”
Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.
The size and stroke width are both customizable. As the icons are .svgs, they look great in any size.
Sometimes I had to use more specific icons. To find them, I used Figma’s plugin, “Icons8,” and looked for icons that were similar visually to Feather icons.
The header on my page consists of a logo, set of links, and a CTA button.
I simply used Figma’s “Logoipsum” plugin. I think it fits.
The vector in the logo is one atom, and the text is another one. Both create a molecule.
One link is an atom, a set of them a molecule. Later on, when I create a component out of the set, I can put it in the header and, e.g., change the spacing between the links at any time, and that will be reflected in anywhere I’m going to use the header.
Later on, we've got a button with an icon. It's a molecule, as it consists of more than one element, text and an icon.
There are variants for states and whether the button has a right or left icon.
Do you want to collaborate, say hello, or offer me a job?
I'm currently unavailable for work.
But you can alwaysdrop me a line
. I'd love to hear from you! 😊