Rudi ✸ Product Designer

Hello. I’m Muchtarruddin, usually go by Rudi. I’m a product designer that helps to translate ideas into pixel-perfect life.

  1. Duplicate this template to your Notion workspace. Ensure that ‘share to the web’ is on in Notion.
  2. Create a site in Super, using your duplicated template as the Notion URL.
  3. Set up your fonts and add the code to Super and configure your options:
  4. Fonts

    There are two themes for fonts. You’ll need to choose which theme you want and add the fonts and weights listed below to a new web project in your Adobe Typekit account. Once you’ve done that you can paste the Unique ID into the code. Editorial PS Fournier: Light Reason New: Regular and Medium Rational Neue Haas Unica: Light, Regular, Regular Italic

    If you don’t have a Typekit account you can rely on the chosen Google Webfonts as a fallback instead. They’re a pretty good match, here’s the difference:

    Editorial theme


    Rational theme


    Using your own font choices

    If you want to change the fonts you’ll need to add custom overrides in the CSS editor.

    :root {
      --font-family-primary: [your-font-goes-here], serif !important;
      --font-family-secondary: [your-font-goes-here], sans-serif !important;

    Code for Super Editor

    1. Go to Code > Global site code 2. Paste the following code into Head

    <!-- /// Hosted styles /// -->
    <!-- Using the hosted stylesheet will ensure you automatically get future updates and fixes. Any custom overrides should be done in the CSS area of your Super settings. -->
    <link rel="stylesheet" href="">
    <!-- /// Hosted fonts /// -->
    <!-- Fonts for "editorial" theme -->
    <!-- Google fonts -->
    <link rel="preconnect" href="">
    <link href=";600&family=Nanum+Myeongjo&display=swap" rel="stylesheet">
    <!-- Typekit -->
    <link rel="stylesheet" href="">
    <!-- Fonts for "rational" theme-->
    <!-- Google fonts -->
    <link rel="preconnect" href="">
    <link rel="preconnect" href="" crossorigin>
    <link href=",wght@0,300;0,400;1,400&display=swap" rel="stylesheet">
    <!-- Typekit -->
    <link rel="stylesheet" href="">
    <!-- /// Theme options /// -->
    <!-- Colour theme: change the name of the file to pick your colour 
      Options: [cotton], [charcoal], [coppice]
    <link rel="stylesheet" href="[option].css">
    <!-- Font theme: change the name of the file to pick your fonts (requires set up with Typekit or Google Fonts, see above) 
      Options: [editorial], [rational]
    <link rel="stylesheet" href="[option].css">

    3. Paste the following code into Body

    <!-- Navigation -->
    <nav class="nav">
      <div class="left">
        <a class="nav-link" href="/">Cy</a>
      <div class="right">
        <a class="nav-link" href="/projects">Projects</a>
        <a class="nav-link" href="/about">About</a>
        <a class="nav-link" href="/writing">Writing</a>

    Theme options reference

    A handy grid to see the 6 possible theme options:


4. Make sure you’ve done these things before you go live

Go live checklist
Change all links in the footer database
Check that the Show or hide page properties option in Super settings is set to ‘Enable’
Check that all navigation labels and links are correct and that they point to the right pages. Note, they do not automatically update when you amend page names or add new pages.
Add pretty links for your pages, projects, and articles into Super’s pretty URL settings. By default you’ll need to use projects/ and writing/, you can amend these if you want but you’ll need to add CSS overrides.

Case study

Projects database

Selected projects

Projects database

Selected writing

Writing database

An Exploration-Based Approach to Improving UI Skills
May 4, 2023
An Exploration-Based Approach to Improving UI Skills
Have you ever felt that your designs are just so-so? Or sometimes you think it inferior to look at other people's more saucy designs? Everyone must have experienced that period, but how can we upgrade our designs to another level?
A Guide to Giving Good Feedback on UI Design
March 5, 2021
A Guide to Giving Good Feedback on UI Design
Is it true that for UI Design itself, we are free to have opinions without any restrictions? The answer is yes, but it is highly recommended not to!
Plan Your Research for Better Insight
March 17, 2020
Plan Your Research for Better Insight
Research is our weapon for finding problems and solutions for case studies. But did you know that there are several things we must prepare before starting to do research?
Measuring Product Design Success Using the HEART Framework
January 23, 2020
Measuring Product Design Success Using the HEART Framework
When designing a product, we naturally hope to achieve the goals we've set. However, it cannot be judged by subjective or personal opinion, since the success rate of a product is derived from data.


Made with 🤍 by Rudi
Hide your pages in this toggle menu, only you will see it