{"id":146,"date":"2006-06-15T14:33:50","date_gmt":"2006-06-15T21:33:50","guid":{"rendered":"http:\/\/www.red-sweater.com\/blog\/146\/blog-redesign"},"modified":"2006-06-15T14:41:25","modified_gmt":"2006-06-15T21:41:25","slug":"blog-redesign","status":"publish","type":"post","link":"https:\/\/redsweater.com\/blog\/146\/blog-redesign","title":{"rendered":"Blog Redesign"},"content":{"rendered":"

I’ve noticed that people are slowly discovering the new design of the blog. I meant to write a post about it when I “made it live” a week or so ago, but I have been putting it off for some reason. I think I didn’t want to waste a whole post on talking about my new design, without giving some interesting facts about how NodeBox<\/a> facilitated and inspired the design. Anyway, this is the story of how I liberated myself from Kubrick! (The default WordPress theme). In fact, my blog has been so “vanilla” in its design for the first year of its existence, that it may be inappropriate to even call this a redesign<\/em>. Short of picking a color, this is about the only design I’ve ever done for it (and apart from the banner and some minor CSS tweaks here and there, it’s still Kubrick at the core!).<\/p>\n

The Story of the Banner<\/h4>\n

I was playing with one of the NodeBox libraries called Pixie<\/a>, which is designed to make simulated “scrawled writing.”\n<\/p>\n

\n\n<\/p>\n

\nIt even includes some crazy “doodles” where it creates pseudo-random sketches of creepy little guys. I made this example wallpaper using a grid of creepy guys:\n<\/p>\n

\n\n<\/p>\n

\nFinally I played with the crazy “graph generation,” which is a feature by which a nearly illegible graph is produced based on a specified list of nodes. You can only play with stuff like this for so long before you start indulging the ego. So I plugged some blog-oriented text in:\n<\/p>\n

\n\n<\/p>\n

\nI decided to play with the little scribbled circles, add some color, and put them in a grid format with some blog-oriented text in them.\n<\/p>\n

\n\n<\/p>\n

\nPretty! Did I mention I love NodeBox? By now I was starting to theoretically consider my playful tinkerings to be the possible basis for a new blog banner. So I decided to pick a more realistic layout for a banner.\n<\/p>\n

\n\n<\/p>\n

\nThis is starting to look pretty cool. But I came to terms with a couple facts. First, the scribble look is cute but doesn’t give a clean appearance that I want to associate with my blog and business. Second, I better stick with a red color scheme unless I want to change the name of the company to AquaGreen Sweater Software.\n<\/p>\n

\nI had already toyed with plain circles as a means of giving the text in the design a little pop and stability. So I thought I’d just abandon the scribbles and use all perfect circles. The logic behind the generation is basically this:\n<\/p>\n

    \n
  1. On an NxM grid, randomly choose whether to render a circle or not.<\/li>\n
  2. If a letter is to be rendered at a given location, a circle is always rendered in a particular color (opaque red).<\/li>\n
  3. For all other circles the color is rendered as a randomly color in the red ballpark.<\/li>\n
  4. Letter locations are “nudgeable” by an array of x\/y nudge parameters.<\/li>\n<\/ol>\n

    After much tinkering, I ended up with a solution that was close enough that I did a few finishing touches by hand and called it done. But I liked the results so much that I started almost immediately thinking of doing a similar design for the Red Sweater Software home page. This time I decided to make it all work from code the way I wanted it, and am therefore able to randomly generate new banners at will. The quality of these sucks but it’s just because I scaled and converted them for easy demonstration in the blog. Not every one has to turn out perfect – with NodeBox I can just run it until I see a result I like. The balance of colors and placement has to be nice. In my script I am also able to “guarantee” a certain spot to be a circle, so I can enforce some positional balance as I desire.\n<\/p>\n

    \n
    \n
    \n
    \n<\/p>\n

    \nOne of the unexpected outcomes of all this experimentation and incremental design was that NodeBox helped me get comfortable with the idea of pink<\/em> as a fundamental design color for my site. I don’t think I ever would have thought of using pink unless I just stumbled upon it as a variation on red. I know, silly. But it’s a fantastic realization because I’ve long had a hard time designing (such as I do) with red. It’s so strong, it’s hard to use it without overpowering the reader. The pink elements in the new design, along with the drab gray background, I believe give me some leeway to get away with the bold red while sparing the reader from saturation overdose.\n<\/p>\n

    Tangentially…<\/h4>\n

    While I’m talking so much about NodeBox, I should mention some other cool tricks I’ve discovered. It can be fun to play with rendering text while adjusting some random number of the text’s vertices on the bezier path. This is pretty naive adjustment, just tweaking the location of a vertex here and there, but produces a dramatically “unique” look:\n<\/p>\n

    \n\n<\/p>\n

    \nAnd finally on a more practical level I decided to use NodeBox to design some new toolbar icons for FlexTime<\/a>.\n<\/p>\n

    \n\n<\/p>\n

    \nNow, these icons are nowhere near the quality you’d get from an excellent designer, but they’re much better than I would probably come up without NodeBox. It makes me so comfortable to have programmatic cnotrol over the rendering. A whole palette of buttons and I have source code to them! The nerd’s design tool. This simply inspires me to be more creative than I am manipulating control points with a mouse. Seeya Illustrator, wouldn’t wanna be ya!\n<\/p>\n

    \nSo yee haw and three cheers for NodeBox, right? Sort of. The bad news is that I know it well enough now to be utterly disappointed by how much more it could let me do<\/em>. The toolbox is pretty minimal, and exposes only a small fraction of even the basic path manipulation tools provided by Quartz. The documentation is also lacking and I find myself frequently discovering new tricks that are part of the code but simply not publicized. NodeBox is the beginning of something pretty amazing, and I’m excited to see where it leads. If this keeps up, I might end up influencing that direction by writing my own NodeBox libraries. It’s definitely as fun as most work gets.<\/p>\n","protected":false},"excerpt":{"rendered":"

    I’ve noticed that people are slowly discovering the new design of the blog. I meant to write a post about it when I “made it live” a week or so ago, but I have been putting it off for some reason. I think I didn’t want to waste a whole post on talking about my […]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,19,4],"tags":[],"class_list":["post-146","post","type-post","status-publish","format-standard","hentry","category-programming","category-technology","category-web"],"_links":{"self":[{"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/posts\/146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/comments?post=146"}],"version-history":[{"count":0,"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/posts\/146\/revisions"}],"wp:attachment":[{"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/media?parent=146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/categories?post=146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/tags?post=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}