Redesigning in the open

Posted on February 18, 2020

I’ve noticed a recent trend on a few designers’ personal sites where most of the work is being done out in the open. In the beginning, a site will appear mostly unstyled or somewhat broken. Over time, you will see increasing levels of fidelity until a finalized product takes shape.

Some examples of this are Rob Weychert and Frank Chimero. I have decided to take a similar approach. Some of goals for this year include redeveloping my site and publishing content more often. I haven’t written anything here since 2016.

This will be more than a redesign. I’ve been wanting to rearchitect the entire thing, moving from Jekyll to Eleventy, updating the build and deployment process, and so on. You can see the work being done in the GitHub repo for this site.

I will post updates here to document notable updates as I move forward.

June 1, 2020

I’ve finally addressed the 404 on the contact page. After testing around with the Netlify’s forms and the Zapier integration, I’ve settled for just using plain old-fashioned email.

May 13, 2020

The landing page will feature my four most recent posts. I’m well aware that only two could even be considered “recent.” This is where I’m starting to think more about my CSS architecture. The list of posts on the homepage is a variant of what appears on the blog index. I’m still not 100% certain how this is all going to fit together yet and that is completely fine. I tend to do a lot of my design work inside the browser so the code, like the design, is very much a rough sketch what is to be. But after stepping away and letting the dust settle—so to speak—how to apply fidelity, in both design and code, will materialize. I like where this is going. The aesthetic is sort of a throwback to the type of design I enjoyed doing much earlier in my career, with a mix of photography and paint textures.

May 12, 2020

Okay, that was a long break. I blame COVID.

  • Putting some initial design work into the homepage
  • Decided to switch my beloved Raleway typeface for an even more beloved Kazimir. It has just the personality I’m looking for in a typeface.
  • Honestly, it’s been too long and really cannot remember. I’m sorry. I’m better than this. I’ll do better next, I promise.

March 3, 2020

  • Refactored asset path handling to use a simple function instead. It's much more elegant solution than the variables I had written.
  • Using include-media for handling breakpoints in Sass. I was just going to write my own function, but I like its flexibility and how it handles styles that are only applied between two breakpoints. As part of this adjustment, thought it was probably not necessary, I have switched my compiler to Dart Sass.

February 20, 2020

Spacing units!!

Today I have added my spacing unit function. This function is used in place of hardcoded margins and padding to enforce a consistent horizontal and vertical rhythm with a multiple of 8. At some point, I’m going to refactor that function so that the

$units
Sass map isn’t such a mess. But it’s snippet I’ve used in other projects and it works.

Back to the spacing units. Why multiples of 8? There are many reasons, but I’d recommend reading the 8-pt Grid for the entire rationale.

February 19, 2020

This is the first push I’ve made on this. Generally, the goal here was to get everything out of Jekyll, scrap the old design, and put it into Eleventy without breaking URLs for any of the old posts. What I've done so far includes:

  • Migrated from Jekyll to Eleventy. I don’t think I made any significant changes to the Jekyll build since 2015, so I just started from scratch here. The old configuration was also set up so that GitHub pages can run Jekyll on commits to master. Nice to be without that constraint now.
  • Running all build process through
    npm
    and
    gulp
    . It took some tinkering to set up the build and watch tasks for development.
  • Set up a basic build process
  • First pass at type selection. I’m digging Playfair on the headings, but not so settled on Raleway for the body text.
  • For the type scale, I'm using a combination of sizes from Type-scale on Major Third scale and Fluid type for handling responsive font sizes. Fonts go from a minimal base size of 16px to a maximum size of 20px
  • Added stylelint to enforce CSS conventions.
  • I’ve always used Normalize for my CSS resets, but this time I am kicking the tires on Andy Bell’s css reset

Nothing here is set in stone at this point, but expect many changes to come. Netlify is as easy as advertised.