UI

Updated: 2021-11-19

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

Material-UI 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/

Another good options is Font Awesome, which gives you more free icons. You can search by https://fontawesome.com/icons?d=gallery&m=free

Font

This website is using Roboto, which is a Google font. 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`],
      },
    ],
  },
},

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
  • illustration system

design:

pattern:

color: