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 #EEEEEE as my background colour with a nice #111111 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. For links, I've decided to not just simply change them to a slightly lighter colour and add a “°” after each one. It's subtle but let's the links stand out without too many annoying border/background colour tricks.

As an accent, I've decided to use #AA3333, a solid but not generic shade of red. It looks nice for both hover effects and secondary text elements. You'll find it most commonly in list markers, the delimiters for inline code, and hover effects (on links and such). For example:

“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

You may have noticed the oddly located post titles and <h2> elements. I've moved headers to the left of the body so that they don't interrupt the flow of the text. This is reminiscent of iA Writer's website design. I've stolen their header design as it makes following the flow of a post so much easier to read. This “shove to the left” philosophy also applies to the margin comments, which will pop up here and there across posts in my website to provide random information.

Typography

I've settled on Tiempos 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 Neue Haas Unica, a stable, minimalist, and easily scalable semi-grotesk font. For monospaced text, I've covered Sudo in an article of mine.

Text width (for the main body) is locked at a nice 60 characters, the optimal value in my opinion.

Images

As I hate not having any sort of border on an image within text, I've nicked elementary's image css and removed it's border radius:

Daniel Plan at his finest

It doesn't do much, but it adds a bit of 3d character and overall makes images match more with the pseudo-minimalist design I'm trying to pursue here.

You can see more examples of how this affects the look of different types of pictures in my rice gallery.

Responsiveness

This is, erm, a work in progress at best. As of now, my website only looks optimal on decently sized (preferably 720p+) screens of a 16:9 or wider aspect ratio. Phones, some tablets, and older devices will not play well with this website. Fear not, however, as this is something I plan on fixing in the near future, so expect this section to change soon.

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.