Last Updated: 2023-03-06

I know nothing about UI design. Thankfully we have some wonderful free tools and assets to make our website less 1990s.

UI Framework: MUI

Originally I used Bootstrap. Who didn't. I was trying NOT to use the styled components since they looked outdated and you can find them all across the web. Mostly I rely on the "12 columns" for the layout. I decided to get out of it after I adopted Gatsby, since Bootstrap was based on jQuery, which was awesome, however deprecated.

Then I tried to use the (relatively) new flex in CSS to do the layout, soon I realized that I'm not smart enough to correctly use it. Then I found MUI, which was based on React, could do a similar "12 columns" layout, and had a modern look (Google's Material Design https://material.io).

MUI website: https://mui.com/

Install by

npm install @mui/material


We are using FontAwesome. It provides many free icons. You can search on https://fontawesome.com/

MUI comes with a set of icons. They are in a separate package than core so you need to install by:

$ npm install @mui/icons-material

Then follow the guide: https://mui.com/components/material-icons/

Trouble Shooting

Problem: Oversized FontAwesome icons on page load / refresh. (Using FontAwesomeIcon)

Solution: Add the following import to the beginning of your JavaScript code.

import '@fortawesome/fontawesome-svg-core/styles.css';

Font / Typography

This website is using Roboto, which is a Google font.


// pages/_app.js
import { Roboto } from 'next/font/google';

const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],

export default function MyApp({ Component, pageProps }) {
  return (
    <div className={roboto.className}>
      <Component {...pageProps} />


Gatsby has a plugin to make it easier to use Google fonts:

$ npm install gatsby-plugin-prefetch-google-fonts

Add this to the plugins list inside gatsby-config.js

  resolve: `gatsby-plugin-prefetch-google-fonts`,
  options: {
    fonts: [
        family: `Roboto`,
        variants: [`300`, `400`, `500`, `700`],

Or add this to your code:


Note that if you do not specify :300,400,500,700, font-weight: bold may not work.

Some references:

System fonts vs Web fonts

  • Georgia was optimized for the screen; Miller was optimized for print.
  • Microsoft fonts Georgia and Verdana were specifically created for web use.
  • Arial was created as a Helvetica substitute. To many, they’re indistinguishable. But don’t use Arial.

Visual Identity / Branding

  • brand story (about page)
  • logo :
    • monogram(square),
    • wordmark: a distinct text-only typographic treatment of the name of a company, institution, or product name used for purposes of identification and branding
  • photography
  • typography
  • color palette (Adobe's color tool: https://color.adobe.com/)
  • illustration system

Web Design Books

  • The non-designer’s design book
  • Don't Make Me Think