Sketching
Folks, I actually made some sketches! First I drew in my notebook and took a picture of that with my phone, but it was all blurry. So I redrew my sketch using the Adobe Ideas app on my wife’s iPad (really fun to use).
On the left here is what I imagine the desktop layout to be. This is what I had sketched in my notebook. Then as I was labeling the areas on the iPad, I figured I’d plan for an iPhone layout as well. This idea of planning both layouts now probably dawned on me for two reasons:
- I wanted to make the labels work harder, and I thought it would look cool in this sketch … something about the color coordination.
- I’ve been loving Ethan Marcotte’s Responsive Web Design ideas, so that’s fresh in my mind. (Before that, I was loving his Fluid Grids/Images ideas — you can see some of this if you resize webfontspecimen.com.) Ethan really does an awesome job of making this tricky layout stuff approachable.
Anyway, to the sketch:
My basic thinking here is to bring Notes, bookmarks, and Twitter favorites into a single chronological stream. Because Twitter favorites usually outnumber the other kinds of posts considerably, and because of their brevity, I thought those could be made smaller. Perhaps laid out with that fancy Masonry stuff from David DeSandro (who has an unbelievable portfolio of stuff to his credit, by the way).
Boxes
I’m not sure if I’ll box the favorites and bookmarks as my sketch here has them boxed. I tend to box things a lot, and with this redesign I’d like to instead think critically about what the design calls for before bringing any elements in. The only things Twitter favorites *need* are the tweet text, attribution, and a timestamp. And maybe – maybe – some indication that they are favorites of mine and not just some random tweets.
So right. Critical thinking like that before I make boxes. But boxes are okay in the sketches.
Navigation
Up top, you’ll see that the nav I’m considering is only three items. Contrast this with Nice Web Type’s current six-item nav. This new one will be Home (probably labeled “Nice Web Type”), Projects, and About. No more notes or favorites, because they’re here — the homepage (this tumblelog) is the spot for them. No more gear, because that was lame. If I make desktops or T-shirts or whatever, I’ll just point to them with a note. And Fonts, which currently houses my “Nice Web Type likes…” examples, will be called Projects and have even more stuff in it (Web Font Specimen, for one thing, plus some good stuff that’s in the pipeline).
Early plans for responsive design
This content will adapt to more narrow layouts in perhaps the way I’ve sketched on the right. I’m not sure. I’ll have to see how it feels on some smaller devices. Likewise, I’ll have to see how the (pretty much) single-column desktop browser layout I’m planning behaves in very large spaces like widescreen monitors. I want to keep readers focused on the content, but I don’t want the site to feel awkwardly empty.
Next up
I think the next step is to actually begin getting these pieces of data to flow into a Tumblelog. I tried doing this months ago, with a basic Tumblr theme, and ran into some trouble with Twitter favorites looking like they were my own tweets. We’ll see how it goes. So the next post or two will probably be more hands-on.
