Premises
After graduating I wanted an online place where I could display my projects and skills. I wanted a place where people could connect with me, both via email and LinkedIn. I decided it was time to create a personal website I could 100% customize using Figma, Framer, and a personal domain bought on Squarespace.
Brand tone and early decisions
I wanted people to spend only a few minutes navigating the whole website. So I planned it to have only a few sections: "Hero page", "Works", "About", and "Connect".
Before any other, I wanted to explore the present trends. I also wanted to understand what I like and dislike about other UI designers' portfolios. After exploring hundreds of them, I wrote down some adjectives to describe mine. I wanted my portfolio to be clear, dynamic, and approachable.
Color palette
In the early stage of this project I was unsure about what color I could use as a main. I didn't know which one to choose between green, blue and orange. I opted for the orange as a main, since it's rarely used and it gives it best in pair with a tone of blue as a secondary. Furthermore, Color Theory associates orange to optimism, positivity and creativity. I then iterated my color palette until I reached the definitive version. For what concerns colors ratio, I used the golden ratio rule of 60:30:10, as it follows: 60 black, 30 white, 10 orange (+ blue gradient).
I then checked the accessibility of all the color combinations I planned to use. All passed the Web Content Accessibility Guidelines' AAA test for texts (normal and large), graphical objects, and UI components.
Typography
Since the beginning I wanted a typography with a high accessibility and, at the same time, a unique look. After testing Montserrat, Poppins and League Spartan, I went for the latter. In the end I preferred the original look of it, but all three were very versatile.
From initial wireframes to responsive design
After all these decisions, I started to draft both layouts and components on paper and Figma. As soon as the result was satisfying, I moved everything on Framer and built the real website. I then proceeded to adjust spacings and padding, and work on the responsiveness.
Framer does not permit to choose fallback fonts, so I checked what are the most common ones used by browsers such as Chrome, Safari and Mozilla. I then proceeded to test the website with sans serif and serif fonts. In particular, I used Helvetica, Arial, Times New Roman, and Georgia.
Navigation
For the desktop breakpoint, I used a horizontal navigation bar. I decided it to be invisible in the hero section and visible as soon as the user scrolls down to the next section. For tablet and mobile breakpoints, I implemented a hamburger menu. When clicked, the menu items appear on the left side to guarantee good accessibility for thumb navigation.
Effects and animation
I tested some very noisy animations, but since "less is more", and with my three adjectives in mind, I opted for simplicity and clearness. I opted for an appearance effect for the hero page. For the background I opted for a slow animated gradient of primary and secondary colors. I also added a scroll variant effect to the nav bar, which appears only when you scroll after the hero page. The hero's texts and the sections' titles present a magnification effect while hovering. For tablet and mobile viewports I deleted all animations and effects to guarantee a smoother experience.
Final result and future
The final result represents at best the premises and I’m very happy about the outcome. Now I finally have a personal website where I can display both my work and skills. People can connect with me easily. In the future I will add other case studies and a section for my creative writings as well.
