Making Nice Web Type

My name is Tim Brown. I'm designing Nice Web Type's tumblelog from scratch.

FYI, I'm now applying design changes to (and flowing live content into) Nice Web Type tumblelog. Still writing about the making here, but go there for visual status.

Spacing really bothering me

Now I have a variety of *kinds* of posts over at Nice Web Type's tumblr, and I've been actually writing so they're showing up in various combinations. Although so far, for image, quote, and link posts, I have only tossed numbers up without paying much attention, I am not at all pleased with the vertical spacing.

3 years ago

Image treatments

Tried three, in this order. Settled on the third. After making the first one, I remembered the Kiss of Death and Jason’s thoughts on the Polaroid metaphor’s lifespan. (Hey look, the iTunes icon has no CD.)

3 years ago

Playing with new styles for bookmarks.

Playing with new styles for bookmarks.

3 years ago

Quote styles, early responsive design, and plans for home

Over the holidays, I made several tweaks and did some thinking about Nice Web Type’s homepage. First, regarding the homepage, I’m going to have it be a different thing than a stream of notes and bookmarks. I think the Nice Web Type tumblr will live at something like notes.nicewebtype.com. The homepage will do a better job of pointing to lots of different things — my projects, resources for getting started with web standards and typography, and links to places where I write.

I’ve been playing with some styles for quotes. Visit Nice Web Type’s tumblr to see the two I’ve posted recently, or here’s what they look like at the moment:

I’ve also just barely begun approaching responsive design. I threw some basic stuff together for an iPad layout. My wife has an iPad, and I just wanted to see if I could make paragraphs of text pleasant to read on it. With media queries, I made the design one column with decent margins, then increased the font size, and stopped. There’s lots more to do, but here’s what the decisions I’ve made look like so far. This is a screenshot with desktop Safari’s width brought down enough to trigger the media query:

That’s all for now.

3 years ago

More subtle design shifts

Went back to dark gray text, rather than black. Made post titles black, rather than green. Also, normal weight (not bold). Before:

After:

3 years ago

Hurry up!

Just received Dan Cederholm’s new book. Now hurrying to get this redesign to minimum viable launch, so I can comb through all the markup and HTML5ify it, then read Dan’s book and apply some finishing touches.

Renamed sidebar stuff from “Projects and other work” to “See also,” and added Twitter/Dribbble callouts. Done! Got rid of lame stickynote-style boxes just above notes & bookmarks. Done! (For now. Will probably revisit and make less lame. It’s a good spot for showing my latest work.) Added a brief footer to long-form posts (an ask link, and tags). Done!

Next up (probably) is some sort of very basic footer, and then (did that) either attention toward the many other kinds of pages involved in Tumblr theming … or some code cleanup. Either way, it’s coming together nicely.

3 years ago

Working toward navigation

Spent some time thinking about the nav area. One example of art direction over time. I’m making decisions about this thing now because I need to now. Later I may iterate some more and change things, but I need something to start with.

Iteration 1:

I started by thinking the nav could be a spot for some kind of chunky visual. So I made a button bar. No good. It was distracting in the same way those sidebar images were, and (although I intend to refine everything initially throwing it together) it was ugly. Hover state on the right there, in green. I tried a variety of subtle differences in color, roundedness, gaps/borders. Just didn’t feel right.

Iteration 2:

So then I thought, what’s the absolute minimum I need to do? Change the color on hover. Easy. Lots of folks do this to really nice effect. But I wanted more structure here. I made the text all-caps, but that wasn’t enough so I added the really subtle borders. I liked it, but it didn’t feel finished.

Iteration 3:

Until now I had been using all-caps Scala Sans for the nav text, but I swapped in Cronos and it made a big difference. Cronos is turning into the typeface I use for sort of a relaxed emphasis, all over this site. I added very light gray box shadows above and below the border, and that also made a big difference I think.

3 years ago

Rough adjustments to projects/features

The sidebar I had going on was a bit overwhelming. It drew too much attention away from the main column. I speculated about somehow having it recede, and then tried a few different things. Darkening the area was problematic because it created new visual boundaries in the composition that made everything feel too complicated. But hiding the images helped (quite a bit!) and lightening the text in that column also worked.

Check it out, see what you think.

I may replace the “Projects & Other Work” area with a few short explanations of long-term projects like Torch, Nice Web Type likes, a link to the Typekit blog, and perhaps my author page at ALA. I also want to add a reference to my Twitter account somewhere in this sidebar.

But taking the sidebar in that slightly different direction (long-term stuff) means it’s not pointing out the latest big stuff I’ve been doing. So I thought maybe I’d draw prominent attention to some things just above the Notes & Bookmarks in the main column. I threw three example items up there now (features, I’m calling them) with basic ugly styling to differentiate them.

