Design Decisions

Apr 19, 2021 — Reyan Chaudhry

As you may or may not have noticed, a lot has changed on this website over the past month or so. This is, of course, concurrent with my newly gained knowledge of design, web development, and typography. Furthermore, as I surf the lesser traversed parts of the web more and more, I've come across copious amounts of inspiration, a lot of which has found it's way into my—hopefully— final design for this website.

Colour choices

When it comes to colour, I've decided to go for a more monotone aesthetic, akin to what I've been doing with my vim colourscheme as of late. I've found that using special colours sparingly and relying on tones of monochromes instead of a rainbow of contrasting syntax elements for the any contrast needed. On that note, I've settled with #f5f5f5 as my background colour with a nice #272727 as the main foreground; this provides good contrast while maintaining non-blinding readability. Shades of both are used for differing elements such as code blocks, dividers, and highlighted text all around. Links are slightly faded and have a visible underline that becomes the background upon pointer interaction. It's subtle but lets the links stand out without too many border/background colour tricks.

As an accent, I've decided to use #a93232, I used to use the accent color a lot more but it's sort of just been delegating for the below mentioned syntax use. Perhaps I'll find a new use for this accent color one day.

I list things a lot, so it's only fair I have a custom ul element:

• This is
• what a list
• looks like.

“Syntax Highlighting”

Here is where I ran into a conundrum, I wanted some basic syntax highlighting for any code blocks I used but didn't want to import some bloated javascript library while doing so. The solution? Pandoc's built-in class assignment for code. I realized this while looking through my auto generated post files. Pandoc automatically assigns classes to individual words in pre elements based on what language you mark the code block in your markdown file. This allows me to implement my own signature minimal syntax style using just css:

void fillArrayWithRandNos(int nos[], int size) {
   for (int i = 0; i < size; i++) {
     nos[i] = rand() % (45) + 55;
   }
 }

void displayArray(int nos[], int size) {
  cout << "\nThe Array of Scores: \n" << endl;
  for (int i = 0; i < size; i++) {
    cout << nos[i] << " ";
    if ((i + 1) % 10 == 0)
      cout << endl;
  }
}

double variance(int nos[], int size) {
  double avg = mean(nos, size);
  double variance, sum = 0;
  for (int i = 0; i < size; i++) {
    sum += pow(nos[i] - avg, 2);
  }
  variance = (double)sum / (size);
  return variance;
}

This is about as far as I'm going to go, as anything else would require way more effort than it's worth and would unnecessarily bloat my site. No, I'm not going to add shittily implemented line numbers or “block titles” designating what language is inside each code block. Go Copy paste the code into an IDE or text editor of your choice if you really need that.

Headers

I used to go absolutely crazy here, but now I use just the Sans font and some generous padding for headers, nice and simple works best I've learned. Those who remember my iA Writer style sideways headers can rejoice now, that stuff was NOT fun to implement.

Typography

I've settled on Lyon Text as my main body text typeface, it is readable, compact, and has great bold and italic variants. For headers and sans elements, I've decided to use Suisse, a stable, minimalist, and quintessentially Swiss typeface. For monospaced text I've decided to go bespoke and give Akkurat Mono a chance, it's quite nice, although I may switch to something more universal in the future for accessibility reasons.

Text width (for the main body) is locked at a nice 50 characters, I use viewport-dependent font sizes so regardless of the screen you are viewing on this results in a comfortable balance in font size and text density.

Images

In keeping with the theme of simplicity, I've decided to give up my former ideas regarding image borders and whatnot and instead just let the pictures breathe, it works well.

Responsiveness

I think I've actually achieved some level of respectable responsiveness, only took me 3 years. The website should work on most aspect ratios and screen sizes and maintain readability. Unfortunately all <aside> elements will disappear if the screen isn't wide enough—something I'm still trying to find a workaround for. The gallery is still best consumed widescreen.

Conclusion

All in all, I think I've managed to fashion a minimal yet still characteristic design for this website. There are some rough edges still here and there, but it will be more than enough for now. My purpose for spending so much time here wasn't so much just to make this site look nice, but also as as design practice, and it functioned well for that purpose as well.

Have a good day.