Personal site

The home page of richardfxr.com displayed on a floating iPhone 14 Pro in dark mode.

Description

Two years after the release of richardfxr.com version 9, it was time for a complete redesign that focused on accessibility, animation, and maintainability while still paying homage to the old design.

Date
2022-08
Colors
  • Richard blue
  • dark gray
  • light gray
Media
  • UI/UX design
  • development

Evolution

↓
Three floating iPhone 14 Pros displaying the home page of richardfxr.com version 10, 9, and 8 respectively.

Familiar yet refined – that was the philosophy behind version 10's incremental redesign.

The Selected Works section of version 9’s home page displayed on an iPhone 13 Pro.
version 9
The Selected Works section of version 10’s home page displayed on an iPhone 13 Pro.
version 10
Version 9’s about page displayed on a Surface Pro 8.
version 9
Version 10’s about page displayed on a Surface Pro 8.
version 10

Design

↑↓
The info page displayed on an iPad Mini. A large decorative badge that reads v10.2.1 gold can be seen.

Version 10's design aims to be clean but decorated. The interface is clear, but not devoid of ornamentation.

The navigation bar displayed on the bottom of a Pixel 6 Pro. Each page is represented with an icon; a blue indicator is visible above the current page.
The about page displayed on a Pixel 6 Pro. A PDF417 barcode and a waving kaomoji can be seen above the self-portrait.
The Socials section of the about page displayed on a Yoga Tab. Each social media icon is surrounded by almost hypnotic lines.

Dark Mode

↑↓
The home and archive pages displayed on two ROG Flow Z13s in dark mode.
The settings page displayed on a Galaxy Note 20 Ultra in dark mode.
The info page displayed on a Galaxy Note 20 Ultra in dark mode.
The Budgetty project page displayed on an iPad Pro in dark mode.
The archive page displayed on a Pro Display XDR in dark mode.

Accessibility

↑↓
The accessibility menu on the projects page displayed on an Elitebook Dragonfly. Two buttons, a 'skip to content' button highlighted in orange, and an 'accessibility settings' button, can be seen.

Version 10 is made more accessible through skip links, high contrast modes, size adjustments, low motion, and more.

The info page displayed on a Pixel 3 XL with universally larger input buttons.
large buttons
The archive page displayed on a Pixel 3 XL with a light high-contrast theme.
high contrast
The info page displayed on a ROG Flow Z13 with a larger font size. In addition to just text, icons have also been enlarged.
large text
The home page displayed on an Elitebook Dragonfly with Windows forced colors enabled. All links are now yellow while all other texts are white. The illustrations also respect the new colors.
forced colors
The EggHolders project page displayed on an iPhone 14 Pro with a light high-contrast theme and larger text.
The settings page displayed on an iPhone 14 Pro with a dark hight-contrast theme and larger buttons.
The about page displayed on a Surface Pro 8 with forced colors enabled, larger text, and larger buttons.