Illogical Life

Because life rarely makes sense

Updates Incoming

The article where I pretend it isn't an article...

So, uh, I was originally planning spinning up a fresh droplet for Illogical Life and throwing the first semi-attractive theme onto it (because, yes, I was that far behind on updating Ghost), but that didn't happen.

I was seduced by fonts. Again.

In any case, I need to write up a quick feature-check article to make sure that everything I've done to this poor theme plays nicely with the internet. And if I'm going to be typing a bunch of words, I might as well talk about what I'm trying to do here.

I Am Addicted To Typography

Words have meaning. Type has spirit. The combination is spectacular.

—Paula Scher

I am not, by any stretch, a designer. I'm a critic, sure, but there's a difference between recognizing bad design and knowing how to discover good design. It takes me twice as long to make anything and three times as long to come to terms with what I've made. It's a messy process. And it's a process I don't know how to skip.

The first two iterations of this site were exploratory. In the technical realm. I'd heard of Ghost before diving into it, but I'd never taken the time to read the documentation. I still haven't, but I'm sure it's a great resource.

The result of that, of course, was a fairly juvenile design; image backgrounds and css animations are neither cutting edge nor inherently user friendly. The second design made minor improvements to the user experience, but it was still accomplished through the expected "oh, hey, I can change this bit!" design process.

I did better with the logo; while I'm still technically limited when it comes to logo design, I struggle more with myself than with my tools at this point. I've even managed to leverage the experience professionally. Somehow.

Album1-2Album3-2Album4-2Album5-2Album6-2

Tips for anyone trying to use albums in Decent:

  • Do not put a line break before the album div
  • Errant spaces and line breaks will break the album display. If you find quotation marks or p tags inside the div you've mucked it up somewhere.
  • You need to add max-width: none to .album img in post.scss to keep long images from distorting.
  • You can throw style="height:VAR" into the album div if you're willing to break the Markdown preview.
  • This list exists so I can play around with in-line html.

Where I've made the most progress, however, has been my understanding of typography in application. I've always loved good type, but until recently it's been a fairly abstract love. I could spot it in the wild or procrastinate by browsing through font libraries, but I didn't have a clear vision of how I could make choices that would lead to interesting designs.




whiteboard-man-presentation-write-display-explain-1

Errant p tags can disrupt the alignment of large images, too; I had to throw in a br between the image and the horizontal rule to keep things semi-kosher.

Back to The Drawing Board with Illogical Life

My original slug for this blog was something like Minimalism, Frugality, and DIY because I was clearly trying to be original.

I managed to harp on the minimalism part for a while (and it inspired some of my design efforts, theoretically), but I/L never really settled down into any one category. It was a catch all, but not for random thoughts — it was full of random impulses.

Which means that, obviously, this redesign/relaunch/restart is going to be inherently compensatory. Everything wrong is out! Everything right is in! This site will be focused and consistent and — holy fuck that sounds boring.

My goal here is to create a site that is aesthetically consistent and experientially diverse.

Instead of hammering on the "just try harder" note as if intensity can make up for a bad rhythm, my goal here is to create a clean UI and a consistent UX that will allow me to wander a bit (within tighter bounds than before) without throwing everything off-kilter.

I'm specifically handling this from a design perspective because I've found that the UX discourse has a set of really awesome investigative tools built in. The language and workflow of UX helps me, a non-designer, figure out what my needs are and on what level (backend, frontend, etc) I can most effectively address them.

Which takes us back to typography...

Fonts work on our brains funny ways. They slide in unnoticed and make us prepare for whatever we associate with a particular kind of serif or kerning. Social conventions put us in front of text at such an early age that there's always something in our heads about it.

Cormorant drove the majority of this design process. I started out looking at fonts close to home (system fonts) and the digital distance between Garamond and it is small. It's a font that needs to take up the screen, as it's really meant for printing, and it shows off the effort that went into it without distracting the people who don't care.

Which makes it the perfect title font for a website with a slower content cycle and a focus on text instead of images. It's readable, but if you're going to stare at it there'll always be something to look at.

Pairing it with Rokkitt wasn't my initial impulse. Slab serif fonts aren't my usual pick, and a serif+serif website is usually considered poorly designed. It wasn't until I started playing with the weight and size of it that I realized I could use it to create a contrast between the page header and the body text, and that contrast was what I really needed.

All of the text on this site is heavy and large. Everything needs breathing room, and everything has breathing room. But the column width is reasonable and the navigation patterns are less-than-crazy. With indented paragraphs and some selective text effects thrown in, the type pops without overloading the reader with detail.

I'll probably change everything again tomorrow.


Oh, look. I haven't changed everything yet. That's good. I experienced a brief crisis last night around 0100, where I was convinced that I should default to Georgia for all of my body text, but that has thankfully passed.

Although I will admit that the Segoe Ui + Georgia combo that the Ghost preview pane rocks isn't the worst thing to stare at for hours on end.

Using A Decent Theme

No, I'm not above puns. They're one of my favorite indulgences.

I went with Decent because it isn't a theme that tries to be minimalistic. Instead, it's a theme that looks good with both low and high content volumes. That's a small, but incredibly important, difference.

Many minimalistic themes minimize the wrong ratio of elements. minimizing the backend of a project (to make maintaining it/using the resulting platform easier) often results in a minimal frontend, but at the cost of flexibility. Themes that take this route make for poor canvases.

Decent is built on Casper and inspired by Aquila. When you dig into what Serenader did to the former in order to align with the latter, most of the work seems to be focused around creating a set of tools for text-driven content instead of the usual stripping back of features until a minimal core is revealed.

Beyond the immediately obvious transitions, effects, and type rendering, Decent includes an extensible set of advanced formatting features; prefaces, galleries, tips, syntax highlighting, and so on.

It's easy to get lost in the gulf between basic styling and full frameworks; working with a theme that adds features in the middle of that gulf in such a way that I can build my own map is incredibly helpful.

So, uh, yeah. That's why things look the way they do.

Decent also represents my first meaningful encounter with CSS preprocessors. It took me way too long to figure out the whole partials→live compile with Prepose/Gulp→upload theme to site workflow, because I was looking for a way to pull scss docs into my existing flow instead of at how I could modify that flow to create a better product.

TL;DR Using a program that watches for modifications instead of one where you batch the entire folder (scout, etc) is the way to go. Seriously.

Still an Amateur

Of course, it's hard to sit here and talk about how my design skills have matured in a live article on a site that's being edited in production. That's a bit amateurish.

I don't have a good excuse: I haven't taken the time to setup a local dev environment for ghost, nor have I taken the time to learn Git. It's a good thing I'm not doing this for a living.

Oh. Wait.

I'm a freelancer. Everything I do publicly impacts what I do for a living.

Shit.


I have a bit of a story about the whole "how the hell do I setup a local dev environment on windows without earning an involuntary stay" thing.

But I'm saving it for the actual "hey guys, I'm back" post. I know, I know, that's cruel. You sat through ~1700 words of midnight rambling just to hit a Next Week on Dragonball Z.

I'll make it up to you.

Comments is loading...

Comments is loading...