This is all reaching a point, or maybe it’s my impatience, where I’m craving inspiration beyond what I’ve already drawn from the type itself (and the modular scale I’m using). Especially for the small nav and now the features … it feels like these concentrated areas need some visual punch. Some realism or intricacy or color or something. But I have no leads. No reasons for realism or intricacy or color or any sort of visual punch. I’m trying to think of what made me decide on the colored stripe atop the site. I think it just came to me, and I liked it. Maybe something will just come to me, regarding the nav and features.

Maybe I’ll help that inspiration along.

3 years ago

Post timestamp + permalink idea. See it live here.

Post timestamp + permalink idea. See it live here.

3 years ago

Pilcrow permalink

Added a permalink to bookmark entries. I like how Daring Fireball does permalinks and timestamps. With John’s linked entries (which function like my bookmarks), in stream view, there’s only the linked character, but on permalinked pages there’s a timestamp.

Used Cronos Pro’s pilcrow character for my permalinks. What a great pilcrow. Wish I could link to Cronos’ glyph map on Typekit, but we don’t currently have such a feature.

3 years ago

Notes & bookmarks header

Added one more thing: a “notes & bookmarks” heading above the stream of posts (notes) and Pinboard bookmarks. Added a link to the RSS feed here because now subscribers get both (NWT subscribers used to only receive notes).

Still not sure about the text style and spacing, nor am I totally happy about the very light gray rule below this heading. But it felt like it needed to be there. I’m going to reconsider later with fresh eyes.

3 years ago

Starting to feel right

Sat down tonight for an hour, by the glow of my freshly cut Christmas tree, and made a handful of extremely subtle adjustments to the Nice Web Type redesign that feel to me like they’ve made a big difference. Here’s what I did. You can toggle between these before and after screenshots if you like.

Black text, rather than gray

For as long as I can remember, I’ve used an off-black color for text to decrease the contrast and make the type look a bit more smooth. For some reason, I wasn’t feeling it this time. Maybe it’s the typeface (Scala Sans), which feels more slender than others I’ve used on the web. Switching to black text really strengthened it, made it easier to read.

Green links, rather than a mix of red and gray

I wanted to bring another color into this mix. Going beyond monochromatic schemes is tough for me, so I almost always use a tool to help me find colors that look nice together. Tonight I used Adobe’s Kuler web app, and plugged in the header area rust color as my base. Then I tried a variety of colors for link text, most of which felt either too vibrant or the opposite — not bright enough to stand out in a block of black text. Ended up going with this green, which is a nice tonal match for the rust. It’s funny, I never would have paired red and green like this unless I had tried colors this tool suggested.

Oh, and I decided to make this the color for all links at the moment because it felt like an important thing to do. I guess this is an example of art direction over time. Because the layout is so spare, the complexity of multiple text colors really felt confusing.

Larger bookmark titles

Bumped up the font-size on bookmark headers. This change was so weird! Before, when titles were the same size as bookmark text (both 14px), it felt like the titles were too small. I couldn’t believe it. Like an optical illusion or something. It really felt like they were almost smaller than the bookmark descriptions. Between bumping the titles up in size (to 16px), making them green, and the next change I’ll mention (below, about margins) they seem to fit much better.

Adjusted several margins

Now there’s less room (about 3px less) between bookmark titles and descriptions, and more room above post titles (1.416em instead of 1em). I think the vertical rhythm among bookmarks feels right, and the same goes for the space above full posts. I’m not as happy (nor have I paid attention to) the space below full posts. And depending on the amount of metadata I want to add to full posts (and possibly bookmarks), these spatial relationships might change.

Added 20px more width in the gutter

Whereas before there was only 14px of space to the right of the about text, there is now ~36px. Brought the overall layout to slightly above 960, but that’s okay. We’ll flex down later responsively.

3 years ago

  • Quick rant about bookmark handling while looking over the latest iteration of the redesign.

  • 3 years ago

    Column swap

    I swapped the columns and shortened the measure. Looks better now, I think. Here’s how the composition looked before I swapped the columns:

    3 years ago

    Two column

    Started to act on my sketch, with new ideas on organizing content. We now have a two-column layout. As I said, favorites weren’t working out in the main stream. So the main column is now just posts and bookmarks. Adding the second column was easy — I chose a number from my scale and kept the overall width below 960px wide. However, I haven’t yet put a margin between the columns, and all vertical margins (in both columns) need to be addressed and adjusted.

    I spent a considerable amount of time turning the old About page text into just one paragraph, and editing so that the words sit nicely as a block of type. I’d rather not have an about page. I’ll keep it short here, and point to my personal site for more.

    Another significant change is that the masthead is much smaller than it used to be. I may continue to use the larger size (and go back to a single column layout) on individual post pages, but I’m not sure.

    3 years ago

    1 2 3 Next My name is Tim Brown. I'm designing Nice Web Type's tumblelog from scratch.