David Yeiser🍔

Audible

I must issue a mea culpa. Intoxicated by the excitement of experimenting with a different approach to designing websites, I jumped into this live redesign without truly thinking through how much time would be required to work out the ideas I had in mind. Not to mention the additional efforts of writing about it as I went.

Further, upon an audit of my strengths (not writing), responsibilities (providing for my family), and current season of life (scarce “side time”) it came to bear that the most important thing to focus on in terms of personal websites was a portfolio of work that showed what I’ve been up to for the past few years and a design that could be implemented quickly.

So, I will no longer be moving this site in the direction of what I had envisioned initially. The design to be put in place is now defined by a different set of rules (more on this below) with a goal to be live on February 29 — a fun launch day if there ever was one.¹ Okay, okay, May 1st is a more likely candidate for launching this thing.

—

Now, for posterity’s my sake, I want to show some of the work and thoughts that came out of the initial design program I was working on.

The main idea centered around using something other than visual elements to unify the site. Most sites maintain cohesion from page to page, section to section by using the same colors, fonts, spacing, sizes, etc. Call it a style guide, a design system, whatever. It’s those elements in aggregate that make up the unique identity of the site.

What I was working through was the idea of using a content pattern as the main unifier for the site. Specifically a trio of content types: title, meta information, and body content placed on the screen from top to bottom in that order. The order of these content types applied consistently to each view, not the specific font, size, or color of the content types, would provide the visual anchor to hold each view in relation to the other.

So this:

Simple website design showing a title anchored at the top of the page followed by a large amount of screen space below with then a publish date and body content below.

Would be just as valid as this:

The same design as the image above, but with different fonts.

Or this:

The same content order as the two images above, but in this one the title font is much larger and the body content is a grid of images rather than text.

Or even this:

Like the other images, the content order is the same, but the title is centered on the screen horizontally and nearly vertically and then the meta information follows below but this time is a caption with then the body content, a large display image, below it.

There would be other rules too. One seen in action in the series above on the last image is the placement of the main title: it could be placed at the top of the screen, the bottom of the screen, or the middle of the screen, and then the text could be left-, right-, or center- aligned. (The meta and body content — if present — would follow the title’s lead in placement, but could carry their own alignment.)

So you had nine potential options for the main title (or if no title was present, for the meta information, or the body content if no title or meta was present):

Blank view showing abstract text placed in the nine potential spots where it would be allowed: top left, top middle, top right, middle left all the way to bottom right.

Applying those rules, I was sketching out the home page design to look something like this:²

Main headline typeset in a medium weight sans set in the bottom left of the page with a simple header navigation at the top and a simple footer with copyright and contact details at the bottom.

The same view as the first homepage design except the main headline is set in the middle left.

Same view as the first homepage but with the main headline set in the upper left.

And then the type could be changed too since there was no rule on a headline having to be a specific typeface:

Same design as the third homepage (main headline set in the upper left of the page) but with a slightly psychedelic display italic typeface rather than the medium weight sans-serif.

There was a plan to corral the different typefaces though by constraining them to predefined sets: within each set the fonts would harmonize thematically, and then without, in relation to other sets, there would be coordination to keep a uniform color on the page. For example, body text in one font might be 18px whereas in another set the body text font would be 19px to produce an equal text block when viewed as a macro element.

However the type sets were always going to be open so if I ever came across a new font that I liked I wouldn’t feel the urge to redesign my site to try it out, I would just drop it in the system!

The new “program”

What I’m working on now is a little more let’s say traditional. A design with the familiar trappings of a website. However, one thing I’m doing that I’ve always wanted to do and have almost done but didn’t quite do is use only one font at one size throughout the entire site. See those italics? I won’t even be able to do that.³

I mention the single font approach because it’s the main thing that’s unique, but also because it’s a nice setup to be able to swap out the font from time to time and keep a small part of the original vision alive. Say on my birthday I switch it to my favorite font for websites: L10 Regular. Or on the weekends it switches to Faune. Maybe on April Fool’s it switches to Tiempos Text and so forth.

So anyways, that’s the plan for moving forward — here’s a sneakpeak of the design (spoiler, the font is Unica77):

A list view showing a headline in the top left, the main page title at the top middle and then the list of articles below with each article title separated by a long, thin horizontal rule.

An example of an article design with the date and title at the top and then the body content spaced generously below. The same headline as the first view is shown in the upperleft but faded with half of it cut off by the active page view superimposed on top.

Footnotes

  1. There actually used to be a specific day each year, May 1st, when designers would simultaneously publish their website redesigns. It was a lot of fun to participate in and see all the new sites published at once. Long live the old personal web!
  2. Figuring out how the header and footer would interact with the content patterns was a work in progress that I never resolved satisfactorily.
  3. I will be using a monospaced font for code samples, but I’m treating those more as a graphic than part of the type setting. Inline code references will be set with the single font (as of this writing). Though eventually I may add the italic version, we’ll see…