UI

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

Icons

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} />
    </div>
  );
}

Gatsby

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:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
  rel="stylesheet"
/>

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

UI