portfolio

Design decisions

The design of this website changed several times during development, but always followed a few simple goals: clear, flexible & high contrast. The design language was based off of one I had created for my freelance contracts and invoices to emphasize clarity.

HOMEPAGE

Being the first thing new visitors will see, I wanted to create a strong homepage that introduces myself and my work efficiently and simply. The homepage also serves a place to introduce visitors to the website's navigation.

The most mportant elements are aligned on a slope in order to draw the eyes to the description, the arrow and the content below. On the left is "PORTFOLIO" written in FRANTIK, overlapping the hero section of the page, followed by a picture of myself and a short description. As the viewer scrolls, the text and picture leave and reappear in smooth succession, keeping the personality in the frame while being more subdued in the company of the content previews. At the same time, the about me blurb fades into view, expanding upon the bolded text and introducing me more formally.

A tall footer with a centre-set logo serves as a solid visual endcap for the page as well as a means to navigate back to the top of the page.

Colours

High contrast colours used in large blocks are used to create clear hierarchies, and to visually block out the page. An offwhite keeps the page just dark enough for bright screens. Finally, an eyecatching yellow is used to add energy into the page. The use of yellow for two purposes – a strong eyecatching accent colour, and as a nod to my surname (Wong, meaning "Yellow").

Content width

When sentences are overly long, readers will lose focus. At first, the layout of the website was wider and centered as a simplistic measure. However, this often made it uncomfotable to read on large desktop monitors, and the central framing of the page made it seem too static. The width of the content was reduced and placed on the left to make reading more comfortable and visually interesting.

Font choices

The fonts chosen for this are Benzin (by Supremat) and Santofex (by me). Benzin represents my love for cars, sci-fi, and bold & tightly kerned type; while Santofex represents my own personal style. Benzin is used almost solely for the titles of each page, while Santofex is used for everything else.