Making Nice Web Type

Spacing really bothering me

Tue, 11 Jan 2011 09:26:17 -0500

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.

Image treatments

Fri, 07 Jan 2011 23:19:38 -0500

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.)

Playing with new styles for bookmarks.

Fri, 07 Jan 2011 22:14:31 -0500

Playing with new styles for bookmarks.

Quote styles, early responsive design, and plans for home

Fri, 07 Jan 2011 21:20:46 -0500

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.

More subtle design shifts

Sat, 18 Dec 2010 23:33:27 -0500

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

After:

Hurry up!

Fri, 17 Dec 2010 01:14:15 -0500

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.

Working toward navigation

Thu, 16 Dec 2010 07:16:34 -0500

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.

Rough adjustments to projects/features

Tue, 14 Dec 2010 22:52:00 -0500

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.

Post timestamp + permalink idea. See it live here.

Sun, 12 Dec 2010 15:07:07 -0500

Post timestamp + permalink idea. See it live here.

Pilcrow permalink

Sun, 12 Dec 2010 13:24:00 -0500

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.

Notes & bookmarks header

Sun, 12 Dec 2010 11:55:06 -0500

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.

Starting to feel right

Sun, 12 Dec 2010 00:09:58 -0500

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.

Quick rant about bookmark handling while looking over the latest...

Thu, 02 Dec 2010 16:01:29 -0500

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

Column swap

Tue, 30 Nov 2010 22:58:00 -0500

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

Two column

Fri, 26 Nov 2010 10:26:44 -0500

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.

Photo

Mon, 22 Nov 2010 10:56:15 -0500

Several adjustments

Mon, 22 Nov 2010 00:04:16 -0500

Favorites are out. There were too many. And I didn’t want them in the main RSS feed. I’ll work them in later somehow, because I really like showcasing them. Bookmarks are Masonry’d. I like how it’s going so far, but the measurement and details still need a lot of attention. Nice Web Type’s tumblelog now powers the live RSS feed to which hundreds of folks subscribe. Next time I write a post, it’ll be on Tumblr … whether or not the redesign is finished. Feels like a loose and confusing situation right now, but it’ll all work out later. Finally, I had some new ideas about how to organize content on the site, and the difference between scanning the homepage and reading full posts. I’ll share my sketch later.

Infinite scroll + Masonry not playing nicely. Dang.

Fri, 22 Oct 2010 22:07:54 -0400

Infinite scroll + Masonry not playing nicely. Dang.

Applied Masonry, updated Tumblr

Sat, 25 Sep 2010 04:49:31 -0400

Quick post tonight, because I’m really tired. One of those nights when you work because you can’t sleep. (Or can’t sleep because your brain wants to work.) These kinds of nights are great. The tomorrow mornings are less great. Anyway, good stuff going on here.

Now using Masonry!

I used David DeSandro’s jQuery Masonry to get Twitter favorites (one third the column width) and bookmarks (two thirds the column width) to pack together nicely. See the before and after. And in fact, after reading all about Masonry on David’s site I was prepared to bring the code over and set things up … until I realized ~~it comes with the HTML5 Boilerplate that I’m already using! Thanks Paul Irish!~~ Oops, my mistake. Masonry does not come with Boilerplate by default. I guess adding it was so easy, I forgot I did that! So all I had to do was paste in this chunk of code to get things working:

$(window).load(function(){
	$('#posts').masonry({
		itemSelector: '.f, .b, .t'
	});
});

For the record, I am increasingly less of a whiz with JavaScript, even though jQuery makes it dead simple. I just don’t use behavioral logic or set up sites from scratch enough to be fluent. For me to use Masonry without reacquainting myself with JavaScript for hours is a testament to the hard work that both David and Paul put into the Masonry and HTML5 Boilerplate instructional materials. David’s Masonry documentation and Paul’s intro to Boilerplate screencast (scroll down) are invaluable.

So I set that up.

This is a longer post than I wanted to write. I am going to pay for this in the morning. Maybe I should start brewing the coffee now, so it’s ready when I wake up. No, that’s a horrible idea. You see, this is what happens when you work too late.

Now applied to Tumblr!

Yep, that’s right. I moved from this very basic, static design/HTML/CSS sketch (view source) to this HTML5 Boilerplated, Masonry’d version (also static), and now to Nice Web Type’s live Tumblr stream. I had to adjust my markup a bit (and because of that, my CSS and snippet of jQuery) in order to get my design idea working with Tumblr’s theme logic. Basically, bookmarks and Twitter favorites look the same to Tumblr. Differentiating them is tricky, because only the favorites are identifiable (via a tag as class). So in my CSS, I rearranged things to style bookmarks and favorites the same (like bookmarks), followed by some more specific rules to make the favorites look like favorites.

Ask me about stuff

One more thing. I turned on Tumblr’s “ask me a question” feature. So please, ask me anything. No question too big or small. In case it’s not evident from the work itself (ha), I am seriously just a dude who knows a little HTML and is learning about HTML5, Tumblr, and typography. Critique welcome, too.

Art direction in 4D

Mon, 20 Sep 2010 07:15:18 -0400

So I began taking my own advice, the steps I had laid out in my previous post. I looked at designed things I admire. I looked at nature. But the thing is, I do those things all the time. This design is taking shape intuitively, based on those things, without my needing to meddle. There will be plenty of opportunities for art direction. Over time.

When I begin to space things subtly, and introduce new parts of the interface like timestamps and a navigation that helps things feel organized, those things will present opportunities to design — just as needing to choose typefaces for this layout’s rough idea has already given me an opportunity to design.

Why is steering a design with some kind of deep inspiration, intention, or meaning better or worse than letting making intuitive decisions as one goes?

Reliable

Shifting gears a bit, I wanted to revisit the adjective “reliable,” which I had listed in my Emotions post as something to shoot for, and noted last post as something I thought was key. I’m there. Reliable is on its way to being part of this design. Look at the basic things I’ve done so far with the typesetting and touch of color.

The all-caps header and horizontal are extremely stable forms, and the way they’re placed anchors the rest of the design. Between those decisions and the autumnal, resolute colors here, I may need to be careful. I don’t want it to feel stodgy. But then, consider Nice Web Type content. It’s a constant flow of very new stuff, and fresh discoveries of old techniques. Perhaps the design decisions need to be responsible because the content is so energetic.

Just had a flashback to my childhood. My grandpa was visiting, and I went with him to the trunk of his car because he had a surprise for me. It was a Green Machine. It was awesome. And next to it, in the trunk, was an old brown briefcase full of tools. My grandpa could make, or fix, anything. He knew how things worked or could figure them out. That undertone of reliability made each gift and each experience I had with him happier, because we could not fail. At those times, I was excited about whatever thing it was that we were doing. But I still have that briefcase.

Yes, “reliable” is a good emotion to shoot for with Nice Web Type. How overt I need to be about references to old briefcases, or this one in particular, probably depends on how much I want to confuse my readership.